Design a light-mode mobile app interface screen: aerodynamic consumer hardware retail with crisp circular accents and serene blue gradients.
LAYOUT
The vertical sequence follows an intentional discovery rhythm: sticky brand header, dominant carousel showcase with integrated pagination dots, feature qualification strip, horizontal product browsing row, cinematic lifestyle banner, and an anchored dock bar. Horizontal gutters stay locked at 16px, with cards spanning edge-to-edge margins for maximum touch-target efficiency.
PALETTE (use these exact hex values)
- #ffffff — Base White: Primary screen canvas and bottom navigation bar background
- #eef4fe — Glacier Wash: Subtle cool-toned gradient base for the featured showcase hero card
- #395bf6 — Cobalt Electric: Primary CTA buttons, active tab indicators, and central floating shutter trigger
- #111827 — Deep Onyx: Product headings, primary titles, section headers, and brand logotype
- #6b7280 — Cool Slate: Body copy, descriptive subtitles, inactive nav labels, and metadata
- #e1f7ed — Mint Glaze: Background fill for the 'NEW ARRIVAL' inventory pill badge
- #10b981 — Emerald Leaf: Text and indicator dot within the inventory status pill
- #ebf1ff — Soft Cobalt Tint: Background circle fill for the quick-add plus button on product cards
- #ef4444 — Signal Coral: Cart counter notification badge on the top right navigation
TYPOGRAPHY
Typeface Inter (or SF Pro Text, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 17px subheading, 20px heading, 24px display. Tracking -0.02em at display, 0.01em at small captions. The voice is confident, tech-forward, and briskly utilitarian. By pairing a high-density neo-grotesque like Inter with clean geometric kerning, the typography conveys precision engineering and modern optical clarity. Standard system font stacks (SF Pro on iOS) seamlessly replicate this aesthetic without performance penalties.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 12px gaps, 24px between sections, 390px container, comfortable density.
DEPTH
Depth is handled with exceptional restraint. Surfaces rely on tonal separation (pure white against faint ice-blue containers) rather than heavy drop shadows. When shadows are employed—such as on the compact product cards or floating shutter action button—they use very low opacity (4-8% black) with 12px to 16px soft blur radii.
IMAGERY
Hardware imagery consists of studio-lit, photorealistic 360-degree cameras isolated on transparent plates with glossy lens reflections. Editorial imagery transitions abruptly into cinematic, wide-angle lifestyle landscapes (dusk mountains, glowing tents) to evoke rugged exploration. Flat clip art or generic indoor stock photography would completely contradict the outdoor-tech persona.
SIGNATURE DETAIL — the thing that makes this design itself
The sculpted bottom navigation cradle with an oversized floating cobalt shutter button. The central lens icon breaches the white bar through an arched circular cut-out, instantly anchoring the app around hardware capture rather than mere browsing. Recreate it with a circular punch-out masking curve in the navigation bar frame, never as a simple overlapping circular button sitting flat over a straight bar.
MUST
- Keep camera hardware renders clean cutouts floating over tinted, shadowless surfaces with faint ground contact shadows.
- Use pill-shaped contours (border-radius: 999px) for all primary buttons and functional interaction tags.
- Enforce cobalt blue (#395bf6) as the exclusive interactive color for active tabs and primary buttons.
- Maintain generous 24px card corner radii to echo circular hardware design aesthetics.
AVOID
- Do not introduce sharp 0px or 4px square corners on cards or primary CTAs.
- Avoid heavy dark borders around product tiles; rely instead on subtle surface value shifts and soft elevation.
- Do not use saturated primary colors for card backgrounds; keep them pastel and airy like #eef4fe.
- Never hide the central notched capture button below the bottom bar boundary.
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 中尝试 
