{ "$schema": "https://design-tokens.org/schema.json", "$description": "Artificer · Cameron's personal design system. Machine-readable token export. Mirrors artificer.css. Source of truth lives in the CSS — regenerate this file if tokens change there.", "$version": "0.24.2", "color": { "$description": "All colors paired with their dark/light values. AAA-tuned where indicated. v0.6 palette: apothecary × deco × speakeasy.", "surface": { "bg": { "dark": "#292c33", "light": "#f5ead0", "use": "Base page surface. Light = ivory paper, the floor." }, "bgRaised": { "dark": "#313540", "light": "#eddcc0", "use": "Cards, sidebar, raised panels. Light = champagne, lifts off ivory." }, "bgOverlay": { "dark": "#3c4150", "light": "#e4d4b0", "use": "Modals, command palette, dropdowns." }, "bgInactive": { "dark": "#1d1f21", "light": "#dcc99c", "use": "Unfocused panes; pair with .pane--inactive." } }, "fg": { "fg": { "dark": "#e8e6e1", "light": "#20203e", "use": "Primary text. Bone on dark, midnight indigo on ivory." }, "fgSecondary": { "dark": "#c5c8c6", "light": "#4a3f2a", "use": "Meta, hints, labels." }, "fgMuted": { "dark": "#5a7a8a", "light": "#5a7a8a", "use": "Muted meta/comment text — steel-blue, between secondary and disabled. AA-L (3.05:1 dark / 3.83:1 light)." }, "fgDisabled": { "dark": "#666666", "light": "#8a8070", "use": "Disabled controls, placeholders." }, "border": { "dark": "#4a4f5c", "light": "#cbb88a", "use": "Inputs, dividers, kbd." }, "borderLifted":{ "dark": "#5a606e", "light": "#b8a674", "use": "Lifted border — diagram rails/connectors; more perceptible than --border on the canvas (2.22:1 dark / 2.01:1 light, non-text)." } }, "semantic": { "accent": { "dark": "#dbbb6f", "light": "#7a5a10", "use": "Burnished gold — interactive text/icons. Links, focus, secondary-button border." }, "accentBright": { "dark": "#e3c885", "light": "#866010", "use": "Hover state for accent." }, "accentFill": { "dark": "#c4932a", "light": "#c4932a", "use": "Deep gold fill — primary button background, badge fill, selection bg. Pair with --on-accent text." }, "attention": { "dark": "#c4808a", "light": "#8a6618", "use": "Dusty rose — \"look when you can\" text/icons. Promoted from light pink in v0.6." }, "attentionFill": { "dark": "#c4808a", "light": "#dbbb6f", "use": "Attention fill — dark dusty rose, light burnished gold. Pair with --on-attention text." }, "urgent": { "dark": "#a04540", "light": "#8a2418", "use": "Brick — destructive, errors, blocking. Replaced vermillion in v0.6 (better separation from gold)." }, "urgentFill": { "dark": "#a04540", "light": "#a04540", "use": "Brick fill — destructive buttons, urgent badges. Pair with --on-urgent text." }, "urgentText": { "dark": "#e6a8a2", "light": "#8a2418", "use": "Lifted error-text red for body copy — bare urgent fails AA as text. Dark #e6a8a2 (bg 6.98 / bgRaised 6.12 / bgOverlay 5.08); light #8a2418 (= urgent) on ivory 7.49. Bound to --urgent-text, consumed by .field>.error. Minted v0.19.0 (#122-B)." }, "success": { "dark": "#4a8a5e", "light": "#2a5a3a", "use": "Apothecary green — completed states, success badges, autoAccept, merged. Replaced olive in v0.6." }, "successFill": { "dark": "#2d6644", "light": "#2a5a3a", "use": "Deep apothecary fill — success badges/dots/chips; deeper than bare success so ivory-on clears AA (5.67:1 dark / 6.70:1 light). Pair with --on-success text." }, "steel": { "dark": "#b8cad4", "light": "#2e4a5a", "use": "Steel blue — honest middle / chrome / secondary UI text / paths." }, "steelFill": { "dark": "#5a7a8a", "light": "#5a7a8a", "use": "Steel fill — meta badges." }, "diffAddBg": { "dark": "#1f3a28", "light": "#d8e4cc", "use": "Diff +added background. Derived tint of --success: same hue, knocked-down lightness." }, "diffDelBg": { "dark": "#3a1f1d", "light": "#ecd6d4", "use": "Diff -removed background. Derived tint of --urgent. Dimmer than diffAdd by design — destructive shouldn't out-shout success." } }, "brand": { "$description": "Cameron's personal signature: gold + purple. Decorative — never use semantically. Ramp: deep (chart/whimsy stop) · bright (foreground role: syntax keyword) · fill (surface).", "brandPurple": { "dark": "#5a3a9a", "light": "#4a25a0", "use": "Deep purple — chart series-3, whimsy gradient stop. NOT a foreground role (sub-AA on dark)." }, "brandPurpleBright": { "dark": "#b095e0", "light": "#5a35b0", "use": "Lifted purple — syntax keyword foreground ($roles.syntax.keyword). 5.47:1 dark / 6.83:1 light, both AA. Minted v0.10.1." }, "brandPurpleFill": { "dark": "#331567", "light": "#331567", "use": "Deep purple — surface fill, plan-mode borders, masthead background." } }, "anchor": { "$description": "Fixed reference colors — used inside on-color text mappings only.", "ivory": { "value": "#f5ead0", "use": "Cream paper anchor — the floor." }, "ivoryRaised": { "value": "#eddcc0", "use": "Champagne — the lifted card. New in v0.6." }, "ink": { "value": "#20203e", "use": "Midnight indigo. Replaced navy #0d1b2a in v0.6 — cooler, richer, more 'ink at midnight'." } }, "onColor": { "$description": "Text color to use when content sits on a colored fill. Pre-checked for AAA where possible.", "onAccent": { "dark": "#20203e", "light": "#20203e", "use": "Text on --accent-fill. Ink on gold — light flipped ivory→ink v0.19.0 (#122-A): 2.32→5.65:1." }, "onAttention": { "dark": "#20203e", "light": "#20203e", "use": "Text on --attention-fill." }, "onUrgent": { "dark": "#f5ead0", "light": "#f5ead0", "use": "Text on --urgent-fill. Ivory on brick." }, "onSuccess": { "dark": "#f5ead0", "light": "#f5ead0", "use": "Text on --success. Ivory on apothecary green." } } }, "typography": { "fontFamily": { "mono": { "value": "'JetBrains Mono', 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, monospace", "use": "Code, identifiers, numerals, dense tool body." }, "body": { "value": "'iA Writer Quattro V', 'Iowan Old Style', 'Charter', 'Source Sans 3', system-ui, -apple-system, sans-serif", "use": "Body prose — document surfaces, headline/body type utilities, .meta." }, "interface": { "value": "'iA Writer Quattro S', 'Iowan Old Style', 'Charter', 'Source Sans 3', system-ui, -apple-system, sans-serif", "use": "Interface chrome — labels, controls, form fields, nav, tabular UI numerals." }, "sans": { "value": "'iA Writer Quattro V', 'Iowan Old Style', 'Charter', 'Source Sans 3', system-ui, -apple-system, sans-serif", "use": "Legacy alias of body — kept resolvable for public-API back-compat." } }, "scale": { "$note": "Sizes are REM so text honors the browser font-size preference (root is never overridden; 1rem = 16px at default). px equivalents in comments.", "headlineLg": { "size": "1.75rem", "lineHeight": 1.3, "letterSpacing": "-0.01em", "weight": 700, "family": "mono" }, "headlineMd": { "size": "1.375rem", "lineHeight": 1.35, "weight": 700, "family": "mono" }, "bodyLg": { "size": "1rem", "lineHeight": 1.65, "weight": 400, "family": "sans" }, "bodyMd": { "size": "0.875rem", "lineHeight": 1.6, "weight": 400, "family": "sans" }, "labelMd": { "size": "0.8125rem", "lineHeight": 1.3, "weight": 500, "family": "sans" }, "labelSm": { "size": "0.75rem", "lineHeight": 1.3, "weight": 400, "family": "sans" }, "labelXs": { "size": "0.6875rem", "lineHeight": 1.3, "weight": 500, "family": "sans" }, "code": { "size": "0.875rem", "lineHeight": 1.5, "weight": 400, "family": "mono" } }, "letterSpacing": "0.01em", "wordSpacing": "0.16em" }, "spacing": { "xs": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "2xl": "48px", "3xl": "96px" }, "breakpoint": { "$note": "Layout breakpoints, max-width (mobile-first-down). SOURCE OF TRUTH for JS matchMedia, Tailwind `screens`, and Figma. CSS @media cannot read custom properties, so the literal @media widths in artificer.css MUST be kept equal to these.", "mobile": { "value": "640px", "use": "Phone. Stacks .grid-2/.grid-3; .table--responsive reflows rows to cards." }, "tablet": { "value": "800px", "use": "Small tablet / split view. .split-pane + .appbar collapse; the drawer takes over nav." }, "wide": { "value": "1200px", "use": "Wide desktop — the system's single MIN-WIDTH breakpoint (reveal a structural region, e.g. .split-pane--inspector's third pane). NOT a content cap: width caps only at --editorial-measure (66ch). #111." } }, "chart": { "$note": "Mirrors the --series-*/--ramp-*/--diverge-*/--chart-* CSS (artificer.css). Categorical series are ALIASES of semantic tokens, so they track theme. The ramp is single-hue sequential, derived from --accent via color-mix. Diverge maps urgent->neutral->success. 5 series max — beyond that, split / group / ramp. The real ramp token is --ramp-1..5 (NOT --series-ramp-*).", "series": { "1": { "ref": "accent", "use": "Series 1 — gold (the accent)." }, "2": { "ref": "steel", "use": "Series 2 — steel blue." }, "3": { "ref": "brandPurple", "use": "Series 3 — purple." }, "4": { "ref": "success", "use": "Series 4 — apothecary green." }, "5": { "ref": "attention", "use": "Series 5 — rose." } }, "ramp": { "$note": "Sequential single-hue, 5 stops light->dark. Quantitative encoding only (heatmap, choropleth). Derived at color-mix(in oklch, accent X%, bg) for X = 25/45/65/85, then accent.", "1": "color-mix(in oklch, var(--accent) 25%, var(--bg))", "2": "color-mix(in oklch, var(--accent) 45%, var(--bg))", "3": "color-mix(in oklch, var(--accent) 65%, var(--bg))", "4": "color-mix(in oklch, var(--accent) 85%, var(--bg))", "5": "var(--accent)" }, "diverge": { "low": { "ref": "urgent", "use": "Signed-delta low end (brick)." }, "mid": { "ref": "fgDisabled", "use": "Neutral midpoint." }, "high": { "ref": "success", "use": "Signed-delta high end (apothecary green)." } }, "chrome": { "grid": { "value": "color-mix(in oklch, var(--border) 70%, transparent)", "use": "Gridlines." }, "gridStrong": { "ref": "border", "use": "Emphasized gridline / baseline." }, "axis": { "ref": "fgSecondary", "use": "Axis lines + axis labels." } } }, "radius": { "sm": { "value": "4px", "use": "Buttons, inputs, kbd." }, "md": { "value": "8px", "use": "Cards, panels." }, "lg": { "value": "12px", "use": "Overlays only." }, "pill": { "value": "999px", "use": "Fully-rounded pills: toggle track, chip." } }, "motion": { "duration": { "instant": "80ms", "fast": "160ms", "max": "300ms" }, "easing": "cubic-bezier(0.2, 0.7, 0.3, 1)", "easingLinear": "linear", "$note": "One curve (easing) for state/arrival; easingLinear is for continuous translation ONLY (motion pattern #02: progress bars, scrubbers, skeleton shimmer). All durations collapse to 0ms when prefers-reduced-motion: reduce." }, "focus": { "$note": "Focus-ring geometry, tokenized (was inline 2px/2px across ~10 selectors). Color is --accent. a11y floor: width never 0.", "width": { "value": "2px", "use": "Outline width on every :focus-visible." }, "offset": { "value": "2px", "use": "Default offset — ring drawn outside the box." }, "offsetLoose": { "value": "4px", "use": "Sliders / thumbs that need air." }, "offsetInset": { "value": "-2px", "use": "Rings drawn inside (sidenav items, tabs, table rows, accordion)." } }, "shadow": { "overlay": { "dark": "0 4px 12px rgba(0, 0, 0, 0.35)", "light": "0 4px 12px rgba(32, 32, 62, 0.18)", "use": "Modals, command palette. The heavier of two elevations." }, "popover": { "dark": "0 2px 8px rgba(0, 0, 0, 0.30)", "light": "0 2px 8px rgba(32, 32, 62, 0.14)", "use": "Popovers, tooltips, dropdowns. The lighter elevation. (Was CSS-only.)" } } }