{ "$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" } } } }