DandyLine — Color System

01

The 12 Tokens

Every color in the system defined as a CSS custom property on :root. Use these variables everywhere — never hardcode a hex value in product code. This ensures a single source of truth for global color changes.

Gold

--gold

#D4A853

Primary brand

Gold Light

--gold-lt

#F0C96A

Hover / highlight

Gold Dark

--gold-dk

#A07830

Pressed / on-gold text

Cream

--cream

#F5F0E8

Primary text

Oat

--oat

#C8B89A

Secondary text

Sky

--sky

#8BAEC8

Links / filaments

Sage

--sage

#7A9E7E

Success / growth

Purple

--purple

#6B5B8A

Premium / depth

Amber

--amber

#C4704A

Warnings / energy

Pink

--pink

#C48CA0

Care / softness

Navy

--navy

#0B1520

Card surfaces

Background

--bg

#020710

Page background

All 12 tokens are defined as CSS custom properties on :root in brand-shared.css. Reference them as var(--gold), var(--sky), etc. Never use hex values directly in product or UI code.

02

The Gold Family

Gold is the primary brand color and the only color that appears everywhere — mark, wordmark, CTAs, active states, and brand moments. The three-stop system (dark, base, light) covers every interaction state without needing additional colors.

Gold Dark

--gold-dk · #A07830

Pressed states · Text on gold backgrounds · Stem gradients (base)

Gold · Primary

--gold · #D4A853

Default CTAs · Active nav indicators · The mark orb · Brand wordmark

Gold Light

--gold-lt · #F0C96A

Hover states · Seed orb glow · Specular highlights · Focus rings

Gold Usage Rules

Always use on dark

Gold is designed for dark backgrounds only (#020710, #0B1520). On light or cream surfaces, use --gold-dk (#A07830) for body text legibility — full gold washes out at small sizes on light.

One accent per surface

Use only one gold tone as the dominant accent per card or section. Gold-lt should appear only in hover/glow states — it feels too bright at rest. Let the base gold carry the visual weight.

Never as body copy

Don't use any gold tone for long-form reading text. Use --cream (--tb) or --oat (--tm) instead. Gold reserved for labels, highlights, active indicators, and brand marks only.

03

Accent Colors

Seven supporting colors that handle specific semantic roles — link states, success feedback, tags, feature categories, and emotional tone. Each accent has a defined purpose and should not be used interchangeably with the others.

Sky

--sky · #8BAEC8

Links · Filament tips on mark · Info states · Secondary CTA borders

Sage

--sage · #7A9E7E

Success states · Growth / health tags · Positive metrics · Vault "blooming" indicators

Purple

--purple · #6B5B8A

Premium features · Grandparent / legacy tier · Deep memory moments

Amber

--amber · #C4704A

Warnings · Urgent nudges · Retry states · High-energy moments

Pink

--pink · #C48CA0

Care · Warmth · Parent emotional moments · Gifting context

Oat

--oat · #C8B89A

Secondary text · Chip labels · Inactive tags · Soft borders

Cream

--cream · #F5F0E8

Primary body text · Light background base · Paper-mode surfaces

Accent colors are never used as backgrounds in the dark-mode app shell — they appear as text, icon fills, chip borders, and tag indicators only. On paper-mode (light) surfaces, use at reduced opacity (20–30%) or shifted to a darker variant to maintain legibility.

04

Background Foundations

Two near-black values form the entire dark-mode shell. The difference is subtle but deliberate — Navy is warm and slightly blue-shifted for card surfaces, BG is near-pure black for the page void. Never swap them.

Card surface · Overlay · Modal

Navy

--navy · #0B1520

Used for card backgrounds, modal surfaces, sidebar panels, and elevated elements that need to read as "raised" above the page background. It's warmer and slightly more saturated than BG — enough to create depth without a harsh line.

Page void · Shell bg · Stage

Background

--bg · #020710

The outermost page background. Almost pure black with a subtle blue undertone that keeps it from feeling flat. All content, cards, and panels float above this. Never use it as a card surface — it will collapse depth and make elements feel embedded rather than raised.

Overlay System

All overlays, dimming layers, and modal scrims are built from rgba(2,7,16, α) — the BG color at reduced opacity. This keeps overlays tonally consistent with the brand palette rather than pure black.

Light scrim

rgba(2,7,16, 0.30)

Modal backdrop

rgba(2,7,16, 0.55)

Deep overlay

rgba(2,7,16, 0.78)

Nav blur

rgba(2,7,16, 0.92)

05

Text Opacity System

Instead of defining four separate gray colors, DandyLine uses a single cream base (#F5F0E8) at four opacity levels. This means text always feels tonally warm — never cold gray — and every shade works at all zoom levels and rendering conditions.

Body copy, headings, primary labels

--tb

High — Body text

rgba(245,240,232, 0.93)

Secondary info, card subtitles, descriptions

--tm

Mid — Secondary

rgba(245,240,232, 0.68)

Labels, captions, metadata, timestamps

--td

Dim — Labels

rgba(245,240,232, 0.42)

Decorative, dividers, placeholder text

--tvd

Very Dim — Decorative

rgba(245,240,232, 0.18)

When to Use Each Level

--tb · Body text (93%)

All paragraph text, primary headings, key data values, CTA labels, and any text that needs to be read immediately without effort. This is the default for anything the user must read.

--tm · Secondary (68%)

Card subtitles, section descriptions, supporting context, and helper text that adds depth but isn't the primary focus. The most versatile level — used heavily in cards and detail pages.

--td · Dim labels (42%)

Column headers in tables, small metadata tags, timestamps, form field labels, section eyebrow text. Reads as clearly intentional — not faded — but doesn't compete with body content.

--tvd · Very dim (18%)

Decorative dividers, placeholder text, inactive nav items, subtle border text, and background pattern elements. At this opacity on --bg, it's barely perceptible — intentionally atmospheric rather than legible.

The cream base (#F5F0E8) was chosen because it reads warm-white rather than cold-white on the near-black background. This prevents the eye fatigue of pure white (#fff) text on very dark backgrounds while maintaining maximum contrast at the --tb level.