Design System

All tokens, components, and patterns used across Double Lead.

Colours

Light mode

--bg

#ffffff

--bg-surface

#f7f7f7

--bg-raised

#f0f0f0

--border

#e4e4e4

--border-strong

#cccccc

--text

#0d0b09

--text-muted

#6b6460

--text-faint

#aaaaaa

--gold

#9a7a10

--gold-subtle

#fefdf5

--nav-bg

#0d0b09

--nav-gold

#e8c97e

Dark mode

--bg

#0d0b09

--bg-surface

#1a1410

--bg-raised

#26201a

--border

#2a1f14

--border-strong

#3d2e1e

--text

#f0ece4

--text-muted

#7a6d62

--text-faint

#4a3a28

--gold

#e8c97e

--gold-subtle

#1a1610

Status colours

--status-new

#9a7a10

--status-qualified

#1a73e8

--status-won

#2e7d32

--status-lost

#c62828

--status-contacted

#e65100

Typography

DM Serif Display

--text-xs — The quick brown fox

--text-sm — The quick brown fox

--text-base — The quick brown fox

--text-md — The quick brown fox

--text-lg — The quick brown fox

--text-xl — The quick brown fox

--text-2xl — The quick brown fox

DM Sans

--text-xs — The quick brown fox jumps over the lazy dog

--text-sm — The quick brown fox jumps over the lazy dog

--text-base — The quick brown fox jumps over the lazy dog

--text-md — The quick brown fox jumps over the lazy dog

--text-lg — The quick brown fox jumps over the lazy dog

--text-xl — The quick brown fox jumps over the lazy dog

--text-2xl — The quick brown fox jumps over the lazy dog

JetBrains Mono

--text-xs — const pipeline = await getLeads()

--text-sm — const pipeline = await getLeads()

--text-base — const pipeline = await getLeads()

--text-md — const pipeline = await getLeads()

--text-lg — const pipeline = await getLeads()

--text-xl — const pipeline = await getLeads()

--text-2xl — const pipeline = await getLeads()

Spacing

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

--space-24

96px

Border Radius

--radius-sm
4px

--radius-md
6px

--radius-lg
10px

--radius-xl
16px

--radius-pill
pill

Shadows

--shadow-sm

--shadow-md

--shadow-lg

Buttons

Badges

NewQualifiedContactedWonLostLabelMeta

Cards

Default card

Raised card

Active card

Inputs

Theme Toggle

Persists to localStorage. Initialises from system preference.

Breakpoints

Mobile

< 480px

Full-width modals, hidden table columns, reduced section padding

Tablet

< 768px

Hidden nav links (hamburger), stacked grids, hidden dashboard sidebar

Desktop

≥ 768px

Full layout — sidebar, multi-col grids, sticky nav