Design a light-mode website section: crisp modular clarity where pastel tool-tokens balance high-conviction typography and dimensional glass telemetry.
LAYOUT
The section is organized into a top asymmetric split and a bottom spanning anchor. The top-left quadrant (approximately 40% width) hosts the section eyebrow, headline, subcopy, and three bullet points. The top-right quadrant (60% width) arranges six role cards in an even 3x2 matrix with 20px gutters. The composition resolves with a full-width telemetry banner tying together the 3D visual, product thesis, and three numeric stat columns.
PALETTE (use these exact hex values)
- #FAFBFF — Canvas Ground: Global background canvas providing a clean, slightly cool tint
- #FFFFFF — Card Surface: Background for role cards and primary content containers
- #F3F5FC — Subtle Surface Tint: Background fill for bottom banner and neutral icon wells
- #E8ECF4 — Border Subtle: Crisp 1px boundary line on cards and structural wrappers
- #584DE3 — Primary Indigo: Accent text in headline, text links, active badges, and metric counters
- #0F172A — Ink Primary: Dominant text color for display titles, card headers, and bold statements
- #64748B — Ink Muted: Secondary description copy, sub-bullets, and stat captions
- #10B981 — Mint Accent: Engineering and finance iconography stroke tint
- #EDFAF1 — Mint Soft Wash: Background fill for technical and operations icon tiles
- #F1F0FD — Lavender Soft Wash: Background fill for GTM, People, and general feature icon tiles
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 17px subheading, 26px heading, 32px heading-lg, 52px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, corporate, and technologically lucid, leveraging a tightly tracked geometric sans-serif (Inter match). The multi-line headline structure uses period stops ('One agent. Every mission. All your teams.') to convey absolute reliability and completeness. For implementation, Geist, Plus Jakarta Sans, or SF Pro Display serve as direct drop-in replacements with identical weight distributions.
GEOMETRY & SPACING
Corner radii — cards 18px, links 6px, inputs 10px, buttons 999px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered virtually flat, relying on 1px subtle borders (#E8ECF4) to define planes instead of prominent shadows. Very faint blur diffusion (0 4px 16px rgba(15, 23, 42, 0.03)) separates the white cards from the #FAFBFF ground. Physical depth is expressed exclusively via the isometric 3D stacked glass diamond illustration in the lower banner.
IMAGERY
The only non-typographic visual is an isometric, layered translucent glass illustration at the bottom left, using blue and purple refraction gradients. All functional icons are minimalist line drawings centered within softly tinted 40px rounded squares. Photography, photorealistic renders, or heavy decorative graphics are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the three-line period-delimited display headline paired directly with an asymmetric 3x2 role card matrix featuring alternating pastel icon wells. Misusing this pattern by centering card content or turning icon containers into bright solid buttons destroys the quiet, structured precision of the design.
MUST
- Reserve #584DE3 strictly for actionable links, metric values, and final emphasis lines.
- Enforce an 18px border radius consistently across all six departmental cards.
- Use pastel icon containers (#F1F0FD, #EDFAF1) strictly in 40x40px dimensions.
- Keep card stroke borders at precisely 1px with color #E8ECF4 to prevent heavy framing.
AVOID
- Do not introduce dark card surfaces or high-contrast drop shadows into this layout.
- Do not use saturated primary colors for icon container backgrounds; stick to pastels.
- Do not exceed 13px on card body copy; compactness keeps cards balanced.
- Do not mix rounded and square corners on the icon containers.
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 
