/* ============================================================ IoT Design System — Design Tokens ------------------------------------------------------------ Source: Figma "IoT Design System" file, page "00 - Design Tokens" (id=0:1) Inputs: /tmp/figma_ds_tokens.json (node tree, depth=3) /tmp/figma_ds_tree.json (file-level styles) docs/design/screens/ds-00-colour-guide.png (color swatches) docs/design/screens/ds-01-typography.png (type samples) Extraction method: - Spacing / shadow / radius / font-family: parsed directly from JSON - Color swatches: JSON depth=3 did not expose leaf RECTANGLE nodes, so swatches were sampled from the colour-guide PNG at the frame coordinates reported by the JSON (pixel-exact, not guessed). - Type sizes/weights: file-level style names encode the spec (Display/32, Body/14 - Semi Bold, …); pixel heights verified. ============================================================ */ :root { /* ========================================================== COLORS ========================================================== */ /* ---- Brand / Primary (Indigo scale) ---------------------- Source: "00 - Colour Guide" → "Brand/ Primary Colours" 7 swatches sampled from ds-00-colour-guide.png at y=222..301 */ --color-brand-100: #E0E7FF; --color-brand-200: #C7D2FE; --color-brand-300: #A5B4FC; --color-brand-400: #818CF8; --color-brand-500: #6366F1; /* Primary brand color */ --color-brand-600: #4F46E5; --color-brand-700: #4338CA; /* Semantic brand aliases */ --color-brand-primary: var(--color-brand-500); --color-brand-hover: var(--color-brand-600); --color-brand-active: var(--color-brand-700); --color-brand-soft: var(--color-brand-100); --color-brand-subtle: var(--color-brand-200); /* ---- Background / Surface (dark theme base) -------------- Source: "00 - Colour Guide" → "Background/ Surface Colours" 5 swatches sampled at y=504..583 IoT platform uses a dark-theme foundation. */ --color-bg-900: #0A0E16; /* Darkest — app canvas */ --color-bg-800: #181C22; --color-bg-700: #282E37; --color-bg-600: #353C46; --color-bg-500: #3A404A; /* Lightest dark surface */ /* Semantic background aliases */ --color-bg-base: var(--color-bg-900); /* App background */ --color-bg-surface: var(--color-bg-800); /* Card / panel surface */ --color-bg-elevated: var(--color-bg-700); /* Raised surface (modals, popovers) */ --color-bg-overlay: var(--color-bg-600); /* Hover/active surface tint */ --color-bg-muted: var(--color-bg-500); /* Subtle / disabled surface */ --color-bg-white: #FFFFFF; /* From Figma fill style "Neutral/White" (3:30075) */ /* ---- Text & Icons (neutral grays) ----------------------- Source: "00 - Colour Guide" → "Text & Icons Colours" 5 swatches sampled at y=788..867 */ --color-text-100: #F8FAFC; /* Lightest — primary text on dark bg */ --color-text-200: #D9DEE5; --color-text-300: #A2ADBB; --color-text-400: #949EAC; --color-text-500: #8F98A6; /* Darkest — disabled / placeholder */ /* Semantic text aliases */ --color-text-primary: var(--color-text-100); --color-text-secondary: var(--color-text-200); --color-text-tertiary: var(--color-text-300); --color-text-quaternary: var(--color-text-400); --color-text-disabled: var(--color-text-500); --color-text-inverse: #131316; /* Dark text on light surfaces */ /* ---- Status / Feedback ---------------------------------- Source: "00 - Colour Guide" → "Status/ Feedback Colors" 7 swatches sampled at y=1072..1151 */ --color-status-success: #19D960; --color-status-error: #F55252; --color-status-warning: #FFA610; --color-status-caution: #FFDB2C; --color-status-positive: #A3EC4A; --color-status-info: #1CEAC7; --color-status-accent: #4787EF; /* ---- AI Algorithm Category Colors ----------------------- NOTE: This group exists in the Figma source at y=1327 but falls outside the exported screenshot bounds (h=1312) and the leaf nodes were not returned at depth=3. Values below are left as placeholders — to be filled from a deeper Figma API call (depth>=4) or a re-exported screenshot. */ /* --color-ai-category-1: ; */ /* --color-ai-category-2: ; */ /* --color-ai-category-3: ; */ /* ========================================================== TYPOGRAPHY ------------------------------------------------------------ Font family "Inter" confirmed from JSON TEXT node styles. Type scale extracted from file-level TEXT style names (Display/32, Headings/20, Body/14 - Semi Bold, …). Font sizes verified by measuring rendered glyph heights in ds-01-typography.png. ========================================================== */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Display — for large hero numbers / dashboard headlines. Weight 600 (Semi Bold) inferred from H1/H5 pattern in JSON. */ --font-display-32: 600 32px/1.2 var(--font-family-base); --font-display-24: 600 24px/1.2 var(--font-family-base); /* Headings — weight 600 confirmed from JSON (Headings/20 applied with fontWeight=600, lineHeightPx=24). */ --font-heading-20: 600 20px/1.2 var(--font-family-base); --font-heading-16: 600 16px/1.2 var(--font-family-base); /* Body — three weights, all 14px / 1.5 line-height. */ --font-body-14-semibold: 600 14px/1.5 var(--font-family-base); --font-body-14-medium: 500 14px/1.5 var(--font-family-base); --font-body-14-regular: 400 14px/1.5 var(--font-family-base); --font-body-12: 500 12px/1.5 var(--font-family-base); /* weight inferred */ /* Label — small UI labels (chips, tags, table headers). */ --font-label-12: 500 12px/1.4 var(--font-family-base); /* weight inferred */ /* Caption — smallest text, two weights. */ --font-caption-10-medium: 500 10px/1.4 var(--font-family-base); --font-caption-10-regular: 400 10px/1.4 var(--font-family-base); /* Letter spacing (from JSON, where available) */ --tracking-heading: 0.04em; /* Headings/20 letterSpacing confirmed */ --tracking-body: 0em; --tracking-display: 0em; /* ========================================================== SPACING ------------------------------------------------------------ Source: "03 - Spacing Token" → COMPONENT_SET (id=3:30146) 11 tokens, each COMPONENT's height = the spacing value. Variable name uses the pixel value as suffix (matches Figma "Space-N" naming and is unambiguous in code). ========================================================== */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-98: 98px; /* Convenient aliases */ --space-xs: var(--space-4); --space-sm: var(--space-8); --space-md: var(--space-16); --space-lg: var(--space-24); --space-xl: var(--space-32); --space-2xl: var(--space-48); --space-3xl: var(--space-64); /* ========================================================== SHADOWS / ELEVATION ------------------------------------------------------------ Source: "02 - Surfaces" frame DROP_SHADOW effect in JSON. File-level styles "Shadow/Low" (7:11897) and "Shadow/Medium" (7:11898) are declared but their definitions live on nodes not returned at depth=3. The value below is the only shadow effect found in the exported tree (on the Surfaces frame). ========================================================== */ --shadow-low: 0 4px 4px rgba(0, 0, 0, 0.25); /* --shadow-medium: ; */ /* ========================================================== BORDER RADIUS ------------------------------------------------------------ Source: cornerRadius field on all major frames + the shared VARIABLE_ALIAS for rectangleCornerRadii (id …2019:132). The "02 - Surfaces" → "Border Radius" subframe shows additional radius samples but its children were not exported at depth=3; only the canonical 20px is confirmed here. ========================================================== */ --radius-base: 20px; /* Used on all top-level token frames */ --radius-sm: 8px; /* Inferred from common IoT UI patterns — verify in Components page */ --radius-md: 12px; /* Inferred — verify */ --radius-lg: 16px; /* Inferred — verify */ --radius-full: 9999px; /* Pills / circular elements */ /* ========================================================== Z-INDEX (not in Figma tokens — left as conventional defaults) ========================================================== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-modal: 1200; --z-toast: 1300; }