200 lines
13 KiB
JSON
200 lines
13 KiB
JSON
{
|
||
"$schema": "https://design-tokens.github.io/community-group/format/",
|
||
"$metadata": {
|
||
"version": "1.0.0",
|
||
"updated": "2026-04-23",
|
||
"scope": "STTIL Solutions — master token set (Signal CGM product expression)",
|
||
"accent-family": "tangerine"
|
||
},
|
||
|
||
"color": {
|
||
"teal": {
|
||
"50": { "$value": "#EEF8F8", "$type": "color", "$description": "Background washes, hover states" },
|
||
"100": { "$value": "#CBE9E9", "$type": "color", "$description": "Bordered containers, soft highlights" },
|
||
"200": { "$value": "#97D3D3", "$type": "color", "$description": "Disabled interactive elements" },
|
||
"300": { "$value": "#5BBBBB", "$type": "color", "$description": "Secondary text on dark backgrounds" },
|
||
"400": { "$value": "#2EA3A3", "$type": "color", "$description": "Icon fills, chart secondary series; primary brand in dark mode" },
|
||
"500": { "$value": "#1A8A8A", "$type": "color", "$description": "Primary interactive, links" },
|
||
"600": { "$value": "#147A7A", "$type": "color", "$description": "Brand primary — dominant system color (light mode)" },
|
||
"700": { "$value": "#0F5E5E", "$type": "color", "$description": "Hover state on teal-600; wordmark color on light" },
|
||
"800": { "$value": "#0A4444", "$type": "color", "$description": "Elevated panels in dark mode" },
|
||
"900": { "$value": "#072E2E", "$type": "color", "$description": "Sidebar, card surface in dark mode" },
|
||
"950": { "$value": "#041A1A", "$type": "color", "$description": "Page background in dark mode (AMOLED-deep)" }
|
||
},
|
||
|
||
"tangerine": {
|
||
"50": { "$value": "#FFF4EE", "$type": "color", "$description": "Tangerine wash (use rarely)" },
|
||
"100": { "$value": "#FFE4CC", "$type": "color", "$description": "Call-out block backgrounds; PA Required badge fill (light)" },
|
||
"200": { "$value": "#FFC090", "$type": "color", "$description": "Light tangerine for illustration accents" },
|
||
"300": { "$value": "#FFB070", "$type": "color", "$description": "Warm glow text on dark surfaces — promoted" },
|
||
"400": { "$value": "#F07840", "$type": "color", "$description": "Borders, glows, active states on dark surfaces — promoted" },
|
||
"500": { "$value": "#E06028", "$type": "color", "$description": "Primary accent in light mode" },
|
||
"600": { "$value": "#C04E1C", "$type": "color", "$description": "Hover state on tangerine-500" },
|
||
"700": { "$value": "#903A14", "$type": "color", "$description": "Text on tangerine-100 backgrounds; AA-safe" },
|
||
"800": { "$value": "#6A2A0C", "$type": "color", "$description": "Deep tangerine for rare decorative use" },
|
||
"900": { "$value": "#3E1808", "$type": "color", "$description": "Near-black tangerine" }
|
||
},
|
||
|
||
"neutral": {
|
||
"0": { "$value": "#FFFFFF", "$type": "color", "$description": "Card surfaces, pure white" },
|
||
"50": { "$value": "#F4F9F9", "$type": "color", "$description": "Page background — light mode" },
|
||
"100": { "$value": "#E5EEEE", "$type": "color", "$description": "Dividers, table row alternates" },
|
||
"200": { "$value": "#C8D8D8", "$type": "color", "$description": "Borders, input outlines" },
|
||
"300": { "$value": "#A3BEBE", "$type": "color", "$description": "Placeholder text, disabled" },
|
||
"400": { "$value": "#7A9E9E", "$type": "color", "$description": "Secondary body text" },
|
||
"500": { "$value": "#5A7E7E", "$type": "color", "$description": "Body text minimum on white" },
|
||
"600": { "$value": "#426060", "$type": "color", "$description": "Strong body text (light surfaces only)" },
|
||
"700": { "$value": "#2E4444", "$type": "color", "$description": "Headings on light" },
|
||
"800": { "$value": "#1C2C2C", "$type": "color", "$description": "Primary text on light" },
|
||
"900": { "$value": "#111A1A", "$type": "color", "$description": "Maximum contrast (light mode only)" }
|
||
},
|
||
|
||
"semantic": {
|
||
"success": {
|
||
"100": { "$value": "#C8EDD8", "$type": "color" },
|
||
"500": { "$value": "#1A7A4E", "$type": "color", "$description": "Active coverage, completed actions" },
|
||
"600": { "$value": "#146040", "$type": "color", "$description": "Text on success-100 backgrounds" }
|
||
},
|
||
"warning": {
|
||
"100": { "$value": "#FDECD5", "$type": "color" },
|
||
"400": { "$value": "#D97B35", "$type": "color", "$description": "Expiring soon (30–59 days)" },
|
||
"600": { "$value": "#A85A18", "$type": "color", "$description": "Critical expiry (<30 days); text on warning-100" }
|
||
},
|
||
"error": {
|
||
"100": { "$value": "#F8CCCC", "$type": "color" },
|
||
"500": { "$value": "#C83030", "$type": "color", "$description": "Denied, expired, destructive actions" },
|
||
"600": { "$value": "#A02020", "$type": "color", "$description": "Text on error-100 backgrounds" }
|
||
},
|
||
"info": {
|
||
"100": { "$value": "#C8E0EE", "$type": "color" },
|
||
"500": { "$value": "#1A6A9A", "$type": "color", "$description": "Informational, pending review" }
|
||
},
|
||
"purple": {
|
||
"100": { "$value": "#E2D8F0", "$type": "color" },
|
||
"500": { "$value": "#7A5EA0", "$type": "color", "$description": "PA pending, in-process states" }
|
||
}
|
||
},
|
||
|
||
"mode": {
|
||
"dark": {
|
||
"bg-page": { "$value": "#041A1A", "$type": "color" },
|
||
"bg-card": { "$value": "#072E2E", "$type": "color" },
|
||
"bg-elevated": { "$value": "#0A4444", "$type": "color" },
|
||
"text-heading": { "$value": "#FFFAF6", "$type": "color", "$description": "Warm white — slightly copper-tinted vs pure white" },
|
||
"text-primary": { "$value": "#F0F4F4", "$type": "color", "$description": "Softened body text — not stark white" },
|
||
"text-secondary":{ "$value": "#5BBBBB", "$type": "color" },
|
||
"text-muted": { "$value": "#5A8080", "$type": "color", "$description": "Min AA-safe on teal-950; ~4.2:1" },
|
||
"border": { "$value": "#0F5E5E", "$type": "color" },
|
||
"brand": { "$value": "#2EA3A3", "$type": "color", "$description": "teal-400 — shifted up from teal-600 for dark contrast" },
|
||
"accent": { "$value": "#F07840", "$type": "color", "$description": "tangerine-400 — warm glow on dark" },
|
||
"accent-text": { "$value": "#FFB070", "$type": "color", "$description": "tangerine-300 — gold text on dark" }
|
||
},
|
||
"light": {
|
||
"bg-page": { "$value": "#F4F9F9", "$type": "color" },
|
||
"bg-card": { "$value": "#FFFFFF", "$type": "color" },
|
||
"bg-elevated": { "$value": "#E5EEEE", "$type": "color" },
|
||
"text-heading": { "$value": "#0A3030", "$type": "color", "$description": "Deep teal-charcoal heading" },
|
||
"text-primary": { "$value": "#1C2E2E", "$type": "color", "$description": "Deep charcoal — not stark black" },
|
||
"text-secondary":{ "$value": "#5A7E7E", "$type": "color" },
|
||
"text-muted": { "$value": "#7A9E9E", "$type": "color" },
|
||
"border": { "$value": "#C8D8D8", "$type": "color" },
|
||
"brand": { "$value": "#147A7A", "$type": "color" },
|
||
"accent": { "$value": "#E06028", "$type": "color", "$description": "tangerine-500 — restrained on light" },
|
||
"accent-text": { "$value": "#E06028", "$type": "color" }
|
||
}
|
||
}
|
||
},
|
||
|
||
"typography": {
|
||
"fontFamily": {
|
||
"heading": { "$value": "'Plus Jakarta Sans', sans-serif", "$type": "fontFamily" },
|
||
"body": { "$value": "'Inter', sans-serif", "$type": "fontFamily" },
|
||
"mono": { "$value": "'JetBrains Mono', monospace", "$type": "fontFamily" }
|
||
},
|
||
"fontSize": {
|
||
"xs": { "$value": "0.75rem", "$type": "dimension", "$description": "12px" },
|
||
"sm": { "$value": "0.875rem", "$type": "dimension", "$description": "14px" },
|
||
"base": { "$value": "1rem", "$type": "dimension", "$description": "16px" },
|
||
"lg": { "$value": "1.125rem", "$type": "dimension", "$description": "18px" },
|
||
"xl": { "$value": "1.25rem", "$type": "dimension", "$description": "20px" },
|
||
"2xl": { "$value": "1.5rem", "$type": "dimension", "$description": "24px" },
|
||
"3xl": { "$value": "1.875rem", "$type": "dimension", "$description": "30px" },
|
||
"4xl": { "$value": "2.25rem", "$type": "dimension", "$description": "36px" },
|
||
"5xl": { "$value": "3rem", "$type": "dimension", "$description": "48px" }
|
||
},
|
||
"fontWeight": {
|
||
"regular": { "$value": 400, "$type": "fontWeight" },
|
||
"medium": { "$value": 500, "$type": "fontWeight" },
|
||
"semibold":{ "$value": 600, "$type": "fontWeight" },
|
||
"bold": { "$value": 700, "$type": "fontWeight" }
|
||
},
|
||
"lineHeight": {
|
||
"tight": { "$value": 1.15, "$type": "number" },
|
||
"snug": { "$value": 1.25, "$type": "number" },
|
||
"normal": { "$value": 1.5, "$type": "number" },
|
||
"relaxed": { "$value": 1.6, "$type": "number" }
|
||
},
|
||
"letterSpacing": {
|
||
"tight": { "$value": "-0.02em", "$type": "dimension" },
|
||
"normal": { "$value": "0em", "$type": "dimension" },
|
||
"wide": { "$value": "0.05em", "$type": "dimension" },
|
||
"wider": { "$value": "0.08em", "$type": "dimension" },
|
||
"widest": { "$value": "0.1em", "$type": "dimension" }
|
||
}
|
||
},
|
||
|
||
"spacing": {
|
||
"0": { "$value": "0rem", "$type": "dimension" },
|
||
"1": { "$value": "0.25rem","$type": "dimension", "$description": "4px" },
|
||
"2": { "$value": "0.5rem", "$type": "dimension", "$description": "8px" },
|
||
"3": { "$value": "0.75rem","$type": "dimension", "$description": "12px" },
|
||
"4": { "$value": "1rem", "$type": "dimension", "$description": "16px" },
|
||
"5": { "$value": "1.25rem","$type": "dimension", "$description": "20px" },
|
||
"6": { "$value": "1.5rem", "$type": "dimension", "$description": "24px" },
|
||
"8": { "$value": "2rem", "$type": "dimension", "$description": "32px" },
|
||
"10": { "$value": "2.5rem", "$type": "dimension", "$description": "40px" },
|
||
"12": { "$value": "3rem", "$type": "dimension", "$description": "48px" },
|
||
"16": { "$value": "4rem", "$type": "dimension", "$description": "64px" },
|
||
"20": { "$value": "5rem", "$type": "dimension", "$description": "80px" },
|
||
"24": { "$value": "6rem", "$type": "dimension", "$description": "96px" }
|
||
},
|
||
|
||
"borderRadius": {
|
||
"none": { "$value": "0", "$type": "dimension" },
|
||
"sm": { "$value": "0.25rem", "$type": "dimension", "$description": "4px" },
|
||
"md": { "$value": "0.5rem", "$type": "dimension", "$description": "8px" },
|
||
"lg": { "$value": "0.75rem", "$type": "dimension", "$description": "12px" },
|
||
"xl": { "$value": "1rem", "$type": "dimension", "$description": "16px" },
|
||
"2xl": { "$value": "1.5rem", "$type": "dimension", "$description": "24px" },
|
||
"full": { "$value": "9999px", "$type": "dimension" }
|
||
},
|
||
|
||
"shadow": {
|
||
"sm": { "$value": "0 1px 3px rgba(7,46,46,0.10)", "$type": "shadow" },
|
||
"md": { "$value": "0 2px 10px rgba(4,26,26,0.14)", "$type": "shadow" },
|
||
"lg": { "$value": "0 4px 20px rgba(4,26,26,0.18)", "$type": "shadow" },
|
||
"xl": { "$value": "0 8px 32px rgba(4,26,26,0.22)", "$type": "shadow" },
|
||
"tangerine-glow-dark": { "$value": "0 0 24px rgba(240,120,64,0.30), 0 2px 10px rgba(4,26,26,0.70)", "$type": "shadow", "$description": "Premium card glow — dark mode only. One per view." },
|
||
"tangerine-glow-light": { "$value": "0 0 16px rgba(224,96,40,0.20), 0 2px 8px rgba(0,0,0,0.08)", "$type": "shadow", "$description": "Premium card glow — light mode." }
|
||
},
|
||
|
||
"semantic-ui": {
|
||
"badge": {
|
||
"active": { "bg": "#C8EDD8", "text": "#146040", "icon": "✓" },
|
||
"expiring": { "bg": "#FDECD5", "text": "#A85A18", "icon": "⚠" },
|
||
"critical": { "bg": "#F8CCCC", "text": "#A02020", "icon": "⚠" },
|
||
"pa-required":{ "bg": "#FFE4CC", "text": "#903A14", "icon": "⚡", "border": "rgba(144,58,20,0.2)" },
|
||
"pa-pending": { "bg": "#E2D8F0", "text": "#7A5EA0", "icon": "○" },
|
||
"denied": { "bg": "#F8CCCC", "text": "#A02020", "icon": "✕" },
|
||
"info": { "bg": "#C8E0EE", "text": "#1A6A9A", "icon": "ℹ" }
|
||
},
|
||
"sparkle": {
|
||
"priority-row-bg-dark": { "$value": "rgba(224,104,48,0.09)", "$description": "Highest-priority worklist row — dark mode" },
|
||
"priority-row-bg-light": { "$value": "rgba(224,96,40,0.05)", "$description": "Highest-priority worklist row — light mode" },
|
||
"tangerine-border-dark": { "$value": "1px solid #F07840", "$description": "Featured card edge on dark surface" },
|
||
"tangerine-shimmer-border":{ "$value": "1px solid rgba(240,120,64,0.35)", "$description": "Subtle shimmer on elevated panels" },
|
||
"active-nav-tangerine": { "$value": "3px solid #F07840", "$description": "Active sidebar nav left border" },
|
||
"warm-white": { "$value": "#FFFAF6", "$description": "Heading text on dark teal — slightly warm vs pure white" }
|
||
}
|
||
}
|
||
}
|