Design a light-mode mobile app interface screen: private aviation concierge wrapped in quiet editorial luxury, deep wine velvets, and precision boarding credentials.
LAYOUT
The flow is strictly vertical and card-centric, optimized for single-thumb mobile operation. The top 20% either houses cinematic photography or a delicate progress indicator and back nav. The body nests grouped information inside isolated white cards with generous padding, followed by a locked or sticky bottom shelf displaying pricing and the full-width maroon action button.
PALETTE (use these exact hex values)
- #F4F4F5 — Canvas Oyster: Muted off-white app backdrop providing soft separation behind bright white floating cards
- #FFFFFF — Pure Plinth: Primary card surface for ticket stubs, passenger data lists, and seat selection layouts
- #5B1B29 — Imperial Maroon: Primary call-to-action buttons, active seat indicator, and hero seat numeral
- #28382E — Bespoke Loden: Luxury payment card surface, boarding pass summary sheet, and business class pill accents
- #C59B5F — Gilded Ochre: Subtle luxury crest iconography and gold foil details on digital payment card
- #16171A — Ink Primary: Headings, destination IATA codes, flight times, and primary total amounts
- #767982 — Graphite Muted: Labels, flight duration text, micro-copy, and deactivated seat coordinates
- #E7E8EB — Chiffon Border: Hairline card boundaries, segmented indicators, and seat slot frames
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Freight Display, Didot), weights 400/600. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 28px heading-lg, 32px display. Tracking -0.015em at display, 0em at heading. The typographic hierarchy radiates quiet wealth and bespoke service, inspired by Condé Nast Traveler and heritage luxury houses. Playfair Display delivers prestige in the titles, gate numerals, and seat codes, while clean sans-serif ensures zero friction during critical check-in tasks. Free open-source pairings like Playfair Display and Inter achieve this without proprietary font dependencies.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 14px, buttons 16px. Spacing on a 4px unit, 16px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is handled softly with featherweight ambient shadows (blur 20px to 30px, opacity 4% to 7%) allowing cards to float gently off the oyster background. Bottom sheets and fixed footer bars utilize subtle frosted backdrops (backdrop-filter: blur(12px)) to let scenery peek through. Hard directional shadows are entirely absent to maintain an upscale editorial print quality.
IMAGERY
Imagery uses atmospheric, desaturated cinematic travel photography—such as Big Ben enveloped in moody rain mist—anchored with a dark gradient vignette at the top. Visuals emphasize architecture and destination romance rather than stock tourists. Avoid loud, high-saturation vacation banners or clip-art illustration vectors.
MUST
- Reserve the deep maroon (#5B1B29) strictly for primary forward actions and selected states.
- Pair elegant serif typography for titles, prices, and gates with clear sans-serif for labels.
- Use generous card corner radii (16px to 24px) to sustain a warm, tailored look.
- Include high-end atmospheric photography (like moody city landmarks) masked in headers.
AVOID
- Never use generic bright cobalt blue or electric cyan for airline accents.
- Do not set long multi-line body paragraphs or data tables in serif type.
- Avoid harsh high-contrast black drop shadows; keep elevations diffuse and ethereal (0 8px 24px rgba(0,0,0,0.04)).
- Never use sharp 0px corners on interactive buttons or credential slips.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
