Jetstream Design System

A comprehensive design reference extracted from and inferred from the native iOS/watchOS flight tracking app. Jetstream uses a bold, dark-first aesthetic with purple brand color and amber accent, built on Apple's SF Pro type system.

Brand Summary

Platform

iOS, iPadOS, watchOS, macOS (native)

Marketing Site

Framer-built, single-page at

Primary Font

Inter (web), SF Pro (app)

Brand Color

#6100FF Purple

Accent Color

#F7BE00 Amber

Theme

Dark-first with light mode support

App Rating

4.8/5 (118K+ reviews)

Design Awards

Apple Design Award winner

Colors

Jetstream's color system spans brand purples, flight status colors, and iOS system colors.

Brand Colors

Primary Purple

#6100FF

Purple Dark

#120036

Purple Mid

#250160

Dark Purple

#0D0021

Near Black

#05010D

Accent Amber

#F7BE00

Black

#000000

White

#FFFFFF

Off White

#FAFAFA

Text Colors

Primary

rgb(0, 0, 0)

Secondary

rgba(0,0,0,0.7)

Tertiary

rgba(0,0,0,0.55)

Muted

rgba(0,0,0,0.5)

Light (on dark)

#FFFFFF

Light Secondary

rgba(255,255,255,0.8)

Light Tertiary

rgba(255,255,255,0.6)

Green Dark

rgb(0, 33, 17)

Green Muted

rgb(65, 82, 73)

Status Colors (Marketing Site)

On Time / Landed

#08A85B

Delayed

#F7BE00

Cancelled / Diverted

#D92D20

En Route

#6100FF

Status Colors (iOS App / System)

On Time (iOS)

#34C759

Delayed (iOS)

#FF9500

Cancelled (iOS)

#FF3B30

En Route (iOS)

#007AFF

Boarding (iOS)

#5856D6

Scheduled (iOS)

#8E8E93

Gradients

Purple Glow

Dark Fade

Purple Mid

Sky Fade

Map Vignette

Typography

Inter for the marketing site. SF Pro for the native app. Indie Flower for playful accents.

Font Families

Name	Family	Usage
Primary (Web)	`Inter, sans-serif`	All marketing site text
Display (App)	`SF Pro Display`	Large headings, airport codes
Text (App)	`SF Pro Text`	Body text, labels
Accent	`Indie Flower, cursive`	Handwritten-style annotations
System	`system-ui, -apple-system, ...`	Fallback stack

Type Scale

Delay alerts faster

H1: 65px / 700 / 1.1 line-height

Everything you need

H2: 56px / 700 / 1.15 line-height

Import your flights

H3: 44px / 700 / 1.2 line-height

More reasons

H4: 40px / 700 / 1.2 line-height

Section heading

H5: 32px / 700 / 1.25 line-height

Subsection heading

H6: 22px / 600 / 1.3 line-height

Body text at the larger size used for hero descriptions and prominent paragraphs on the marketing site.

Body Large: 18px / 400 / 1.6 line-height

Standard body text used throughout the marketing site for descriptions and supporting content.

Body: 16px / 400 / 1.6 line-height

Small text for labels, captions, and metadata throughout the interface.

Small: 13px / 400 / 1.5 line-height

OVERLINE LABEL

Overline: 12px / 600 / uppercase / 0.05em letter-spacing

Handwritten accent style for annotations

Accent: Indie Flower 20px / 400

Font Weights

Weight	Value	Usage
Regular	400	Body text, descriptions
Medium	500	Subheadings, emphasized text
Semibold	600	Buttons, labels, small headings
Bold	700	Headings, display text

Spacing

Spacing scale extracted from paddings, margins, and gaps across the site.

Spacing Scale

Gap Values

Token	Value	Usage
gap-xs	4px	Tight inline spacing
gap-sm	6px - 8px	Icon-to-text, compact lists
gap-md	10px - 16px	Card content, form fields
gap-lg	20px - 24px	Section content, card groups
gap-xl	32px - 48px	Major section spacing
gap-2xl	64px - 76px	Page-level section gaps

Borders & Shadows

Rounded corners and layered shadow system for depth.

Border Radii

9px

16px

30px

39px

50px

2xl

70px

3xl

pill

Box Shadows

Subtle

shadow-subtle

Card

shadow-card

Elevated

shadow-elevated

Small

shadow-small

Buttons

Pill-shaped buttons with bold fills. Primary CTA uses white on dark sections, black on light.

Primary Buttons

Variant	Background	Color	Radius	Padding
White (on dark bg)	#FFFFFF	#000000	40px	12px 18px 12px 20px
Black (on light bg)	#000000	#FFFFFF	40px	12px 18px 12px 20px
Accent	#F7BE00	#000000	50px	12px 20px
Purple	#6100FF	#FFFFFF	40px	12px 20px

Button Sizes

App Store Button

Download on the App Store

App Store Button

background: #000 | radius: 9px | padding: 10px 16px

Outline / Ghost

Cards

Clean card surfaces with layered shadows and generous padding. The marketing site uses subtle card-like sections.

Feature Card

Import your flights

Forward your confirmation email or connect your calendar to import flights instantly.

Card Styles

bg: #FFF | radius: 16px | padding: 24px | shadow: shadow-card | border: 1px solid rgba(0,0,0,0.04)

Dark Card

Pilot-grade data

Live streaming flight data with actual flight plans, tail numbers, and more.

Dark Card Styles

bg: #0D0021 | radius: 16px | padding: 24px | text: rgba(255,255,255,0.6)

Navigation

Transparent navigation bar with centered logo and minimal links.

Jetstream

Features Pricing Press Help

Property	Value
Height	~76px (content area)
Background	Transparent / rgba(0,0,0,0)
Position	Relative (scrolls with page)
Max Width	1200px centered
Nav Link Font	15px / 500 weight

Dark Mode

The app is dark-mode-first. The marketing site uses dark sections extensively.

iOS Dark Mode Surfaces

System Background

#000000

Secondary

#1C1C1E

Tertiary

#2C2C2E

Quaternary

#3A3A3C

Dark Text Hierarchy

Primary Label #FFFFFF

Secondary Label rgba(255,255,255,0.8)

Tertiary Label rgba(255,255,255,0.6)

Quaternary Label rgba(255,255,255,0.4)

Separator rgba(255,255,255,0.15)

App UI Patterns

Native iOS flight tracking interface patterns inferred from marketing screenshots and App Store listing.

Flight Cards

The core UI element. Displays departure/arrival airports, times, status, and flight path visualization.

UA 2145

On Time

SFO

San Francisco

✈️

JFK

New York

8:30a

Departs

5:15p

Arrives

Terminal

Gate

F14

Aircraft

B738

Seat

12A

On Time state

DL 1492

Delayed 47m

LAX

Los Angeles

✈️

ATL

Atlanta

2:00p

2:47p

Departs

9:30p

10:17p

Arrives

Terminal

Gate

B22

Delay

47 min

Delayed state

AA 734

Cancelled

ORD

Chicago

MIA

Miami

6:15a

10:45a

Cancelled state

BA 178

En Route

LHR

London

✈️

SFO

San Francisco

11:20a

Departed

2:45p

Arrives

Altitude

38,000 ft

Speed

547 mph

ETA

3h 12m

En Route state (active tracking)

Element	Style
Card Background	#1C1C1E (iOS secondary system background)
Card Radius	16px
Card Padding	20px
Airport Codes	32px / Bold / SF Pro Display
City Names	13px / rgba(255,255,255,0.5)
Times	20px / Semibold
Detail Labels	11px / Uppercase / rgba(255,255,255,0.4)
Airline Logo	32px circle with brand color
Status Badge	6px radius / 12px semibold / status color bg at 15% opacity

Status Indicators

On Time Delayed Cancelled En Route Landed Boarding

Status	Color	Background
On Time	#34C759	rgba(52,199,89,0.15)
Delayed	#FF9500	rgba(255,149,0,0.15)
Cancelled	#FF3B30	rgba(255,59,48,0.15)
En Route	#007AFF	rgba(0,122,255,0.15)
Landed	#34C759	rgba(52,199,89,0.15)
Boarding	#5856D6	rgba(88,86,214,0.15)

Flight Timeline

Vertical timeline showing flight progress events.

8:30 AM

Departed SFO Gate F14

8:42 AM

Wheels up - Airborne

12:15 PM

Currently over Kansas

4:58 PM (est)

Wheels down at JFK

5:15 PM (est)

Arrive JFK Gate B32

Map View

Dark satellite-style map with purple flight path arc.

✈️

SFO

JFK

Property	Value
Background	Dark satellite/terrain (#0a1628)
Flight Path	Curved arc, purple/blue (#6100FF at 60% opacity)
Airport Dots	White with glow shadow
Vignette	Radial gradient fade at edges

Live Activity & Dynamic Island

Real-time flight tracking on Lock Screen and Dynamic Island.

Lock Screen Live Activity

SFO

JFK

3h 12m

Dynamic Island (Compact)

SFO

JFK

Component	Details
Live Activity	Airport codes + progress bar + remaining time. Bg: #1C1C1E, radius: 20px
Dynamic Island (compact)	Minimal codes + progress. Bg: black, radius: 22px
Dynamic Island (expanded)	Full map + departure/arrival + status
Progress Bar	Track: rgba(255,255,255,0.1), Fill: #6100FF, height: 4px

Apple Watch

Watch App

SFO → JFK

On Time

5:15p

Arrives

Complication

UA 2145

3:12

remaining

Home Screen Widgets

Small Widget

Medium Widget

Property	Value
Background	Gradient: #120036 to #250160
Corner Radius	22px (iOS widget standard)
Padding	16px
Title	11px / 500 / rgba(255,255,255,0.6)

Tab Bar

✈️

My Flights

👥

Friends

📖

Logbook

•••

Property	Value
Background	rgba(30,30,30,0.95) with blur(20px)
Active Tint	#6100FF (brand purple)
Inactive	#8E8E93 (iOS secondary)
Icon Size	22px
Label Size	10px / 500 weight
Border Top	1px solid rgba(255,255,255,0.08)

Notifications

Delay Alert

Jetstream

now

⚠️ UA 2145 Delayed 47 min

New departure 2:47p from SFO. Late arriving aircraft from Denver (UA 1822).

Gate Change

Jetstream

5m ago

Gate changed for DL 1492

New gate B22 (was A15). Terminal 2 at LAX.

Notification Categories

Delay alert, Gate change, Departure, Landing, Connection alert, Diversion, Cancellation

Layout

Responsive layout system from the marketing site.

Property	Value
Max Width	1200px
Desktop Breakpoint	> 1200px
Tablet Breakpoint	840px
Mobile Breakpoint	789px
Content Padding (Desktop)	48px
Content Padding (Mobile)	20px
Section Gap	64px - 76px
Grid System	Flexbox-based, not CSS Grid

Motion & Interaction

Subtle, purposeful animations. Framer Motion powers the marketing site.

Interaction Patterns

Pattern	Details
Button Hover	translateY(-1px) + subtle background darken
Card Hover	Slight elevation increase (shadow change)
Page Transitions	Framer Motion scroll-linked animations
Scroll Reveal	Fade-in + translateY on viewport entry
App: Pull to Refresh	Custom refresh animation with plane icon
App: Flight Progress	Animated plane along arc path
App: Status Changes	Color transition with haptic feedback
Transition Duration	0.2s default, 0.3s for larger elements
Easing	ease (CSS default), spring physics in app

Interactive Demo

Hover this card

See elevation change

Product Screenshots

App screenshots from the marketing site showing the native iOS interface.

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.theme.extend,
  },
};

// Also reuse designSystem.tailwind.componentRecipes for common surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Design System	`#6100FF`	`—`	`—`	`—`	`{'max': '789px'}`

Scope	Recipe	Class Pattern	Notes
Design System	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Design System	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Design System	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.