Design a dark-mode mobile app interface screen: cockpit luxury crafted with midnight glass, deep radar shadows, and precision mint luminescent telemetry.
LAYOUT
The mobile layout follows a strict stacked bento rhythm optimized for one-thumb scanning. It begins with an atmospheric hero header containing greeting and primary status, transitions into a three-way quick access tier, followed by a horizontal carousel of upcoming flights. Below lies a 2-column tactical bento grid combining operational alerts (radar, trip count) with booking utilities, ending with a utility action row and a persistent five-point bottom navigation bar.
PALETTE (use these exact hex values)
- #080D14 — Midnight Abyss: Primary background canvas behind all screens, status bars, and floating navbars
- #101A26 — Nocturne Slate: Base fill for interactive bento modules, flight cards, and utility tiles
- #1A2838 — Cockpit Rim: Subtle 1px border stroke distinguishing dark cards from the dark canvas
- #2EE59D — Luminescent Mint: Active states, on-time indicators, hero headline accents, and key circular CTAs
- #0D2E26 — Mint Glare Tint: Background pill fill behind on-time badges and radar rings
- #4B96FF — Avionics Blue: Status indicator text for open check-ins and non-urgent notices
- #FFFFFF — Stratosphere White: Primary flight codes, headline titles, and active iconography
- #8E9DAE — Telemetry Grey: Secondary flight dates, card descriptions, and inactive navigation items
- #505E70 — Starlight Muted: Micro captions, divider dots, and tertiary route coordinates
TYPOGRAPHY
Typeface SF Pro Display (or Inter, Plus Jakarta Sans, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px heading, 26px heading-lg, 32px display. Tracking -0.03em on display codes, 0 on body telemetry. Tactical, executive, and mathematically precise. The typeface matches Apple's SF Pro Display with tight negative tracking on display figures to evoke modern flight deck instruments and digital avionics. If SF Pro is unavailable, Inter or Plus Jakarta Sans serve as exact structural replacements to preserve the clean, monoline neo-grotesque clarity.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is created entirely through surface illumination and subtle edge refraction rather than diffuse shadows. Cards sit slightly elevated above the midnight abyss (#080D14) via a faint 1px rim highlight (#1A2838) and occasional dark gradient underlays. Higher interactive elements, such as the mint action button and active status pills, pop through luminous phosphor glow rather than physical Z-axis lift.
IMAGERY
Photorealistic, cinematic, and moody. The hero header features an executive widebody airliner cutting dramatically through dark thunderheads, perfectly grading into the pitch-black UI background. Small feature cards utilize realistic 3D models (such as an ergonomic leather business-class seat) and vector radar scopes rendered with tactical precision; cartoonish or flat illustrative assets are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone hero headline 'Your flights / at a glance' paired with the phosphorescent mint airport-to-airport flight status card. Its identity hinges on the glowing radar-inspired mint (#2EE59D) cutting through cockpit-black glass (#101A26). It is commonly misused by turning all icons or text mint green, which instantly degrades the high-end avionics feel into a chaotic neon sign.
MUST
- Reserve the bright mint green (#2EE59D) strictly for positive status indicators, the active tab, and key CTA accents.
- Maintain uniform 20px border radii across all bento cards and horizontal flight preview slides.
- Pair 32px bold airport abbreviations directly with muted 13px city names for instant glanceability.
- Use faint 1px borders (#1A2838) to delineate cards instead of heavy drop shadows against the dark background.
AVOID
- Do not introduce standard saturated primary greens or warm yellows; maintain cool phosphor mint tones.
- Never use pure white (#FFFFFF) for secondary body descriptions; reserve it for titles and primary metrics.
- Avoid sharp right-angled card corners; all surfaces must conform to the 20px radius language.
- Do not float cards with high-opacity blurred drop shadows; use edge strokes to convey elevation.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2272:3632. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
