Semantics Catalogue

Every Interlace semantic token, its resolved value in light + dark, the brand primitive it points at. Auto-generated from packages/ui/styles/interlace-theme.css at build time — when the source CSS changes, this table changes too.

Semantic aliases

These are the names you consume from React (bg-background, text-muted-foreground). They resolve to the brand primitives below.

Brand primitives

These are the concrete hex values. Override these in@layer interlace.brand (see theme authoring) to fork the brand.

Token	Light	Dark
`--interlace-accent`	#fef4ed	#3d1a08
`--interlace-accent-foreground`	#73300d	#fcc9b0
`--interlace-background`	#ffffff	#0a0a0a
`--interlace-border`	#eae7e2	#252019
`--interlace-brand-mark-bar-g`	#0a6b47	#0d9460
`--interlace-brand-mark-bar-o`	#a84c17	#f4794a
`--interlace-card`	#ffffff	#171412
`--interlace-card-foreground`	#0d0b09	#f0ede9
`--interlace-caution`	#7c2d12	#fdba74
`--interlace-caution-foreground`	#ffffff	#0a0a0a
`--interlace-chart-1`	oklch(0.55 0.16 41)	oklch(0.78 0.14 41)
`--interlace-chart-2`	oklch(0.55 0.14 162)	oklch(0.78 0.12 162)
`--interlace-chart-3`	oklch(0.55 0.18 264)	oklch(0.78 0.16 264)
`--interlace-chart-4`	oklch(0.55 0.14 90)	oklch(0.78 0.12 90)
`--interlace-chart-5`	oklch(0.55 0.13 200)	oklch(0.78 0.11 200)
`--interlace-destructive`	#991b1b	#fca5a5
`--interlace-destructive-foreground`	#ffffff	#0a0a0a
`--interlace-foreground`	#0d0b09	#f0ede9
`--interlace-hero-foreground`	#f0ede9	#f0ede9
`--interlace-hero-meteor`	#fdd6c2	#fdd6c2
`--interlace-hero-star`	#fbb99a	#fbb99a
`--interlace-hero-surface`	#0d0b09	#0d0b09
`--interlace-hero-surface-deep`	#000000	#000000
`--interlace-hero-trail`	#0d9460	#0d9460
`--interlace-info`	#1e40af	#93c5fd
`--interlace-info-foreground`	#ffffff	#0a0a0a
`--interlace-input`	#8f857a	#6b635a
`--interlace-muted`	#faf7f4	#171412
`--interlace-muted-foreground`	#4d453c	#c9c3bb
`--interlace-popover`	#ffffff	#171412
`--interlace-popover-foreground`	#0d0b09	#f0ede9
`--interlace-primary`	#7d350c	#fbb99a
`--interlace-primary-active`	#4d2009	#fdd6c2
`--interlace-primary-foreground`	#ffffff	#0a0a0a
`--interlace-primary-hover`	#6b2b09	#fcc9b0
`--interlace-primary-subtle`	#fef4ed	#3d1a08
`--interlace-primary-subtle-foreground`	#4d2009	#fdd6c2
`--interlace-radius-lg`	1rem	1rem
`--interlace-radius-md`	0.75rem	0.75rem
`--interlace-radius-sm`	0.5rem	0.5rem
`--interlace-ring`	var(--interlace-primary)	var(--interlace-primary)
`--interlace-scrim`	#000000	#000000
`--interlace-scrim-foreground`	#ffffff	#ffffff
`--interlace-secondary`	#f5f3f0	#201c17
`--interlace-secondary-foreground`	#1f1a15	#f0ede9
`--interlace-success`	#065f46	#34d399
`--interlace-success-foreground`	#ffffff	#052e16
`--interlace-viz-axis`	#8d857a	#746c60
`--interlace-viz-edge`	#e0dad2	#2d2823
`--interlace-viz-grid`	#e0dad2	#2d2823
`--interlace-warning`	#78350f	#f59e0b
`--interlace-warning-foreground`	#ffffff	#1e1b2e
`--interlace-window-control-close`	#ff5f57	#ff5f57
`--interlace-window-control-minimize`	#febc2e	#febc2e
`--interlace-window-control-zoom`	#28c840	#28c840

Token	Light	Dark
`--accent`	var(--interlace-accent)(alias)	var(--interlace-accent)(alias)
`--accent-foreground`	var(--interlace-accent-foreground)(alias)	var(--interlace-accent-foreground)(alias)
`--background`	var(--interlace-background)(alias)	var(--interlace-background)(alias)
`--border`	var(--interlace-border)(alias)	var(--interlace-border)(alias)
`--brand-mark-bar-g`	var(--interlace-brand-mark-bar-g)(alias)	var(--interlace-brand-mark-bar-g)(alias)
`--brand-mark-bar-o`	var(--interlace-brand-mark-bar-o)(alias)	var(--interlace-brand-mark-bar-o)(alias)
`--card`	var(--interlace-card)(alias)	var(--interlace-card)(alias)
`--card-foreground`	var(--interlace-card-foreground)(alias)	var(--interlace-card-foreground)(alias)
`--caution`	var(--interlace-caution)(alias)	var(--interlace-caution)(alias)
`--caution-foreground`	var(--interlace-caution-foreground)(alias)	var(--interlace-caution-foreground)(alias)
`--chart-1`	var(--interlace-chart-1)(alias)	var(--interlace-chart-1)(alias)
`--chart-2`	var(--interlace-chart-2)(alias)	var(--interlace-chart-2)(alias)
`--chart-3`	var(--interlace-chart-3)(alias)	var(--interlace-chart-3)(alias)
`--chart-4`	var(--interlace-chart-4)(alias)	var(--interlace-chart-4)(alias)
`--chart-5`	var(--interlace-chart-5)(alias)	var(--interlace-chart-5)(alias)
`--color-fd-muted-foreground`	var(--interlace-muted-foreground)(alias)	var(--interlace-muted-foreground)(alias)
`--destructive`	var(--interlace-destructive)(alias)	var(--interlace-destructive)(alias)
`--destructive-foreground`	var(--interlace-destructive-foreground)(alias)	var(--interlace-destructive-foreground)(alias)
`--foreground`	var(--interlace-foreground)(alias)	var(--interlace-foreground)(alias)
`--hero-foreground`	var(--interlace-hero-foreground)(alias)	var(--interlace-hero-foreground)(alias)
`--hero-meteor`	var(--interlace-hero-meteor)(alias)	var(--interlace-hero-meteor)(alias)
`--hero-star`	var(--interlace-hero-star)(alias)	var(--interlace-hero-star)(alias)
`--hero-surface`	var(--interlace-hero-surface)(alias)	var(--interlace-hero-surface)(alias)
`--hero-surface-deep`	var(--interlace-hero-surface-deep)(alias)	var(--interlace-hero-surface-deep)(alias)
`--hero-trail`	var(--interlace-hero-trail)(alias)	var(--interlace-hero-trail)(alias)
`--info`	var(--interlace-info)(alias)	var(--interlace-info)(alias)
`--info-foreground`	var(--interlace-info-foreground)(alias)	var(--interlace-info-foreground)(alias)
`--input`	var(--interlace-input)(alias)	var(--interlace-input)(alias)
`--muted`	var(--interlace-muted)(alias)	var(--interlace-muted)(alias)
`--muted-foreground`	var(--interlace-muted-foreground)(alias)	var(--interlace-muted-foreground)(alias)
`--popover`	var(--interlace-popover)(alias)	var(--interlace-popover)(alias)
`--popover-foreground`	var(--interlace-popover-foreground)(alias)	var(--interlace-popover-foreground)(alias)
`--primary`	var(--interlace-primary)(alias)	var(--interlace-primary)(alias)
`--primary-foreground`	var(--interlace-primary-foreground)(alias)	var(--interlace-primary-foreground)(alias)
`--ring`	var(--interlace-ring)(alias)	var(--interlace-ring)(alias)
`--scrim`	var(--interlace-scrim)(alias)	var(--interlace-scrim)(alias)
`--scrim-foreground`	var(--interlace-scrim-foreground)(alias)	var(--interlace-scrim-foreground)(alias)
`--secondary`	var(--interlace-secondary)(alias)	var(--interlace-secondary)(alias)
`--secondary-foreground`	var(--interlace-secondary-foreground)(alias)	var(--interlace-secondary-foreground)(alias)
`--success`	var(--interlace-success)(alias)	var(--interlace-success)(alias)
`--success-foreground`	var(--interlace-success-foreground)(alias)	var(--interlace-success-foreground)(alias)
`--viz-annotation-action`	var(--warning)(alias)	var(--warning)(alias)
`--viz-annotation-publish`	var(--primary)(alias)	var(--primary)(alias)
`--viz-annotation-release`	var(--info)(alias)	var(--info)(alias)
`--viz-axis`	var(--interlace-viz-axis)(alias)	var(--interlace-viz-axis)(alias)
`--viz-band`	color-mix(in srgb, var(--foreground) 6%, transparent)	color-mix(in srgb, var(--foreground) 6%, transparent)
`--viz-crosshair`	var(--muted-foreground)(alias)	var(--muted-foreground)(alias)
`--viz-edge`	var(--interlace-viz-edge)(alias)	var(--interlace-viz-edge)(alias)
`--viz-edge-active`	var(--primary)(alias)	var(--primary)(alias)
`--viz-grid`	var(--interlace-viz-grid)(alias)	var(--interlace-viz-grid)(alias)
`--viz-negative`	var(--destructive)(alias)	var(--destructive)(alias)
`--viz-neutral`	var(--muted-foreground)(alias)	var(--muted-foreground)(alias)
`--viz-node`	var(--muted-foreground)(alias)	var(--muted-foreground)(alias)
`--viz-node-active`	var(--primary)(alias)	var(--primary)(alias)
`--viz-positive`	var(--success)(alias)	var(--success)(alias)
`--warning`	var(--interlace-warning)(alias)	var(--interlace-warning)(alias)
`--warning-foreground`	var(--interlace-warning-foreground)(alias)	var(--interlace-warning-foreground)(alias)
`--window-control-close`	var(--interlace-window-control-close)(alias)	var(--interlace-window-control-close)(alias)
`--window-control-minimize`	var(--interlace-window-control-minimize)(alias)	var(--interlace-window-control-minimize)(alias)
`--window-control-zoom`	var(--interlace-window-control-zoom)(alias)	var(--interlace-window-control-zoom)(alias)