Design a light-mode mobile app interface screen: crisp oceanic minimalism meeting rugged coastal craftsmanship through deep spruce greens and airy alpine whites.
LAYOUT
The mobile page maintains a disciplined single-column vertical stack with 16px outer margins. It opens with a 56px utility header, transitions into a dominant photographic hero card (aspect ~4:3), flows into a 5-item horizontal category icon strip, and lands on an asymmetric split-card spotlighting a flagship product. Vertical pacing between sections holds at a steady 24px.
PALETTE (use these exact hex values)
- #133230 — Spruce Green: primary brand color used for dominant headings, logo mark, primary buttons, and icon strokes
- #0F8684 — Maritime Teal: vibrant accent for category kickers, circular bullet icon frames, and shopping cart notification count badge
- #FFFFFF — Canvas White: primary screen background and card canvas
- #F3F5F5 — Mist Surface: subtle background fill for category icon tiles and featured product container
- #586668 — Slate Body: secondary text color for descriptions, subheadings, and specification detail labels
- #E3EDED — Wave Froth: subtle wave graphic lines and passive carousel indicator dots
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Montserrat, DM Sans, Work Sans), weights 400/500/600/700/800. Sizes 10px caption, 12px body-sm, 13px subheading, 15px body, 22px heading, 32px display. Tracking 0.18em for uppercase badges, -0.02em for display titles. The typographic tone is assertive, athletic, and engineered, speaking like an artisanal shaping bay with high-performance standards. Plus Jakarta Sans or Montserrat delivers strong geometric weight in headings without sacrificing legible micro-kerning on specs. All-caps labels lend technical precision and authority to otherwise casual surf equipment taxonomy.
GEOMETRY & SPACING
Corner radii — cards 24px, links 0px, inputs 8px, buttons 8px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is strictly graphic and non-skeuomorphic, achieved purely through layered surface values (#FFFFFF base under #F3F5F5 cards) and crisp image contours. Elevated components do not cast soft ambient drop shadows; they remain entirely flat and boundary-defined. Physicality comes from the cutout surfboard overlapping the subtle background contours within the card.
IMAGERY
Photography emphasizes authentic ocean power: crisp, high-shutter-speed water textures with turquoise barrels, frothy spray, and active surfing moments. Studio imagery contrasts sharply by isolating pure, unblemished white fiberglass boards against subtle wave-line tinted backgrounds. Warm lifestyle or urban street visuals are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric split product card pairing a full-height, vertically cropped surfboard cutout on the left with a stacked micro-spec feature list on the right. To execute it correctly, anchor the board against a gentle pastel wave contour while aligning text, icons, and CTA strictly to the right half. It fails when the board graphic is shrunk to fit symmetrically above the text instead of locking beside it.
MUST
- Keep card radii consistently curved at 24px to soften the technical edge of the gear.
- Use uppercase lettering with generous letter spacing (0.12em-0.18em) on all labels and button titles.
- Limit accent color #0F8684 strictly to interactive feedback, circular icon rims, and category kickers.
- Pair full-bleed action photography with isolated product cutouts on clean tinted cards.
AVOID
- Do not use fuzzy drop shadows; depth must rely entirely on tonal surface contrast (#FFFFFF vs #F3F5F5).
- Never replace the deep spruce #133230 with neutral generic blacks or grays.
- Do not allow category icon labels to wrap to two lines; keep labels concise and uppercase.
- Avoid fully rounded pill buttons; buttons must maintain a crisp 8px rounded rectangle profile.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1360:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
