---
version: alpha
name: Flighty
description: "White pages that drop into night, and a flight board that never blinks."
colors:
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#E5E5E5"
  primary: "#0085FF"
  body-ink: "rgba(0, 0, 0, 0.55)"
  inverse-body-ink: "rgba(255, 255, 255, 0.7)"
  row-wash: "#FAFAFA"
  night: "#05010D"
  panel-night: "#141414"
  pro-purple: "#BF59F2"
  action-blue: "#0194FF"
  caution-amber: "#F7BE00"
  on-time-green: "#039855"
  late-amber: "#F79009"
  alert-red: "#D92D20"
  metadata-grey: "#525252"
typography:
  display:
    fontFamily: system-ui
    fontSize: 65px
    fontWeight: 400
    lineHeight: 78px
    letterSpacing: -1px
  headline-xl:
    fontFamily: system-ui
    fontSize: 56px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -0.28px
  headline-xl-2:
    fontFamily: system-ui
    fontSize: 56px
    fontWeight: 400
    lineHeight: 67.2px
    letterSpacing: -1px
  headline-l:
    fontFamily: system-ui
    fontSize: 48px
    fontWeight: 400
    lineHeight: 57.6px
    letterSpacing: 0em
  headline-m:
    fontFamily: system-ui
    fontSize: 44px
    fontWeight: 400
    lineHeight: 48.4px
    letterSpacing: 0em
  headline-s:
    fontFamily: system-ui
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: 0em
  subheading:
    fontFamily: system-ui
    fontSize: 17px
    fontWeight: 400
    lineHeight: 20.4px
    letterSpacing: -0.43px
  body-l:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  body:
    fontFamily: system-ui
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0em
  label:
    fontFamily: system-ui
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0.37px
  caption:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18.2px
    letterSpacing: 0em
  micro:
    fontFamily: system-ui
    fontSize: 13px
    fontWeight: 400
    lineHeight: 15.6px
    letterSpacing: 0em
  code:
    fontFamily: system-ui
    fontSize: 12px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: 0.37px
rounded:
  dots-halos-map-pills-search-field-nav-ca: 9999px
  purchase-button-pill-media: 999px
  journey-segmented-track: 70px
  badge-pill-amber-active-chip: 50px
  nav-and-cta-buttons: 40px
  board-sheet: 24px
  feature-panels-pricing-panels: 20px
  left-rounded-comparison-row: 20px
  notification-card: 16px
  quote-tile-and-its-corner-variants: 8px
  review-card-inline-media: 12px
  board-row: 8px
  small-media: 9px
  comparison-glyph: 0px
spacing:
  3xs: 4px
  2xs: 6px
  xs: 8px
  sm: 10px
  md: 16px
  lg: 20px
  xl: 30px
  2xl: 32px
  3xl: 34px
  4xl: 48px
---
# Flighty — Style Reference

> White pages that drop into night, and a flight board that never blinks.

**Theme:** light

The capture holds two systems, and they rarely borrow from each other. The marketing pages — home, pricing and gift cards — are a Framer build set in system-ui that swings between a white canvas and near-black bands; the split falls at the airports board, a live product surface in Pangram Sans Rounded over a Maps ground. The marketing side trusts scale for hierarchy: display rows are 700 at 65, 56, 48 and 44px with tracking pulled to −1px at the top; body beneath sits at 15–16px in black held back from full strength. The board runs the other way — 12 and 15px type, tight 0.37px tracking, colour kept for status, a 48px row repeated down a wide table. What binds them is elevation: the measured controls and boxes carry no border, so every edge is the first layer of a shadow stack — a ring, then five softer layers.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | `--color-canvas` | The marketing ground, the board sheet, the fill of the map's airport pills. The default, not a highlight. |
| Ink | `#000000` | `--color-ink` | Display type and board type. The system's true black. |
| Body Ink | `rgba(0, 0, 0, 0.55)` | `--color-ink-body` | Paragraph and footer-link ink on the light pages — the `"Family sharing. Share Flighty with up to 5 famil"` and `"Made with love in Austin,"` rows. Black at reduced opacity, not a grey hex. |
| Inverse Body Ink | `rgba(255, 255, 255, 0.7)` | `--color-ink-body-inverse` | The same move on dark ground, on the `"No Ads"` feature rows. Its 0.55 and 0.5 siblings step down further. |
| Row Wash | `#FAFAFA` | `--color-row-wash` | Zebra fill on alternating board rows (`.group.relative.flex.h-[48px]`) and the light 40px panels (`.framer-owwwur`). One step off white. |
| Night | `#05010D` | `--color-night` | The dark bands on the home page (`.framer-1ixh4mw`, `.framer-1565l3u`). A blue-black rather than a neutral one. |
| Panel Night | `#141414` | `--color-panel` | The comparison panels and interval toggle (`.framer-klyqop`). Warmer and lighter than Night; the two do not substitute. |
| Pro Purple | `#BF59F2` | `--color-pro` | The pricing accent: the purple pill, the Pro column's glyphs, the `"Most popular plan"` label. Near-twin `#BE59F1` fills the same glyph family. |
| Action Blue | `#0194FF` | `--color-action` | The gift-card purchase button (`.framer-18ayx6k.framer-8s19q4`). |
| Signal Blue | `#0085FF` | `--color-signal` | Round indicators at 13–21px (`.framer-1r8t2hr`, `.framer-akcm3w`). Decorative status, not a control. |
| Caution Amber | `#F7BE00` | `--color-amber` | The active chip in the journey selector. One control carries it (`.framer-3a8dh3.framer-1jjkmla`). |
| On-Time Green | `#039855` | `--color-status-on-time` | The 8px dot `.h-2.w-2.rounded-full.bg-status-on-time`, with 10% and 20% halos. Status, not a control. |
| Late Amber | `#F79009` | `--color-status-late-15` | The same 8px dot geometry, on `.h-2.w-2.rounded-full.bg-status-late-15`. |
| Alert Red | `#D92D20` | `--color-status-late-45` | The worst delay band's dot, and the ink on `"Flights to JFK Grounded"`. `#DF534A` carries `"Airport Closed"`. |
| Metadata Grey | `#525252` | `--color-meta` | The grey with a typographic job: `"BSB"` codes at 12px/700 on the map pills. |
| Divider | `#E5E5E5` | `--color-border` | The 1px rule on the board (`.h-px.w-full.bg-border`); elsewhere surfaces separate by shadow or luminance. |

## Tokens — Typography

### system-ui — the marketing voice: display at 700 (`"Get the truth when you travel"`), body at 400–600 · `--font-display`
- **Substitute:** -apple-system / SF Pro / Inter
- **Weights:** 400, 500, 600, 700
- **Sizes:** the census measures 13, 14, 15, 16, 17, 28, 32, 36, 40, 44, 48, 56 and 65px
- **Line height:** 15.6px at 13px up to 78px at 65px — roughly 1.2 on display, 1.5 on body, with a 30px-on-15px outlier in the footer links
- **Letter spacing:** −1px at 65 and 56px, −0.28px at 56px, −0.43px at 17px, −0.15px on the 15px/500 nav row; the census records `normal` on the rows it measures, and does not close the list
- **Role:** Every heading and paragraph on the marketing pages. Display is 700, with one 600 row at 40px (`"Compare plans."`); body 400 or 500, labels 600.

### Pangram Sans Rounded — the board's face: rounded, tight, tabular · `--font-board`
- **Substitute:** SF Pro Rounded / Nunito / Varela Round
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12, 15px
- **Line height:** 12px at 12px; 15px and 22.5px at 15px — leading collapses to 1.0 where values align in a column
- **Letter spacing:** 0.37px on codes, delays and numerals; normal on airport names
- **Role:** The airports board.

### Inter — the board's column headers · `--font-ui`
- **Substitute:** system-ui / Helvetica Neue / Arial
- **Weights:** 400, 500, 600
- **Sizes:** 15px
- **Line height:** 22.5px
- **Letter spacing:** normal
- **Role:** The table's column labels (`"Airport"`) at 600 in `rgba(60, 60, 67, 0.6)` — a second face, a half-step quieter than the rounded data beneath it.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 65px | 78px | −1px | `--text-display` |
| Headline XL | 56px | 56px | −0.28px | `--text-headline-xl` |
| Headline XL (loose) | 56px | 67.2px | −1px | `--text-headline-xl-loose` |
| Headline L | 48px | 57.6px | normal | `--text-headline-l` |
| Headline M | 44px | 48.4px | normal | `--text-headline-m` |
| Headline S | 40px | 48px | normal | `--text-headline-s` |
| Subheading | 17px | 20.4px | −0.43px | `--text-subheading` |
| Body L | 16px | 24px | normal | `--text-body-l` |
| Body | 15px | 22.5px | normal | `--text-body` |
| Label | 15px | 22.5px | 0.37px | `--text-label` |
| Caption | 14px | 18.2px | normal | `--text-caption` |
| Micro | 13px | 15.6px | normal | `--text-micro` |
| Code | 12px | 12px | 0.37px | `--text-code` |

## Tokens — Spacing & Shapes

**Base unit:** 2px   **Density:** comfortable on the marketing pages, compact on the board

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--spacing-3xs` |
| 2xs | 6px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 10px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 20px | `--spacing-lg` |
| xl | 30px | `--spacing-xl` |
| 2xl | 32px | `--spacing-2xl` |
| 3xl | 34px | `--spacing-3xl` |
| 4xl | 48px | `--spacing-4xl` |

The gaps that repeat most are 4, 10 and 8px; the scale also carries 6, 30 and 34px.

### Border Radius
| Element | Value |
|---------|-------|
| Dots, halos, map pills, search field, nav capsule | 9999px |
| Purchase button, pill media | 999px |
| Journey segmented track | 70px |
| Badge pill, amber active chip | 50px |
| Nav and CTA buttons | 40px |
| Board sheet (top corners only) | 24px 24px 0px 0px |
| Feature panels, pricing panels | 20px |
| Left-rounded comparison row | 20px 0px 0px 20px |
| Notification card | 16px |
| Quote tile and its corner variants | 8px · 16px 8px 8px · 8px 8px 8px 16px · 8px 8px 16px |
| Review card, inline media | 12px |
| Board row | 8px |
| Small media | 9px · 6px |
| Comparison glyph | 0px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card Whisper | `rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.02) 0 1px 1px 0.5px, rgba(0,0,0,0.02) 0 3px 3px 1.5px, rgba(0,0,0,0.02) 0 6px 6px -3px, rgba(0,0,0,0.02) 0 12px 12px -6px, rgba(0,0,0,0.02) 0 24px 24px -12px` | `--shadow-card` |
| Card Edge | Card Whisper with a `rgba(0,0,0,0.04) 0 0 0 1px` first layer | `--shadow-card-edge` |
| Float | `rgba(0,0,0,0.03) 0 1px 1px 0.5px, rgba(0,0,0,0.03) 0 3px 3px 1.5px, rgba(0,0,0,0.03) 0 6px 6px -3px, rgba(0,0,0,0.03) 0 12px 12px -6px, rgba(0,0,0,0.03) 0 24px 24px -12px` | `--shadow-float` |
| Pill Ring | `rgba(0,0,0,0.06) 0 0 0 2px, rgba(0,0,0,0.06) 0 1px 1px 0.5px, rgba(0,0,0,0.06) 0 3px 3px 1.5px, rgba(0,0,0,0.06) 0 6px 6px -3px, rgba(0,0,0,0.06) 0 12px 12px -6px, rgba(0,0,0,0.06) 0 24px 24px -12px` | `--shadow-pill` |
| Field Ring | Pill Ring with a `rgba(0,0,0,0.06) 0 0 0 4px` first layer | `--shadow-field` |
| Pin Drop | `rgba(0,0,0,0.06) 0 1px 3px 0, rgba(0,0,0,0.05) 0 6px 6px 0, rgba(0,0,0,0.03) 0 13px 8px 0, rgba(0,0,0,0.01) 0 24px 10px 0, rgba(0,0,0,0) 0 37px 10px 0` | `--shadow-pin` |
| Dot | `rgba(0,0,0,0.19) 0 1px 2px 0` | `--shadow-dot` |
| Hero Lift | `rgba(0,0,0,0) 0 248px 69px 0, rgba(0,0,0,0.03) 0 159px 3px 10px, rgba(0,0,0,0.1) 0 89px 54px 5px, rgba(0,0,0,0.17) 0 40px 40px 0, rgba(0,0,0,0.19) 0 10px 22px 0` | `--shadow-hero` |

### Layout
- **Page max-width:** `not measured` — the widest measured box is the board row at 1820×48px.
- **Section gap:** vertical padding measured at 52, 64, 71, 72, 80, 100, 120, 140, 150, 180 and 200px — the marketing pages breathe in 50–150px steps, the largest opening the pricing page.
- **Card padding:** 16px (notification card) · 20px (quote tile) · 26px 48px (pricing panel) · 40px (feature panel).
- **Element gap:** 4, 6, 8 and 10px inside components; 16, 20, 30, 32, 34 and 48px between them.

## Components

### Announcement Bar
**Role:** The strip above the marketing nav.
`.framer-oDhgn.framer-ll1n7c.framer-v-ll1n7c` — a vertical gradient from `#616170` to `#12128C`, with a 10px gap setting icon, label and link apart. Its width is `not measured`. The label is the `"NEW! Flighty Airports"` row: system-ui 14px/500, 16.8px line height, `#FFFFFF`, repeating on the home, pricing and gift-card pages. It is the one place indigo appears, so it reads as chrome rather than content.

### Floating Nav Capsule
**Role:** The persistent site navigation.
`.framer-kPCMQ.framer-1ogr14f.framer-v-1ogr14f` is a `#000000` capsule with 8px horizontal padding, 0px vertical and its own 1px `rgba(0, 0, 0, 0.06)` ring over the same five falling layers, not the map pill's 2px Pill Ring, so it edges itself without a border. Its links are the 15px/500 `rgba(0, 0, 0, 0.7)` `"Pricing"` row on the home and gift-card pages and the `rgba(255, 255, 255, 0.8)` row on the pricing page, both at a 30px line height and −0.15px tracking, set 32px apart in `.framer-8ns4b`: same size in both modes, only the ink inverts. The trailing button is the light pill variant; the nav stays a floating object, not a bar.

### Pill Button
**Role:** Every commitment in the system, from "Get the app" to "Purchase card".
Four variants, all round-ended, none bordered, none shadowed. Light (`.framer-xeJ9s.framer-1e7yv97.framer-v-59l3lp.framer-8jwfvx`): `#FFFFFF` with `#000000` text, 12px 20px padding. Dark (`.framer-xeJ9s.framer-1e7yv97.framer-v-1e7yv97.framer-8jwfvx`): the same geometry, `#000000` fill. Pro (`.framer-xeJ9s.framer-1e7yv97.framer-v-1u1wd82.framer-8jwfvx`): the same geometry in `#BF59F2`. Purchase (`.framer-18ayx6k.framer-8s19q4`): `#0194FF`, 0px padding of its own. Labels use the 15px/600, 18px line-height `"View more"` row in `#FFFFFF`.

### Journey Segmented Control
**Role:** The home hero's stage selector.
The track is `.framer-B0WbS.framer-1w3zb3m.framer-v-1w3zb3m`: `rgba(0, 0, 0, 0.85)`, 3px padding, no border, no shadow. The active chip is `.framer-3a8dh3.framer-1jjkmla`, `#F7BE00` with `#000000` text and 0px padding of its own; its own gap is `not measured`. The label chips `.framer-4gwovt.framer-1jjkmla`, `.framer-176ajkx.framer-1jjkmla` and `.framer-1d36b4l.framer-1jjkmla` carry the 6px gap and 15px left padding. Inactive labels paint `#C1C0C0` on `"At the airport"` and `#C9C9C9` on `"After landing"` and `"Download"`; their size and weight are `not measured`. This is the only amber on the marketing pages — the board's `#F79009`, `#FCBC1B`, `#FFD534`, `#FEDF89` and `#FEF0C7` all sit on p2 — and the capture's only 70px radius.

### Notification Card
**Role:** A single push alert.
`.framer-bWFpo.framer-ydctnn.framer-v-ydctnn`: `#FFFFFF`, 16px padding, no border, Card Whisper shadow, boxes of 325–404×79px, thirteen across the home page. The title is the 16px/600, 24px line-height `#000000` `"Mom landed in New York"` row; the second line is 15px/400 at 22.5px in `rgba(0, 0, 0, 0.5)`. Six layers at 0.02 alpha barely lift it off white: a notification resting on the page, not a component announcing itself.

### Press Quote Tile
**Role:** A pull-quote from the press, on the dark band.
`.framer-q3mo3y` fills `rgba(255, 255, 255, 0.05)` with 20px padding at 241×164px, no shadow — on a dark band a 5% white wash is already the elevation. The base variant rounds every corner to 8px; three single-instance variants swap one corner to 16px (`16px 8px 8px`, `8px 8px 8px 16px`, `8px 8px 16px`).

### Review Card
**Role:** A full App Store review.
`.framer-5LOp4.framer-1750as0.framer-v-1p3tjhs`: `#FFFFFF`, 0px padding on the box itself, boxes of 331×302–482px — a fixed column width against a free-running height. The shadow is Card Edge, crisper than the notification card's, which lets white sit on white without a rule. Body type is the 15px/400 `rgba(0, 0, 0, 0.8)` review row; the reviewer's name 17px/500 at −0.43px tracking, the handle 13px/400 in `rgba(0, 0, 0, 0.5)`.

### Feature Panel
**Role:** The editorial block carrying one capability and its artwork.
One geometry, several fills: every panel takes 40px padding, no border, no shadow. `#010A1A`, `#0D0A14` and `#0A0E0C` sit on the dark stretches (`.framer-8hggj3`, `.framer-10eayp`, `.framer-13hywad`), `#FAFAFA` on the light ones (`.framer-owwwur`, four of them), `#FAF8F7` on the single warm panel (`.framer-1411pdp`). The three darks are nearly indistinguishable by eye, each tinted toward the photograph it holds rather than a shared surface token. Headings run 44px/700 at 48.4px in `#FFFFFF` or `#000000`; supporting copy 16px/500 at 24px in `rgba(255, 255, 255, 0.6)`.

### Pricing Plan Panel
**Role:** The comparison surface for plan rows and the feature matrix.
`.framer-PqQdy.framer-15fggan.framer-v-15fggan`: `#141414`, 26px top padding against 48px sides, no border, no shadow. That 48px is the only horizontal inset of 48px or more the census measures. The interval toggle above it (`.framer-klyqop`) is the same `#141414` at 2px padding, holding a 14px/600 `#FFFFFF` `"Annual"` label. The accent pill (`.framer-VDLtp.framer-1xfbd6s.framer-v-1xfbd6s.framer-53ywpm`) is `#BF59F2` at 10px 16px padding; a tinted `rgba(191, 89, 242, 0.1)` fill (`.framer-dgoc87`) whispers the same purple.

### Comparison Check Glyph
**Role:** The yes/no mark in the plan matrix.
A 13×13px square, a filled mask rather than an icon font, in four shades: `.framer-h6rMf.framer-wsv4s` at `#BF59F2` for the Pro column and the same class at `#FFFFFF` for Free, against `.framer-5zxgC.framer-wsv4s` at `#404040` and `.framer-cyUGZ.framer-9hn341` at `#4D4D4D` for features a plan does not carry. No fill behind it, no ring, no size change between states.

### Airport Board Row
**Role:** One airport's live line on the table.
`.group.relative.flex.h-[48px]` measures 1820×48px with 0px padding, no border and no shadow, in two variants of twenty-six each: transparent, and `#FAFAFA`. Zebra striping is carried by fill alone, the 8px corners making each row a soft slab. The code is 15px/600 at a 15px line height and 0.37px tracking in `#000000`; the airport name 15px/500 at 22.5px; delay figures 15px/600 at 22.5px, same tracking. Alerts break the monochrome: `"Airport Closed"` in `#DF534A`.

### Live Status Marks
**Role:** The dot, the halo and the map pin that say how late an airport runs.
The dot (`.h-2.w-2.rounded-full.bg-status-on-time`) is an 8×8px `#039855` circle, no shadow, nested in two halos: `.flex.h-3.5.w-3.5.items-center` at `rgba(3, 152, 85, 0.2)` and 14×14px, then `.flex.h-5.w-5.items-center` at `rgba(3, 152, 85, 0.1)` and 20×20px. Amber repeats it at `rgba(252, 188, 26, 0.1)` across 48×48px and `rgba(252, 188, 26, 0.2)` across 35×35px; red runs `rgba(255, 0, 0, 0.05)` and `rgba(255, 0, 0, 0.08)`. Map pins are gradient circles on Pin Drop: on-time (`.bg-gradient-to-b.from-[#049856].to-[#1DB16F].relative`) 10×10px, amber (`.bg-gradient-to-b.from-[#FCBC1B].to-[#FFD534].relative`) 14×14px, red (`.bg-gradient-to-b.from-[#FF0202].to-[#FF4C4C].relative`) 20×20px. The label beneath (`.absolute.bottom-[-4px].shadow-tv-airport-pill.h-[20px]`) is `#FFFFFF`, 40×20px, 5px vertical padding, Pill Ring shadow, holding a 12px/700 `#525252` code.

## Do's and Don'ts

### Do
- Do let the fill carry the CTA's meaning and keep the geometry fixed.
- Do set display type in system-ui at 700 and let size do the work.
- Do tighten tracking as type grows: −1px on the 65px `"Get the truth when you travel"` row, −0.28px on the 56px `"Share your flying with friends and family."` row, normal on the 48 and 40px rows.
- Do prefer black or white at partial opacity for body copy; the tinted exceptions are `#383145` on `"Kick back, relax, and enjoy scrolling through th"` and `#415249` on `"Choose who you want to share your flying with. T"`, each tuned to the panel it sits on.
- Do keep status colour on the dot and the pin, and Pro Purple on the pricing page's carriers.
- Do use the shadow stack as your edge: a ring, then five layers falling away.
- Do give the board its own face — Pangram Sans Rounded, with Inter for column headers.

### Don't
- Don't draw a border. Every control and box row the census carries reports `border none`; the ring in the shadow is the border.
- Don't tint a shadow — the measured stacks are black at 0.01–0.19 alpha, offset straight down.
- Don't paint `#0000EE`. It is what anchors inherit; the link text that renders reads black, grey or white.
- Don't flatten the map pins to solid colour — all three are vertical two-stop gradients on the same Pin Drop.
- Don't invent grey steps. Between white and black the capture paints `#FAFAFA`, `#F5F5F5`, `#E5E5E5`, `#C9C9C9`, `#C1C0C0`, `#8A8A8E`, `#525252`, `#4D4D4D`, `#404040`, `#262626`, `#1B1B1B` and `#141414` — `#8A8A8E` fifty times on the board, the rest once or twice.
- Don't let the marketing display face onto the board, or the rounded board face into a headline. The two share a site, not a scale.
- Don't round the quote tiles uniformly at the edge of an arrangement — the 16px corner is positional.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Marketing ground; the board sheet. |
| 1 | Row Wash | `#FAFAFA` | Alternating board rows; light feature panels. |
| 1 | Warm Paper | `#FAF8F7` | A single 40px panel, warmed a degree off white. |
| 1 | Chip | `#F5F5F5` | The board's segmented toggle track. |
| 2 | Night | `#05010D` | The dark bands that interrupt the white pages. |
| 2 | Tinted Night | `#010A1A` · `#0D0A14` · `#0A0E0C` | Feature panels, each tinted toward its artwork. |
| 3 | Panel | `#141414` | Comparison panels and interval toggle. |
| 4 | Ink | `#000000` | Nav capsule. |
| — | Glass | `rgba(255, 255, 255, 0.05)` | Quote tiles on dark ground. |

## Elevation

Depth is shadow, one idea at different volumes: a hard ring at zero offset and zero blur, then five layers stepping 1 → 3 → 6 → 12 → 24px with negative spread pulling each inward. Alpha picks the tier — 0.02 for a card on white, 0.03 for a floating badge, 0.04 for a card surviving a white-on-white boundary, 0.06 for the black capsule on the home page and for the map pill and search field on the board. Ring width does the rest: 1px for cards, 2px for the map pill, 4px for the search field. Two stacks sit outside the pattern: the 0.19 single-layer dot shadow that keeps a 13px indicator from dissolving, and Hero Lift, whose only carrier is `.framer-8wz4rn`, the 16px-radius `rgba(26, 5, 12, 0.8)` alert panel on the home page; its box is `not measured`.

## Imagery

Photography and product rendering, at a level the layout defers to. Hands hold phones running the app, lit against gradient nebulae in indigo, violet and orange that bleed to the panel edge. A flat-lay shows the hardware family top-down on white. Gift cards are 3D renders: a wireframe aircraft on violet, cloud banks on blue, a dotted world map on navy. Press logos sit in flat grey on dark tiles, no lockup. The board takes another route — a live map canvas on `#F9F5ED` with the system's own pins and pills over it. Icons are small, monoline and outnumbered by emoji, which appear inside the copy itself ("☀️ 88º"): the one informal note in an otherwise precise system.

## Layout

Two structures. The marketing pages are a centred column on white, interrupted by full-width bands of `#05010D`; section padding runs 52, 64, 72, 100, 120 and 140px, and the pricing page opens at 200px. At the top of a page the nav sits inline beside the wordmark; scrolled, it becomes the floating capsule `.framer-kPCMQ.framer-1ogr14f.framer-v-1ogr14f`. The footer repeats on all three Framer pages as four link columns under 15px/600 headings with 15px/400 links — `rgba(0, 0, 0, 0.55)` on the home and gift-card pages, `#FFFFFF` headings over `rgba(255, 255, 255, 0.55)` links on the pricing page — closing on `"Made with love in Austin,"`.

The airports board is an application layout: a full-bleed map with a white sheet (`.pointer-events-auto.relative.flex.w-full`, 35px top padding, `24px 24px 0px 0px` radius) pulled over its lower half, a search field floating at top centre (`.group.relative.flex.h-[42px]`, `#FFFFFF`, 20px horizontal padding, Field Ring shadow, a `rgba(0, 0, 0, 0.04)` ⌘K chip inside), and a table beneath at 48px rows, 34px column gaps, a `#E5E5E5` hairline where a rule is needed.

## Typography Voice

Two registers, kept apart. Marketing copy is long-form and conversational in system-ui: headlines in sentence case with terminal punctuation ("Get the truth when you travel"), bold lead-ins running straight into their own paragraph ("Putting the 'Pro' in approachable. Powerful, pilot-grade data…"). Hierarchy comes almost entirely from scale — 65px down to 15px, 700 above 40px. The board is the second register, where Pangram Sans Rounded runs with *positive* 0.37px tracking and leading collapsed to 1.0 so numerals align. Rounded letterforms plus open tracking plus tabular alignment is how an anxious data table stays friendly. The inventory also names sans-serif, SF Pro Text Regular, SF Pro Text Semibold, Times and Indie Flower at 400, none carrying a measured text row — fallbacks, not part of the system.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `#000000`
- surface: `#FAFAFA`
- border: `#E5E5E5`
- accent: `#BF59F2`
- primary action: `#000000` (`.framer-xeJ9s.framer-1e7yv97.framer-v-1e7yv97.framer-8jwfvx`), `#BF59F2` on the pricing page, `#0194FF` on the gift-card purchase button only

## Example Component Prompts
1. **Notification Card**: `#FFFFFF`, 16px padding all round, 16px radius, no border, 325–404×79px, Card Whisper shadow. A 40×40px fully-round leading slot (`.framer-1voyj7z`, `fill none`, `(no text)`, six on the home page); its gap is `not measured`. Title system-ui 16px/600 at 24px; subtitle 15px/400 at 22.5px, `rgba(0,0,0,0.5)`.
2. **Pill Button set**: Three buttons, each 12px 20px padding, 40px radius, no border, no shadow, label system-ui 15px/600 at 18px — light (`#FFFFFF` fill, `#000000` text), dark (`#000000` fill, `#FFFFFF` text), Pro (`#BF59F2` fill, `#000000` text). Icon and label 8px apart.
3. **Airport Board Row**: 1820×48px, 8px radius, no padding, no border, no shadow, alternating fills of transparent and `#FAFAFA`. Code in Pangram Sans Rounded 15px/600 at 15px, 0.37px tracking, `#000000`; name 15px/500 at 22.5px; delay figures 15px/600 at 22.5px. Column gap 34px, alert text `#DF534A`.
4. **Map Pin with Label**: A 10×10px circle from `#049856` to `#1DB16F` top-to-bottom, Pin Drop shadow. Beneath it a 40×20px white pill, 5px vertical padding, 9999px radius, Pill Ring shadow, holding a three-letter code in Pangram Sans Rounded 12px/700 at 12px, 0.37px tracking, `#525252`.
5. **Pricing Panel**: `#141414`, 26px top padding, 48px sides, bottom padding `not measured`, 20px radius, no border, no shadow. Feature rows at 30px gaps, each a 13×13px glyph at 0px radius — `#BF59F2` for Pro, `#FFFFFF` for Free, `#404040` for absent — beside a label in system-ui 14px/500 at 18.2px, `rgba(255,255,255,0.7)`. Header system-ui 40px/600 at 48px, `#FFFFFF` (the `"Compare plans."` row).

## Similar Brands

- **Apple product marketing** — huge tight-tracked headlines over device photography.
- **Linear** — the same bright-page / near-black-band alternation, edges drawn with a hairline ring.
- **Raycast** — a marketing page showcasing a dense, keyboard-first product UI, down to the ⌘K chip.
- **Bellroy** — the same warm-but-precise register: soft radii, restrained palette.
- **Things (Cultured Code)** — one rounded face, generous white, colour reserved for status.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-ink: #000000;
  --color-ink-body: rgba(0, 0, 0, 0.55);
  --color-ink-body-inverse: rgba(255, 255, 255, 0.7);
  --color-row-wash: #FAFAFA;
  --color-paper-warm: #FAF8F7;
  --color-chip: #F5F5F5;
  --color-night: #05010D;
  --color-night-blue: #010A1A;
  --color-night-violet: #0D0A14;
  --color-night-green: #0A0E0C;
  --color-panel: #141414;
  --color-glass: rgba(255, 255, 255, 0.05);
  --color-pro: #BF59F2;
  --color-pro-tint: rgba(191, 89, 242, 0.1);
  --color-action: #0194FF;
  --color-signal: #0085FF;
  --color-anchor: #0000EE;
  --color-amber: #F7BE00;
  --color-status-on-time: #039855;
  --color-status-late-15: #F79009;
  --color-status-late-45: #D92D20;
  --color-alert-text: #DF534A;
  --color-meta: #525252;
  --color-glyph-muted: #404040;
  --color-glyph-dim: #4D4D4D;
  --color-border: #E5E5E5;
  --color-map-canvas: #F9F5ED;
  --gradient-banner: linear-gradient(#616170, #12128C);
  --gradient-pin-ontime: linear-gradient(#049856, #1DB16F);
  --gradient-pin-late: linear-gradient(#FCBC1B, #FFD534);
  --gradient-pin-severe: linear-gradient(#FF0202, #FF4C4C);

  /* Typography — Families */
  --font-display: system-ui, -apple-system, 'SF Pro', sans-serif;
  --font-board: 'Pangram Sans Rounded', 'SF Pro Rounded', ui-rounded, sans-serif;
  --font-ui: 'Inter', system-ui, ui-sans-serif, sans-serif;

  /* Typography — Scale */
  --text-display: 65px;           --leading-display: 78px;
  --text-headline-xl: 56px;       --leading-headline-xl: 56px;
  --text-headline-xl-loose: 56px; --leading-headline-xl-loose: 67.2px;
  --text-headline-l: 48px;        --leading-headline-l: 57.6px;
  --text-headline-m: 44px;        --leading-headline-m: 48.4px;
  --text-headline-s: 40px;        --leading-headline-s: 48px;
  --text-subheading: 17px;        --leading-subheading: 20.4px;
  --text-body-l: 16px;            --leading-body-l: 24px;
  --text-body: 15px;              --leading-body: 22.5px;
  --text-label: 15px;             --leading-label: 22.5px;
  --text-caption: 14px;           --leading-caption: 18.2px;
  --text-micro: 13px;             --leading-micro: 15.6px;
  --text-code: 12px;              --leading-code: 12px;
  --tracking-display: -1px;
  --tracking-headline: -0.28px;
  --tracking-subheading: -0.43px;
  --tracking-board: 0.37px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 32px;
  --spacing-3xl: 34px;
  --spacing-4xl: 48px;
  --section-sm: 52px;
  --section-md: 72px;
  --section-lg: 120px;
  --section-xl: 200px;

  /* Border Radius */
  --radius-glyph: 0px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-media: 9px;
  --radius-card: 12px;
  --radius-note: 16px;
  --radius-panel: 20px;
  --radius-sheet: 24px 24px 0px 0px;
  --radius-button: 40px;
  --radius-badge: 50px;
  --radius-track: 70px;
  --radius-pill: 999px;
  --radius-full: 9999px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FFFFFF;
  --color-ink: #000000;
  --color-ink-body: rgba(0, 0, 0, 0.55);
  --color-ink-body-inverse: rgba(255, 255, 255, 0.7);
  --color-row-wash: #FAFAFA;
  --color-paper-warm: #FAF8F7;
  --color-chip: #F5F5F5;
  --color-night: #05010D;
  --color-night-blue: #010A1A;
  --color-night-violet: #0D0A14;
  --color-night-green: #0A0E0C;
  --color-panel: #141414;
  --color-glass: rgba(255, 255, 255, 0.05);
  --color-pro: #BF59F2;
  --color-pro-tint: rgba(191, 89, 242, 0.1);
  --color-action: #0194FF;
  --color-signal: #0085FF;
  --color-anchor: #0000EE;
  --color-amber: #F7BE00;
  --color-status-on-time: #039855;
  --color-status-late-15: #F79009;
  --color-status-late-45: #D92D20;
  --color-alert-text: #DF534A;
  --color-meta: #525252;
  --color-glyph-muted: #404040;
  --color-glyph-dim: #4D4D4D;
  --color-border: #E5E5E5;
  --color-map-canvas: #F9F5ED;

  --font-display: system-ui, -apple-system, 'SF Pro', sans-serif;
  --font-board: 'Pangram Sans Rounded', 'SF Pro Rounded', ui-rounded, sans-serif;
  --font-ui: 'Inter', system-ui, ui-sans-serif, sans-serif;

  --text-display: 65px;
  --text-display--line-height: 78px;
  --text-display--letter-spacing: -1px;
  --text-headline-xl: 56px;
  --text-headline-xl--line-height: 56px;
  --text-headline-xl--letter-spacing: -0.28px;
  --text-headline-l: 48px;
  --text-headline-l--line-height: 57.6px;
  --text-headline-m: 44px;
  --text-headline-m--line-height: 48.4px;
  --text-headline-s: 40px;
  --text-headline-s--line-height: 48px;
  --text-subheading: 17px;
  --text-subheading--line-height: 20.4px;
  --text-subheading--letter-spacing: -0.43px;
  --text-body-l: 16px;
  --text-body-l--line-height: 24px;
  --text-body: 15px;
  --text-body--line-height: 22.5px;
  --text-label: 15px;
  --text-label--line-height: 22.5px;
  --text-label--letter-spacing: 0.37px;
  --text-caption: 14px;
  --text-caption--line-height: 18.2px;
  --text-micro: 13px;
  --text-micro--line-height: 15.6px;
  --text-code: 12px;
  --text-code--line-height: 12px;
  --text-code--letter-spacing: 0.37px;

  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-2xl: 32px;
  --spacing-3xl: 34px;
  --spacing-4xl: 48px;
  --spacing-section-sm: 52px;
  --spacing-section-md: 72px;
  --spacing-section-lg: 120px;
  --spacing-section-xl: 200px;

  --radius-glyph: 0px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-media: 9px;
  --radius-card: 12px;
  --radius-note: 16px;
  --radius-panel: 20px;
  --radius-button: 40px;
  --radius-badge: 50px;
  --radius-track: 70px;
  --radius-pill: 999px;
  --radius-full: 9999px;
}
```