Semantic Variables

Semantic variables are runtime CSS variables. They do not generate Tailwind utilities in V0.

Paper

Paper is the default :root mapping.

Surfaces

--surface-canvas

var(--color-surface-0)

--surface-panel

var(--color-surface-1)

--surface-elevated

var(--color-surface-2)

--surface-subtle

var(--color-surface-3)

--surface-muted

var(--color-surface-4)

Text

--text-primary

var(--color-neutral-950)

--text-secondary

var(--color-neutral-700)

--text-muted

#6b6252

--text-inverse

var(--color-surface-2)

--text-accent

var(--color-lavender-700)

Accent

--accent-primary

var(--color-lavender-500)

--accent-primary-hover

var(--color-lavender-700)

--accent-primary-active

var(--color-lavender-800)

--accent-soft

var(--color-lavender-100)

--accent-contrast

var(--color-lavender-950)

--accent-contrast-hover

var(--text-inverse)

--accent-contrast-active

var(--text-inverse)

Status

--status-success

var(--color-success-500)

--status-success-fg

var(--color-success-700)

--status-success-bg

var(--color-success-50)

--status-success-border

var(--color-success-700)

--status-warning

var(--color-warning-500)

--status-warning-fg

var(--color-warning-700)

--status-warning-bg

var(--color-warning-50)

--status-warning-border

var(--color-warning-700)

--status-danger

var(--color-danger-500)

--status-danger-fg

var(--color-danger-700)

--status-danger-bg

var(--color-danger-50)

--status-danger-border

var(--color-danger-700)

--status-info

var(--color-info-500)

--status-info-fg

var(--color-info-700)

--status-info-bg

var(--color-info-50)

--status-info-border

var(--color-info-700)

Ink

The same semantic names are overridden under .dark. Ink also flattens semantic card and panel depth through --shadow-none.

Dark surfaces

--surface-canvas

#121019

--surface-panel

#191623

--surface-elevated

#211d2e

--surface-subtle

#2a2635

--surface-muted

#373142

Dark text

--text-primary

#f7f1e6

--text-secondary

#d7cdbc

--text-muted

#aa9e8b

--text-inverse

var(--color-neutral-950)

--text-accent

var(--color-lavender-300)

Dark accent

--accent-primary

var(--color-lavender-300)

--accent-primary-hover

var(--color-lavender-200)

--accent-primary-active

var(--color-lavender-100)

--accent-soft

rgb(156 143 217 / 0.18)

--accent-contrast

var(--color-lavender-950)

--accent-contrast-hover

var(--accent-contrast)

--accent-contrast-active

var(--accent-contrast)

Neo-Brutal Light and Dark

Neo-Brutalism uses the same semantic and reading names through the opt-in brutal.css entry. .brutal activates Neo Light; .brutal.dark activates Neo Dark. Sticker colors remain fixed across schemes, including pure white text on #3D5AFE blue.

The family also remaps --radius-card, --radius-control, --shadow-card, and --shadow-panel, and remaps the foundation --border-width-surface / --border-width-control structure roles to --border-width-heavy. It does not alter the default Paper/Ink entry.

Use --text-muted for active muted UI copy such as helper text and metadata. A physical color utility such as text-neutral-600 can still serve decorative or explicitly fixed-color work, but it is not the default for semantic copy.

Names such as --surface-subtle, --surface-muted, and --accent-soft express family-relative intent. They do not promise the same alpha, literal color, or visual weight across Paper, Ink, Neo Light, and Neo Dark.

Interaction and status roles

Intent	Variables
Primary action foreground	--accent-contrast, --accent-contrast-hover, --accent-contrast-active
Neutral focus	--focus-ring-color, --focus-ring-shadow
Accent focus	--focus-ring-on-accent-color, --focus-ring-on-accent-shadow
Success	--status-success-fg, --status-success-bg, --status-success-border
Warning	--status-warning-fg, --status-warning-bg, --status-warning-border
Danger	--status-danger-fg, --status-danger-bg, --status-danger-border
Info	--status-info-fg, --status-info-bg, --status-info-border

Reading

The reading layer is for long-form prose. It inherits light and dark semantic colors and adds a font-relative measure for body copy.

Variable	Value / source
--reading-font-body	var(--font-reading)
--reading-font-heading	var(--font-reading)
--reading-measure	65ch
--reading-font-size	var(--text-lg)
--reading-line-height	var(--leading-reading)
--reading-letter-spacing	var(--tracking-normal)
--reading-paragraph-gap	1.2em
--reading-fg	var(--text-primary)
--reading-bg	var(--surface-canvas)
--reading-fg-muted	var(--text-secondary)
--reading-link	var(--text-accent)
--reading-code-bg	var(--surface-subtle)
--reading-focus	var(--focus-ring-color)
--reading-focus-shadow	var(--focus-ring-shadow)

Use --reading-measure for the body text column. Use --container-reading or --layout-prose-width for the outer layout shell.