Design a light-mode website section: crisp aerospace clarity defined by cobalt active states, pillowy card geometry, and calm modular hierarchy.
LAYOUT
The composition uses an asymmetric two-column split on top: a 38% left column dedicated to section branding, display title, and stacked proof points, alongside a 62% right column housing the vertical accordion stack. Items in the accordion stack are separated by 14px vertical margins. The two columns span a shared 1200px container, resolved underneath by a full-width auxiliary support banner spanning the complete grid width.
PALETTE (use these exact hex values)
- #FFFFFF — Atmospheric White: Default card backgrounds and collapsed accordion surface fills
- #F8FAFC — Ice Tinge Canvas: Global application page background providing subtle contrast against pure white cards
- #F3F6FF — Pale Indigo Tint: Background fill for bottom CTA support banner and subtle badge fills
- #2563EB — Cobalt Engine: Active accordion borders, expanded question headings, CTA button fills, and brand badges
- #1D4ED8 — Aero Blue Hover: Hover and pressed states for primary interaction buttons
- #0F172A — Slate Void: Primary headings, display titles, and closed accordion question text
- #475569 — Stratosphere Gray: Supporting descriptions, subheaders, and feature point copy
- #E2E8F0 — Perimeter Border: Neutral hairline boundary lines for inactive accordion panels and cards
- #10B981 — Mint Radar: Accent stroke for rapid deployment lightning bolt icon
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 16px subheading, 18px heading, 44px display. Tracking -0.025em for display, -0.01em for questions, 0 for body. The typographic tone is authoritative, technological, and unembellished. Utilizing Inter's tight geometric forms with negative tracking (-0.025em) on display headlines delivers industrial confidence. Its clean tall x-height ensures technical explanations remain effortless to parse at 14px and 15px sizes.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 12px, buttons 12px. Spacing on a 8px unit, 14px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated through hairline physical delineation rather than drop shadows. Surface layers rely on 1px borders (#E2E8F0) contrasting against an atmospheric canvas (#F8FAFC) to create subtle relief. The active accordion card achieves dominance solely through a 1.5px high-chroma cobalt stroke (#2563EB).
IMAGERY
This layout abstains completely from photographic material, relying entirely on minimal mono-line iconography inside rounded bounding boxes. Icons employ thin 1.5px vector strokes in cobalt, navy, and mint hues. Any photographic inclusion would dilute the concise technical utility of the FAQ layout.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive cobalt-framed active accordion card: rather than merely expanding with text, the active item transforms into a branded vessel with an electric cobalt hairline border and matching cobalt header, cleanly separating itself from the neutral dormant cards.
MUST
- Retain the 14px uniform gap between stacked accordion cards to maintain pill rhythm.
- Highlight only one expanded accordion item at a time using the cobalt border stroke.
- Pair the active state border (#2563EB) directly with cobalt title text for immediate clarity.
- Keep outline stroke widths strictly between 1px and 1.5px for crisp industrial feel.
AVOID
- Never merge accordion rows into a continuous table list with internal divider lines.
- Do not introduce heavy drop shadows; cards rely strictly on hairline borders for separation.
- Avoid setting inactive accordion titles to light gray; they must remain high-contrast #0F172A.
- Do not use sharp 0px or pill 999px radii on FAQ containers; keep them strictly at 16px.
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 中尝试 
