Design a light-mode website section: clinical data precision softened by literary serif titles and airy porcelain cards.
LAYOUT
The layout follows a centered vertical column format bound to a maximum width of approximately 1160px. It sequences from an informative pill badge down to a dramatic centered display lockup, followed by an airy 2x3 card grid for questions. The flow culminates in a stabilizing, grounded horizontal metric bar that spans the entire grid footprint.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Main canvas background and background fill for all interactive FAQ accordion cards
- #F4F8FC — Ice Foundation: Background fill for the stats callout container and secondary section wrapper
- #EAF2FE — Cobalt Wash: Tint fill for category pills and square icon badge containers
- #1D63ED — Electric Cobalt: Heading accent color, pill label text, section tracking kicker, and icon strokes
- #0F172A — Ink Navy: Primary headline text, accordion titles, and large stat metric values
- #64748B — Muted Slate: Descriptive body copy, subheadlines, chevron icons, and metric micro-labels
- #E8F8F2 — Mint Glaze: Circular pill fill behind stat metric icons in the social proof bar
- #059669 — Emerald Icon: Stroke color for trend and positive indicator icons inside stats blocks
- #E2E8F0 — Border Frost: Vertical dividing rules separating metric columns inside the stats block
TYPOGRAPHY
Typeface Newsreader (or EB Garamond, Cormorant Garamond, Tiempos Headline), weights 400/500. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 16px subheading, 32px heading, 46px display. Tracking -0.02em. The typographic tone balances academic credibility with Silicon Valley SaaS precision. The display serif feels literary, thoughtful, and analytical, perfectly suited for high-consideration CPG market research. The neutral grotesque companion (Inter) provides clean legibility for dense technical explanations and complex data points.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 10px, buttons 9999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is strictly non-skeuomorphic and relies on micro-elevation. Interactive FAQ cards hover upon the white canvas via a high-diffusion, ultra-low-opacity shadow (0 4px 24px rgba(15, 23, 42, 0.035)). Contrast between the cards and the recessed social proof tray is established purely through surface value shift from #FFFFFF to #F4F8FC.
IMAGERY
No photographic imagery is present in this viewport. Visual interest is driven exclusively by custom 1.5px to 2px stroke line iconography within tailored rounded bounding boxes. Any imagery introduced into this system must be minimalist, clinical product UI captures or monochromatic diagrams, never stock photography.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone editorial headline lockup paired directly with tinted icon-well FAQ cards. The sudden transition of the title's final phrase from Ink Navy into Electric Cobalt gives an unmistakable signature cadence, reinforced immediately below by the repetition of cobalt within the soft-square icon wells.
MUST
- Retain the chromatic shift in headlines where the concluding line is tinted Electric Cobalt (#1D63ED).
- Preserve the two-column accordion layout on desktop with an exact 16px horizontal and vertical gap.
- House FAQ outline icons within dedicated 44px soft squircle wells of pale cobalt (#EAF2FE).
- Pair serif display figures with modern geometric sans-serif body copy for intellectual authority.
AVOID
- Do not use dark backgrounds; the identity is strictly calibrated for bright, luminous white space.
- Do not omit the circular icon accessories next to the statistical numbers in the proof ribbon.
- Never make the FAQ questions bold serif; titles must remain in clean, mid-weight sans-serif.
- Avoid solid heavy borders around cards which disrupt the airy, weightless card appearance.
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. 在 DraPub 中尝试 
