Design a light-mode mobile app interface screen: editorial athletic elegance framed by warm alabaster tones, high-contrast serif typography, and studio-lit cutout portraiture.
LAYOUT
The vertical composition moves from an expansive editorial hero section down into structured micro-modules. The upper half pairs a left-aligned editorial text block with a dominant full-bleed athlete cutout stretching across the top-right quadrant. Directly below sits the hero feature card spanning nearly the full viewport width with 20px margins, followed by a tight 2-column grid of program shortcuts and a docked five-item tab navigation bar.
PALETTE (use these exact hex values)
- #FAF7F4 — Alabaster Warm Canvas: dominant screen background providing a warm, tactile editorial parchment feel
- #FFFFFF — Frosted Card Surface: elevated card surfaces with faint alpha blending against the background
- #F3EDE8 — Subtle Cream Fill: background fill for the 2-column path program cards and inactive track lines
- #382223 — Deep Espresso: primary pill buttons, circular action targets, dark headings, and active indicators
- #A88B74 — Bronze Sand: all-caps micro-eyebrows, category headers, and subtle status metadata
- #1C1717 — Charcoal Black: headline typography and prominent title lockups
- #6D6463 — Muted Truffle: body explanations, inactive tab icons, and program descriptions
- #E7E0DA — Pale Border Sand: delicate dividing lines and track backgrounds for progress indicators
TYPOGRAPHY
Typeface Cormorant Garamond (or Playfair Display, Ogg, Canela), weights 400/500/600. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 22px heading, 28px heading-lg, 38px display. Tracking -0.02em at display sizes. The typography balances the physical grit of athletic movement with the quiet luxury of an independent fashion magazine. The display serif has sharp serifs, delicate hairline strokes, and high stroke contrast, evoking bespoke wellness and prestige. Standardizing body and metadata in clean, unadorned sans-serif ensures legible training schedules and effortless UI scanning.
GEOMETRY & SPACING
Corner radii — cards 24px, links 999px, inputs 12px, buttons 16px. Spacing on a 4px unit, 12px gaps, 32px between sections, 390px container, comfortable density.
DEPTH
Depth is created through soft, diffuse drop shadows with large blur radii (16px to 32px) and extremely low opacity (4% to 8% warm umber), rather than sharp multi-tiered elevations. Cards appear to float gently above the warm canvas like physical art-book pages. Kinetic imagery layered over and extending past card frames reinforces three-dimensional depth without relying on artificial lighting effects.
IMAGERY
Photography is high-end studio fitness portraiture shot with crisp key lighting, clean off-white backgrounds, and active kinetic posing (resistance bands, tennis swings, pilates). Subjects wear sleek monochrome performance apparel. Lower grid cards employ desaturated, warm-tinted photographic vignettes that smoothly fade into the cream tile fill.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the 'kinetic border break' — high-fashion cutout athletic photography where arms, racquets, or bands physically slice out of card borders and into neighboring editorial white space. To use it correctly, ensure subject images are cleanly silhouetted against pure or alpha-blended backgrounds so they float seamlessly over both the card surface and the outer canvas.
MUST
- Use warm alabaster tones (#FAF7F4) rather than clinical cool white for base backgrounds.
- Pair high-contrast serifs on headlines with neutral geometric sans-serifs for interface copy.
- Let high-key dynamic cutout imagery breach card and hero boundaries to convey physical motion.
- Style category eyebrows in uppercase sand/bronze (#A88B74) with wide tracking (0.12em).
AVOID
- Do not introduce harsh primary neon colors, saturated blues, or aggressive gym-app accents.
- Never use pure jet black (#000000) for buttons or primary typography.
- Avoid sharp 0px corners; maintain soft 16px to 24px corner radii across all card surfaces.
- Do not set running body text or tabular numbers in the display serif typeface.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2176:3792. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
