---
title: "Flighty design system"
variant: extended
source: https://flighty.com/
captured_at: 2026-10-12
theme: light
industry: travel
generator: Design DNA (https://four.wiralomi.com/style/flighty-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Flighty · Design System

> Clear flight intelligence, framed in calm contrast.

**Theme:** light · **Industry:** travel · **Source:** https://flighty.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Flighty pairs a spacious white landing page with immersive dark feature sections to present flight tracking as both clear and capable. Large, restrained headlines and vivid app imagery keep the product central without making the page feel crowded.

## North star

Keep the product readable and calm on white, then use near-black feature bands to make vivid flight-interface imagery feel immersive.

## Overview

The page opens on a pure white canvas with black system-sans typography, muted supporting copy, and generous breathing room around a centered headline and phone-in-hand product image. A narrow indigo announcement strip is the only strong color at the top. As the page moves into product features, the white canvas gives way to near-black and deep purple surfaces; these dark bands make vivid app screens, airport imagery, and gradient-lit cards feel immersive. Later sections return to white for sharing, travel history, airport information, and reviews, creating a deliberate light-dark rhythm rather than a uniform backdrop. Typography is mostly system-ui, bold and tightly composed for large headings, with smaller gray paragraphs. Rounded cards, pill-shaped actions, and subtly layered product mockups soften the otherwise precise layout. Bright blue and yellow are reserved for selected controls and product-interface details; much of the other saturated color belongs to screenshots and illustrations.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, navigation background, light section bands, and white CTA surfaces. |
| Midnight Plum | `#05010d` | `--color-midnight-plum` | surface | Primary inverse surface for the large dark product-feature section and its gradients. |
| Flight Gray | `#595959` | `--color-flight-gray` | neutral | Muted explanatory copy on the light hero and supporting sections. |
| Runway Ink | `#000000` | `--color-runway-ink` | neutral | Headlines, navigation labels, and primary text on white. |
| Haze Gray | `#9b999e` | `--color-haze-gray` | neutral | Secondary muted copy, including low-emphasis supporting text. |
| Slate Copy | `#7f7f7f` | `--color-slate-copy` | neutral | Additional subdued text; use for secondary explanations rather than headings. |
| Night Green | `#0a0e0c` | `--color-night-green` | surface | Dark vignette and card-edge treatment, appearing chiefly in feature artwork. |
| Deep Indigo | `#120036` | `--color-deep-indigo` | surface | Purple gradient endpoint used in dark feature artwork and report-style visuals. |
| Soft Graphite | `#646363` | `--color-soft-graphite` | neutral | Mid-tone supporting text within the measured typography palette. |
| Flight Blue | `#007bff` | `--color-flight-blue` | accent | Blue accent on the measured Go Live control; otherwise keep sparing. |
| Taxiway Gold | `#f7be00` | `--color-taxiway-gold` | accent | Yellow selected action accent, also visible in the Preflight product control. |
| Abyss Blue | `#010a1a` | `--color-abyss-blue` | surface | Very dark blue gradient layer behind product imagery and feature cards. |
| Cloud Gray | `#cdcccf` | `--color-cloud-gray` | neutral | Light muted text for low-priority details against dark or pale surfaces. |
| Violet Signal | `#250160` | `--color-violet-signal` | surface | Bright purple midpoint in the measured indigo gradient, primarily feature artwork. |
| Dusky Violet | `#383145` | `--color-dusky-violet` | neutral | Low-emphasis text tone associated with darker product content. |
| Night Charcoal | `#0d0a14` | `--color-night-charcoal` | surface | Near-black secondary surface for cards and dark content layers. |
| Black Plum | `#050408` | `--color-black-plum` | surface | Deep dark card surface within the inverse feature area. |
| Deep Harbor | `#021e30` | `--color-deep-harbor` | surface | Blue-black surface used for selected dark cards and product imagery. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#05010d` (Midnight Plum) · `--color-surface-2` → `#050408` (Black Plum) · `--color-surface-3` → `#021e30` (Deep Harbor) · `--color-surface-4` → `#0d0a14` (Night Charcoal) · `--color-text` → `#000000` (Runway Ink) · `--color-text-muted` → `#595959` (Flight Gray) · `--color-text-subtle` → `#9b999e` (Haze Gray) · `--color-accent` → `#007bff` (Flight Blue) · `--color-accent-2` → `#f7be00` (Taxiway Gold) · `--color-accent-3` → `#08a85b` · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#05010d` | 1.02:1 | fail |
| `#000000` | `#050408` | 1.03:1 | fail |
| `#000000` | `#021e30` | 1.23:1 | fail |
| `#595959` | `#ffffff` | 7:1 | AAA |
| `#595959` | `#05010d` | 2.95:1 | fail |
| `#595959` | `#050408` | 2.92:1 | fail |
| `#595959` | `#021e30` | 2.44:1 | fail |
| `#9b999e` | `#ffffff` | 2.82:1 | fail |
| `#9b999e` | `#05010d` | 7.32:1 | AAA |

### Gradients

- `linear-gradient(rgb(18, 0, 54) 0%, rgb(37, 1, 96) 51.0241%, rgb(18, 0, 54) 100%)`
- `radial-gradient(58% 67%, rgba(10, 14, 12, 0) 36.5164%, rgb(10, 14, 12) 100%)`
- `linear-gradient(rgba(204, 238, 255, 0) 0%, rgb(5, 1, 13) 100%)`
- `linear-gradient(rgb(1, 10, 26) -27%, rgba(1, 10, 26, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 500, 600, 400, 700 | Primary UI, navigation, headings, body copy, and links. | Inter |
| EB Garamond | `--font-eb-garamond` | webfont | 700 | Occasional display or editorial serif detail. | Cormorant Garamond |
| SF Pro Text Regular | `--font-sf-pro-text-regular` | webfont | 400 | Small product-interface text and embedded app-style details. | Inter |

- **system-ui:** Bold, large headings with tight measured tracking; body and navigation stay sans-serif and sentence-case.
- **EB Garamond:** Measured at bold weight; appears sparingly, not as the main interface voice.
- **SF Pro Text Regular:** Regular sans-serif treatment; preserve the compact, legible feel of UI labels.

### Type scale — Perfect Fourth (ratio ≈ 1.324, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 65px | 700 | 1.2 | -0.015em | — | system-ui | Large centered hero headline establishing the page’s main promise. |
| h1 | 56px | 700 | 1 | -0.005em | — | system-ui | Primary section headline where a strong single-line title is needed. |
| h2 | 48px | 700 | 1.2 | 0 | — | system-ui | Major feature and content-section headings. |
| h3 | 44px | 700 | 1.1 | 0 | — | system-ui | Secondary feature titles and prominent card headings. |
| h4 | 40px | 700 | 1.2 | 0 | — | system-ui | Smaller feature or subsection headings. |
| body | 16px | 500 | 1.5 | 0 | — | system-ui | Main explanatory paragraphs below headlines. |
| caption | 15px | 400 | 1.5 | 0 | — | system-ui | Awards, supporting labels, and compact secondary details. |
| nav | 15px | 500 | 2 | -0.01em | — | system-ui | Header links and announcement-strip text. |
| link | 16px | 500 | 1.5 | 0 | — | system-ui | Inline actions and linked feature copy. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 64 px.
- Section rhythm 32px · element gap 10px · card padding 40px · max content width 952px.

The measured content max width is 952px, centered within a much wider desktop canvas. The header and hero are centered, while later feature and editorial sections use aligned content blocks and paired cards. The page alternates full-width white and dark section bands, with a compact density inside feature cards but broad open space around major moments. Keep copy blocks narrow enough to scan, and let product imagery occupy the visual center without crowding the text.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `50%` · nav `6px` · xs `6px` · sm `8px` · md `9px` · lg `10px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.02) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.02) 0px 6px 6px -3px, rgba(0, 0, 0, 0.02) 0px 12px 12px -6px, rgba(0,`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.02) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.02) 0px 6px 6px -3px, rgba(0, 0, 0, 0.02) 0px 12px 12px -6px, rgba(0,`
- Shadow `lg-3` (other): `rgba(0, 0, 0, 0.03) 0px 0px 1px 1px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0.25px, rgba(0, 0, 0, 0.03) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.03) 0px 6px 6px -3px, rgba(0, 0, 0, 0.03) 0px 12px 12px -6px, rgba(0`
- Shadow `lg-4` (nav): `rgba(0, 0, 0, 0.03) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.03) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.03) 0px 6px 6px -3px, rgba(0, 0, 0, 0.03) 0px 12px 12px -6px, rgba(0, 0, 0, 0.03) 0px 24px 24px -12px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 248px 69px 0px, rgba(0, 0, 0, 0.03) 0px 159px 3px 10px, rgba(0, 0, 0, 0.1) 0px 89px 54px 5px, rgba(0, 0, 0, 0.17) 0px 40px 40px 0px, rgba(0, 0, 0, 0.19) 0px 10px 22px 0px`

The white sections are mostly flat, relying on spacing and image composition rather than visible borders. Product cards use large rounded corners and restrained, subtle shadows; dark feature artwork gains depth from gradients, layered phone mockups, and edge vignettes. Use pill-shaped buttons and overlapping interface elements to establish hierarchy without adding heavy outlines.

## Imagery

Use polished app screenshots and product mockups as the main visual evidence: a phone held in hand in the hero, then flight timelines, maps, airport views, and travel-history screens. Mix these with travel and airport photographs or atmospheric artwork in feature cards. Keep imagery crisp and integrated into rounded panels; saturated map colors and purple-orange gradients belong chiefly to media, not the overall page canvas.

## Components

### Announcement strip

A slim full-width indigo gradient band above the white header, with centered new-feature messaging, a live-view link, and a close control.

### Main navigation

White horizontal header with the Flighty mark at left, compact page links in the center, and a right-aligned app action.

### Hero

Centered black headline, muted explanatory copy, award marks, and a large phone-in-hand product image against white.

### Dark feature cards

Rounded, media-led cards on near-black sections; combine short copy with colorful interface screenshots and gradient treatments.

### Pill action

Compact rounded CTA treatment; the measured set includes white and black text on white, and a yellow selected product control.

### Editorial content sections

White-background sharing, passport, airport, and testimonial blocks with restrained text and prominent app or travel imagery.

### Measured component styles

- **Primary button** (“Go Live”): background #007bff · text #0000ee · radius 50px · padding 12px 20px · 400 12px sans-serif
- **Secondary button** (“Give Flighty a try”): background #ffffff · text #000000 · radius 40px · padding 12px 18px 12px 20px · 400 12px sans-serif
- **Link** (“Preflight”): transparent background · text #0000ee · radius 0px · padding 0px 15px · 400 12px sans-serif
- **Card** (“Get perfectly-timed notifications about ”): background #fafafa · text #000000 · radius 20px · padding 40px · 400 12px sans-serif
- **Navigation item** (“NEW! Flighty Airports View Live”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Keep the primary canvas pure white and reserve near-black for feature bands.
- Center the opening headline and phone imagery in the hero.
- Use system-style sans-serif typography with bold, clean headings.
- Let muted gray copy remain clearly subordinate to black titles.
- Use bright blue and yellow as small, purposeful interface accents.
- Alternate white and dark sections to create a deliberate page rhythm.

## Don't

- Do not make every section dark or gradient-filled.
- Do not use saturated illustration colors as the general page palette.
- Do not crowd the hero with extra controls or dense copy.
- Do not add prominent borders to otherwise flat white content blocks.
- Do not replace product screenshots with generic decorative imagery.
- Do not use heavy shadows that compete with the app imagery.

## Agent prompt

Build a travel-product page in Flighty’s visual style. Use Gallery White (#ffffff) for the main canvas, Runway Ink (#000000) for headlines, and restrained gray copy; keep the opening hero spacious, centered, and led by a real product-screen composition. Add a slim indigo announcement band, then alternate white editorial sections with a focused Midnight Plum (#05010d) feature area. Use system-ui-like sans typography, bold display headings, compact navigation, rounded cards, and pill-shaped controls. Reserve Flight Blue (#007bff) and Taxiway Gold (#f7be00) for small functional highlights. Let maps, airport imagery, and app screenshots carry saturated color; do not spread their palette across backgrounds. Keep depth subtle through gradients, soft layering, and product imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Slim announcement banner above a centered white navigation row with brand, links, and an app action. | live-view announcement, direct page navigation, get-the-app action | indigo gradient strip, white header, compact links, close icon |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/flighty-com