{ "$schema": "talaria-tokens/v2", "$meta": { "name": "Talaria Design System", "version": "2.1.0", "date": "2026-10-11", "owner": "Heath Dunlop", "notes": "Primitive ramps feed semantic tokens. Components must only read semantic/tone tokens. Contrast = WCAG 2.x ratio of the token on the named background.", "fonts": { "sans": "Inter", "mono": "JetBrains Mono" } }, "primitive": { "color": { "neutral": { "0": "#FFFFFF", "50": "#FAFAFA", "100": "#F4F4F4", "150": "#EDEDED", "200": "#E5E5E5", "300": "#D4D4D4", "400": "#A3A3A3", "450": "#8A8A8A", "500": "#737373", "550": "#6B6B6B", "600": "#525252", "700": "#404040", "750": "#333333", "800": "#262626", "850": "#1F1F1F", "875": "#1C1C1C", "900": "#171717", "925": "#111111", "950": "#0A0A0A", "1000": "#000000" }, "blue": { "50": "#EFF6FF", "100": "#DDEBFF", "200": "#BCD7FF", "300": "#8DBBFF", "400": "#4D9BFF", "500": "#1F82FA", "600": "#0070F3", "700": "#0062D6", "800": "#0052B4", "900": "#0B3A7A", "950": "#0A1A33" }, "red": { "50": "#FFF2F2", "100": "#FFE3E3", "200": "#FFC9CA", "300": "#FFA3A5", "400": "#FF7B7E", "500": "#E5484D", "600": "#D13438", "700": "#C42B30", "800": "#9A1F24", "900": "#5C1518", "950": "#2A0F11" }, "amber": { "50": "#FFF8EB", "100": "#FFEFCC", "200": "#FFDD99", "300": "#FFC95C", "400": "#F7B541", "500": "#F5A623", "600": "#D98B0B", "700": "#9A5B00", "800": "#774500", "900": "#4A2C00", "950": "#241703" }, "green": { "50": "#EDFCF4", "100": "#D3F6E3", "200": "#A6ECC8", "300": "#6FDDA7", "400": "#3DD68C", "500": "#2BB673", "600": "#1E9A5E", "700": "#157A4A", "800": "#0F5C38", "900": "#0B3B25", "950": "#061F14" }, "magenta": { "50": "#FFF0F8", "100": "#FDE0EF", "200": "#F9C2E0", "300": "#F39ACB", "400": "#F472B6", "500": "#DB3E95", "600": "#C0267A", "700": "#A01F67", "800": "#7A184F", "900": "#4A0F31", "950": "#26081A" }, "iris": { "50": "#F4F2FF", "100": "#EAE6FF", "200": "#D5CCFF", "300": "#B7A8FF", "400": "#9A86FF", "500": "#7C5CFF", "600": "#6A45F0", "700": "#5A34D6", "800": "#4527A8", "900": "#2C1B6E", "950": "#160F38" }, "teal": { "50": "#EDFCF9", "100": "#CFF7EF", "200": "#9FEEDF", "300": "#5FDDC8", "400": "#2DD4BF", "500": "#14B8A6", "600": "#0D9488", "700": "#0F766E", "800": "#115E59", "900": "#0B3F3B", "950": "#05211F" }, "plum": { "50": "#FAF3FF", "100": "#F3E4FF", "200": "#E6C8FF", "300": "#D3A1FF", "400": "#C17BFF", "500": "#A855F7", "600": "#9333EA", "700": "#7E22CE", "800": "#5E1A99", "900": "#3B1163", "950": "#1E0933" } } }, "semantic": { "color": { "light": { "bg.canvas": { "value": "#FAFAFA", "description": "App background behind everything (scaffold).", "ref": "neutral.50" }, "bg.sidebar": { "value": "#FAFAFA", "description": "Sidebar and top bar.", "ref": "neutral.50" }, "bg.surface": { "value": "#FFFFFF", "description": "Cards, tables, panels.", "ref": "neutral.0" }, "bg.raised": { "value": "#FFFFFF", "description": "Menus, popovers, dialogs, drawers (pair with elevation).", "ref": "neutral.0" }, "bg.muted": { "value": "#F4F4F4", "description": "Input fill, code, inline chips, skeleton base.", "ref": "neutral.100" }, "bg.emphasis": { "value": "#EDEDED", "description": "Selected neutral row, kbd, strong chip.", "ref": "neutral.150" }, "bg.inverse": { "value": "#171717", "description": "Tooltip and toast surface.", "ref": "neutral.900" }, "border.default": { "value": "#E5E5E5", "description": "Dividers, card and input borders.", "ref": "neutral.200" }, "border.strong": { "value": "#D4D4D4", "description": "Secondary button border, hovered input border.", "ref": "neutral.300" }, "border.subtle": { "value": "#EDEDED", "description": "Row separators inside cards.", "ref": "neutral.150" }, "fg.default": { "value": "#171717", "description": "Primary text and icons.", "ref": "neutral.900", "contrast": { "canvas": 17.18, "surface": 17.93, "muted": 16.3, "raised": 17.93 } }, "fg.muted": { "value": "#525252", "description": "Secondary text, labels, metadata.", "ref": "neutral.600", "contrast": { "canvas": 7.49, "surface": 7.81, "muted": 7.1, "raised": 7.81 } }, "fg.subtle": { "value": "#6B6B6B", "description": "Captions, placeholders, idle icons. AA on canvas, surface and muted.", "ref": "neutral.550", "contrast": { "canvas": 5.11, "surface": 5.33, "muted": 4.85, "raised": 5.33 } }, "fg.disabled": { "value": "#A3A3A3", "description": "Disabled text and icons (exempt from AA, kept >= 2.4:1).", "ref": "neutral.400", "contrast": { "canvas": 2.42, "surface": 2.52, "muted": 2.29, "raised": 2.52 } }, "fg.onAccent": { "value": "#FFFFFF", "description": "Text on accent, danger, fatal, AI fills.", "ref": "neutral.0", "contrast": { "accent.default": 4.55, "danger.default": 4.93, "fatal.default": 5.53, "ai.default": 5.64 } }, "fg.inverse": { "value": "#FAFAFA", "description": "Text on inverse surface (tooltips, toasts).", "ref": "neutral.50", "contrast": { "bg.inverse": 17.18 } }, "accent.default": { "value": "#0070F3", "description": "Primary fill, selected indicator. Brand blue #0070F3.", "ref": "blue.600" }, "accent.hover": { "value": "#0062D6", "description": "Primary fill on hover.", "ref": "blue.700" }, "accent.pressed": { "value": "#0052B4", "description": "Primary fill when pressed.", "ref": "blue.800" }, "accent.fg": { "value": "#0062D6", "description": "Links, accent text, selected nav text.", "ref": "blue.700", "contrast": { "canvas": 5.41, "surface": 5.65, "muted": 5.14, "raised": 5.65 } }, "accent.soft": { "value": "#EFF6FF", "description": "Selected row/nav background, info banner.", "ref": "blue.50" }, "accent.border": { "value": "#BCD7FF", "description": "Info and selected borders.", "ref": "blue.200" }, "focus.ring": { "value": "#0070F3", "description": "2px focus ring, 2px offset in bg colour.", "ref": "blue.600" }, "danger.default": { "value": "#D13438", "description": "Destructive button fill, error icons.", "ref": "red.600" }, "danger.hover": { "value": "#C42B30", "description": "Destructive fill hover.", "ref": "red.700" }, "danger.fg": { "value": "#C42B30", "description": "Error text, bad deltas, invalid field message.", "ref": "red.700", "contrast": { "canvas": 5.39, "surface": 5.62, "muted": 5.11, "raised": 5.62 } }, "danger.soft": { "value": "#FFF2F2", "description": "Error banner, error badge background.", "ref": "red.50" }, "danger.border": { "value": "#FFC9CA", "description": "Error banner and invalid input border (light uses danger.default for inputs).", "ref": "red.200" }, "warning.default": { "value": "#F5A623", "description": "Warning icon and fill. Same hue both themes.", "ref": "amber.500" }, "warning.fg": { "value": "#9A5B00", "description": "Warning text.", "ref": "amber.700", "contrast": { "canvas": 5.2, "surface": 5.43, "muted": 4.93, "raised": 5.43 } }, "warning.soft": { "value": "#FFF8EB", "description": "Warning banner and badge background.", "ref": "amber.50" }, "warning.border": { "value": "#FFDD99", "description": "Warning borders.", "ref": "amber.200" }, "warning.onFill": { "value": "#171717", "description": "Text on a solid warning fill (never white).", "ref": "neutral.900" }, "success.default": { "value": "#1E9A5E", "description": "Success icon/indicator. Never put text on it (use success.fg on success.soft).", "ref": "green.600" }, "success.fg": { "value": "#157A4A", "description": "Success text, good deltas.", "ref": "green.700", "contrast": { "canvas": 5.14, "surface": 5.36, "muted": 4.88, "raised": 5.36 } }, "success.soft": { "value": "#EDFCF4", "description": "Success banner and badge background.", "ref": "green.50" }, "success.border": { "value": "#A6ECC8", "description": "Success borders.", "ref": "green.200" }, "fatal.default": { "value": "#C0267A", "description": "Fatal: solid badge fill, chart series. Only used for fatal.", "ref": "magenta.600" }, "fatal.fg": { "value": "#A01F67", "description": "Fatal text.", "ref": "magenta.700", "contrast": { "canvas": 6.97, "surface": 7.28, "muted": 6.61, "raised": 7.28 } }, "ai.default": { "value": "#6A45F0", "description": "AI action fill and sparkle glyph.", "ref": "iris.600" }, "ai.fg": { "value": "#5A34D6", "description": "AI text, AI links.", "ref": "iris.700", "contrast": { "canvas": 6.95, "surface": 7.25, "muted": 6.59, "raised": 7.25 } }, "ai.soft": { "value": "#F4F2FF", "description": "AI panel background.", "ref": "iris.50" }, "ai.border": { "value": "#D5CCFF", "description": "AI panel border.", "ref": "iris.200" }, "ai.gradientStart": { "value": "#0070F3", "description": "AI gradient stroke start.", "ref": "blue.600" }, "ai.gradientEnd": { "value": "#7C5CFF", "description": "AI gradient stroke end.", "ref": "iris.500" }, "code.keyword": { "value": "#5A34D6", "description": "Syntax: keywords.", "ref": "iris.700", "contrast": { "canvas": 6.95, "surface": 7.25, "muted": 6.59, "raised": 7.25 } }, "code.string": { "value": "#157A4A", "description": "Syntax: strings.", "ref": "green.700", "contrast": { "canvas": 5.14, "surface": 5.36, "muted": 4.88, "raised": 5.36 } }, "code.number": { "value": "#9A5B00", "description": "Syntax: numbers.", "ref": "amber.700", "contrast": { "canvas": 5.2, "surface": 5.43, "muted": 4.93, "raised": 5.43 } }, "code.function": { "value": "#0062D6", "description": "Syntax: functions, links in markdown.", "ref": "blue.700", "contrast": { "canvas": 5.41, "surface": 5.65, "muted": 5.14, "raised": 5.65 } }, "code.type": { "value": "#0F766E", "description": "Syntax: types and classes.", "ref": "teal.700", "contrast": { "canvas": 5.24, "surface": 5.47, "muted": 4.98, "raised": 5.47 } }, "code.comment": { "value": "#6B6B6B", "description": "Syntax: comments.", "ref": "neutral.550", "contrast": { "canvas": 5.11, "surface": 5.33, "muted": 4.85, "raised": 5.33 } }, "state.hover": { "value": "rgba(23,23,23,0.05)" }, "state.pressed": { "value": "rgba(23,23,23,0.09)" }, "state.selected": { "value": "rgba(0,112,243,0.10)" }, "state.dragged": { "value": "rgba(23,23,23,0.14)" }, "scrim": { "value": "rgba(10,10,10,0.40)" }, "selection": { "value": "rgba(0,112,243,0.20)" }, "skeleton.base": { "value": "#EDEDED" }, "skeleton.highlight": { "value": "#F7F7F7" }, "scrollbar": { "value": "rgba(23,23,23,0.28)" } }, "dark": { "bg.canvas": { "value": "#0A0A0A", "description": "App background behind everything (scaffold).", "ref": "neutral.950" }, "bg.sidebar": { "value": "#0A0A0A", "description": "Sidebar and top bar.", "ref": "neutral.950" }, "bg.surface": { "value": "#111111", "description": "Cards, tables, panels.", "ref": "neutral.925" }, "bg.raised": { "value": "#171717", "description": "Menus, popovers, dialogs, drawers (pair with elevation).", "ref": "neutral.900" }, "bg.muted": { "value": "#1C1C1C", "description": "Input fill, code, inline chips, skeleton base.", "ref": "neutral.875" }, "bg.emphasis": { "value": "#262626", "description": "Selected neutral row, kbd, strong chip.", "ref": "neutral.800" }, "bg.inverse": { "value": "#FAFAFA", "description": "Tooltip and toast surface.", "ref": "neutral.50" }, "border.default": { "value": "#262626", "description": "Dividers, card and input borders.", "ref": "neutral.800" }, "border.strong": { "value": "#404040", "description": "Secondary button border, hovered input border.", "ref": "neutral.700" }, "border.subtle": { "value": "#1F1F1F", "description": "Row separators inside cards.", "ref": "neutral.850" }, "fg.default": { "value": "#FAFAFA", "description": "Primary text and icons.", "ref": "neutral.50", "contrast": { "canvas": 18.97, "surface": 18.09, "muted": 16.33, "raised": 17.18 } }, "fg.muted": { "value": "#A3A3A3", "description": "Secondary text, labels, metadata.", "ref": "neutral.400", "contrast": { "canvas": 7.85, "surface": 7.49, "muted": 6.76, "raised": 7.11 } }, "fg.subtle": { "value": "#8A8A8A", "description": "Captions, placeholders, idle icons. AA on canvas, surface and muted.", "ref": "neutral.450", "contrast": { "canvas": 5.73, "surface": 5.47, "muted": 4.94, "raised": 5.19 } }, "fg.disabled": { "value": "#525252", "description": "Disabled text and icons (exempt from AA, kept >= 2.4:1).", "ref": "neutral.600", "contrast": { "canvas": 2.53, "surface": 2.42, "muted": 2.18, "raised": 2.29 } }, "fg.onAccent": { "value": "#FFFFFF", "description": "Text on accent, danger, fatal, AI fills.", "ref": "neutral.0", "contrast": { "accent.default": 4.55, "danger.default": 4.93, "fatal.default": 5.53, "ai.default": 5.64 } }, "fg.inverse": { "value": "#171717", "description": "Text on inverse surface (tooltips, toasts).", "ref": "neutral.900", "contrast": { "bg.inverse": 17.18 } }, "accent.default": { "value": "#0070F3", "description": "Primary fill, selected indicator. Brand blue #0070F3.", "ref": "blue.600" }, "accent.hover": { "value": "#0062D6", "description": "Primary fill on hover.", "ref": "blue.700" }, "accent.pressed": { "value": "#0052B4", "description": "Primary fill when pressed.", "ref": "blue.800" }, "accent.fg": { "value": "#4D9BFF", "description": "Links, accent text, selected nav text.", "ref": "blue.400", "contrast": { "canvas": 7.02, "surface": 6.7, "muted": 6.04, "raised": 6.36 } }, "accent.soft": { "value": "#0A1A33", "description": "Selected row/nav background, info banner.", "ref": "blue.950" }, "accent.border": { "value": "#0B3A7A", "description": "Info and selected borders.", "ref": "blue.900" }, "focus.ring": { "value": "#4D9BFF", "description": "2px focus ring, 2px offset in bg colour.", "ref": "blue.400" }, "danger.default": { "value": "#D13438", "description": "Destructive button fill, error icons.", "ref": "red.600" }, "danger.hover": { "value": "#C42B30", "description": "Destructive fill hover.", "ref": "red.700" }, "danger.fg": { "value": "#FF7B7E", "description": "Error text, bad deltas, invalid field message.", "ref": "red.400", "contrast": { "canvas": 7.91, "surface": 7.54, "muted": 6.81, "raised": 7.16 } }, "danger.soft": { "value": "#2A0F11", "description": "Error banner, error badge background.", "ref": "red.950" }, "danger.border": { "value": "#5C1518", "description": "Error banner and invalid input border (light uses danger.default for inputs).", "ref": "red.900" }, "warning.default": { "value": "#F5A623", "description": "Warning icon and fill. Same hue both themes.", "ref": "amber.500" }, "warning.fg": { "value": "#F7B541", "description": "Warning text.", "ref": "amber.400", "contrast": { "canvas": 10.97, "surface": 10.47, "muted": 9.45, "raised": 9.94 } }, "warning.soft": { "value": "#241703", "description": "Warning banner and badge background.", "ref": "amber.950" }, "warning.border": { "value": "#4A2C00", "description": "Warning borders.", "ref": "amber.900" }, "warning.onFill": { "value": "#171717", "description": "Text on a solid warning fill (never white).", "ref": "neutral.900" }, "success.default": { "value": "#3DD68C", "description": "Success icon/indicator. Never put text on it (use success.fg on success.soft).", "ref": "green.400" }, "success.fg": { "value": "#3DD68C", "description": "Success text, good deltas.", "ref": "green.400", "contrast": { "canvas": 10.55, "surface": 10.07, "muted": 9.09, "raised": 9.56 } }, "success.soft": { "value": "#061F14", "description": "Success banner and badge background.", "ref": "green.950" }, "success.border": { "value": "#0B3B25", "description": "Success borders.", "ref": "green.900" }, "fatal.default": { "value": "#C0267A", "description": "Fatal: solid badge fill, chart series. Only used for fatal.", "ref": "magenta.600" }, "fatal.fg": { "value": "#F472B6", "description": "Fatal text.", "ref": "magenta.400", "contrast": { "canvas": 7.48, "surface": 7.13, "muted": 6.43, "raised": 6.77 } }, "ai.default": { "value": "#6A45F0", "description": "AI action fill and sparkle glyph.", "ref": "iris.600" }, "ai.fg": { "value": "#B7A8FF", "description": "AI text, AI links.", "ref": "iris.300", "contrast": { "canvas": 9.48, "surface": 9.04, "muted": 8.16, "raised": 8.59 } }, "ai.soft": { "value": "#160F38", "description": "AI panel background.", "ref": "iris.950" }, "ai.border": { "value": "#2C1B6E", "description": "AI panel border.", "ref": "iris.900" }, "ai.gradientStart": { "value": "#4D9BFF", "description": "AI gradient stroke start.", "ref": "blue.400" }, "ai.gradientEnd": { "value": "#9A86FF", "description": "AI gradient stroke end.", "ref": "iris.400" }, "code.keyword": { "value": "#B7A8FF", "description": "Syntax: keywords.", "ref": "iris.300", "contrast": { "canvas": 9.48, "surface": 9.04, "muted": 8.16, "raised": 8.59 } }, "code.string": { "value": "#6FDDA7", "description": "Syntax: strings.", "ref": "green.300", "contrast": { "canvas": 11.86, "surface": 11.31, "muted": 10.21, "raised": 10.74 } }, "code.number": { "value": "#FFC95C", "description": "Syntax: numbers.", "ref": "amber.300", "contrast": { "canvas": 12.97, "surface": 12.37, "muted": 11.17, "raised": 11.75 } }, "code.function": { "value": "#8DBBFF", "description": "Syntax: functions, links in markdown.", "ref": "blue.300", "contrast": { "canvas": 10.07, "surface": 9.61, "muted": 8.67, "raised": 9.12 } }, "code.type": { "value": "#5FDDC8", "description": "Syntax: types and classes.", "ref": "teal.300", "contrast": { "canvas": 11.94, "surface": 11.39, "muted": 10.28, "raised": 10.81 } }, "code.comment": { "value": "#8A8A8A", "description": "Syntax: comments.", "ref": "neutral.450", "contrast": { "canvas": 5.73, "surface": 5.47, "muted": 4.94, "raised": 5.19 } }, "state.hover": { "value": "rgba(250,250,250,0.06)" }, "state.pressed": { "value": "rgba(250,250,250,0.10)" }, "state.selected": { "value": "rgba(77,155,255,0.14)" }, "state.dragged": { "value": "rgba(250,250,250,0.16)" }, "scrim": { "value": "rgba(0,0,0,0.64)" }, "selection": { "value": "rgba(77,155,255,0.28)" }, "skeleton.base": { "value": "#1C1C1C" }, "skeleton.highlight": { "value": "#262626" }, "scrollbar": { "value": "rgba(250,250,250,0.24)" } } } }, "tone": { "severity": { "trace": { "light": { "bg": "#F4F4F4", "fg": "#6B6B6B", "border": "#E5E5E5", "contrast": 4.85 }, "dark": { "bg": "#111111", "fg": "#8A8A8A", "border": "#262626", "contrast": 5.47 }, "glyph": "dot-hollow", "chart": { "light": "#A3A3A3", "dark": "#525252" } }, "debug": { "light": { "bg": "#EDEDED", "fg": "#525252", "border": "#D4D4D4", "contrast": 6.67 }, "dark": { "bg": "#1C1C1C", "fg": "#A3A3A3", "border": "#404040", "contrast": 6.76 }, "glyph": "dot", "chart": { "light": "#737373", "dark": "#8A8A8A" } }, "info": { "light": { "bg": "#EFF6FF", "fg": "#0062D6", "border": "#BCD7FF", "contrast": 5.19 }, "dark": { "bg": "#0A1A33", "fg": "#4D9BFF", "border": "#0B3A7A", "contrast": 6.16 }, "glyph": "info", "chart": { "light": "#0070F3", "dark": "#4D9BFF" } }, "warning": { "light": { "bg": "#FFF8EB", "fg": "#9A5B00", "border": "#FFDD99", "contrast": 5.14 }, "dark": { "bg": "#241703", "fg": "#F7B541", "border": "#4A2C00", "contrast": 9.71 }, "glyph": "triangle", "chart": { "light": "#F5A623", "dark": "#F5A623" } }, "error": { "light": { "bg": "#FFF2F2", "fg": "#C42B30", "border": "#FFC9CA", "contrast": 5.15 }, "dark": { "bg": "#2A0F11", "fg": "#FF7B7E", "border": "#5C1518", "contrast": 7.14 }, "glyph": "circle-x", "chart": { "light": "#E5484D", "dark": "#E5484D" } }, "fatal": { "light": { "bg": "#C0267A", "fg": "#FFFFFF", "border": "#C0267A", "contrast": 5.53 }, "dark": { "bg": "#C0267A", "fg": "#FFFFFF", "border": "#DB3E95", "contrast": 5.53 }, "glyph": "bolt", "solid": true, "chart": { "light": "#C0267A", "dark": "#F472B6" } } }, "status": { "open": { "light": { "bg": "#EFF6FF", "fg": "#0062D6", "border": "#BCD7FF", "contrast": 5.19 }, "dark": { "bg": "#0A1A33", "fg": "#4D9BFF", "border": "#0B3A7A", "contrast": 6.16 }, "glyph": "circle" }, "regressed": { "light": { "bg": "#FFF2F2", "fg": "#C42B30", "border": "#FFC9CA", "contrast": 5.15 }, "dark": { "bg": "#2A0F11", "fg": "#FF7B7E", "border": "#5C1518", "contrast": 7.14 }, "glyph": "arrow-up-circle" }, "resolved": { "light": { "bg": "#EDFCF4", "fg": "#157A4A", "border": "#A6ECC8", "contrast": 5.07 }, "dark": { "bg": "#061F14", "fg": "#3DD68C", "border": "#0B3B25", "contrast": 9.22 }, "glyph": "check-circle" }, "ignored": { "light": { "bg": "#F4F4F4", "fg": "#525252", "border": "#E5E5E5", "contrast": 7.1 }, "dark": { "bg": "#1C1C1C", "fg": "#A3A3A3", "border": "#262626", "contrast": 6.76 }, "glyph": "slash-circle" }, "healthy": { "light": { "bg": "#EDFCF4", "fg": "#157A4A", "border": "#A6ECC8", "contrast": 5.07 }, "dark": { "bg": "#061F14", "fg": "#3DD68C", "border": "#0B3B25", "contrast": 9.22 }, "glyph": "dot" }, "degraded": { "light": { "bg": "#FFF8EB", "fg": "#9A5B00", "border": "#FFDD99", "contrast": 5.14 }, "dark": { "bg": "#241703", "fg": "#F7B541", "border": "#4A2C00", "contrast": 9.71 }, "glyph": "dot" }, "down": { "light": { "bg": "#FFF2F2", "fg": "#C42B30", "border": "#FFC9CA", "contrast": 5.15 }, "dark": { "bg": "#2A0F11", "fg": "#FF7B7E", "border": "#5C1518", "contrast": 7.14 }, "glyph": "dot" }, "unknown": { "light": { "bg": "#F4F4F4", "fg": "#525252", "border": "#E5E5E5", "contrast": 7.1 }, "dark": { "bg": "#1C1C1C", "fg": "#A3A3A3", "border": "#262626", "contrast": 6.76 }, "glyph": "dot-hollow" }, "processing": { "light": { "bg": "#EFF6FF", "fg": "#0062D6", "border": "#BCD7FF", "contrast": 5.19 }, "dark": { "bg": "#0A1A33", "fg": "#4D9BFF", "border": "#0B3A7A", "contrast": 6.16 }, "glyph": "spinner" } }, "environment": { "production": { "light": { "bg": "#EDFCF9", "fg": "#0F766E", "border": "#9FEEDF", "contrast": 5.18 }, "dark": { "bg": "#05211F", "fg": "#2DD4BF", "border": "#0B3F3B", "contrast": 9.07 }, "glyph": "dot" }, "staging": { "light": { "bg": "#FAF3FF", "fg": "#7E22CE", "border": "#E6C8FF", "contrast": 6.43 }, "dark": { "bg": "#1E0933", "fg": "#D3A1FF", "border": "#3B1163", "contrast": 9.03 }, "glyph": "dot-half" }, "development": { "light": { "bg": "#F4F4F4", "fg": "#525252", "border": "#D4D4D4", "contrast": 7.1 }, "dark": { "bg": "#1C1C1C", "fg": "#A3A3A3", "border": "#404040", "contrast": 6.76 }, "glyph": "dot-hollow" }, "test": { "light": { "bg": "#FFFFFF", "fg": "#525252", "border": "#D4D4D4", "contrast": 7.81 }, "dark": { "bg": "#111111", "fg": "#A3A3A3", "border": "#404040", "contrast": 7.49 }, "glyph": "diamond", "dashed": true }, "other": { "light": { "bg": "#F4F4F4", "fg": "#525252", "border": "#E5E5E5", "contrast": 7.1 }, "dark": { "bg": "#1C1C1C", "fg": "#A3A3A3", "border": "#262626", "contrast": 6.76 }, "glyph": "dot-hollow" } }, "delta": { "good": { "light": "#157A4A", "dark": "#3DD68C", "glyph": "arrow-up|arrow-down" }, "bad": { "light": "#C42B30", "dark": "#FF7B7E" }, "neutral": { "light": "#525252", "dark": "#A3A3A3" }, "rule": "Tone comes from MetricPolarity (higherIsBetter | lowerIsBetter | neutral) x direction, never from the metric. Baseline 0 or n < minSample => show 'New' or '\u2014' in fg.muted." } }, "chart": { "categorical": { "light": [ "#0070F3", "#D46B08", "#0D9488", "#C0267A", "#A68A00", "#6A45F0", "#C2410C", "#737373" ], "dark": [ "#4D9BFF", "#FF9F43", "#2DD4BF", "#F472B6", "#E8D44D", "#9A86FF", "#FF7B54", "#A3A3A3" ], "names": [ "blue", "orange", "teal", "pink", "yellow", "violet", "vermillion", "grey" ] }, "sequential": { "light": [ "#DDEBFF", "#BCD7FF", "#8DBBFF", "#4D9BFF", "#0070F3", "#0052B4" ], "dark": [ "#0B3A7A", "#0052B4", "#0062D6", "#0070F3", "#4D9BFF", "#BCD7FF" ] }, "diverging": { "light": [ "#0062D6", "#8DBBFF", "#E5E5E5", "#FFC95C", "#D46B08" ], "dark": [ "#4D9BFF", "#0B3A7A", "#333333", "#774500", "#FF9F43" ] }, "grid": { "light": "#EDEDED", "dark": "#1F1F1F" }, "axis": { "light": "#6B6B6B", "dark": "#8A8A8A" }, "areaOpacity": 0.16 }, "typography": { "display": { "fontFamily": "Inter", "fontSize": 32, "lineHeight": 40, "fontWeight": 600, "letterSpacingEm": -0.022, "letterSpacingPx": -0.7, "usage": "Empty/404 hero, onboarding, plan price" }, "headline": { "fontFamily": "Inter", "fontSize": 24, "lineHeight": 32, "fontWeight": 600, "letterSpacingEm": -0.018, "letterSpacingPx": -0.43, "usage": "Page title (one per page)" }, "heading": { "fontFamily": "Inter", "fontSize": 18, "lineHeight": 26, "fontWeight": 600, "letterSpacingEm": -0.012, "letterSpacingPx": -0.22, "usage": "Section heading inside a page" }, "title": { "fontFamily": "Inter", "fontSize": 15, "lineHeight": 22, "fontWeight": 600, "letterSpacingEm": -0.006, "letterSpacingPx": -0.09, "usage": "Card title, dialog title, row title" }, "body": { "fontFamily": "Inter", "fontSize": 14, "lineHeight": 20, "fontWeight": 400, "letterSpacingEm": 0, "letterSpacingPx": 0, "usage": "Default UI text" }, "bodyStrong": { "fontFamily": "Inter", "fontSize": 14, "lineHeight": 20, "fontWeight": 500, "letterSpacingEm": 0, "letterSpacingPx": 0, "usage": "Emphasis, button md label, table primary cell" }, "label": { "fontFamily": "Inter", "fontSize": 13, "lineHeight": 18, "fontWeight": 500, "letterSpacingEm": 0, "letterSpacingPx": 0, "usage": "Form labels, button sm, tabs, nav items" }, "caption": { "fontFamily": "Inter", "fontSize": 12, "lineHeight": 16, "fontWeight": 400, "letterSpacingEm": 0.005, "letterSpacingPx": 0.06, "usage": "Helper text, metadata, timestamps (min size, AA colours only)" }, "captionStrong": { "fontFamily": "Inter", "fontSize": 12, "lineHeight": 16, "fontWeight": 500, "letterSpacingEm": 0.005, "letterSpacingPx": 0.06, "usage": "Badges, chip labels, table headers" }, "metric": { "fontFamily": "Inter", "fontSize": 28, "lineHeight": 32, "fontWeight": 600, "letterSpacingEm": -0.02, "letterSpacingPx": -0.56, "usage": "Stat tile value (tabular figures)", "fontFeatures": [ "tnum" ] }, "metricSm": { "fontFamily": "Inter", "fontSize": 20, "lineHeight": 28, "fontWeight": 600, "letterSpacingEm": -0.012, "letterSpacingPx": -0.24, "usage": "Inline stat value (tabular figures)", "fontFeatures": [ "tnum" ] }, "mono": { "fontFamily": "JetBrains Mono", "fontSize": 13, "lineHeight": 20, "fontWeight": 400, "letterSpacingEm": 0, "letterSpacingPx": 0, "usage": "Stack frames, IDs, code" }, "monoSm": { "fontFamily": "JetBrains Mono", "fontSize": 12, "lineHeight": 16, "fontWeight": 400, "letterSpacingEm": 0, "letterSpacingPx": 0, "usage": "Tags, env values, fingerprints, kbd" } }, "spacing": { "s0": 0, "s0_5": 2, "s1": 4, "s2": 8, "s3": 12, "s4": 16, "s5": 20, "s6": 24, "s8": 32, "s10": 40, "s12": 48, "s16": 64 }, "radius": { "xs": 4, "sm": 6, "md": 8, "lg": 12, "xl": 16, "full": 999 }, "layout": { "sidebarCollapsed": 56, "sidebarExpanded": 240, "topBar": 48, "contentNarrow": 720, "contentDefault": 1200, "contentWide": 1440, "gutterMobile": 16, "gutterTablet": 24, "gutterDesktop": 32, "railWidth": 320, "rowCompact": 36, "rowDefault": 48, "rowComfortable": 64, "controlSm": 28, "controlMd": 32, "controlLg": 40, "hitTarget": 44 }, "elevation": { "light": { "e0": "none", "e1": "0 1px 2px rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,0.03)", "e2": "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)", "e3": "0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06)", "e4": "0 24px 64px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08)" }, "dark": { "e0": "none", "e1": "0 1px 2px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.03)", "e2": "0 8px 24px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.04)", "e3": "0 16px 48px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.05)", "e4": "0 24px 72px rgba(0,0,0,0.70), inset 0 1px 0 rgba(255,255,255,0.06)" }, "use": { "e0": "Flat: cards, tables (border only)", "e1": "Hovered card, sticky header, segmented thumb", "e2": "Menus, popovers, select, tooltips", "e3": "Dialogs, drawers, command palette", "e4": "Toasts" } }, "motion": { "duration": { "instant": 0, "fast": 100, "base": 160, "moderate": 240, "slow": 320, "deliberate": 480 }, "easing": { "standard": [ 0.2, 0, 0, 1 ], "enter": [ 0.05, 0.7, 0.1, 1 ], "exit": [ 0.3, 0, 1, 1 ], "linear": [ 0, 0, 1, 1 ] }, "use": { "fast": "Hover, colour, focus ring", "base": "Press, toggle, checkbox, tab indicator", "moderate": "Menus, popovers, drawers in", "slow": "Dialogs, page/focus-trail transitions", "deliberate": "Chart draw, skeleton shimmer cycle = 1200" } }, "focus": { "width": 2, "offset": 2 }, "opacity": { "disabled": 0.48 }, "breakpoints": { "classes": { "compact": { "min": 0, "max": 599, "alias": "mobile", "m3": "Compact (<600)", "preview": 390 }, "medium": { "min": 600, "max": 899, "alias": "tablet", "m3": "Medium (600-839) + low end of Expanded", "preview": 820 }, "expanded": { "min": 900, "max": 1439, "alias": "desktop", "m3": "Expanded (840-1199) + Large (1200-1599)", "preview": 1280 }, "large": { "min": 1440, "max": null, "alias": "wide", "m3": "Large / Extra-large (>=1200 / >=1600)", "preview": 1440 } }, "thresholds": { "medium": 600, "expanded": 900, "large": 1440, "drawerFullscreenBelow": 720, "replaySplitAt": 960, "sheetMaxWidth": 640 }, "note": "Width of the app window (MediaQuery.sizeOf), not the device. Lower bound inclusive." }, "responsive": { "compact": { "columns": 4, "columnGutter": 16, "margin": 16, "nav": "bottomBar", "navWidth": 0, "topBar": 56, "bottomBar": 64, "density": "comfortable", "input": "touch", "contentWidth": "fluid", "detailRail": "collapsible", "table": "cards", "filters": "sheet", "pagination": "loadMore", "dialog": "fullscreen | bottomSheet", "drawer": "fullscreen", "toast": "bottomCentreAboveNav", "tabs": "scrollable", "headerActions": 1, "chartXTicks": 3, "chartYTicks": 3, "chartScroll": true }, "medium": { "columns": 8, "columnGutter": 16, "margin": 24, "nav": "rail", "navWidth": 72, "topBar": 56, "bottomBar": 0, "density": "comfortable", "input": "touch", "contentWidth": "fluid", "detailRail": "stacked", "table": "reducedColumns", "filters": "inlineSearch + sheet", "pagination": "loadMore", "dialog": "centered 560 | bottomSheet (pickers)", "drawer": "side 400 (>=720) | fullscreen", "toast": "bottomCentre", "tabs": "scrollable", "headerActions": 2, "chartXTicks": 5, "chartYTicks": 4, "chartScroll": false }, "expanded": { "columns": 12, "columnGutter": 24, "margin": 32, "nav": "sidebar", "navWidth": 240, "navCollapsed": 56, "topBar": 48, "bottomBar": 0, "density": "standard", "input": "pointer", "contentWidth": "standard 1200", "detailRail": "side 300", "table": "full", "filters": "inline", "pagination": "pages", "dialog": "centered 440-560", "drawer": "side 400-480", "toast": "bottomCentre", "tabs": "fixed", "headerActions": 3, "chartXTicks": 6, "chartYTicks": 5, "chartScroll": false }, "large": { "columns": 12, "columnGutter": 24, "margin": 40, "nav": "sidebar", "navWidth": 240, "navCollapsed": 56, "topBar": 48, "bottomBar": 0, "density": "standard", "input": "pointer", "contentWidth": "wide 1440", "detailRail": "side 340", "table": "full", "filters": "inline", "pagination": "pages", "dialog": "centered 440-560", "drawer": "side 480", "toast": "bottomCentre", "tabs": "fixed", "headerActions": 3, "chartXTicks": 8, "chartYTicks": 5, "chartScroll": false } }, "adaptiveType": { "compact": { "display": { "fontSize": 28, "lineHeight": 36 }, "headline": { "fontSize": 22, "lineHeight": 28 }, "heading": { "fontSize": 17, "lineHeight": 24 }, "metric": { "fontSize": 24, "lineHeight": 28 } }, "medium": { "display": { "fontSize": 30, "lineHeight": 38 }, "headline": { "fontSize": 24, "lineHeight": 32 }, "heading": { "fontSize": 18, "lineHeight": 26 }, "metric": { "fontSize": 26, "lineHeight": 32 } }, "expanded": {}, "large": { "display": { "fontSize": 36, "lineHeight": 44 } } }, "touch": { "minTarget": 48, "minTargetIOS": 44, "controlHeights": { "pointer": { "sm": 28, "md": 32, "lg": 40 }, "touch": { "sm": 36, "md": 44, "lg": 48 } }, "rowMin": { "pointer": 48, "touch": 56, "card": 72 }, "navItem": { "sidebar": 32, "rail": 56, "bottomBar": 64 }, "inputFontSize": 16, "rules": [ "Hover styles only apply under (hover: hover) and (pointer: fine). On touch, the pressed state layer (10%) is the only feedback.", "Never hide actions behind hover on touch: show an overflow button or support long-press and swipe.", "Tooltips need a long-press equivalent; icon-only buttons keep a visible label in the bottom bar and rail.", "Inputs use 16px text on touch so iOS Safari never zooms on focus (web build).", "Hit area is at least 48x48 (44x44 on iOS) even when the visual control is smaller; adjacent targets keep 8px between hit areas." ] }, "safeArea": { "rule": "Pad top app bar by the top inset, bottom bar / sheets / save bar / AI composer by the bottom inset; landscape phones also pad left/right.", "previewInsets": { "phone": { "top": 47, "bottom": 34 }, "tablet": { "top": 24, "bottom": 20 } } }, "interactions": [ { "element": "Button, icon button, nav item, row", "trigger": "hover (pointer only)", "change": "state layer 0 \u2192 5%/6%", "duration": "fast 100", "easing": "standard" }, { "element": "Button, icon button, nav item, row", "trigger": "press", "change": "state layer \u2192 9%/10%; primary fill \u2192 accent.pressed; translateY 0.5px", "duration": "fast 100 in / base 160 out", "easing": "standard" }, { "element": "Any focusable", "trigger": "keyboard focus", "change": "2px ring + 2px gap, appears instantly; never animates layout", "duration": "instant 0", "easing": "\u2014" }, { "element": "Checkbox, switch, segmented thumb, tab indicator", "trigger": "toggle / select", "change": "fill, thumb position, indicator x/width", "duration": "base 160", "easing": "standard" }, { "element": "Menu, popover, select", "trigger": "open / close", "change": "opacity 0\u21921, scale .98\u21921, y \u22124\u21920 / reverse", "duration": "moderate 240 / fast 100", "easing": "enter / exit" }, { "element": "Dialog, side drawer", "trigger": "open / close", "change": "scrim fade; panel y 8\u21920 (dialog) or x 24\u21920 (drawer)", "duration": "slow 320 / moderate 240", "easing": "enter / exit" }, { "element": "Bottom sheet", "trigger": "open / drag / dismiss", "change": "y 100%\u21920; follows finger; flings past 30% or 800px/s dismiss", "duration": "slow 320 / moderate 240", "easing": "enter / exit" }, { "element": "Toast", "trigger": "enter / exit", "change": "y 16\u21920 + fade / fade", "duration": "moderate 240 / fast 100", "easing": "enter / exit" }, { "element": "Skeleton", "trigger": "loading", "change": "shimmer sweep; appears after 150ms, stays \u2265300ms", "duration": "1200 cycle", "easing": "linear" }, { "element": "Chart", "trigger": "first paint / range change", "change": "bars grow from baseline / cross-fade", "duration": "deliberate 480 / base 160", "easing": "standard" }, { "element": "Focus trail row", "trigger": "return from detail", "change": "2px accent edge fades out", "duration": "slow 320 after 2s", "easing": "exit" }, { "element": "Sidebar", "trigger": "collapse / expand", "change": "width 240\u219456, labels fade at 40%", "duration": "moderate 240", "easing": "standard" } ], "rules": { "badgeCasing": "Sentence case for every semantic badge (Error, Resolved, Production). Literal data values (tags, release, env when shown as a value) use monoSm exactly as stored. No uppercase transforms anywhere.", "minTextSize": 12, "maxTintedBadgesPerRow": 1 } }