The system.
Every page on this site uses the tokens and components below. When in doubt, start here.
Logo
A guardrail motif — one horizontal rail, three posts. The product defense in three strokes. Paired with a Fraunces wordmark.
16px
½ mark height on all sides
var(--brand) · #14482E
#FFFFFF
Fraunces 400, −0.02em tracking
Color
Warm cream ground, deep forest brand, warm amber accent. Semantic colors for positive / negative / info are used sparingly.
Typography
Fraunces for display moments, Inter for everything else, JetBrains Mono for numbers and code. No weight below 400.
.displayTrade with rules.h1A second opinion
h2Most decisions are rejections
h3Cheap filter, expensive judge
.leadA lead paragraph sits between the heading and the first body copy and carries the most weight after the title.
pBody copy defaults to 17px on cream. Line-height 1.6, weight 400. We avoid weight 300; readability matters more than elegance on a long page.
.smallSmaller copy for captions, metadata, and table cells. 15px, still fully readable.
.overlineSection eyebrowButtons & chips
One primary, one secondary, ghost for tertiary. Pill-shaped. The .btn-arrow modifier adds a subtle hover animation.
Cards
Four variants. Default for content, elevated for hero moments, outline for subtle grouping, dark for “this is serious.”
White surface, hairline border, 20px radius.
Layered shadow, no border. Use sparingly.
Transparent background, keeps the cream page tone.
For emphasis and trust moments.
Telegram bubbles
Three bubble kinds plus a decision card. Used in hero, features, and onboarding to show the product in its native form.
Spacing
Base unit is 4px. Use tokens, not raw pixels. Sections pad vertically with clamp(56px, 9vw, 112px).
--s-14px--s-28px--s-312px--s-416px--s-524px--s-632px--s-748px--s-864px--s-996px--s-10128pxStats
Large display numbers in brand color over an uppercase label. Use 2–4 in a row.