Otto Design System

Source of Truth — Design Tokens, Components & Onboarding Flow

Design System

Color Palette
Blue
#007AFF
Indigo
#6366F1
Purple
#8B5CF6
Green
#34C759
Amber
#FF9F0A
Red
#FF453A
Surfaces & Backgrounds
Dark
Surface #1A1A1A
bg: #0D0D0D
Light
Surface #FFFFFF
bg: #F5F5F7
Gradients
Primary
#007AFF → #6366F1 → #8B5CF6
Dark BG
#0D0D0D → #1A1A2E
Success
#34C759 → #30D158
Border Radius
Pill · 9999px
XL · 24px
LG · 16px
MD · 12px
SM · 8px
Typography
Display
Instrument Serif
32px · 400 italic
Meet Otto
Heading 1
Jakarta Sans
22px · 700
Your AI Car Expert
Heading 2
Jakarta Sans
17px · 700
Instant Diagnostics
Body
Jakarta Sans
15px · 500
Describe any warning light, noise, or issue — Otto explains it in plain English.
Caption
Jakarta Sans
13px · 500
Skip for now · 50K+ owners · Due in 2 wks
Overline
Jakarta Sans
11px · 700 · caps
Your AI Car Expert
Spacing Scale
4
4px
8
8px
12
12px
16
16px
20
20px
24
24px
32
32px
44
44px · safe area
Shadows
Button Primary
0 4px 16px blue/20%
Surface Light
0 1px 3px black/4%
Card Elevated
0 8px 32px black/30%
Dark Surface
border only 6%
Buttons
Dark Mode
Light Mode
Full Width CTA
Component Height Radius Font Weight
Primary (Next) 48px pill 15px 600
Secondary (Back) 48px pill 15px 600
CTA (Start) 50px pill 15px 600
Skip Link auto — 13px 500
Page Indicators
Dark
Light
Active: 24×6px pill, gradient fill
Inactive: 6×6px circle, #2A2A2E (dark) / #D1D1D6 (light)
Transition: 400ms cubic-bezier(0.4, 0, 0.2, 1)
Easing & Motion
Ease Out Expo
cubic-bezier(0.16, 1, 0.3, 1)
Ease Out Back
cubic-bezier(0.34, 1.56, 0.64, 1)
Spring
cubic-bezier(0.175, 0.885, 0.32, 1.275)
Default duration: 250ms (buttons) · 400ms (dots, cards) · 600ms (page transitions)
Use transform + opacity only — avoid layout-triggering properties
Icon Tokens
16px · Button
18px · CTA
20px · Card
24px · Hero
32px · Feature
SwiftUI Token Mapping
Token CSS SwiftUI
Blue #007AFF Color.blue / Color("OttoBlue")
Purple #8B5CF6 Color("OttoPurple")
Gradient linear-gradient(135deg, …) LinearGradient(colors: [.ottoBlue, .ottoPurple], …)
Dark BG #0D0D0D Color("DarkBackground")
Surface #1A1A1A Color("Surface")
Display Font Instrument Serif 32px .custom("InstrumentSerif-Italic", size: 32)
Body Font Plus Jakarta Sans .custom("PlusJakartaSans", size: 15)
Btn Radius 9999px .capsule
Card Radius 16px RoundedRectangle(cornerRadius: 16)
Spring cubic-bezier(0.175, …) .spring(response: 0.4, dampingFraction: 0.7)
Safe Area 44px bottom .safeAreaInset(edge: .bottom)

Dark Mode

1
Welcome + Value
9:41

Meet Otto

Your AI car expert assistant
2
Why Otto
9:41

Otto knows your car

100% official manuals · 50K+ owners

Instant Diagnostics

200+ codes

Plug in your OBD-II scanner and get plain-English explanations of every code and sensor

Your Car's Memory

Full history

Maintenance plans, service records & reminders — Otto never forgets

Oil change — 3 weeks ago
Brake inspection — passed
Tire rotation — Due in 2 wks

Save Money

Avg $1,200

Know the real cost before visiting the dealer

Dealer
$2,400
DIY
$600
3
Vehicle Setup
9:41
PERSONALIZE

What do you drive?

Pick your brand and model below

Brand
Mercedes
BMW
Audi
Mercedes Models
GLK SUV
X204 • 2008–2015
GLC SUV
X253 • 2015–2022
C-Class Sedan
W205 • 2014–2021
4
Ready to Go
9:41

You're All Set!

Your personal GLK expert is
ready to help anytime

Mercedes GLK
X204 • 2008–2015
Create an account to save your setup

Light Mode

1
Welcome + Value
9:41

Meet Otto

Your AI car expert assistant
2
Why Otto
9:41

Otto knows your car

100% official manuals · 50K+ owners

Instant Diagnostics

200+ codes

Plug in your OBD-II scanner and get plain-English explanations of every code and sensor

Your Car's Memory

Full history

Maintenance plans, service records & reminders — Otto never forgets

Oil change — 3 weeks ago
Brake inspection — passed
Tire rotation — Due in 2 wks

Save Money

Avg $1,200

Know the real cost before visiting the dealer

Dealer
$2,400
DIY
$600
3
Vehicle Setup
9:41
PERSONALIZE

What do you drive?

Pick your brand and model below

Brand
Mercedes
BMW
Audi
Mercedes Models
GLK SUV
X204 • 2008–2015
GLC SUV
X253 • 2015–2022
C-Class Sedan
W205 • 2014–2021
4
Ready to Go
9:41

You're All Set!

Your personal GLK expert is
ready to help anytime

Mercedes GLK
X204 • 2008–2015
Create an account to save your setup