Foundations / Color

Color.

One brand accent — deep jade. Warm-neutral surfaces. No secondary color hierarchy in the product palette; accents come from a single brand color. The marketing palette adds cobalt and yellow but never appears in product UI.

Product palette

Live in the dashboard. Light defaults to warm cream; dark is jade-tinted near-black. Toggle the theme in the header to compare — every swatch below updates.

--bg

Page background — warm cream in light, near-black in dark.

bg-muted

--bg-muted

Hover, subtle fills. One step down from page background.

--fg

Primary text. Deep jade in light, white in dark.

fg-muted

--fg-muted

Captions, secondary labels, deactivated text.

border

--border

Hairline borders. The only stroke weight in the system: 1px.

input-border

--input-border

Form fields — slightly stronger than --border for affordance.

primary

--primary

Primary action surface (e.g. main button). Inverted in dark mode.

primary-fg

--primary-fg

Foreground for primary surfaces.

brand

--brand

The single brand accent — deep jade. Lifts in dark for legibility.

brand-fg

--brand-fg

Foreground when over the brand color.

destructive

--destructive

Destructive actions — bright orange in both modes.

ring

--ring

Focus ring — same as brand.

card

--card

Card surface — same as page background by default (border-only cards).

popover

--popover

Floating surfaces — popover, tooltip, dropdown menus.

Light / dark pairs

Both theme hex values for every product semantic token. Use this table when porting to a stack-agnostic theme system — the swatches above only render the active theme.

Token

Light

Dark

Role

--bg

#faf9f5

#0f1412

Page background — warm cream in light, near-black in dark.

--bg-muted

#f1efea

#191f1d

Hover, subtle fills. One step down from page background.

--fg

#123b38

#ffffff

Primary text. Deep jade in light, white in dark.

--fg-muted

#6e8180

#819896

Captions, secondary labels, deactivated text.

--border

#ebeae5

#1e2928

Hairline borders. The only stroke weight in the system: 1px.

--input-border

#c0cecd

#1e2928

Form fields — slightly stronger than --border for affordance.

--primary

#24251d

#ffffff

Primary action surface (e.g. main button). Inverted in dark mode.

--primary-fg

#ffffff

#000000

Foreground for primary surfaces.

--brand

#2b5f5b

#46b9af

The single brand accent — deep jade. Lifts in dark for legibility.

--brand-fg

#ffffff

#000000

Foreground when over the brand color.

--destructive

#ff4000

Destructive actions — bright orange in both modes.

--ring

#2b5f5b

#46b9af

Focus ring — same as brand.

--card

#faf9f5

#0f1412

Card surface — same as page background by default (border-only cards).

--popover

#ffffff

#161d1a

Floating surfaces — popover, tooltip, dropdown menus.

Base palette

Named brand primitives — the single source of every brand hex value. Product semantic tokens (above) and marketing aliases (below) both reference these. Update a value here and the rest of the system follows.

dash-cobalt

--dash-cobalt

The dominant marketing brand color (~33k uses in Figma). Reserved for marketing surfaces.

dash-cobalt-deep

--dash-cobalt-deep

Pressed/hover state for cobalt on marketing surfaces.

dash-periwinkle

--dash-periwinkle

Cobalt tint — light marketing surfaces and accents.

dash-mist

--dash-mist

Cool blue-gray neutral for marketing surfaces.

dash-cream

--dash-cream

Warm cream — alternative marketing surface (the product uses #FAF8F1, slightly warmer).

dash-white

--dash-white

Pure white. Used for popover surfaces in light mode.

dash-yellow

--dash-yellow

Electric highlight — sparing only. Pulls focus to one element per surface.

dash-yellow-glow

--dash-yellow-glow

The yellow-highlight focus glow. Used as box-shadow alpha layer.

dash-jade

--dash-jade

The product brand accent. Single most-referenced color in product UI.

dash-jade-deep

--dash-jade-deep

Body text on light surfaces. Carries weight without aggression.

dash-jade-lifted

--dash-jade-lifted

Lifted jade — the accent on dark marketing surfaces (and product --brand in dark). Legible jade on near-black.

dash-ink

--dash-ink

Warm near-black for marketing deck covers and brand-book backgrounds.

dash-graphite

--dash-graphite

Warm gray for marketing body copy and disclaimers.

dash-graphite-soft

--dash-graphite-soft

Soft warm gray — lightest neutral for tertiary marketing text.

Marketing aliases

Semantic --m-* names for marketing surfaces (auth screens, decks, billboards). Each is an alias of a base primitive — never assign a hex directly.

m-cobalt

--m-cobalt

Alias of --dash-cobalt. Marketing brand color.

m-cobalt-deep

--m-cobalt-deep

Alias of --dash-cobalt-deep. Pressed/hover for marketing cobalt.

m-lavender

--m-lavender

Alias of --dash-periwinkle. Light marketing surface.

m-cobalt-dust

--m-cobalt-dust

Alias of --dash-mist. Cool blue-gray neutral.

m-cream

--m-cream

Alias of --dash-cream. Alternate cream surface.

m-yellow

--m-yellow

Alias of --dash-yellow. Highlight only — one element per surface.

m-jade

--m-jade

Alias of --dash-jade. Marketing jade medium — same as product --brand.

m-jade-deep

--m-jade-deep

Alias of --dash-jade-deep. Marketing jade deep — same as product --fg.

m-near-black

--m-near-black

Alias of --dash-ink. Warm near-black for marketing decks.

m-warm-fg

--m-warm-fg

Alias of --dash-graphite. Warm gray for marketing body copy.

Usage rules

Brand accent is single-use. Never combine product jade with marketing cobalt in the same surface.
Destructive is monochrome. Black on light, white on dark — never red. Restraint is the trust signal.
Yellow is highlight only. Pulls focus to one element per slide. Never a page background, never a button color.
Borders are barely-there. Always 1px, always --border. No 2px strokes, no colored borders.