One palette. One voice. Rendered live.
Everything on this page is drawn from assets/bt-tokens.css: the same custom properties the site uses. Change a token, and this page and the site change together.
Navy ground. Cobalt action. Champagne emphasis.
Navy and ink are the grounds. Cobalt is the brand blue: links, buttons, the active state. Bright is reserved for eyebrows on dark and focus rings. Champagne carries the italic word on dark; bronze does the same job on paper. Emerald means one thing only: live, positive, NAV. Use as var(--bt-color-cobalt).
--bt-color-navy · #021534Hero and deep panels.--bt-color-ink · #010B20The darkest ground. Footer, desk.--bt-color-cobalt · #025CBDPrimary buttons, links, eyebrows on paper.--bt-color-bright · #0EA5E9Eyebrows on dark. Focus ring.--bt-color-champagne · #E8C97AItalic emphasis on dark.--bt-color-bronze · #B38E5DItalic emphasis and rules on paper.--bt-color-paper · #FBFBF8The default light ground.--bt-color-emerald · #34D399NAV, “positive”, live dots. Nothing else.--bt-color-deep · #012F6BCobalt hover.--bt-color-text · #111827Body on paper.--bt-color-text-2 · #2C3340Secondary body.--bt-color-text-3 · #5B6470Captions, chips.--bt-color-off · #F5F4EEAlternate section ground.--bt-color-blue-ice · #EFF5FDHighlighted cards.--bt-color-up · #0A7A4APositive text on paper.--bt-color-down · #B91C1CErrors, negative text.Serif says it. Sans explains it. Mono labels it.
Cormorant Garamond for headlines, weight 400, with exactly one italic emphasis in the brand blue (or champagne on dark). Inter for everything a person reads at length. JetBrains Mono, uppercase and tracked, for eyebrows, chips and data. Sizes are fluid clamps; use var(--bt-text-h2), never a literal.
--bt-text-displayclamp(48px, 6.4vw, 92px)--bt-text-h1clamp(40px, 5vw, 68px)Every edge, settled by morning.
--bt-text-h2clamp(32px, 4vw, 52px)--bt-text-h3clamp(24px, 2.6vw, 34px)--bt-text-ledeclamp(18px, 1.6vw, 22px) · 300--bt-text-body15px · 1.7--bt-text-eyebrow10px · .24em · uppercaseA 4-pixel grid. Twelve stops.
Section padding is --bt-space-12 (120px) on desktop and 72px under 768px. Cards sit on --bt-space-5 to --bt-space-6. Radii are small on purpose: 2px buttons, 4px panels, 12–14px cards, and a full pill only for floating controls. Containers: 1400 / 1080 / 860px with a 40px gutter (24px on phones). Reading measure: 72ch.
buttons, chips
panels, tables
callouts
cards
doors
floating controls
Quiet, quick, and earned.
Hover states move in 150–250ms. Buttons take 300ms. Scroll reveals take 800ms on the reveal curve with an 80ms stagger. Nothing loops except live data, and everything respects prefers-reduced-motion. Hover the cards to see each curve.
--bt-dur-fast: 0.15s
--bt-ease-standard: cubic-bezier(.4,0,.2,1)--bt-dur-base: 0.25s
--bt-ease-lift: cubic-bezier(.2,.8,.2,1)--bt-dur-reveal: 0.8s
--bt-ease-reveal: cubic-bezier(.2,.9,.3,1)Sentence case. Specific verbs.
One primary per view. Labels say what happens next: “Book 15 minutes”, “Get the diligence package”, “Read the thesis”. Three states are shown for each: rest, hover and focus-visible. Disabled is 45% opacity and never the only way forward.
A mono title bar, a serif claim, a plain-English line.
Every panel on the site shares this chrome: a title bar in mono with a live dot when the data is real, a serif headline with one italic emphasis, a short body, a bronze-ruled “Plain English” translation, and a chip row for the facts. The same panel in both grounds.
Our AI knows what the game should cost.
A prediction market quotes 58¢ for the home team. CHUNKER has worked out what that price should be since 2020. Lineups, injuries, pace, rest and the live score become a fair price that updates every second the game is on.
Our desk stands in the middle and earns the gap.
Eight agents post a price to buy and a price to sell on thousands of sports markets, all night. Traders get someone on the other side; the desk keeps the few cents between its two prices.
Tokens are additive: bt-tokens.css declares --bt-* names and aliases the legacy --bt-blue, --bt-paper, --serif names to the same values, so it loads safely next to bt-design.css.