Dub
Quiet, neutral marketing UI — Satoshi headlines over Inter body copy, hairline borders and a 1080px column framed by vertical rules. The base style of this archive.
dub.coExtracted 26 Oct 2026 from
../dittu-out/dub.co
Notes
Why it works
- Two-font pairing. Satoshi (500, tight tracking) for every headline, Inter for everything else. Body copy sits at 18–20px in
content-subtle(#737373), so headlines carry the contrast. - Semantic tokens, not raw greys. Colours are named by role —
bg-muted,border-subtle,content-emphasis— and stored as bare RGB channels (--bg-default: 255 255 255) so Tailwind v3 can add alpha. - Frame, then fill. The page is a 1080px column between two full-height 1px rules. Sections are separated by full-width horizontal rules rather than whitespace alone.
- Black primary, white secondary. Primary buttons are
bg-invertedwith white text; secondary ones are white with aborder-subtleoutline and a 1px shadow. Both use an 8px radius. - Texture is faint. A 60px grid behind the hero, dotted panels behind quotes, a radial glow behind product shots — all at 4–5% opacity.
- Colour only marks products. Partners is violet, Analytics green, Links orange: small rounded-square icons next to section labels. Everything else is neutral.
Used in this archive
src/styles/global.css carries the same token names, so dub-ui markup can be pasted in unchanged. See docs/design-system.md.
- saas
- marketing
- neutral
- tailwind
Typography
Fonts captured by dittu, self-hosted here for specimens.
GeistMono100 900
Aa Gg 123
The quick brown fox jumps over the lazy dog.
300400500600700
geistmono-100-900.woff2satoshi300 900, 700
Aa Gg 123
The quick brown fox jumps over the lazy dog.
300400500600700
satoshi-300-900.woff2Inter100 900
Aa Gg 123
The quick brown fox jumps over the lazy dog.
300400500600700
inter-100-900.woff2paperMono100 800
Aa Gg 123
The quick brown fox jumps over the lazy dog.
300400500600700
papermono-100-800.woff2font-family declarations
Inter×21"Rowan"×3ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji×2ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji×2GeistMono×1satoshi×1satoshi Fallback×1Inter Fallback×1Rowan, serif×1paperMono×1
Font sizes in the CSS
7pxDub — the quick brown fox0.75remDub — the quick brown fox13pxDub — the quick brown fox0.8125remDub — the quick brown fox0.875remDub — the quick brown fox14pxDub — the quick brown fox15pxDub — the quick brown fox0.95remDub — the quick brown fox1remDub — the quick brown fox16pxDub — the quick brown fox1.125remDub — the quick brown fox1.25remDub — the quick brown fox1.5remDub — the quick brown fox1.875remDub — the quick brown fox2remDub — the quick brown fox2.25remDub — the quick brown fox2.5remDub — the quick brown fox3remDub — the quick brown fox
Colour tokens
Custom properties whose value is a colour, grouped by prefix.
--bg-*
--border-*
--content-*
--background-*
--primary-*
--accent-*
--gray-*
--color-*
--twoslash-*
--other-*
Colours in use
Every colour literal in the captured CSS, by how often it appears.
Radius & shadow
50%0.5rem0.375rem0.75rem0.25rem9999px0.3125rem100%1rem10px11px12pxPages
Reference screenshots from the clone (12 of 20 pages). Click for the full page.
