Flighty DESIGN.md

1. Visual Theme & Atmosphere

Flighty's iOS app is a deep, premium black canvas (#0B0B0F) that treats live flight data like an instrument panel. The aesthetic is "aviation cockpit meets Apple-grade polish": a near-black field, crisp white type, and a single electric blue accent that carries every active state. The signature visual is the live flight map — a dark world map with a glowing blue great-circle arc connecting origin and airport, the plane sliding along it in real time. This is a power-user tool that earns its darkness: the black recedes so the arc, the on-time percentage, and the gate number can glow.

The accent system is disciplined and status-driven. Flighty Blue (#0A84FF) owns the primary action, the live arc, the active tab, and selected states. Status semantics are strict: on-time green (#30D158) and delay amber (#FFD60A) appear only on flight-status chips, the delay timeline, and the Live-Activity-style status bar. Beyond blue, green, and amber, the palette is grayscale — layered dark surfaces (#1A1A1F, #222228), #2E2E36 hairlines, white and gray text. The restraint makes the status colors read instantly: a glance tells you delayed-amber or on-time-green without reading a word.

Typography is a precise, technical sans (Flighty uses SF Pro in production; the design intent is "instrument-grade legibility"). The hierarchy is data-forward: 11-32pt with weights at 400 / 600 / 700. The most expressive type moment is the flight card: a large 28-32pt route or time paired with a colored status chip and a monospace-feel gate/terminal block. Numbers — times, on-time %, gate, terminal — are the heroes; descriptive copy recedes into gray.

Key Characteristics:

• Deep-black canvas (#0B0B0F) — premium, instrument-panel darkness
• Flighty Blue (#0A84FF) as the single accent — primary action, live arc, active states
• Live flight map arc — a glowing blue great-circle over a dark world map, the signature
• On-time green (#30D158) / delay amber (#FFD60A) — strict status semantics only
• Flight card — route, times, on-time %, gate/terminal in a dense status block
• Live-Activity-style status bar — the persistent flight progress strip
• Delay timeline — a vertical timeline of schedule changes with colored nodes
• Haptics on flight selection, status changes, and arc/plane focus

2. Color Palette & Roles

Primary

• Flighty Blue (#0A84FF): Primary CTA, live map arc, active tab indicator, selected segment, link text.
• Blue Pressed (#0066CC): Active/pressed state for blue CTAs and the arc focus pulse.
• Blue Glow (rgba(10,132,255,0.45)): Soft halo behind the live arc and the plane marker.

Status (Strict Semantics)

• On-Time Green (#30D158): "On time" status chip, on-time % ring, positive timeline nodes.
• Delay Amber (#FFD60A): "Delayed" status chip, delay timeline nodes, schedule-change warnings.
• Cancelled Red (#FF453A): "Cancelled" / "Diverted" status chip, critical timeline nodes.

Canvas & Surface

• Canvas Black (#0B0B0F): Primary deep-black canvas behind all content and the map.
• Surface 1 (#1A1A1F): Card backgrounds, elevated rows.
• Surface 2 (#222228): Higher elevation — sheets, active rows, status bar.
• Surface 3 (#2C2C34): Pressed state on dark surfaces.
• Divider (#2E2E36): Hairline dividers between rows and sections.

Text

• Text Primary (#FFFFFF): Times, route codes, screen headlines, primary UI text.
• Text Secondary (#8E8E96): Airport names, metadata, captions, helper copy.
• Text Tertiary (#5A5A62): Disabled labels, placeholders, very low-emphasis hints.

Map

• Map Land (#16161B): Dark landmasses on the flight map.
• Map Water (#0B0B0F): Ocean (same as canvas — seamless).
• Map Graticule (#1F1F26): Faint lat/long grid lines.
• Arc Path Past (#0A84FF): Flown portion of the great-circle, full opacity.
• Arc Path Remaining (rgba(10,132,255,0.35)): Not-yet-flown portion, dimmed dashed.

Light Mode (Limited Use)

Flighty's iOS app is effectively dark-only — the instrument-panel aesthetic depends on it. A light variant exists for share cards / embeds but is not the primary experience.

• Light Canvas (#FFFFFF)
• Light Text (#0B0B0F)
• Blue (#0A84FF) — unchanged

3. Typography Rules

Font Family

• Primary: SF Pro (Text + Display optical variants) — instrument-grade legibility
• Substitute: Inter — closest free face for the technical sans tone
• Numeric: prefer tabular/monospaced figures for times, gate, terminal, on-time %
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif

Hierarchy

Principles

• Weights concentrated at 400 / 600 / 700: regular, semibold, bold — no thin, no black
• Tabular figures for all flight data: times, gate, terminal, distance, on-time % never shift width
• Times are the hero: the departure/arrival time gets 32pt bold, the largest type on screen
• Slight positive tracking on route codes: +0.5pt on "SFO → JFK" for a technical, spaced read
• Color, not weight, signals status — the green/amber/red chip carries the meaning

4. Component Stylings

Buttons

Primary CTA ("Add flight" / "Track")

• Background: #0A84FF
• Text: #FFFFFF
• Padding: 15pt vertical, 28pt horizontal
• Corner radius: 14pt
• Font: SF Pro Text 16pt weight 600
• Pressed: background #0066CC, scale 0.98, with .impactOccurred(.medium) haptic
• Disabled: background #222228, text #5A5A62

Secondary Button ("Share flight")

• Background: #1A1A1F
• Text: #FFFFFF
• Border: 1pt solid #2E2E36
• Padding: 13pt vertical, 24pt horizontal
• Corner radius: 14pt
• Font: SF Pro Text 15pt weight 600
• Pressed: background #2C2C34

Icon Actions (Refresh, Notify, Share, Map)

• Size: 22pt glyph, 44pt hit area
• Default: #8E8E96
• Active: #0A84FF (notifications armed, map focused)
• Spacing: 20pt between icons in the card action row

Text Button ("View full timeline")

• Font: SF Pro Text 15pt weight 600
• Color: #0A84FF
• No underline, 44pt hit area

Cards & Containers

Flight Card

• Background: #1A1A1F, corner radius 16pt, border 1pt #2E2E36
• Header: airline + flight no. (17pt w600) + status chip (colored, trailing)
• Route block: origin code 24pt w700 — a thin arc-with-plane glyph — destination code 24pt w700
• Time row: departure time 32pt w700 + arrival time 32pt w700 (tabular), gate/terminal 15pt mono below each
• Meta: "5h 42m · 2,586 mi · Nonstop" 13pt #8E8E96
• On-time ring: small circular progress with "% on time" label
• Action row: refresh · notify · share · open-map

Live Flight Map

• Full-bleed dark map: land #16161B, water #0B0B0F, faint graticule #1F1F26
• Great-circle arc: flown portion solid #0A84FF, remaining dashed rgba(10,132,255,0.35)
• Plane marker: white glyph rotated to heading, soft blue glow halo rgba(10,132,255,0.45)
• Origin/destination pins: 8pt dots with white ring, code label beside
• Bottom sheet over the map: drag-up flight detail (#1A1A1F, 20pt top radius)

Live-Activity-Style Status Bar

• Height: 64pt, background #222228, corner radius 16pt
• Left: airline logo chip, flight no.
• Center: a horizontal progress track — origin dot ⟶ plane (current %) ⟶ destination dot, blue fill
• Right: status chip + ETA time (tabular)
• Mirrors the Dynamic Island / Lock Screen Live Activity layout exactly

Delay Timeline

• Vertical timeline, 2pt #2E2E36 rail
• Nodes: 12pt dots — on-time green #30D158, delay amber #FFD60A, cancelled red #FF453A
• Each row: timestamp (11pt mono) + event title (15pt w600) + delta ("+22m" colored)
• Latest node pulses softly with its status color

Navigation

Bottom Tab Bar

• Height: 56pt + safe area
• Background: rgba(11,11,15,0.92) with .regularMaterial blur (dark)
• Tabs: Flights, Search, Airport, Profile
• Icon size: 24pt
• Active: #0A84FF icon + label (blue is the active indicator)
• Inactive: #8E8E96
• Labels: SF Pro Text 11pt w600, always shown
• Active icon: filled SF Symbol; inactive: outlined
• Hairline top border #2E2E36

Top Nav (Flights)

• Height: 52pt + safe area
• Large title left (28pt w700 white), add-flight "+" button right (blue, 28pt circle)
• Segmented control below: "Upcoming · Past · Tracked" (#1A1A1F track, blue selected)
• Compact + blurred on scroll

Map Detail Sheet

• Drag-handle sheet over the live map, 3 detents (peek / half / full)
• Background #1A1A1F, 20pt top corner radius, grabber #2E2E36

Input Fields

Search Field (Flight / Airport)

• Background: #1A1A1F
• Height: 48pt
• Corner radius: 12pt
• Leading SF Symbol magnifyingglass 18pt #8E8E96
• Placeholder: "Flight number or route", 15pt w400 #8E8E96
• Focus: 1.5pt border #0A84FF, cursor blue
• Text color: #FFFFFF

Segmented Control

• Track: #1A1A1F, 4pt inset
• Selected segment: #0A84FF fill, white text, 10pt radius
• Unselected: transparent, #8E8E96 text
• Font: SF Pro Text 14pt weight 600

Distinctive Components

Live Flight Map Arc

• A great-circle arc rendered over the dark map between origin and destination
• Flown portion: solid #0A84FF, 2.5pt stroke; remaining: dashed rgba(10,132,255,0.35), 2pt
• A white plane glyph sits at the live position, rotated to heading, with a rgba(10,132,255,0.45) glow
• Arc draws in on appear (origin → plane position) over ~900ms ease-out
• The single most important visual on the screen — the map exists to host it

Flight Status Chip

• On time: #30D158 text on rgba(48,209,88,0.15) fill
• Delayed: #FFD60A text on rgba(255,214,10,0.15) fill, e.g. "DELAYED 22m"
• Cancelled: #FF453A text on rgba(255,69,58,0.15) fill
• Padding: 5pt vertical, 10pt horizontal, 999pt radius, 13pt w700 uppercase
• Always the fastest-read element on a flight card

On-Time Percentage Ring

• Circular progress (3pt stroke), track #2E2E36, fill #30D158
• Center label: "87%" 20pt w700 + "on time" 11pt #8E8E96
• Used on flight cards and the route stats screen

Delay Timeline Node

• Colored dot on the vertical rail; the latest one emits a soft pulsing ring in its status color
• Encodes the entire schedule-change history at a glance

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40, 56
• Standard margin: 16pt horizontal, 20pt between cards, 24pt between sections
• Flight-card internal padding: 18pt; route block centered with 16pt gaps

Grid & Container

• Content width: full device width with 16pt horizontal margins
• Flight cards: single column, full-width, 16pt vertical gap
• Live map: full-bleed (edge to edge), sheet floats above with insets
• Timeline: single rail, full-width rows with hairline dividers

Whitespace Philosophy

• Data gets a generous block: the route + time hero sits in an 18pt-padded card with air around the 32pt times
• The map is sacred: the live flight map is full-bleed; nothing competes with the arc
• Quiet chrome: nav, segmented control, and rows are tight so the times and arc dominate

Border Radius Scale

• Square (0pt): hairline dividers, the full-bleed map
• Control (10pt): selected segment in the segmented control
• Field (12pt): search fields
• Control (14pt): primary/secondary buttons
• Card (16pt): flight cards, status bar
• Comfortable (20pt): bottom sheets, map detail sheet
• Full Pill (999pt): status chips
• Circle (50%): on-time ring, avatars, timeline nodes, plane glow halo

6. Depth & Elevation

Shadow Philosophy: Because the canvas is near-black, shadows must be deep and soft to register — cards use a 0.4-opacity, 16pt blur to separate from #0B0B0F. The only colored light in the app is the blue arc glow: a soft rgba(10,132,255,0.45) halo that makes the great-circle and plane marker feel illuminated, like a live signal on an instrument. Everything else is flat — depth comes from the layered dark surfaces, not heavy shadow.

Motion

• Arc draw-in: on flight open, the great-circle animates from origin to the live plane position over ~900ms ease-out, the glow fading in behind it
• Plane advance: the plane marker interpolates smoothly along the arc as live position updates (60fps)
• Status change: when status flips (on-time → delayed), the chip cross-fades color + a single .impactOccurred(.medium) haptic, the timeline appends a node with a pulse
• Status-bar progress: the origin→destination track fills continuously; the plane glides, not steps
• Card press: scale 0.98 spring (damping 0.8) + medium haptic
• Sheet detents: rubber-band spring between peek / half / full

7. Do's and Don'ts

Do

• Use #0B0B0F as the canvas — deep, premium instrument-panel black
• Reserve Flighty Blue (#0A84FF) for the primary action, the live arc, and active states
• Keep status colors strict: green = on time, amber = delayed, red = cancelled — chips only
• Render the live flight map arc as the screen's hero — the map exists to host it
• Use tabular figures for all flight data (times, gate, terminal, on-time %)
• Give departure/arrival times the 32pt bold treatment — they are the heroes
• Add a soft blue glow (rgba(10,132,255,0.45)) behind the arc and plane marker
• Use deep, soft shadows (0.4 opacity, 16pt blur) — the black canvas swallows subtle ones
• Mirror the Live Activity layout in the status bar for cross-surface consistency

Don't

• Don't use pure black #000000 as the canvas — #0B0B0F keeps depth in the map
• Don't use status colors decoratively — green/amber/red mean exactly on-time/delayed/cancelled
• Don't add accent colors beyond blue — the restraint makes the status colors read instantly
• Don't let chrome compete with the map — the arc must be the strongest element
• Don't use proportional figures for times — they jitter as data updates; use tabular
• Don't use thin or black font weights — stay at 400 / 600 / 700
• Don't shadow the map or timeline — depth is layered surfaces, not drop shadows
• Don't animate the plane in steps — it must glide smoothly along the arc
• Don't bury the status chip — it is the fastest-read element on a flight card

8. Responsive Behavior

Device Sizes

Dynamic Type

• Flight times, route codes, body: full scale
• Status chip, gate/terminal, timeline timestamps, tab labels: fixed (tabular, layout-sensitive)
• On-time % ring label: scales modestly within the ring
• Map labels: fixed

Orientation

• Flights / Airport / Profile: portrait-locked
• Live flight map: rotates to landscape — the arc gets a wider canvas
• Share card export: renders at a fixed aspect regardless of device orientation

Touch Targets

• Primary CTA: 48pt+ tall
• Card action icons: 22pt glyph, 44pt hit area
• Map sheet grabber: 44pt drag zone
• Tab bar icons: 24pt glyph, 44pt effective hit

Safe Area Handling

• Top: nav respects safe area; the live map bleeds under the status bar with a subtle top scrim
• Bottom: tab bar floats above the home indicator with dark blur; map sheet detents respect it
• Dynamic Island: the live flight is surfaced as a Live Activity that matches the in-app status bar

9. Agent Prompt Guide

Quick Color Reference

• Canvas: #0B0B0F
• Surface 1 (cards): #1A1A1F
• Surface 2 (sheets/status bar): #222228
• Divider: #2E2E36
• Text primary: #FFFFFF
• Text secondary: #8E8E96
• Flighty Blue (action / arc): #0A84FF
• Blue pressed: #0066CC
• On-time green: #30D158
• Delay amber: #FFD60A
• Cancelled red: #FF453A

Example Component Prompts

• "Create a SwiftUI Flighty flight card on a #0B0B0F canvas: #1A1A1F card, 16pt radius, 1pt #2E2E36 border. Header: 'United · UA 482' 17pt weight 600 white + a trailing green status chip 'ON TIME' (#30D158 text on rgba(48,209,88,0.15), 13pt w700 uppercase, full pill). Route block: 'SFO' 24pt w700 — thin blue arc glyph with a plane — 'JFK' 24pt w700. Time row: '7:45 AM' and '4:12 PM' at 32pt weight 700 with tabular figures, 'Gate B24 · Term 2' in 15pt monospaced beneath. Meta '5h 42m · 2,586 mi · Nonstop' 13pt #8E8E96."
• "Build the Flighty live flight map: a full-bleed dark map (land #16161B, water #0B0B0F, faint #1F1F26 graticule). Draw a great-circle arc — flown portion solid #0A84FF 2.5pt, remaining portion dashed rgba(10,132,255,0.35) 2pt. Place a white plane glyph at the live position rotated to heading with a soft rgba(10,132,255,0.45) glow halo. Origin/destination 8pt white-ringed dots with code labels. The arc animates in from origin to the plane over ~900ms ease-out."
• "Design a Flighty status chip component with three states: 'ON TIME' (#30D158 on rgba(48,209,88,0.15)), 'DELAYED 22m' (#FFD60A on rgba(255,214,10,0.15)), 'CANCELLED' (#FF453A on rgba(255,69,58,0.15)) — all 13pt weight 700 uppercase, 5pt vertical / 10pt horizontal padding, full-pill radius."
• "Create the Flighty Live-Activity-style status bar: a 64pt #222228 card, 16pt radius. Left: airline chip + 'UA 482'. Center: a horizontal progress track with an origin dot, a blue-filled segment, a plane at the current percentage, and a destination dot. Right: a status chip + ETA '4:12 PM' in tabular figures. Match the Dynamic Island Live Activity layout exactly."
• "Build a Flighty delay timeline: a vertical 2pt #2E2E36 rail with 12pt colored node dots — green #30D158, amber #FFD60A, red #FF453A. Each row: an 11pt monospaced timestamp, a 15pt weight 600 event title, and a colored delta like '+22m'. The latest node emits a soft pulsing ring in its status color."

Iteration Guide

1. Canvas is #0B0B0F — deep instrument-panel black, NOT pure #000000
2. Flighty Blue (#0A84FF) only for the primary action, the live arc, and active states
3. Status colors are strict: green=on-time, amber=delayed, red=cancelled — chips only, never decorative
4. The live flight map arc is the hero — the map exists to host the glowing great-circle
5. All flight data uses tabular figures so times/gate/% don't jitter on update
6. Departure/arrival times get 32pt bold — the largest type on screen
7. Add a soft blue glow behind the arc + plane (rgba(10,132,255,0.45)) — the only colored light
8. Shadows are deep and soft (0.4 opacity, 16pt blur) — the black canvas swallows subtle ones