Overview
- Build the experience around one centered handset and a small set of floating status cards.
- Let the system feel trustworthy and crystal clear rather than adventurous or noisy.
- Use the cobalt strip as the clearest signal of live status.
Flighty
The only app that tells you everything about your flight and tracks your lifetime of travel. Get real-time updates, the fastest alerts, and delay predictions, so you're always the first to know and rebook.
4.0
19
Visits
Categories
Available Pages
Workflow Collections
Design Analysis
Flighty Home design analysis
Build the experience around one centered handset and a small set of floating status cards. Let the system feel trustworthy and crystal clear rather than adventurous or noisy. Use the cobalt strip as the clearest signal o...
Key Takeaways
- Build the experience around one centered handset and a small set of floating status cards.
- Let the system feel trustworthy and crystal clear rather than adventurous or noisy.
- Use the cobalt strip as the clearest signal of live status.
- Use app-realistic maps, delay cards, and flight alerts around one phone mockup.
- Keep the rest of the field extremely clean.
- Use white and black for most of the page.
Image Direction
- Use app-realistic maps, delay cards, and flight alerts around one phone mockup.
- Keep the rest of the field extremely clean.
Colors
- Use white and black for most of the page.
- Use cobalt for status-level emphasis only.
- Allow a little map green or UI color inside product proof.
Typography
- Use bold system-style display type for the main promise.
- Keep explanatory copy centered and steady beneath it.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Flight Card Clarity
A travel-app marketing language built from crisp white stages, huge black headlines, cobalt alert bars, floating phone mockups, and translucent status cards.
Clear, app-centric, reassuring, and premium.
Primary mode: lightconsumer travel app marketingui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Clear, app-centric, reassuring, and premium.
Density
4
Variance
5
Motion
2
Signals
cobalt status strip · centered handset proof · translucent travel cards
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Cloud White
#FFFFFF
Route Black
#0B0B0B
Signal Cobalt
#29259E
Soft Gray
#666666
Card Mist
#F3F3F3
Map Green
#A9DE69
Usage rules
Keep most of the marketing shell white and quiet.
Use cobalt for status and trust signals, not for every CTA.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3rem
section_gap
clamp(4rem, 8vw, 6rem)
panel_padding
1.25rem
Token Radii
Corner radii tokens with a live surface sample.
sm
12px
md
18px
lg
24px
xl
30px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
SF Pro Display
large consumer-app display sans
Body
SF Pro Text
friendly high-legibility body voice
Accent
SF Pro Text
navigation and badge voice
Mono
SF Mono
occasional technical support voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(3.2rem, 7vw, 5.6rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
H3
clamp(1.3rem, 2vw, 1.8rem)/—
H3
Body
1rem/—
Body
Label
0.9rem/—
Label
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep display type bold and direct like a consumer product launch. · Support it with calm, centered explanatory copy.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-240ms
Easing
cubic-bezier(.22, 1, .36, 1)
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-240ms |
easing | cubic-bezier(.22, 1, .36, 1) |
Layout Principles
Center the hero around one device object.
Float supporting cards around it without cluttering the page edge to edge.
Use dark chapters sparingly for premium or data-rich moments.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Bars alert strip
Base Attributes
Background
#29259E
Text
#FFFFFF
Border
none
Radius
0px
Padding
0.75rem 1rem
Shadow
none
Cards status card
Feature Card
Component preview content
Base Attributes
Background
rgba(255, 255, 255, 0.92)
Text
#0B0B0B
Border
1px solid rgba(11, 11, 11, 0.06)
Radius
18px
Padding
1rem
Shadow
0 12px 32px rgba(0, 0, 0, 0.08)
Actions dark pill
Base Attributes
Background
#0B0B0B
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.8rem 1.2rem
Actions light pill
Base Attributes
Background
#FFFFFF
Text
#0B0B0B
Border
1px solid rgba(11, 11, 11, 0.12)
Radius
999px
Padding
0.8rem 1.2rem
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -phone mockup
- -floating alert card
- -map interface
Subject patterns
- -single centered handset
- -soft white alert cards
- -green-and-blue map surfaces
Composition logic
- -Center the device and orbit cards around it.
- -Keep the page field mostly empty and white.
Treatment rules
- -Stay app-realistic and clean.
- -Use soft card shadows, not heavy marketing chrome.
Generation cues
- -Ask for a centered handset with floating travel alerts on a white stage.
- -Mention a cobalt status strip and minimal black typography.
Avoid
- -No abstract aircraft illustration replacing the product.
- -No heavy dark UI as the default homepage mood.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not replace the centered device proof with abstract illustration.
- -Do not let cobalt become the whole page atmosphere.
- -Do not turn the system into a busy airline-dashboard collage.