Marketing

Dub

dub.co16 colors4 componentsInterMulti-page · 12 screens

Dub is the modern link attribution platform for short links, conversion tracking, and affiliate programs.

Remix Visit

Remix

Visit

12 screenshots captured· dub.co

1 / 12 · Dub - The Modern Link Attribution Platform · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from dub.co

Primary

#171717

Primary CTA, brand accent, active state; Captions, secondary text

#3B82F6

Brand hue used alongside the achromatic primary

#2563EB

Inline link colour

#1F2937

Accent / decorative

#581C87

Accent / decorative

#EA580C

Accent / decorative

#BFDBFE

Accent / decorative

#111827

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#000000

Headings / primary text

#0A0A0A

Body copy

#262626

Tertiary / placeholder text

#E5E5E5

1px borders and dividers

#525252

Neutral

#737373

Neutral

#404040

Neutral

Typography · Inter

caption12px · 500 · 16px

body14px · 400 · 20px

caption12px · 400 · 16px

body18px · 400 · 28px

body20px · 400 · 28px

nav-link14px · 500 · 20px

body24px · 400 · 32px

body14px · 600 · 20px

button14px · 500 · 14px

list-item16px · 400 · 24px

caption10px · 600 · 15px

caption11px · 500 · 16.5px

h316px · 500 · 24px

caption10px · 400 · 15px

caption12px · 600 · 16px

caption10px · 500 · 10px

body24px · 500 · 32px

button12px · 500 · 16px

body20px · 500 · 28px

link16px · 400 · 24px

heading30px · 400 · 41.25px

body13px · 500 · 28px

body16px · 600 · 24px

h320px · 500 · 20px

h414px · 600 · 20px

link14px · 400 · 20px

button18px · 500 · 28px

table-header14px · 700 · 20px

button16px · 500 · 24px

heading16px · 600 · 16px

button14px · 600 · 20px

caption8px · 600 · 8px

h316px · 600 · 24px

button16px · 400 · 24px

heading36px · 400 · 40px

body16px · 500 · 24px

body14px · 500 · 14px

body13px · 400 · 19.5px

caption10.409px · 400 · 15.6135px

caption9.768px · 500 · 14.652px

caption9.666px · 400 · 14.499px

caption10.409px · 600 · 15.6135px

h318px · 500 · 28px

caption7px · 600 · 7px

label14px · 500 · 20px

body18px · 500 · 28px

caption12px · 600 · 16px

caption11px · 400 · 16.5px

caption12px · 500 · 16px

button12px · 500 · 16px

h314px · 600 · 20px

Typography · satoshi

h148px · 500 · 55.2px

h248px · 500 · 48px

heading36px · 500 · 40px

h236px · 500 · 40px

heading30px · 500 · 36px

display40px · 500 · 40px

display48px · 500 · 48px

heading30px · 500 · 36px

Typography · GeistMono

code14px · 400 · 20px

Typography · Rowan

body26px · 300 · 36.4px

Spacing

8px

12px

4px

16px

32px

20px

24px

44px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 2px -1px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px

rgb(255, 255, 255) 0px 0px 0px 3px, rgb(0, 0, 0) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px

Components · 4

Remixes of Dub

Latest remixes

No public remixes yet. Be the first to make one.

Remix it