Design System Reference

1 · Color Tokens

Semantic tokens resolve to different hex values per mode. Light ↔ Dark columns show prototype wireframe values (not Figma production values). The Primitive column shows the Figma variable alias — the shared naming contract. All token names here are in parity with the Figma file. brand/green*, brand/blue*, surface/overlay are defined for Figma parity; remaining tokens are actively used in the dashboard prototype.

Base

Token nameLight modeDark modePrimitive

background

#f7f6f2Light

#030712Dark

gray/50 → gray/950

foreground

#030712Light

#f7f6f2Dark

gray/950 → gray/50

Text

Token nameLight modeDark modePrimitive

text/primary

#0a0a0aLight

#f5f5f5Dark

gray/950 → gray/50

text/secondary

#404040Light

#d4d4d4Dark

gray/700 → gray/300

text/muted

#737373Light

#a3a3a3Dark

gray/500 → gray/400

text/inverse

#fafafaLight

#0a0a0aDark

gray/50 → gray/950

Surface

Token nameLight modeDark modePrimitive

surface/subtle

#f5f5f5Light

#171717Dark

gray/50 → gray/900

surface/strong

#e5e5e5Light

#262626Dark

gray/200 → gray/800

surface/card

#ffffffLight

#0a0a0aDark

gray/0 → gray/900

surface/overlay

#242322Light

#363432Dark

gray/900 → gray/800

Stroke

Token nameLight modeDark modePrimitive

stroke/muted

#e5e5e5Light

#262626Dark

gray/200 → gray/800

stroke/strong

#d4d4d4Light

#404040Dark

gray/300 → gray/700

Brand — Primary

Token nameLight modeDark modePrimitive

brand/wordmark

#2d6041Light

#8dd5b3Dark

green/800 → green/300

brand/primary

#0a0a0aLight

#ffffffDark

gray/950 → gray/0

brand/inverse

#ffffffLight

#000000Dark

gray/0 → gray/1000

Brand — Green

Token nameLight modeDark modePrimitive

brand/green

#309061Light

#5ebe91Dark

green/600 → green/400

brand/green-subtle

#f2f9f5Light

#181a17Dark

green/50 → green/950

brand/green-muted

#e5f4ebLight

#1f2420Dark

green/100 → green/900

brand/green-emphasis

#2f7852Light

#8dd5b3Dark

green/700 → green/300

Brand — Blue

Token nameLight modeDark modePrimitive

brand/blue

#3e6fa0Light

#9dc3e4Dark

blue/600 → blue/300

brand/blue-subtle

#f4f8faLight

#1f222eDark

blue/50 → blue/900

brand/blue-muted

#e6f0f5Light

#30405cDark

blue/100 → blue/800

brand/blue-emphasis

#37577eLight

#9dc3e4Dark

blue/700 → blue/300

Semantic

Token nameLight modeDark modePrimitive

semantic/success

#16a34aLight

#4ade80Dark

green/600 → green/400

semantic/info

#2563ebLight

#93c5fdDark

blue/600 → blue/300

semantic/warning

#ca8a04Light

#facc15Dark

—

semantic/danger

#dc2626Light

#f87171Dark

—

2 · Typography Scale — Miles/* Text Styles

18 roles. Each maps 1-to-1 to an iOS HIG Dynamic Type style or named custom role. Inter (web) ↔ SF Pro (iOS) · Overpass Mono (web) ↔ SF Mono (iOS).

Style nameLive sampleSizeWeightLine ht.LS %iOS equivalent

Titles

Miles/Large TitleThe quick brown fox30pxBold (700)38px—.largeTitle

Miles/DisplayThe quick brown fox24pxSemi Bold (600)30px—.title2 uppercase

Miles/TitleThe quick brown fox18pxSemi Bold (600)25px—.title3

Miles/HeadlineThe quick brown fox16pxSemi Bold (600)24px—.headline

Body

Miles/Subheadline BoldJack is driving14pxSemi Bold (600)14px—.subheadline.bold()

Miles/SubheadlineThe quick brown fox14pxMedium (500)21px—.subheadline

Miles/BodyThe quick brown fox14pxRegular (400)23px—.body

Stats

Miles/Stat — Large34 mph36pxBold (700)36px—Custom 36pt bold tabular

Miles/Stat — Medium82 · Good · 62%18pxBold (700)18px—Custom 18pt bold tabular

Captions

Miles/Caption EmphasizedThe quick brown fox12pxSemi Bold (600)18px—.caption.bold()

Miles/CaptionThe quick brown fox12pxMedium (500)18px—.caption

Miles/Caption MutedThe quick brown fox12pxRegular (400)18px—.caption (secondary)

Small labels

Miles/Section HeaderSECTION HEADER11pxSemi Bold (600)16px2.5%.caption2 semibold uppercase

Miles/Caption 2The quick brown fox11pxMedium (500)16px—.caption2

Micro

Miles/BadgeDRIVING10pxSemi Bold (600)15px2.5%Custom 10pt semibold

Miles/Micro LabelThe quick brown fox10pxMedium (500)15px2.5%Custom 10pt medium

AI voice

Miles/AI BodyThe quick brown fox14pxRegular (400)23px—SF Mono .body

Miles/AI LabelAI LABEL11pxMedium (500)16px2.5%SF Mono .caption2 uppercase

3 · Radius Tokens

borderRadius/control8px.cornerRadius(8)Buttons · inputs · thumbnails

borderRadius/panel12px.cornerRadius(12)Panels · bento cells · strips

borderRadius/card16px.cornerRadius(16)Primary cards · map container

borderRadius/pill9999px.clipShape(Capsule())Badges · avatars · tags

boxShadow/card0 24px 70px rgba(0,0,0,0.08)Map · coaching cardsSTRING var — apply manually

4 · Spacing Tokens

Bar widths are to scale (max 96px = spacing/24). SwiftUI maps as .padding() or Spacer().

spacing/00px

spacing/14px

spacing/28px

spacing/312px

spacing/416px

spacing/520px

spacing/624px

spacing/832px

spacing/1040px

spacing/1248px

spacing/1664px

spacing/2080px

spacing/2496px

spacing/gutter24px

spacing/page40px

spacing/section48px

5 · Semantic Token Reference

Full token contract. All semantic tokens are aliased to primitives — toggle Light/Dark in Figma to verify automatic mode-switching.

Token nameCategoryLight valueDark valueiOS mapping

backgroundBase

#f7f6f2

#030712

UIColor.systemBackground

foregroundBase

#030712

#f7f6f2

UIColor.label

text/primaryText

#0a0a0a

#f5f5f5

UIColor.label

text/secondaryText

#404040

#d4d4d4

UIColor.secondaryLabel

text/mutedText

#737373

#a3a3a3

UIColor.tertiaryLabel

text/inverseText

#fafafa

#0a0a0a

UIColor.label (inverse)

surface/subtleSurface

#f5f5f5

#171717

UIColor.secondarySystemBackground

surface/strongSurface

#e5e5e5

#262626

UIColor.tertiarySystemBackground

surface/cardSurface

#ffffff

#0a0a0a

UIColor.secondarySystemGroupedBackground

surface/overlaySurface

#242322

#363432

Custom overlay surface

stroke/mutedStroke

#e5e5e5

#262626

UIColor.separator

stroke/strongStroke

#d4d4d4

#404040

UIColor.opaqueSeparator

brand/wordmarkBrand — Primary

#2d6041

#8dd5b3

Custom wordmark color

brand/primaryBrand — Primary

#0a0a0a

#ffffff

Custom brand color

brand/inverseBrand — Primary

#ffffff

#000000

Custom brand inverse

brand/greenBrand — Green

#309061

#5ebe91

Custom brand green

brand/green-subtleBrand — Green

#f2f9f5

#181a17

Custom green surface

brand/green-mutedBrand — Green

#e5f4eb

#1f2420

Custom green muted

brand/green-emphasisBrand — Green

#2f7852

#8dd5b3

Custom green emphasis

brand/blueBrand — Blue

#3e6fa0

#9dc3e4

Custom brand blue

brand/blue-subtleBrand — Blue

#f4f8fa

#1f222e

Custom blue surface

brand/blue-mutedBrand — Blue

#e6f0f5

#30405c

Custom blue muted

brand/blue-emphasisBrand — Blue

#37577e

#9dc3e4

Custom blue emphasis

semantic/successSemantic

#16a34a

#4ade80

UIColor.systemGreen

semantic/infoSemantic

#2563eb

#93c5fd

UIColor.systemBlue

semantic/warningSemantic

#ca8a04

#facc15

UIColor.systemYellow

semantic/dangerSemantic

#dc2626

#f87171

UIColor.systemRed