Dub
dub.coThe reference for open-source link-attribution platform — pure black/white monochrome with Satoshi + Inter, real dashboard hero, dotted-grid integration map, 48-keyframe motion library.
Design tokens
- display
- satoshi, 'satoshi Fallback', system-ui, sans-serif (free Indian Type Foundry)
- body
- Inter, 'Inter Fallback', system-ui, sans-serif
- mono
- (none on captured page)
Do / Don't
Reference it for
- Pure black + pure white extreme monochrome with one accent colour (orange #fb923c)
- Inter + Satoshi two-family — both free fonts with metric-matched Fallback variants
- Real Dub product dashboard in hero — actual UI rendered with mock data
- 3-category tab demo with colour-coded icons (orange / green / purple)
- 48 CSS keyframes — heaviest CSS-only motion library in the captures
- Asymmetric top-rounded radii (20px 20px 0 0 and 12px 12px 0 0) for cards extending to bottom edges
- Dotted-grid background pattern for integration section depth
- 2 box-shadows — flat depth, monochrome carries
Do not copy
- The Dub.co wordmark
- The "Introducing Partner Referrals" announcement
- The Perplexity co-founder testimonial
- The "Turn clicks into revenue" copy
- The dub-specific product dashboard screenshots
- The specific integration logos (Shopify, Slack, WordPress, Stripe, Mailchimp, Zapier)
- The orange #fb923c exact hue if borrowing for a non-affiliate brand
Signature moves
extreme monochrome with one accent and real dashboard hero
pure black-and-white with a single orange #fb923c accent frames a real product dashboard rendered with mock data, plus a category-tab demo with colour-coded icons.
asymmetric top-rounded cards on dotted grid
cards extending to bottom edges use asymmetric top-rounded radii (20px 20px 0 0 and 12px 12px 0 0) over a dotted-grid background pattern for the integration section.
composable CSS keyframe motion vocabulary
a 48-keyframe CSS-only library (pulse-in / scale-in-fade / slide-*-fade) at a 300ms signature gives a composable, framework-free motion vocabulary.
Related references
Adaline
strongDeveloper Tool
an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.
Homerun
strongHr Platform
The reference for friendly HR/recruiting platforms with chunky 70s-display typography — warm cream + brown text + saturated CTA, real product UI in hero, pink customer-love mode-flip.
Slack
flagshipSaas Product
a post-Salesforce-acquisition product flagship where the iconic aubergine `#611f69` survives as the primary CTA, Salesforce-Sans replaces Lato, and a 30-keyframe motion library powers the "workspace-people-bump" avatar animations that have always been Slack's brand signature.
Clerk
strongDeveloper Tool
The reference for auth-platform / dev-tools at peak monochrome restraint — pure black on white, Suisse + Geist Numbers + Söhne Mono, letter-reveal hero animation.