Design a light-mode mobile app interface screen: sunlit peach gradients meet deep evergreen typography in an athletic editorial mobile boutique.
LAYOUT
The mobile viewport opens with a sweeping full-width atmospheric hero framing the team kit collection, dominated by the athlete and layered title typography. As the user scrolls, a crisp white card (#FFFFFF) overlaps the gradient hero, presenting the signature boot alongside spec icons and a carousel pager. Beneath this, an editorial storytelling module splits attention between brief journalistic copy and an embedded media thumbnail.
PALETTE (use these exact hex values)
- #152C26 — Pitch Petrol: Primary surface for interactive pill buttons, backdrop typographic cutout, and high-emphasis headlines.
- linear-gradient(180deg, #FBDBC2 0%, #F5B98A 60%, #EAA271 100%) — Sunlit Peach Gradient: Hero backdrop canvas providing an energetic, golden-hour dawn atmosphere behind athletic cutouts.
- #FFFFFF — Card White: Elevated card background holding technical boot specs and carousel media modules.
- #EE5E1B — National Amber Orange: High-visibility identity accent used on collection subheads, federation crest badge, and boot highlight accents.
- #568B87 — Teal Muted Slate: Technical kicker labels like 'FEATURED BOOT' and 'STORY' to indicate category hierarchies softly.
- #5D6E6A — Editorial Body Grey: Secondary description copy, sub-labels, and spec metrics providing gentle contrast.
- #F4EDE6 — Frosted Surface Muted: Subtle border strokes and circular icon badge background fills.
TYPOGRAPHY
Typeface Futura PT (or Sharp Sans, Montserrat, Syne), weights 500/700/800. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 24px heading, 88px display. Tracking -0.02em for headings, 0.08em for uppercase kickers. The typographic tone is athletic, commanding, and sculptural, defined by a punchy geometric sans like Futura PT or Sharp Sans. Tight negative tracking on display titles gives player gear an aggressive, high-velocity stature, while generously tracked micro-capsules communicate technical precision. If licensing constraints occur, substitute with Montserrat Bold or Syne Bold to preserve the sculpted, forward-leaning stance.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 16px, buttons 999px. Spacing on a 4px unit, 16px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is created primarily through layering physical cutouts above deep backdrop typography, paired with crisp white cards overlaying warm radial gradient canvases. Cards employ an ultra-soft, low-opacity ambient drop shadow (0 12px 32px rgba(21, 44, 38, 0.06)) rather than stark borders. Surface separation feels luminous and daylight-infused rather than computer-rendered.
IMAGERY
Photography features razor-sharp, studio-lit athlete portraits with transparent silhouettes layered over backdrop elements, alongside studio-lit product hardware isolated cleanly on neutral planes. Footwear is captured at a dynamic 3/4 athletic angle with realistic soft ground contact shadows. Stock lifestyle images or uncurated amateur photography would instantly break the premium sportswear narrative.
SIGNATURE DETAIL — the thing that makes this design itself
The three-dimensional typographic sandwich: gigantic bold uppercase lettering ('ORANJE') set in pitch petrol, physically occluded by a studio cutout of the athlete who bursts out into the foreground. Misusing this effect by placing the text over the player's face or flattening the layers destroys the monumental sculptural energy that defines the screen.
MUST
- Place oversized typography behind cutout photography to establish genuine physical depth.
- Use deep petrol green (#152C26) for primary text and buttons to avoid harsh pure blacks.
- Maintain generous 24px card corner radius for all primary floating content containers.
- Keep technical category kickers in spaced uppercase teal (#568B87) tracking at 0.08em.
AVOID
- Do not use harsh #000000 black anywhere; substitute with Pitch Petrol (#152C26).
- Never flatten the athlete cutout into the peach background without the backdrop text layer.
- Avoid square or minimally rounded buttons; pills are mandatory for interactive CTAs.
- Do not let orange dominate as body text; reserve it strictly for badges and accents.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
