Lion Market · Design system

Gold accent — dual-pass zone

Same warm gold hue. Every candidate below passes WCAG AA-Large (≥ 3:1) against both white text and dark text, so either text color reads cleanly on the accent. Contrast ratios shown live on each card. The Current — Gold card is kept at the top for comparison; note the red chip for white-text contrast.

Dual-pass candidates · lightest → darkest

Current
01 · Ink Amber (current)
#d0820argb(208, 130, 10)
vs white3.05:1 · AA-L
vs dark5.78:1 · AA
PSA 10@handleon bg-000
Active brand accent from lib/theme.ts.
02 · Honey
#b97708rgb(185, 119, 8)
vs white3.68:1 · AA-L
vs dark4.80:1 · AA
PSA 10@handleon bg-000
Warm, inviting — middle-of-the-road brightness.
03 · Warm Honey
#ad6d07rgb(173, 109, 7)
vs white4.23:1 · AA-L
vs dark4.18:1 · AA-L
PSA 10@handleon bg-000
Balanced: both white and dark pass comfortably.
04 · Mustard
#a06407rgb(160, 100, 7)
vs white4.86:1 · AA
vs dark3.63:1 · AA-L
PSA 10@handleon bg-000
Deepest 'gold' feel — both ratios near AA.
05 · Deep Mustard
#955d06rgb(149, 93, 6)
vs white5.46:1 · AA
vs dark3.23:1 · AA-L
PSA 10@handleon bg-000
Leans brown — white text clears AA.
06 · Bronze
#8a5605rgb(138, 86, 5)
vs white6.15:1 · AA
vs dark2.87:1 · FAIL
PSA 10@handleon bg-000
Darkest edge — reads as deep gold / bronze.
Prev — Gold
#f3b950rgb(243, 185, 80)
vs white1.77:1 · FAIL
vs dark9.98:1 · AAA
PSA 10@handleon bg-000
Previous pick. Too light — white text failed.

Why this narrow band? White text needs a luminance ≤ 0.30 to reach 3:1. Dark text (#1f1712) needs a luminance ≥ 0.125. Anything outside that range fails one side or the other — regardless of hue.

Ready to pick? Tell me the name (e.g. “use Honey” or “use Burnt Orange”) and I'll swap --accent-brandand its companions. If the contrast with white works (≥ 4.5:1) I'll also flip text-on-accent back to white; otherwise it stays as dark ink.

Current tokens

What's wired up right now in globals.css.

Surfaces

bg-000#181916

App background

bg-100#22231f

Card / surface

bg-200#2f302a

Input / hover

bg-300#3c3d35

Pressed / active

Text

The quick brown fox
text-000#fbfaf2

Headlines

The quick brown fox
text-100#f1efe4

Body

The quick brown fox
text-200#c4bfaf

Secondary

The quick brown fox
text-300#a9a394

Tertiary

The quick brown fox
text-400#847f73

Muted

The quick brown fox
text-500#676259

Placeholder

Accent

accent-brand#d0820a

Backgrounds — buttons, badges, fills

accent-brand-deep#a26307

Pressed / hover state

accent-brand-tintrgb(208 130 10 / 0.15)

Pill / tinted badge bg

accent-brand-ink#ffffff

Text on accent bg

accent-brand-fg#f6bb52

Accent as foreground text on dark

Borders

border-200#33342d

Subtle divider

border-300#4b4a40

Strong divider