Design a light-mode website section: structured institutional trust expressed through crisp geometric cards, luminous cobalt accents, and pristine architectural whitespace.
LAYOUT
The view is partitioned into two major structural bands: a conversion sector and a multi-column site footer. The conversion sector spans a 1240px container composed of an asymmetrical 7:5 two-column grid—left for immediate demo booking with compliance badges, right for two vertically stacked resource cards. Below, separated by generous 64px padding, lies a comprehensive six-column footer capped by an email subscription form and a dedicated sub-footer meta bar.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ground: Outer background surface hosting subtle dot-matrix patterns behind elevated card modules.
- #FFFFFF — Card Surface: Primary fill for interactive cards, input fields, and elevated content containers.
- #1D63ED — Civic Cobalt: Primary brand anchor used for filled CTA buttons, brand logo, headline highlights, and active text links.
- #0F172A — Charcoal Slate: Primary high-contrast tone for prominent headings, card titles, and active brand wordmarks.
- #64748B — Cool Steel: Secondary tone for body descriptions, footer links, copyright text, and form placeholders.
- #E2E8F0 — Divider Border: Hairline structural borders around cards, dividers, social buttons, and input boundaries.
- #10B981 — Mint Shield: Status indicator for compliance badges, security assurances, and glass shield artwork.
- #F59E0B — Amber Lightning: Micro-badge accent for velocity metrics and rapid response callouts.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 22px heading, 36px heading-lg. Tracking -0.02em for headings, -0.01em for body. The typographic tone is authoritative, highly legible, and civic-minded, utilizing a clean neo-grotesque sans-serif (Inter). Tight letter-tracking (-0.02em) on bold headings projects modern efficiency without sacrificing administrative credibility. Muted secondary weights in slate keep technical terminology accessible and organized.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through surface contrast rather than pronounced shadows. Pure white cards (#FFFFFF) sit atop a faint cool-slate canvas (#F8FAFC) with a delicate 1px border (#E2E8F0) and an imperceptible ambient blur (0 4px 20px -2px rgba(15, 23, 42, 0.03)). Interactive hover states subtly brighten borders rather than lifting cards.
IMAGERY
Visual assets combine minimalist linear SVG iconography with clean, semi-translucent 3D glassmorphism. Decorative illustrations depict frosted glass documents, geometric shield icons, and delicate dotted line charts in soft mint and cyan hues. Photography is entirely avoided in favor of crisp technical abstraction.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-column asymmetric CTA layout pairing a deep primary action container with two stacked secondary cards featuring frosted 3D glass artifacts and micro compliance trust badges.
MUST
- Use solid white (#FFFFFF) cards against the slate background (#F8FAFC) to create soft architectural layer separation.
- Reserve the bold blue accent (#1D63ED) strictly for primary buttons, active links, and singular headline highlights.
- Apply a generous 20px border radius consistently across all primary call-to-action cards.
- Group trust credentials with pastel-tinted 36px circular icon containers and two-line microcopy.
AVOID
- Do not introduce deep, murky drop shadows; depth must rely on 1px borders and subtle tonal contrast.
- Do not color entire headlines blue; highlight only the operative transformative phrase.
- Avoid sharp 0px or pill-shaped 999px radii on main cards; stick reliably to 20px.
- Do not clutter footer link columns with icons; use pure 14px text links in #64748B.
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 中尝试 
