Design a light-mode website section: crisp developer-grade precision meets approachable consumer wellness through clean modular cards and punchy royal blue accents.
LAYOUT
The section employs an asymmetrical three-column balance anchored over a 1200px grid. The left column (approx 38% width) handles editorial introduction, micro-features, CTA buttons, and social proof. The central column (approx 34% width) is occupied by the visual hero: an AI terminal card stacked above a 4-stat macro nutrition bar. The right column (approx 28% width) houses a stacked 4-point vertical feature checklist and a compact testimonial block, followed by a full-width stats band at the baseline.
PALETTE (use these exact hex values)
- #F3F5F9 — Canvas Ice: Full viewport background providing soft, low-contrast backdrop behind pure white cards
- #FFFFFF — Card Pure White: Foreground surface for micro-feature grids, metrics, side panels, and testimonials
- #111726 — Console Slate: Anchor background for the central code view showing structured JSON data
- #2D68FF — Electric Cobalt: Primary call-to-action fill and highlighted display text spans
- #0B132B — Ink Navy: Main headlines, card titles, stat digits, and terminal JSON keys
- #627084 — Muted Slate: Secondary descriptive copy, subtext, status stamps, and code brackets
- #E2E8F0 — Subtle Border: Hairline perimeter stroke on white surface cards and pill badges
- #FCE7F3 — Soft Rose Tint: Background fill for photo and evidence micro-icon chips
- #E0EDFF — Soft Azure Tint: Background fill for chat, status, and personalization icon chips
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 38px display. Tracking -0.025em for display, 0 for body, 0.05em for caps. The typographic tone is programmatic, calm, and highly engineered. The default sans-serif (matching Inter) conveys objective medical-grade authority through neutral proportions and balanced counters, while negative headline tracking prevents the large display sizes from feeling loose. Monospaced JSON syntax introduces a technical 'under-the-hood' credibility that reassures users the system is analytical, not subjective.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is created primarily through flat surface layering and sharp 1px borders rather than heavy blur shadows. The canvas sits at level 0 (#F3F5F9), while white cards (#FFFFFF) lift gently using a crisp 1px stroke (#E2E8F0) combined with an ultra-diffuse 0 2px 8px rgba(0,0,0,0.03) shadow. The central dark terminal achieves maximum focal hierarchy purely through luminosity contrast against the pale background.
IMAGERY
No photographic lifestyle hero imagery is present; authenticity is instead communicated through small 32px circular user avatar portraits and authentic code/metric UI widgets. Illustrative elements are strictly limited to clean, single-line vector icons centered inside pastel rounded squares. Any photorealistic food stock or busy photographic banners would severely clash with this technical, product-led interface.
SIGNATURE DETAIL — the thing that makes this design itself
The central dark-mode terminal window containing authentic JSON syntax set directly inside a soft, consumer-friendly light-mode hero. This move frames an otherwise standard wellness product as high-precision software. It is properly used as a static proof-of-work asset; misusing it by filling it with unstyled text or using garish hacker-green syntax would immediately break the sophisticated health-tech aesthetic.
MUST
- Reserve vibrant cobalt blue (#2D68FF) for headline focal words and high-intent buttons.
- Use 1px subtle strokes (#E2E8F0) on white cards to maintain separation against the soft grey canvas.
- Enclose all feature icons in pastel tinted squares with generous 8px border-radius.
- Present structured data via a high-contrast dark console card to anchor the layout horizontally.
AVOID
- Do not use heavy, blurry drop shadows; rely on subtle borders and minimal 2px/4px elevation.
- Do not color entire headline sentences in blue; highlight only two to three key impact words.
- Never apply high-saturation neon backgrounds to icon badge containers.
- Avoid mixed font families; use one clean sans-serif for UI and one monospace strictly for JSON.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
