Foundations

Colors & tokens

The semantic color tokens, in light and dark.

Every color in lantern is a semantic CSS variable. Use the token, never a raw value — dark mode, the shadcn preset and your own themes all work by redefining these. Swatches below are live: toggle dark mode or the preset in the top bar.

Surfaces

--lantern-surface

--lantern-surface-raised

--lantern-surface-sunken

--lantern-surface-hover

Text

--lantern-fg

--lantern-fg-muted

--lantern-fg-subtle

Borders

--lantern-border

--lantern-border-strong

Brand

--lantern-primary

--lantern-primary-fg

--lantern-secondary

--lantern-secondary-fg

--lantern-accent

--lantern-accent-soft

--lantern-accent-fg

Status

--lantern-success

--lantern-warning

--lantern-danger

--lantern-info