01 — Palette

Color

Four ramps and one accent. The single rule that saves Claude — and humans — from getting TBR wrong: only one orange element per view should do real work.

Primitives

Ramps

Each ramp is centered on a base value with five lighter and five darker stops. Use semantic tokens in components — reach for primitives only when prototyping.

Brand

The single highlight. Used as accent, never as wallpaper.
10#FADFD5
20#F7C9B9
30#F3AE96
40#EF9372
50#EB784F
60#C14E25
70#9A3E1D
80#742F16
90#4D1F0F
100#2E1309
base#E75D2C

Gray

Cool — UI chrome: borders, disabled, secondary text on white.
5#F6F6F6
10#E2E2E2
20#CFCFCF
30#B8B8B8
40#A0A0A0
50#888888
60#5D5D5D
70#4B4B4B
80#383838
90#252525
100#161616
base#707070

Stone

Warm — editorial bars, quiet card surfaces, muted text on parchment.
10#E5E4E3
20#D3D1D0
30#BEBBB8
40#A8A4A0
50#928D89
60#67625E
70#534F4B
80#3E3B39
90#292726
100#191817
base#7C7671

Parchment

The publication’s paper. Default editorial background.
10#FDFDFC
20#FBFBFA
30#FAF9F8
40#F8F7F6
50#F6F5F3
60#CBCBC9
70#A3A2A1
80#7A7A79
90#515150
100#313130
base#F4F3F1
Tokens

Semantic colors

Prefer these in components. They encode intent, not values, so themes can shift without changing every consumer.

--tbr-bg-01Product surfaces — tables, forms, dashboards#FFFFFF
--tbr-bg-02Editorial pages — the default for article + feature surfaces#F4F3F1
--tbr-bg-03Cards on bg-02, side panels#E5E4E3
--tbr-bg-invertedHero blocks, dark footers#161616
--tbr-text-primaryBody + headlines#1A1A1A
--tbr-text-secondaryBylines, captions, metadata#707070
--tbr-text-tertiaryDisabled, very low emphasis#B0B0B0
--tbr-text-brandLinks, eyebrows, accent words#E75D2C
--tbr-border-lightHairlines within cards#E6E6E6
--tbr-border-defaultInputs, card outlines#CFCFCF
--tbr-accent-highlightThe one orange — CTAs, active state, links#E75D2C
--tbr-accent-highlight-subtleTag backgrounds, low-emphasis badges#FADFD5