Design a light-mode website section: surgical white planes, crisp legal blue accents, and metric-grounded reassurance.
LAYOUT
The page uses a clean split layout with a left sidebar column (~380px) and a primary content column (~680px). The left column stacks the category chip, H1 display heading, supporting deck, and the 2x2 statistics card. The right column presents an even, vertical cadence of five independent FAQ card containers followed by a single left-aligned contact link.
PALETTE (use these exact hex values)
- #FAFAFC — Background Off-White: Overall canvas background providing gentle contrast against pure white cards.
- #FFFFFF — Card Pure White: Fill color for metric containers, pill badges, and individual FAQ card tiles.
- #EAEBF0 — Card Border: Hairline 1px border enclosing cards, separators, and inactive container frames.
- #1D68F2 — Primary Metric Blue: Applied to giant metric figures (28px bold), active links, and icon strokes.
- #EFF6FF — Soft Blue Tint: Background fill for the top FAQ pill tag and accordion circular chevron badges.
- #E8F8F0 — Security Mint Tint: Background for the bottom enterprise security guarantee callout.
- #0D7A48 — Security Forest Green: Checkmark icon and text for the enterprise-grade security guarantee badge.
- #111827 — Text Primary: Headings, question titles, and stat labels; near-black high-contrast tone.
- #6B7280 — Text Secondary: Explanatory paragraphs, subtitle context, and secondary metric descriptions.
- #9CA3AF — Text Muted Label: Overline section titles (uppercase, tracked out) and subtle metadata.
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading-lg, 44px display. Tracking -0.02em at display, +0.06em at overline. The typographic tone is authoritative, clinical, and corporate, evoking the precision required for IP law and enterprise compliance. Inter or standard system grotesque provides an unemotional, highly functional carrier for dense legal-technical answers. The contrast between heavy 44px bold display type and delicate 11px uppercase tracking provides confident balance.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created almost entirely through tone-on-tone boundary definition rather than blurred drop shadows. The #FFFFFF card planes sit cleanly atop the faint #FAFAFC canvas, delimited strictly by 1px solid #EAEBF0 strokes. Hover states or active states rely on subtle tint shifts rather than physical vertical displacement.
IMAGERY
Iconography consists of minimal, technical 1.5px monoline line art contained inside rounded square bounding areas (size ~36px). No photographs, 3D assets, or abstract gradient blobs are present; graphics are solely functional, legal- and data-oriented symbolic glyphs (shield, lock, file, puzzle, clock).
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive move is the pairing of a self-contained 2x2 metric box on the left with independently floating, pill-accented accordion cards on the right. Rather than a standard text FAQ list, each question is treated as an individual, white modular appliance with its own category glyph and circular soft-blue disclosure trigger.
MUST
- Retain the sharp 1px hairline border (#EAEBF0) around all pure white card surfaces.
- Isolate metric values (e.g. 75%+, 90%) in pure brand blue (#1D68F2) for instant scanning.
- Use generous 16px vertical spacing between stacked accordion cards to maintain separation.
- Include dedicated left-aligned rounded square glyphs (24px) for each FAQ topic.
AVOID
- Do not merge FAQ cards into a single joined list with dividing lines; they must stay floating cards.
- Avoid heavy dark drop shadows; depth is strictly indicated by border contrast against #FAFAFC.
- Do not use saturated primary buttons; the call-to-actions are subtle inline text links.
- Never substitute the mint security banner color (#E8F8F0) with primary blue.
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 中尝试 
