What makes Dub's design language stand out?

Dub is the rare link-management landing that decided open-source dev-tool marketing should look like premium SaaS without losing its developer credibility. We catalogued it because most link-shortener marketing reaches for either Bitly-corporate stock photography or generic dev-tool dark mode.

What fonts and palette does Dub use?

The type system is Inter. The palette sits on a light canvas around #000000, #E5E5E5, #525252 and #262626.

Can I transfer Dub's design language to my product?

The patterns transfer without cloning. Study inter at editorial body 14-18px with system fallback — proven choice for dev-tool brands that want platform respect without licensing premium grotesques. The ai2 Design brief packages Dub's tokens and rules as a paste-ready export for Claude, Cursor, or any coding agent.

Back to gallery

developer tools · saas

Dub

Open-source link management in Linear-school editorial discipline — Inter throughout, hairline-bordered plates, semantic blue, purple and green accents per feature category. Premium dev-tool marketing.

dub.coAdded 2026-05-17

Editorial note

This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.

Fair Use & Gallery Policy

FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Dub’s language, not just a screenshot.

Paste into your agent. No signup, no cost.

Dub's design language is editorial white with semantic multi-accent + hairline structural grid. Pure #ffffff canvas; #000000 text at extreme contrast; Inter throughout; semantic blue/purple/green accents per feature category; #e5e5e5 hairlines thread every layout cell. Vercel-tier discipline applied to link infrastructure.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (pure #ffffff ground, #000000 primary text dominant, #e5e5e5 hairline borders primary structural, #525252 secondary text, #262626 deep text emphasis, #a3a3a3 tertiary text, #ffffff secondary surface, #3b82f6 blue accent for links/active, #737373 muted tertiary, #a855f7 purple accent for premium signals, #16a34a green accent for success/confirm), Inter as sole typeface (sizes 8/11/14/16/18px catalogued, weights 400/500), tight 4px spacing 2/4/6/8/10/12/14/16, container ladder 512/532/576/672/800/1080, custom breakpoints sm=360 md=768 lg=1024 xl=1280 (sm=360 lowered), Framer Motion + 7 catalogued gradients (atmospheric depth zones). Treat blue/purple/green as semantic state colours not chromatic decoration. Apply the language, not the source brand's copy.

Layout: Hairline-bordered editorial plates on white canvas; nested container ladder for sidebar-and-body layouts.
Content width: Container ladder 512/532/576/672/800/1080.
Framing: Premium dev-tool marketing — Inter + hairlines + semantic accents.
Grid strength: Explicit hairline grid — #e5e5e5 borders structure every cell.

Pure white canvas with #000 text at extreme contrast; #e5e5e5 hairlines thread layout; semantic accents blue/purple/green.

Mode strategyLight-first canvas — dark variant compatible via inversion zones.

#ffffff dominant ground
#000000 primary text (~3,055 refs)
#e5e5e5 hairline border primary structural
#525252 secondary text
#262626 deep emphasis text
#a3a3a3 tertiary text
#3b82f6 blue accent (links, active)
#a855f7 purple accent (premium)
#16a34a green accent (success)
#737373 muted tertiary border

Gradients (paste-ready)

7 catalogued — atmospheric depth zones around hero, never decorative

Inter as sole typeface (custom-loaded)
Body 14-16px, secondary 11-13px, display 18-32px
Weight 400 body, 500 emphasis
Letter-spacing 0
Line-height 1.5 body, 1.05 display

4px base unit, scale 2/4/6/8/10/12/14/16
Section vertical rhythm 80-120px
Card padding 20-28px

Surface styleHairline-bordered plates. Every section uses #e5e5e5 1px border.

0 drop shadow on marketing chrome
1px #e5e5e5 hairline on every card
Atmospheric gradient zones for hero depth

Techniques

Hairline plate

bg white, 1px #e5e5e5 border, 8-10px radius, padding 20-28px.

Semantic accent badge

bg #3b82f6 at 10% opacity, text #3b82f6 full, 4-6px radius (or purple/green for premium/success).

Radii4 / 6 / 8 / 10 / 12Icon treatmentStroke 1.5px monoline, Inter-baseline aligned.Icon setsCustom monoline set, Lucide-adjacent

Buttons 6-10px radius
Cards 8-12px radius

Primary CTA
background
#000000
textColor
#ffffff
fontFamily
Inter, sans-serif
fontWeight
500
fontSize
14px
padding
10px 18px
borderRadius
8px
shadow
none
hover
background shifts to #262626
Tailwind
```
inline-flex items-center gap-2 rounded-lg bg-black px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-[#262626]
```
Hairline plate
background
#ffffff
border
1px solid #e5e5e5
borderRadius
10px
padding
24px
textColor
#000
Tailwind
```
rounded-[10px] border border-[#e5e5e5] bg-white p-6 text-black
```
Blue link/active accent
color
#3b82f6
textDecoration
none
fontWeight
500
hover
underline appears with 150ms ease
Tailwind
```
font-medium text-[#3b82f6] underline-offset-4 hover:underline
```
Premium signal badge
background
rgba(168,85,247,0.10)
textColor
#a855f7
fontFamily
Inter
fontSize
11px
padding
2px 8px
borderRadius
4px
textTransform
uppercase
fontWeight
500
Tailwind
```
rounded bg-[#a855f7]/10 px-2 py-0.5 text-[11px] font-medium uppercase text-[#a855f7]
```

LevelsubtleDurations150ms / 300ms

Easings

cubic-bezier(0.4, 0, 0.2, 1)

HoverCTA bg shift, Card border deepens, Link underline appears

Scroll patterns

Framer Motion fade + 8-12px translate on section entry

Motion is editorial pacing

Hover shifts colour, never position
Focus rings: 2px blue ring with 2px offset
Active state 95% opacity

Approachmobile-first

Custom: sm=360 md=768 lg=1024 xl=1280 (sm=360 lowered for mobile reading).

<360: 12-16px gutters
360-768: 512-576px content rail
768-1024: 672-800px content rail
≥1024: full ladder up to 1080px

Black on white passes WCAG AAA (21:1)
Blue #3b82f6 on white passes AA at 14px+
Purple #a855f7 on white passes AA at 18px+ (used carefully)
Focus visible always

Next.jsInter custom-loadedFramer Motion

Typography + hairline grid + semantic accents = identity. Minimal illustration.

Inter preloaded woff2
Framer Motion scoped to section reveals
Atmospheric gradient zones composed as CSS

Use Inter for every typographic moment
Reserve blue #3b82f6 for links/active states
Reserve purple #a855f7 for premium/upgrade signals
Reserve green #16a34a for success/confirmation

Don't paint button backgrounds in accent colours
Don't widen container ladder beyond 1080px
Don't substitute system fonts for Inter
Don't add decorative chromatic surfaces

Light-first canvas — dark inversion zones compatible
Type lock: Inter
Accents semantic only — no decorative chromatic fill

Background dominant: #ffffff
Hairline #e5e5e5 high frequency
Font-family grep: Inter present
Accent usage: blue/purple/green as semantic state
Container max-width: 1080px enforced

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 6 nodes across 6 levels, shallow to deep by color.

body1
- div (×2)1
  - div (×2)1
    - div1
      - div1
        Nav

Accessibility

296 combinations - 118 pass AA - 82 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

fg: #000000
bg: #FFFFFF
APCA Lc: +106
Use: foreground on background

fg: #FFFFFF
bg: #000000
APCA Lc: -108
Use: background on foreground

fg: #000000
bg: #DCFCE7
APCA Lc: +100
Use: foreground on background

fg: #DCFCE7
bg: #000000
APCA Lc: -101
Use: background on foreground

fg: #FFFFFF
bg: #111827
APCA Lc: -107
Use: background on foreground

fg: #111827
bg: #FFFFFF
APCA Lc: +105
Use: foreground on background

fg: #000000
bg: #FEE2E2
APCA Lc: +93
Use: foreground on background

fg: #FEE2E2
bg: #000000
APCA Lc: -93
Use: background on foreground

fg: #000000
bg: #E5E7EB
APCA Lc: +92
Use: foreground on neutral

Images

Image strategy

Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.

Total images

Lazy loaded

Format mix

svg62 · 78%
unknown7 · 9%
com7 · 9%
jpg3 · 4%
png1 · 1%

Industry: developer-tools
Industry: saas
Theme: Light
Added: 2026-05-17

FAQ

Questions people ask about Dub

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Dub

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Image strategy

Questions people ask about Dub

Dub

Editorial disclaimer

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Contrast matrix

Image strategy

Questions people ask about Dub

01What makes Dub's design language stand out?

02What fonts and palette does Dub use?

03Can I transfer Dub's design language to my product?

Side-by-side reads sharing this design signal.

More in this design language