Semantic Variables

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

Light

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

var(--color-neutral-600)

--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-600)

--accent-primary-active

var(--color-lavender-700)

--accent-soft

var(--color-lavender-100)

--accent-contrast

var(--color-lavender-950)

Status

--status-success

var(--color-success-500)

--status-warning

var(--color-warning-500)

--status-danger

var(--color-danger-500)

--status-info

var(--color-info-500)

Dark

The same semantic names are overridden under .dark.

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