dub.co

Dub - The Modern Link Attribution Platformsaved 26d ago · captured 26d ago

Eight details, eight pinned.

View as Markdown ↗

Colors8 colors · ground #FAFAFA

ground#fafafa·94.66%#d2d2d2·3.09%#b3b3b3·0.89%#8f8f8f·0.38%#070707·0.27%#757474·0.26%#4d4d4d·0.14%#2a2a2a·0.12%

Sized by coverage · click to copy.

Typography2 families · 5 styles · satoshi, Inter

Turn clicks into revenue

satoshi · 48/55 · 500 · normal

It starts with a link

satoshi · 48/48 · 500 · normal

Product

Inter · 14/20 · 500 · normal

Body

Dub is the modern link attribution platform for short links, conversion tracking

Inter · 20/28 · 400 · normal

Small

Introducing our Startup Program

Inter · 12/16 · 500 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsSign up2 styles

Sign upProduct

primary · fill #000000 · label #ffffff · radius 8px · border 1px · padding 0px 16px · height 32px · type 14px / 400

secondary · fill — · label #404040 · radius 8px · border 0px · padding 0px 12px · height 32px · type 14px / 500

Shape5 radii · 89 uses

8px28 uses · 31%

12px28 uses · 31%

9999px14 uses · 16%

6px11 uses · 12%

2px8 uses · 9%

AnalysisDub'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 me…

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.

Style recipeBuild 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.

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.

Details8 worth noting

dub.co — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Split announcement pill
The announcement pill above the H1 is split by a 1px vertical rule into label + "Learn more ↗" — two actions, one capsule, no second color.
2Hairline grid and margin rules
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.
3Softly glowing screenshot frame
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.
4Category chips with tinted icon tiles
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.
5Three-column conversion funnel
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.
6Feature trio as hidden stepper
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.
7Pull-quote on dotted-grid ground
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.
8Short black-and-outline button pair
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.

saas · landing · light · minimal, corporate-clean · calm, trustworthy, technical, confident, friendly

dub.co

More like this