Design a light-mode website section: crisp enterprise reassurance balanced by spacious card layouts, pill badging, and calming cornflower accents.
LAYOUT
The layout is horizontally centered within an 1120px max-width boundary. A centered vertical header stack (Pill badge, 44px display headline, subtitle) leads the eye. Below lies a two-column asymmetrical layout: a 34% width trust/feature sidebar on the left and a 66% width structured FAQ accordion panel on the right.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Global application page background and primary card fill
- #F4F8FF — Subtle Blue Tint: Background fill for the active accordion answer block and pill badge
- #2D68FE — Electric Blue: Headline emphasis, active question titles, primary links, and key icon accents
- #0F172A — Deep Slate: Primary headings, closed FAQ row question text, and list item titles
- #5D6B82 — Muted Slate: Subtitle paragraphs, feature descriptions, and answer text
- #E8EEF5 — Border Slate: Structural borders for outer cards, dividers, and accordion row separators
- #E6F8F0 — Mint Mint: Background circle for the integration feature icon
- #10B981 — Emerald Green: Foreground glyph color for the integration feature icon
- #F59E0B — Amber Star: Sparkle icon glyph indicating help desk and customer support
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, Public Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 44px display. Tracking -0.025em at display, -0.01em at body. The typography is clean, ultra-modern, and confidence-inspiring. It feels authoritative yet friendly due to the rounded apertures and generous x-height of Plus Jakarta Sans. Licensing can be substituted seamlessly with Inter or DM Sans without sacrificing structural rhythm.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 12px, buttons 999px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1120px container, comfortable density.
DEPTH
Elevation is practically flat and strictly architectural. Depth is communicated through 1px crisp hairline borders (#E8EEF5) paired with an ultra-diffuse, faint drop shadow (0 4px 24px rgba(15, 23, 42, 0.04)). The expanded accordion state relies on nested background shifts (#F4F8FF) rather than raised z-index layers.
IMAGERY
This design contains no photography or complex 3D renders. Imagery is strictly limited to 20px stroked geometric iconography encased in high-key pastel circular medallions. Photorealistic stock or cluttered illustrations would severely violate the rigorous, clean corporate tone.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-column synergy where a multi-tier reassurance sidebar (complete with tinted icon circles and support action) directly balances a unified, hairline-divided accordion containing recessed blue answer bubbles.
MUST
- Reserve #2D68FE strictly for active states, interactive links, and brand keywords in headings.
- Enclose open accordion answers within a rounded, tinted sub-container (#F4F8FF) rather than loose text.
- Align the support banner seamlessly flush into the bottom of the left feature column card.
- Use hairline 1px borders (#E8EEF5) between accordion rows rather than heavy drop shadows.
AVOID
- Do not allow accordion rows to have separate boxed borders; keep them inside a unified outer card.
- Avoid harsh high-contrast black shadows; depth must rely on borders and barely perceptible blur.
- Do not color closed question headings in blue; default state must remain deep neutral slate (#0F172A).
- Never use sharp 0px corners on containers; preserve the signature 20px card rounding.
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. Try in DraPub 
