Foundation

Colors

The brand palette is the raw source; everything in the product styles against the semantic roles below so it stays correct in both themes. Each swatch lists its CSS variable with the hex and HSL it resolves to right now — toggle the theme in the toolbar to watch the semantic values flip.

Brand palette

The raw Placemakr brand colors. Style against the semantic tokens below — never these directly.

Pool
Var
--brand-pool
Hex
—
HSL
—
Cabana
Var
--brand-cabana
Hex
—
HSL
—
Midnight
Var
--brand-midnight
Hex
—
HSL
—
Duvet
Var
--brand-duvet
Hex
—
HSL
—
Linen
Var
--brand-linen
Hex
—
HSL
—
Chartreuse
Var
--brand-chartreuse
Hex
—
HSL
—
Peach
Var
--brand-peach
Hex
—
HSL
—
Limoncello
Var
--brand-limoncello
Hex
—
HSL
—
Nectar
Var
--brand-nectar
Hex
—
HSL
—

Surfaces

Background roles. These flip between light and dark themes.

Canvas
Var
--surface-canvas
Hex
—
HSL
—
Card
Var
--surface-card
Hex
—
HSL
—
Sunken
Var
--surface-sunken
Hex
—
HSL
—
Raised
Var
--surface-raised
Hex
—
HSL
—
Accent
Var
--surface-accent
Hex
—
HSL
—
Accent soft
Var
--surface-accent-soft
Hex
—
HSL
—
Selected
Var
--surface-selected
Hex
—
HSL
—
Inverse
Var
--surface-inverse
Hex
—
HSL
—

Text

Foreground roles for copy and interactive text.

Primary
Var
--text-primary
Hex
—
HSL
—
Secondary
Var
--text-secondary
Hex
—
HSL
—
Muted
Var
--text-muted
Hex
—
HSL
—
Interactive
Var
--text-interactive
Hex
—
HSL
—
On accent
Var
--text-on-accent
Hex
—
HSL
—
Disabled
Var
--text-disabled
Hex
—
HSL
—

Borders

Line roles from hairline separators to interactive emphasis.

Subtle
Var
--border-subtle
Hex
—
HSL
—
Default
Var
--border-default
Hex
—
HSL
—
Strong
Var
--border-strong
Hex
—
HSL
—
Interactive
Var
--border-interactive
Hex
—
HSL
—

Feedback

Status pairs — a soft surface plus its status text — for the info, success, warning, and danger states.

Info surface
Var
--feedback-info-surface
Hex
—
HSL
—
Info text
Var
--feedback-info-text
Hex
—
HSL
—
Success surface
Var
--feedback-success-surface
Hex
—
HSL
—
Success text
Var
--feedback-success-text
Hex
—
HSL
—
Warning surface
Var
--feedback-warning-surface
Hex
—
HSL
—
Warning text
Var
--feedback-warning-text
Hex
—
HSL
—
Danger surface
Var
--feedback-danger-surface
Hex
—
HSL
—
Danger text
Var
--feedback-danger-text
Hex
—
HSL
—

Theme color roles

The role layer the component library renders against — the bridge between the semantic brand tokens and the component color roles.

primary
Var
--color-primary
Hex
—
HSL
—
Cabana — interactive
secondary
Var
--color-secondary
Hex
—
HSL
—
Midnight fill
accent
Var
--color-accent
Hex
—
HSL
—
Pool — small objects
base-100
Var
--color-base-100
Hex
—
HSL
—
base-200
Var
--color-base-200
Hex
—
HSL
—
base-300
Var
--color-base-300
Hex
—
HSL
—
base-content
Var
--color-base-content
Hex
—
HSL
—