@dybo-ai/design 1.0.1

package/tokens.cjs

@@ -0,0 +1,31 @@
+// DYBO design tokens (CommonJS mirror of tokens.mjs).
+const color = {
+  brand: { logo: "#1d335c", blue: "#5878a7", darkOrb: "#141927", cultured: "#f3f6fa", gainsboro: "#dbdfe5" },
+  text: { primary: "#0a1323", secondary: "#f4f4f6", muted: "#545f74", gray: "#868686" },
+  neutral: { black: "#000000", white: "#ffffff", grayishBlue50: "#f4f4f6", grayishBlue300: "#c2c7cf", midnightSky300: "#e6e7f7", midnightSky700: "#48495d" },
+  surface: { page: "#e6eaf0", card: "rgba(240,241,244,0.70)", cardSolid: "rgba(240,241,244,0.90)", input: "rgba(244,244,246,0.70)" },
+  line: { stroke: "#ffffff" },
+  semantic: {
+    success: { solid: "#20a156", bright: "#28ca6b", bg: "#eafbf1" },
+    warning: { solid: "#f16c24", bg: "#ffe5d8" },
+    danger: { solid: "#a21a17", bg: "#fffbfb" },
+  },
+  status: {
+    resolved: { fg: "#0399ae", bg: "#d3f7fc" },
+    highPriority: { fg: "#682a5d", bg: "#eee0ec" },
+    mediumPriority: { fg: "#f16c24", bg: "#ffe5d8" },
+    brand: { fg: "#0a1323", bg: "#d0d3fe" },
+  },
+};
+const font = { family: "Urbanist, sans-serif", weight: { regular: 400, medium: 500, semibold: 600, bold: 700 } };
+const fontSize = { xs: 12, sm: 14, md: 16, lg: 18, xl: 24 };
+const space = { 0: 0, 50: 4, 100: 8, 150: 12, 200: 16, 250: 20, 400: 32 };
+const radius = { small: 12, alt: 16, medium: 20, full: 999 };
+const opacity = { light: 0.16, medium: 0.32, intense: 0.64 };
+const shadow = {
+  card: "0 8px 24px rgba(10,19,35,0.10), 0 2px 8px rgba(170,180,192,0.35)",
+  drop: "0 4px 4px rgba(10,19,35,0.10)",
+};
+const effect = { glassBlur: 4 };
+const tokens = { color, font, fontSize, space, radius, opacity, shadow, effect };
+module.exports = { tokens, color, font, fontSize, space, radius, opacity, shadow, effect, default: tokens };

package/tokens.json

@@ -0,0 +1,132 @@
+{
+  "$meta": {
+    "name": "DYBO Design System",
+    "source": "Figma — DYBO (file ZHtkvTEeTYlNVbSncLyI1a)",
+    "extractedFrom": "Operator screen + Local Components page (buttons, inputs, alert, tags)",
+    "extractedOn": "2026-07-23",
+    "status": "Complete for light theme. Dark theme (a 'Theme Switch' + Midnight Sky scale exist) not yet fully captured — see docs/design-system.md 'Gaps'.",
+    "notes": "Values are real Figma variables with original names retained. Figma uses parallel naming for spacing/radius (t-shirt + numeric); normalized values below are authoritative. NOTE: Figma's 'Feedback Colors/Error' is an orange (#cc6600); the true red danger color is 'Brand/Danger/700' (#a21a17). Recommended semantic mapping is under color.semantic.",
+    "style": "Glassmorphism — translucent surfaces, backdrop blur, soft blue-gray shadows"
+  },
+
+  "color": {
+    "brand": {
+      "logo":        { "value": "#1d335c", "figmaName": "Brand Colors/Logo", "desc": "Deepest brand navy — logo, key emphasis" },
+      "blueYonder":  { "value": "#5878a7", "figmaName": "Brand Colors/Blue Yonder", "desc": "Primary blue accent" },
+      "darkOrb":     { "value": "#141927", "figmaName": "Brand Colors/Dark Orb", "desc": "Near-black brand shade" },
+      "cultured":    { "value": "#f3f6fa", "figmaName": "Brand Colors/Cultured", "desc": "Lightest brand tint" },
+      "gainsboro":   { "value": "#dbdfe5", "figmaName": "Brand Colors/Gainsboro", "desc": "Light neutral brand tint" }
+    },
+    "text": {
+      "primary":   { "value": "#0a1323", "figmaName": "Primary Color / Title / Brand - DYBO", "desc": "Primary text & headings (navy near-black)" },
+      "secondary": { "value": "#f4f4f6", "figmaName": "Secondary Color", "desc": "Text/fill on dark surfaces" },
+      "muted":     { "value": "#545f74", "figmaName": "Side bar Menu Unselected options", "desc": "Muted/secondary UI text" },
+      "gray":      { "value": "#868686", "figmaName": "Brand/Primary/500", "desc": "Neutral gray text" }
+    },
+    "neutral": {
+      "black":          { "value": "#000000", "figmaName": "Neutral Colors/Black" },
+      "white":          { "value": "#ffffff", "figmaName": "Neutral Colors/White" },
+      "grayishBlue50":  { "value": "#f4f4f6", "figmaName": "Grayish Blue/50" },
+      "grayishBlue300": { "value": "#c2c7cf", "figmaName": "Grayish Blue/300", "desc": "Borders, dividers, disabled states" },
+      "midnightSky300": { "value": "#e6e7f7", "figmaName": "Midnight Sky/300", "desc": "Light lavender-gray surface" },
+      "midnightSky700": { "value": "#48495d", "figmaName": "Midnight Sky/700", "desc": "Dark UI text/surface" }
+    },
+    "surface": {
+      "page":      { "value": "#e6eaf0", "figmaName": "Page Background", "desc": "App background" },
+      "card":      { "value": "#f0f1f4b2", "rgba": "rgba(240,241,244,0.70)", "figmaName": "Card Background", "desc": "Glass card (default)" },
+      "cardSolid": { "value": "#f0f1f4e5", "rgba": "rgba(240,241,244,0.90)", "figmaName": "Card BG With Opacity", "desc": "Denser glass card" },
+      "input":     { "value": "#f4f4f6b2", "rgba": "rgba(244,244,246,0.70)", "figmaName": "Input Field Background", "desc": "Input field fill (glass)" }
+    },
+    "line": {
+      "stroke": { "value": "#ffffff", "figmaName": "Stroke / Side bar Menu Strokes and Details", "desc": "Light glass edge stroke (1px)" }
+    },
+    "shadow": {
+      "effect":  { "value": "#0a13231a", "rgba": "rgba(10,19,35,0.10)", "figmaName": "Shadow Effect", "desc": "Key shadow color (navy 10%)" },
+      "ambient": { "value": "#aab4c0ba", "rgba": "rgba(170,180,192,0.73)", "figmaName": "Shadow Color", "desc": "Ambient blue-gray shadow" }
+    },
+
+    "semantic": {
+      "$note": "Recommended mapping for new apps. Solids are the strongest accessible values found; bg = tint for banners/badges.",
+      "success":     { "solid": "#20a156", "bright": "#28ca6b", "bg": "#eafbf1", "figmaName": "Brand/Success/700 · Cool Green/500 · Cool Green/50" },
+      "warning":     { "solid": "#f16c24", "alt": "#cc6600", "bg": "#ffe5d8", "figmaName": "Medium Priority · Feedback Colors/Error · Medium Priority Background" },
+      "danger":      { "solid": "#a21a17", "bg": "#fffbfb", "figmaName": "Brand/Danger/700 · Bright Red/50" },
+      "feedback": {
+        "successText":    { "value": "#91eabe", "figmaName": "Feedback Colors/Success Text" },
+        "successBg":      { "value": "#d7f0e4", "figmaName": "Feedback Colors/Success Background" },
+        "errorOrange":    { "value": "#cc6600", "figmaName": "Feedback Colors/Error (note: orange, not red)" },
+        "errorOrangeBg":  { "value": "#fff2e5", "figmaName": "Feedback Colors/Error Background" }
+      }
+    },
+
+    "status": {
+      "$note": "DYBO domain status/priority colors (foreground + background pairs), from the Tags component.",
+      "resolved":       { "fg": "#0399ae", "bg": "#d3f7fc", "figmaName": "Resolved · Resolved Background" },
+      "highPriority":   { "fg": "#682a5d", "bg": "#eee0ec", "figmaName": "High Priority · High Priority Background" },
+      "mediumPriority": { "fg": "#f16c24", "bg": "#ffe5d8", "figmaName": "Medium Priority · Medium Priority Background" },
+      "brand":          { "fg": "#0a1323", "bg": "#d0d3fe", "figmaName": "Brand - DYBO · DYBO Brand Background" }
+    }
+  },
+
+  "font": {
+    "family": { "base": "Urbanist, sans-serif" },
+    "weight": { "regular": 400, "medium": 500, "semibold": 600, "bold": 700 }
+  },
+
+  "typography": {
+    "mediumTitle":       { "family": "Urbanist", "weight": 400, "size": 24, "lineHeight": 1.35, "letterSpacing": 1, "figmaName": "Medium Title" },
+    "subtitle":          { "family": "Urbanist", "weight": 400, "size": 18, "lineHeight": 1.35, "letterSpacing": 1, "figmaName": "Subtitle" },
+    "bodyText":          { "family": "Urbanist", "weight": 500, "size": 16, "lineHeight": 1.5,  "letterSpacing": 0, "figmaName": "Body Text" },
+    "link":              { "family": "Urbanist", "weight": 500, "size": 16, "lineHeight": 1.5,  "letterSpacing": 1, "figmaName": "Link" },
+    "smallBodyText":     { "family": "Urbanist", "weight": 500, "size": 14, "lineHeight": 1.15, "letterSpacing": 0, "figmaName": "Small Body Text" },
+    "smallLink":         { "family": "Urbanist", "weight": 700, "size": 14, "lineHeight": 1.5,  "letterSpacing": 0, "figmaName": "Small Link Stylized" },
+    "headingH6Semibold": { "family": "Urbanist", "weight": 600, "size": 14, "lineHeight": 1.5,  "letterSpacing": 1, "figmaName": "Urbanist/Heading/H6/Semibold" },
+    "headingH6Regular":  { "family": "Urbanist", "weight": 400, "size": 14, "lineHeight": 1.5,  "letterSpacing": 1, "figmaName": "Urbanist/Heading/H6/Regular" },
+    "placeholder":       { "family": "Urbanist", "weight": 400, "size": 14, "lineHeight": 1.7,  "letterSpacing": 1, "figmaName": "Placeholder" },
+    "tinySemibold":      { "family": "Urbanist", "weight": 600, "size": 12, "lineHeight": 1.5,  "letterSpacing": 1, "figmaName": "Urbanist/Body/Tiny/Semibold" },
+    "uppercase":         { "family": "Urbanist", "weight": 500, "size": 12, "lineHeight": 1.35, "letterSpacing": 1, "textTransform": "uppercase", "figmaName": "Uppercase Text" }
+  },
+
+  "space": {
+    "000": { "value": 0,  "figmaName": "spacing-0" },
+    "050": { "value": 4,  "figmaName": "Spacing/Quarck · spacing-050" },
+    "100": { "value": 8,  "figmaName": "Spacing/Nano · spacing-100" },
+    "150": { "value": 12, "figmaName": "Spacing/4XS · spacing-150" },
+    "200": { "value": 16, "figmaName": "Spacing/XXXS · spacing-200" },
+    "250": { "value": 20, "figmaName": "Spacing/XXS" },
+    "400": { "value": 32, "figmaName": "Spacing/XS" }
+  },
+
+  "radius": {
+    "small":  { "value": 12,  "figmaName": "Appearance/Radius/Small" },
+    "alt":    { "value": 16,  "figmaName": "radius-200" },
+    "medium": { "value": 20,  "figmaName": "Appearance/Radius/Medium", "desc": "Default card radius" },
+    "full":   { "value": 999, "figmaName": "Appearance/Radius/Full · radius-rounded (1000)", "desc": "Pills / circular" }
+  },
+
+  "opacity": {
+    "light":   { "value": 0.16, "figmaName": "Appearance/Opacity Level/Light" },
+    "medium":  { "value": 0.32, "figmaName": "Appearance/Opacity Level/Medium" },
+    "intense": { "value": 0.64, "figmaName": "Appearance/Opacity Level/Intense" }
+  },
+
+  "border": {
+    "sm": { "value": 1, "figmaName": "border-sm" }
+  },
+
+  "effect": {
+    "glassBlur":  { "value": 4, "figmaName": "Glass", "desc": "backdrop-filter blur radius (px)" },
+    "dropShadow": { "value": "0 4px 4px rgba(10,19,35,0.10)", "figmaName": "Drop shadow", "desc": "offset (0,4), radius 4, color Shadow Effect" }
+  },
+
+  "component": {
+    "button": {
+      "primary":   { "bg": "#0a1323", "text": "#ffffff", "font": "link (Urbanist 500 / 16 / ls 1)", "radius": 12, "paddingY": 12, "paddingX": 32, "figmaName": "Primary Button" },
+      "secondary": { "bg": "#f4f4f6", "text": "#0a1323", "font": "link (Urbanist 500 / 16 / ls 1)", "radius": 12, "paddingY": 12, "paddingX": 32, "figmaName": "Secondary Button" }
+    },
+    "input": {
+      "bg": "rgba(244,244,246,0.70)", "border": "1px solid #ffffff", "radius": 12,
+      "shadow": "0 4px 4px rgba(10,19,35,0.10)", "text": "#0a1323",
+      "placeholder": "placeholder (Urbanist 400 / 14 / ls 1, #545f74)", "figmaName": "Input Field"
+    }
+  }
+}

package/tokens.mjs

@@ -0,0 +1,40 @@
+// DYBO design tokens — flat, resolved values for programmatic use (JS/TS).
+// Source of truth: tokens.json. Keep in sync when tokens.json changes.
+export const color = {
+  brand: { logo: "#1d335c", blue: "#5878a7", darkOrb: "#141927", cultured: "#f3f6fa", gainsboro: "#dbdfe5" },
+  text: { primary: "#0a1323", secondary: "#f4f4f6", muted: "#545f74", gray: "#868686" },
+  neutral: { black: "#000000", white: "#ffffff", grayishBlue50: "#f4f4f6", grayishBlue300: "#c2c7cf", midnightSky300: "#e6e7f7", midnightSky700: "#48495d" },
+  surface: { page: "#e6eaf0", card: "rgba(240,241,244,0.70)", cardSolid: "rgba(240,241,244,0.90)", input: "rgba(244,244,246,0.70)" },
+  line: { stroke: "#ffffff" },
+  semantic: {
+    success: { solid: "#20a156", bright: "#28ca6b", bg: "#eafbf1" },
+    warning: { solid: "#f16c24", bg: "#ffe5d8" },
+    danger: { solid: "#a21a17", bg: "#fffbfb" },
+  },
+  status: {
+    resolved: { fg: "#0399ae", bg: "#d3f7fc" },
+    highPriority: { fg: "#682a5d", bg: "#eee0ec" },
+    mediumPriority: { fg: "#f16c24", bg: "#ffe5d8" },
+    brand: { fg: "#0a1323", bg: "#d0d3fe" },
+  },
+};
+
+export const font = { family: "Urbanist, sans-serif", weight: { regular: 400, medium: 500, semibold: 600, bold: 700 } };
+
+export const fontSize = { xs: 12, sm: 14, md: 16, lg: 18, xl: 24 };
+
+export const space = { 0: 0, 50: 4, 100: 8, 150: 12, 200: 16, 250: 20, 400: 32 };
+
+export const radius = { small: 12, alt: 16, medium: 20, full: 999 };
+
+export const opacity = { light: 0.16, medium: 0.32, intense: 0.64 };
+
+export const shadow = {
+  card: "0 8px 24px rgba(10,19,35,0.10), 0 2px 8px rgba(170,180,192,0.35)",
+  drop: "0 4px 4px rgba(10,19,35,0.10)",
+};
+
+export const effect = { glassBlur: 4 };
+
+export const tokens = { color, font, fontSize, space, radius, opacity, shadow, effect };
+export default tokens;