Design a light-mode website section: crisp enterprise white space anchored by soft pastel indicator tiles and high-contrast slate typography.
LAYOUT
The section adopts a two-column desktop composition with a 48px column gap. The left column hosts the category pill, display title, supporting copy, and a cohesive feature benefit card. The right column consists of a stacked list of five bordered accordion components separated by 16px vertical intervals. Spanning the base of both columns is a unified horizontal reassurance bar split by a hairline divider.
PALETTE (use these exact hex values)
- #ffffff — Pure White Base: Primary page background and main accordion item surface.
- #f8fafc — Soft Frost Blue: Background fill for the secondary trust card in the left column.
- #0f172a — Deep Slate Navy: Primary headings, accordion question text, and key feature titles.
- #475569 — Cool Slate Muted: Accordion answer copy, feature descriptions, and subtitle text.
- #2563eb — Cobalt Primary: Active link text, accordion chevrons, category dot, and step index numerals.
- #eff6ff — Pill Blue Tint: Background fill for the circular numbered indices (01-05).
- #e2e8f0 — Border Slate Tint: 1px hairline borders delineating cards, accordions, and divider lines.
- #ecfdf5 — Mint Accent Wash: Background disc for the impact metric icon.
- #fffbeb — Amber Accent Wash: Background disc for the speed-to-value checkmark icon.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px heading, 20px heading-lg, 44px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, highly technical, and transparent, powered by a contemporary geometric neo-grotesque like Plus Jakarta Sans or Inter. Tight display tracking (-0.035em) delivers high information density without feeling cramped. Body copy is set at generous line heights (1.5–1.6) to guarantee legibility across detailed technical responses.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 999px. Spacing on a 4px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is communicated almost exclusively through 1px border lines (#e2e8f0) and subtle background shifts between pure white (#ffffff) and cool white (#f8fafc). There are no prominent drop shadows; surfaces feel planar, crisp, and lightweight. Elevation state on hover is represented by border contrast enhancement rather than physical displacement.
IMAGERY
The design is entirely typographic and iconographic; photography is intentionally excluded to preserve an analytical, enterprise software tone. Vector iconography uses consistent 1.5px stroke weights nested within soft pastel-tinted discs (32px diameter). Any future imagery should strictly consist of precise vector UI diagrams or subtle monochromatic schematics.
SIGNATURE DETAIL — the thing that makes this design itself
The two-digit blue numbered pill (01-05) paired directly with a bold accordion headline in separate card rows. This transforms standard FAQ lists into a structured, sequential decision-making path that guides the enterprise buyer effortlessly.
MUST
- Use 1px border (#e2e8f0) around accordion rows instead of heavy drop shadows.
- Prefix every accordion question with a 2-digit padded number inside an #eff6ff rounded pill.
- Maintain a clear two-column asymmetric split (roughly 35% left, 65% right) on desktop viewports.
- Keep typography strictly within the cool slate spectrum, avoiding pure #000000 black.
AVOID
- Do not use dark card backgrounds or heavy skeuomorphic shadows.
- Do not remove the leading zero from accordion item numbering (keep 01, 02).
- Do not substitute the sharp rounded chevrons with plus/minus toggles.
- Do not use saturated primary colours for feature badge backgrounds; use 10% opacity tints.
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 中尝试 
