Back to home
Brand Guidelines

driftbrand kit

Everything you need to represent drift consistently. Our brand is built around clarity, trust, and the energy of college life.

02

Color Palette

Our palette is dark-first with vibrant accents. Follow the 60-30-10 rule: 60% background surfaces, 30% text and borders, 10% accent colors for interactive elements and highlights.

Background
#040404
--bg-primary
Elevated
#0A0A0A
--bg-elevated
Surface
#111111
--bg-surface
Mint
#ADFFA6
--accent-mint
Cyan
#8AF2E9
--accent-cyan
Warm
#FFD666
--accent-warm
Text Primary
#F5F5F5
--text-primary
Text Secondary
#A0A0A0
--text-secondary
Text Tertiary
#666666
--text-tertiary
03

Typography

Primary - Inter

Aa Bb Cc

Used for all UI text: headings, body, labels, and navigation. Variable font with weights 400–900.

Mono - JetBrains Mono

01 23

Used for numeric data, code snippets, and technical labels like hex values and CSS variables.

Display

Share the ride, split the cost.

4.5rem / 72px · w900 · -0.04em
H1

Heading One

2.5rem / 40px · w900 · -0.03em
H2

Heading Two

1.75rem / 28px · w800 · -0.02em
H3

Heading Three

1.25rem / 20px · w700 · -0.01em
Body

Body text for paragraphs and general content across the product.

1rem / 16px · w400 · 0
Caption

CAPTION / LABEL TEXT

0.75rem / 12px · w600 · 0.05em
04

Spacing & Radius

Spacing scale

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px

Border radius

sm8px
md12px
lg16px
xl20px
2xl24px
full9999px
05

Voice & Tone

Direct

Say what you mean in as few words as possible. Students are busy - respect their time.

"Find a ride in seconds."

Friendly

Write like you're texting a friend, not drafting a legal document. Casual but not sloppy.

"Hey, someone's heading your way."

Trustworthy

Safety and verification matter. Be clear about what we do to protect riders without being preachy.

"Every rider is verified through their college email."

Questions about brand usage? Reach out at brand@drift.cab