Design a light-mode website section: crisp engineering clarity delivered through pastel-coded functional cards and disciplined typographic hierarchy.
LAYOUT
The section adopts a two-panel split grid within a 1280px bounded wrapper: a left-aligned 4-column anchor containing the core value proposition, key bullets, and manifesto badge; and an 8-column right-aligned 3x2 uniform card layout. Below this primary dual-wing configuration sits a single 100% width horizontal banner reinforcing operational tenets with 4-column internal distribution.
PALETTE (use these exact hex values)
- #FAFAFC — Canvas Background: Global application page background providing high-key contrast for card elevations
- #FFFFFF — Card Surface: Background for floating feature cards, callouts, and the bottom trust strip
- #E2E8F0 — Border Subtle: 1px structural outline on cards, badges, and horizontal dividers
- #0F172A — Primary Text: Primary headings, card titles, and high-emphasis labels
- #64748B — Muted Text: Body copy, descriptions, and supporting contextual metadata
- #2563EB — Research Blue: Eyebrow tag, research theme badges, and key headline accent lines
- #EFF6FF — Research Blue Light: Tinted background for research-themed icon squares and footer tag pills
- #059669 — Emerald Green: Eyebrow text and badge labels for data and security cards
- #ECFDF5 — Emerald Green Light: Tinted background for data/security icon squares and tag pills
- #D97706 — Amber Orange: Eyebrow text and badge labels for operations cards
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px heading, 40px display. Tracking -0.03em at display, 0.08em at uppercase tags. The voice is analytical, authoritative, and direct. Rendered in a neo-grotesque sans-serif (Inter match), the high x-height and tight negative tracking on display sizes (-0.035em) produce a modern enterprise-grade technical clarity. Geist or SF Pro Text serve as drop-in equivalents without altering the cold engineering poise.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is handled almost entirely through flat boundary definition: pure white (#FFFFFF) surfaces set against an ultra-pale gray canvas (#FAFAFC), bounded by a hairline 1px border (#E2E8F0). Volumetric drop shadows are intentionally omitted or kept negligible (0 1px 2px rgba(0,0,0,0.03)) to preserve an architectural blueprint precision.
IMAGERY
No photographic imagery or abstract 3D shapes are present. Visual delight is achieved purely via minimalist linear icons (outline stroke ~1.75px) seated inside softly colored 44x44px rounded squares with 12px border radii. Realistic product mockups or photography would break the systematic engineering aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The triple-tier color coding system: each card aligns its icon container tint, uppercase eyebrow text, and bottom pill badge to a singular semantic hue (Research Blue, Mint Emerald, or Amber Orange), unifying diverse AI workflows under strict visual syntax.
MUST
- Pair every feature card icon tint directly with its eyebrow and pill tag hue.
- Maintain strict 20px gaps between all cards in the 3x2 matrix.
- Use uppercase 11px typography with letter-spacing 0.08em for domain category eyebrows.
- Keep card backgrounds pure #FFFFFF against the pale #FAFAFC canvas for subtle separation.
AVOID
- Do not introduce drop shadows with opacity higher than 4% or blur exceeding 12px.
- Never mix the category tint colors within the same card.
- Do not color headline text; maintain solid #0F172A for all primary titles.
- Avoid solid filled icons; only use monoline technical outline glyphs.
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 
