{ "$description": "Ingot UI Kit design tokens. This file is the source; tokens.generated.css and the Tailwind preset's colour map are built from it by scripts/build-tokens.mjs.", "light": { "$description": "The light theme — the default. Every role below has a dark counterpart.", "bg": { "$type": "color", "$value": "#f1f0ed" }, "surface": { "$type": "color", "$value": "#ffffff" }, "surface-2": { "$type": "color", "$value": "#f4f3f0" }, "surface-3": { "$type": "color", "$value": "#e6e4df" }, "border": { "$type": "color", "$value": "#ddd9d3" }, "border-strong": { "$description": "The outline of a control - an input, a select, a switch, a checkbox. It carries WCAG 1.4.11's 3:1 for non-text contrast, which the accessibility page promises in as many words; it used to be #c4bfb8 at 1.83:1 against white, so the promise was written down and not kept. #8d8a84 clears 3:1 on all three light grounds: --surface (3.44), --bg (3.02) and --surface-2 (3.10).", "$type": "color", "$value": "#8d8a84" }, "ink": { "$type": "color", "$value": "#0c0a09" }, "ink-2": { "$type": "color", "$value": "#3f3b37" }, "ink-3": { "$type": "color", "$value": "#57534e" }, "ink-4": { "$type": "color", "$value": "#696460" }, "ink-5": { "$type": "color", "$value": "#d6d3d1" }, "blue-accent": { "$type": "color", "$value": "#2563eb" }, "blue-accent-ink": { "$type": "color", "$value": "#1d4ed8" }, "blue-accent-bg": { "$type": "color", "$value": "#eff6ff" }, "blue-accent-border": { "$type": "color", "$value": "#bfdbfe" }, "accent": { "$type": "color", "$value": "var(--blue-accent)" }, "accent-ink": { "$type": "color", "$value": "var(--blue-accent-ink)" }, "accent-bg": { "$type": "color", "$value": "var(--blue-accent-bg)" }, "accent-border": { "$type": "color", "$value": "var(--blue-accent-border)" }, "ok": { "$type": "color", "$value": "#047454" }, "ok-bg": { "$type": "color", "$value": "#eaf7ee" }, "ok-border": { "$type": "color", "$value": "#a7dfba" }, "warn": { "$type": "color", "$value": "#b05109" }, "warn-bg": { "$type": "color", "$value": "#fffbeb" }, "warn-border": { "$type": "color", "$value": "#fde68a" }, "danger": { "$type": "color", "$value": "#b91c1c" }, "danger-bg": { "$type": "color", "$value": "#fef2f2" }, "danger-border": { "$type": "color", "$value": "#fecaca" }, "custom": { "$type": "color", "$value": "#6d28d9" }, "custom-bg": { "$type": "color", "$value": "#f5f3ff" }, "custom-border": { "$type": "color", "$value": "#ddd6fe" }, "plan": { "$type": "color", "$value": "#faf5ff" }, "plan-bg": { "$type": "color", "$value": "#6b21a8" }, "plan-border": { "$type": "color", "$value": "#7e22ce" }, "code-comment": { "$type": "color", "$value": "#696460" }, "code-keyword": { "$type": "color", "$value": "#6d28d9" }, "code-string": { "$type": "color", "$value": "#047454" }, "code-tag": { "$type": "color", "$value": "#2563eb" }, "code-attr": { "$type": "color", "$value": "#b05109" }, "code-number": { "$type": "color", "$value": "#b91c1c" }, "code-punct": { "$type": "color", "$value": "#57534e" } }, "dark": { "$description": "The dark theme, applied by the .dark class on . Same names, different values.", "bg": { "$type": "color", "$value": "#0b0a09" }, "surface": { "$type": "color", "$value": "#2e2b27" }, "surface-2": { "$type": "color", "$value": "#3e3934" }, "surface-3": { "$type": "color", "$value": "#4e473f" }, "border": { "$type": "color", "$value": "#665d53" }, "border-strong": { "$description": "The dark counterpart of the control outline. #877c6f cleared 3:1 on --surface and --bg but only 2.80 on --surface-2, which is the hover tint a row or a raised card sits on - so a focused input inside one lost its boundary. #8f8376 clears 3:1 on all three.", "$type": "color", "$value": "#8f8376" }, "ink": { "$type": "color", "$value": "#fffefd" }, "ink-2": { "$type": "color", "$value": "#eeeae3" }, "ink-3": { "$type": "color", "$value": "#cbc3b7" }, "ink-4": { "$type": "color", "$value": "#aba398" }, "ink-5": { "$type": "color", "$value": "#605c57" }, "blue-accent": { "$type": "color", "$value": "#5192f7" }, "blue-accent-ink": { "$type": "color", "$value": "#bfdbfe" }, "blue-accent-bg": { "$type": "color", "$value": "#0f1b30" }, "blue-accent-border": { "$type": "color", "$value": "#1e3a8a" }, "accent": { "$type": "color", "$value": "var(--blue-accent)" }, "accent-ink": { "$type": "color", "$value": "var(--blue-accent-ink)" }, "accent-bg": { "$type": "color", "$value": "var(--blue-accent-bg)" }, "accent-border": { "$type": "color", "$value": "var(--blue-accent-border)" }, "ok": { "$type": "color", "$value": "#22c55e" }, "ok-bg": { "$type": "color", "$value": "#0a2013" }, "ok-border": { "$type": "color", "$value": "#166534" }, "warn": { "$type": "color", "$value": "#f59e0b" }, "warn-bg": { "$type": "color", "$value": "#2a1e07" }, "warn-border": { "$type": "color", "$value": "#92400e" }, "danger": { "$type": "color", "$value": "#f36464" }, "danger-bg": { "$type": "color", "$value": "#2a1010" }, "danger-border": { "$type": "color", "$value": "#991b1b" }, "code-comment": { "$type": "color", "$value": "#aba398" }, "code-keyword": { "$type": "color", "$value": "#c4aefc" }, "code-string": { "$type": "color", "$value": "#5ddb99" }, "code-tag": { "$type": "color", "$value": "#7ab0fa" }, "code-attr": { "$type": "color", "$value": "#f5b74a" }, "code-number": { "$type": "color", "$value": "#f79a9a" }, "code-punct": { "$type": "color", "$value": "#cbc3b7" }, "custom": { "$type": "color", "$value": "#ae94fa" }, "custom-bg": { "$type": "color", "$value": "#1e1533" }, "custom-border": { "$type": "color", "$value": "#6d28d9" }, "plan": { "$type": "color", "$value": "#faf5ff" }, "plan-bg": { "$type": "color", "$value": "#9333ea" }, "plan-border": { "$type": "color", "$value": "#a855f7" } }, "accent": { "$description": "Five accent families, four tokens each. blue is the default and references the --blue-* values rather than repeating them.", "blue": { "light": { "accent": { "$type": "color", "$value": "var(--blue-accent)" }, "accent-ink": { "$type": "color", "$value": "var(--blue-accent-ink)" }, "accent-bg": { "$type": "color", "$value": "var(--blue-accent-bg)" }, "accent-border": { "$type": "color", "$value": "var(--blue-accent-border)" } }, "dark": { "accent": { "$type": "color", "$value": "var(--blue-accent)" }, "accent-ink": { "$type": "color", "$value": "var(--blue-accent-ink)" }, "accent-bg": { "$type": "color", "$value": "var(--blue-accent-bg)" }, "accent-border": { "$type": "color", "$value": "var(--blue-accent-border)" } } }, "emerald": { "light": { "accent": { "$type": "color", "$value": "#047857" }, "accent-ink": { "$type": "color", "$value": "#065f46" }, "accent-bg": { "$type": "color", "$value": "#ecfdf5" }, "accent-border": { "$type": "color", "$value": "#a7f3d0" } }, "dark": { "accent": { "$type": "color", "$value": "#10b981" }, "accent-ink": { "$type": "color", "$value": "#a7f3d0" }, "accent-bg": { "$type": "color", "$value": "#072019" }, "accent-border": { "$type": "color", "$value": "#065f46" } } }, "orange": { "light": { "accent": { "$type": "color", "$value": "#c2410c" }, "accent-ink": { "$type": "color", "$value": "#9a3412" }, "accent-bg": { "$type": "color", "$value": "#fff7ed" }, "accent-border": { "$type": "color", "$value": "#fed7aa" } }, "dark": { "accent": { "$type": "color", "$value": "#f97316" }, "accent-ink": { "$type": "color", "$value": "#fed7aa" }, "accent-bg": { "$type": "color", "$value": "#2a1608" }, "accent-border": { "$type": "color", "$value": "#9a3412" } } }, "violet": { "light": { "accent": { "$type": "color", "$value": "#7c3aed" }, "accent-ink": { "$type": "color", "$value": "#6d28d9" }, "accent-bg": { "$type": "color", "$value": "#f5f3ff" }, "accent-border": { "$type": "color", "$value": "#ddd6fe" } }, "dark": { "accent": { "$type": "color", "$value": "#ae94fa" }, "accent-ink": { "$type": "color", "$value": "#ddd6fe" }, "accent-bg": { "$type": "color", "$value": "#1e1533" }, "accent-border": { "$type": "color", "$value": "#6d28d9" } } }, "slate": { "light": { "accent": { "$type": "color", "$value": "#0f172a" }, "accent-ink": { "$type": "color", "$value": "#020617" }, "accent-bg": { "$type": "color", "$value": "#f1f5f9" }, "accent-border": { "$type": "color", "$value": "#cbd5e1" } }, "dark": { "accent": { "$type": "color", "$value": "#cbd5e1" }, "accent-ink": { "$type": "color", "$value": "#f1f5f9" }, "accent-bg": { "$type": "color", "$value": "#1c1f24" }, "accent-border": { "$type": "color", "$value": "#475569" } } } }, "space": { "1": { "$type": "dimension", "$value": "4px" }, "2": { "$type": "dimension", "$value": "8px" }, "3": { "$type": "dimension", "$value": "12px" }, "4": { "$type": "dimension", "$value": "16px" }, "5": { "$type": "dimension", "$value": "24px" }, "6": { "$type": "dimension", "$value": "32px" }, "7": { "$type": "dimension", "$value": "48px" }, "8": { "$type": "dimension", "$value": "72px" }, "$description": "The spacing scale: 4/8/12/16/24/32/48/72." }, "radius": { "$description": "The radius scale from the design handoff.", "xs": { "$type": "dimension", "$value": "4px" }, "sm": { "$type": "dimension", "$value": "6px" }, "md": { "$type": "dimension", "$value": "10px" }, "lg": { "$type": "dimension", "$value": "14px" } }, "layout": { "$description": "The width a whole screen is allowed to reach. From the design handoff; the doc web used to stop at 1280 because that is the Tailwind class nearest to hand, which is not a decision anybody made.", "frame": { "$type": "dimension", "$value": "1440px" }, "aside": { "$type": "dimension", "$value": "224px" }, "page-card": { "$description": "A whole screen that is one small box: signing in, confirming something, a module with nothing in it yet. It centres itself — a box parked at the left edge of a wide monitor reads as a page that failed to load the rest.", "$type": "dimension", "$value": "448px" }, "page-reading": { "$description": "A column that is read or filled in: a form, a long setting, a text. Measured, not chosen — this is roughly 90 characters of the body face, past which the eye loses the start of the next line.", "$type": "dimension", "$value": "768px" }, "page-wide": { "$description": "A page that is read but is not a form — a detail with facts in two columns, a summary with panels. Wider than the reading column, narrower than the frame, because a block that stretches to 1440px stops being one object.", "$type": "dimension", "$value": "1024px" } }, "focus": { "$description": "The keyboard focus ring. Its colour is --accent, so it follows the accent family; only the two measurements live here. The offset is what makes the ring read on a dark button as well as on a light one — the gap is painted in --bg, so the ring never touches the control it names.", "ring": { "$type": "dimension", "$value": "2px" }, "ring-offset": { "$type": "dimension", "$value": "2px" } }, "shadow": { "$description": "Elevation. The dark theme uses deeper shadows on a darker ground.", "light": { "sm": { "$type": "shadow", "$value": "0 1px 2px rgba(12, 10, 9, 0.05)" }, "md": { "$type": "shadow", "$value": "0 6px 18px -6px rgba(12, 10, 9, 0.12), 0 1px 2px rgba(12, 10, 9, 0.05)" }, "lg": { "$type": "shadow", "$value": "0 14px 40px -10px rgba(12, 10, 9, 0.18), 0 2px 6px rgba(12, 10, 9, 0.05)" } }, "dark": { "sm": { "$type": "shadow", "$value": "0 1px 2px rgba(0, 0, 0, 0.55)" }, "md": { "$type": "shadow", "$value": "0 6px 18px -6px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5)" }, "lg": { "$type": "shadow", "$value": "0 18px 44px -12px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.6)" } } }, "font": { "$description": "Two families: Geist Sans for text, Geist Mono for code and numbers.", "sans": { "$type": "fontFamily", "$value": "\"Geist Sans\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif" }, "mono": { "$type": "fontFamily", "$value": "\"Geist Mono\", ui-monospace, Menlo, Consolas, monospace" } }, "type": { "$description": "The type scale from the design handoff. Eight steps, each with a name and a fixed value, so a size is never picked by eye. The Tailwind preset turns them into text-h1 … text-eyebrow; it used to declare them itself, which is why they reached no export.", "display": { "$type": "typography", "$value": { "fontSize": "clamp(40px, 5.4vw, 64px)", "lineHeight": "1.02", "letterSpacing": "-0.03em", "fontWeight": "600" } }, "h1": { "$type": "typography", "$value": { "fontSize": "40px", "lineHeight": "1.06", "letterSpacing": "-0.025em", "fontWeight": "600" } }, "h2": { "$type": "typography", "$value": { "fontSize": "26px", "lineHeight": "1.18", "letterSpacing": "-0.02em", "fontWeight": "600" } }, "h3": { "$type": "typography", "$value": { "fontSize": "18px", "lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "600" } }, "lede": { "$type": "typography", "$value": { "fontSize": "17px", "lineHeight": "1.55", "letterSpacing": "-0.005em" } }, "body": { "$type": "typography", "$value": { "fontSize": "14.5px", "lineHeight": "1.6" } }, "small": { "$type": "typography", "$value": { "fontSize": "13px", "lineHeight": "1.55" } }, "eyebrow": { "$type": "typography", "$value": { "fontSize": "11px", "lineHeight": "1.4", "letterSpacing": "0.08em", "fontWeight": "500" } } }, "motion": { "$description": "One duration and one curve for the whole kit, so transitions do not drift component by component.", "ease": { "$type": "cubicBezier", "$value": "cubic-bezier(0.2, 0.6, 0.3, 1)" }, "dur": { "$type": "duration", "$value": "0.22s" } } }