# dub.co

Source: https://dub.co/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, calm, trustworthy, technical, confident, friendly
Colors: #fafafa, #d2d2d2, #b3b3b3, #8f8f8f, #070707, #757474, #4d4d4d, #2a2a2a
Type (h1): satoshi · 48px/55.2px · 500 — "Turn clicks into revenue"
Type (h2): satoshi · 48px/48px · 500 — "It starts with a link"
Type (h3): Inter · 14px/20px · 500 — "Product"
Type (body): Inter · 20px/28px · 400 — "Dub is the modern link attribution platform for short links, conversion tracking"
Type (small): Inter · 12px/16px · 500 — "Introducing our Startup Program"
Type (button): Inter · 14px/20px · 400 — "Sign up"
Button (primary): "Sign up" — fill #000000, text #ffffff, radius 8px, border 1px, padding 0px 16px, height 32px, type 14px/400
Button (secondary): "Product" — text #404040, radius 8px, border 0px, padding 0px 12px, height 32px, type 14px/500
Radii: 8px (28), 12px (28), 9999px (14), 6px (11), 2px (8)

## Images

- Hero (desktop): https://media.lvly.design/library/dub-co/hero.webp?v=d09f7cf6
- Page crop (mid-1): https://media.lvly.design/library/dub-co/mid-1.webp?v=43267253
- Page crop (mid-2): https://media.lvly.design/library/dub-co/mid-2.webp?v=16c334e3
- Hero (mobile): https://media.lvly.design/library/dub-co/mobile-hero.webp?v=e8798ae5
- Full page (desktop): https://media.lvly.design/library/dub-co/full.jpg?v=34a454e9
- Full page (mobile): https://media.lvly.design/library/dub-co/mobile-full.jpg?v=32ef11cc
- Clip preview (mp4): https://media.lvly.design/library/dub-co/video-xwbzil.preview.mp4?v=2625849f

Dub's landing page is the near-white, black-ink dev-tool landing at its most disciplined: a `#fafafa` ground (95% of the pixels) with a faint hairline grid behind the hero, a single 48px Satoshi medium headline ("Turn clicks into revenue") sitting over a 20px Inter gray lede, and exactly one solid black pill-adjacent button beside a bordered ghost twin. Color is rationed to the product itself — the funnel chart's blue→violet→teal flow, the three small tinted category icons above the app frame, a green "Learn more" link — so the chrome stays monochrome and the screenshots read as the only saturated thing on the page. Product shots are framed in a soft rounded card with a faint radial tint bleeding out behind them; feature trios are separated by 1px vertical rules rather than boxes; a testimonial sits on a dotted-paper panel with the customer's logo, name and avatar right-aligned. The whole thing feels engineered rather than decorated, and the restraint is what makes the one black CTA feel decisive.

## Steal-worthy details

- The announcement pill above the H1 is split by a 1px vertical rule into label + "Learn more ↗" — two actions, one capsule, no second color.
- Hero background: a hairline square grid that fades out at the edges, framed by two thin vertical page-margin rules (~1080px column) that run down the entire page and tie every section to the same gutter.
- The app screenshot's frame: 12px-radius card, 1px border, plus a very soft pastel radial glow behind it — depth from tint, not from a heavy drop shadow.
- Category chips above the product frame ("Affiliate Programs", "Conversion Analytics", "Short Links") each carry a 16px icon on a coloured rounded square — the icon tile does the color work so the chip text can stay black on gray.
- The conversion funnel: three KPI columns (Clicks · Leads · Sales) with the metric big and the label small, a flowing ribbon narrowing beneath them, percent labels in white pills sitting on the ribbon at each step.
- Feature trio divided by vertical hairlines, active item marked with a short green left border and a green link; the inactive two fade to lighter gray — a horizontal stepper disguised as a feature row.
- Pull-quote section on a dotted-grid ground: 32px medium quote left, brand logo + name + role + circular avatar stacked right-aligned in the last column.
- Buttons are short (32px) with 8px radius, 14px regular weight — the primary is solid black on white text, the secondary a 1px border on white; both sit on the same baseline with a 16px gap.

## Style recipe

Build a light SaaS site on a `#fafafa` page ground with white (`#ffffff`) cards and 1px borders in `#e5e5e5`; body text `#525252`–`#737373` on near-black `#171717` headings. Headings in a geometric grotesk (Satoshi or Geist), weight 500, 48px/1.15 for the H1, no letter-spacing tweaks; body and UI in Inter 400 at 14–20px. Use exactly one accent for controls: solid black (`#000000`) primary buttons with white text, 32px tall, 8px radius, 14px regular; secondary buttons are white with a 1px border. Reserve saturated color (blue `#3b82f6`, violet `#a855f7`, teal `#14b8a6`, green `#16a34a`) for data visualisations, small icon tiles and active-state links only — never on chrome. Radii: 8px for controls, 12px for cards and frames, 9999px for pills and avatars. Draw structure with hairlines: a faint square grid or dot grid on hero and quote backgrounds that fades at the edges, two thin vertical rules marking the content column across the whole page, and vertical dividers between sibling items instead of boxes. Product screenshots go in a 12px-radius bordered frame with a soft pastel radial glow behind it; avoid heavy drop shadows. Keep generous vertical rhythm (120–160px between sections), center the hero copy, and left-align everything below it. Tone: quiet, precise, engineered — every element earns its pixel.