Dub.co
Open-source link management for modern marketers
13 colors
13 components
Inter
Mar 27, 2026
Website Preview
Colors
Primary
#7B61FF
Primary purple
#FFFFFF
Background
#000000
Primary text
#F9FAFB
Card surfaces
#6B7280
Secondary text
Neutral
#111111
Dark headings
#374151
Body text
#9CA3AF
Placeholder text
#E5E7EB
Borders
#F9FAFB
Card background
Semantic
#22C55E
Active links, success state
#EF4444
Broken links, errors
#F59E0B
Expiring links
Typography
Inter
Role
SizeWeightHeight
Display
48px8001.1
Heading
28px7001.2
Body
16px4001.6
Stat
36px7001.1
Small
14px4001.5
DESIGN.md — Dub.co
Overview
Dub's design system follows a refined SaaS aesthetic — clean whites, precise typography, and a purple accent that signals modernity. The design prioritizes data visibility with clear analytics visualizations and actionable link management interfaces.
Colors
Primary Palette
| Token | Hex | Usage |
|---|---|---|
color-brand | #7B61FF | Primary purple |
color-bg | #FFFFFF | Background |
color-text | #000000 | Primary text |
color-muted-bg | #F9FAFB | Card surfaces |
color-muted | #6B7280 | Secondary text |
Neutral Palette
| Token | Hex | Usage |
|---|---|---|
color-gray-900 | #111111 | Dark headings |
color-gray-700 | #374151 | Body text |
color-gray-400 | #9CA3AF | Placeholder text |
color-gray-200 | #E5E7EB | Borders |
color-gray-50 | #F9FAFB | Card background |
Semantic Colors
| Token | Hex | Usage |
|---|---|---|
color-success | #22C55E | Active links, success state |
color-error | #EF4444 | Broken links, errors |
color-warning | #F59E0B | Expiring links |
Typography
| Role | Family | Size | Weight | Line Height |
|---|---|---|---|---|
| Display | Inter | 48px | 800 | 1.1 |
| Heading | Inter | 28px | 700 | 1.2 |
| Body | Inter | 16px | 400 | 1.6 |
| Stat | Inter | 36px | 700 | 1.1 |
| Small | Inter | 14px | 400 | 1.5 |
Spacing
| Token | Value | Usage |
|---|---|---|
space-1 | 4px | Tag gaps |
space-2 | 8px | Action button gaps |
space-4 | 16px | Card padding |
space-6 | 24px | Section gaps |
space-8 | 32px | Page sections |
Border Radius
| Token | Value | Usage |
|---|---|---|
radius-sm | 4px | Tags, badges |
radius-md | 8px | Buttons, inputs |
radius-lg | 12px | Cards, modals |
Elevation
| Level | Value | Usage |
|---|---|---|
shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Cards at rest |
shadow-md | 0 4px 12px rgba(0,0,0,0.08) | Dropdowns |
shadow-lg | 0 8px 24px rgba(0,0,0,0.12) | Modals |
Components
Link Card
- URL preview, QR code, click count
- Copy short link button
- Edit / analytics / delete actions
Analytics Chart
- Line chart for clicks over time
- Country breakdown bar chart
- Device / browser pie charts
Create Link Modal
- Destination URL input
- Custom slug field
- Tags, UTM parameters, expiration
Do's and Don'ts
Do
- Show click analytics prominently
- Use purple for primary CTAs
- Make link copying one-click
Don't
- Don't hide QR codes — make them easily accessible
- Don't use more than 3 chart types on one page
- Don't truncate URLs without a tooltip