The look. The feel.
The rules.
Tokens, components, and patterns that make NoReply look like NoReply. The current source of truth - if it's not here, it's not the system yet.
Brand chip palette
The six marker colours - Coral, Peach, Yellow, Lavender, Mint, Cream - each defined as a full OKLCH scale. Step 500 is the brand tone; 200-300 for soft chip backgrounds, 600-700 for interactive, 800+ for text on light.
Coral
OKLCH hue 28Peach
OKLCH hue 60Yellow
OKLCH hue 95Lavender
OKLCH hue 320Mint
OKLCH hue 170Cream
OKLCH hue 85Neutrals - chrome, borders, type (forest scale)
Editorial Cooper, friendly Nunito
Cooper Light handles every H1 and H2 for the editorial feel. Nunito covers body and UI. A rounded UI font handles the wordmark only.
font-cooper · Cooper Light
The quick brown fox.
font-cooper · scale
Aa - 60px
Aa - 48px
Aa - 36px
Aa - 30px
Aa - 24px
font-sans · Nunito (body + UI)
The quick brown fox jumps over the lazy dog. 0123456789. {} [] /\ & @ # $ %.
Smaller text used for secondary copy and metadata.
font-rounded · system rounded
NoReply
Marker tag chips
A small rotated coloured pill that sits above headings. 2px corner radius, hand-placed rotation per instance via --chip-rotate.
Usage
<span
className="tag-chip tag-chip-coral"
style={{ "--chip-rotate": "-1.5deg" } as React.CSSProperties}
>
Eyebrow text
</span>Marker highlights
A solid colour band painted behind text with subtle rounded corners. Multiply blend lets the paper speckle show through.
Get your money back in minutes.
Less than a coffee a week.
Backed by UK consumer law.
The savvy friend who reads the small print.
Refunds, in about three weeks.
Buttons
Hit target ≥ 44px on mobile. Use lg for primary CTAs on landing pages, default for in-app actions, sm for toolbars and dense UI.
Inputs
44px on mobile (touch target), 40px on desktop. 16px text on mobile to prevent iOS zoom. Coral focus ring.
Cards and elevation
Hairline borders + stacked shadows. Inner radius equals outer radius minus padding.
shadow-xs
Default surface for inline cards and inputs.
shadow-md
Floating menus, popovers, the mega-menu panel.
deep stack
Auth card. Stacked shadow for the page's primary surface.
Paper speckle
Two SVG-tile speckle variants. Faint sits on the page wrapper outside the rail; medium lives inside marketing sections.
Animation tokens
Use these tokens before reaching for inline cubic-beziers. Animations honour prefers-reduced-motion globally.
- --ease-defaultcubic-bezier(0.4, 0, 0.2, 1)
- --duration-fast150ms
- --duration-normal200ms
- --duration-slow300ms
Where to dig deeper
The system lives in code. These are the files to read or grep.
app/globals.cssTokens, primitives, marker, tag-chip, paper-speckle, marketing-section utilitiesCLAUDE.mdBrand voice, Charlie character, design quality & motion mandatesAGENTS.mdQuick reference for automated agentscomponents/ui/*All shadcn primitives - button, input, card, dialog, etc.