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

Typography

Role	Family	Size	Weight
Display	Inter	48px	800
Heading	Inter	28px	700
Body	Inter	16px	400
Stat	Inter	36px	700

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