Design a light-mode website section: structured enterprise security canvas with pill badges, micro-tabular data cards, and luminous functional color accents.
LAYOUT
The section employs an asymmetric two-part rhythm within an outer padded card shell. The left column (spanning approximately 45-50% width) hosts the primary editorial lockup, stat trio, workflow schematic diagram, CTA button group, and a bottom horizontal capability list. The right side contains a dense 2x3 grid of modular audit cards, each uniformly structured with domain header, micro-table, and summary footer metric.
PALETTE (use these exact hex values)
- #F8F9FC — Canvas Ground: Outermost page background surrounding all elevated card containers
- #FFFFFF — Card Surface: Primary surface for modular hero card and category grid panels
- #EAEFF5 — Subtle Border: Hairline 1px border enclosing cards, workflow boxes, and separator lines
- #0F172A — Text Primary: Primary headings, titles, stat numbers, and prominent data values
- #64748B — Text Muted: Body paragraphs, metric labels, rule keys, and inactive icon strokes
- #5B4EE6 — Brand Violet: Primary CTA background, hero badge highlight, and primary category icon
- #EF4444 — Alert Red: Blocked status pills, high-risk policy violation tags, and category icon ground
- #10B981 — Success Green: Passed verification status text and confirmation checkmarks
- #F59E0B — Caution Amber: Review state text and MFA-required notification flags
- #0EA5E9 — Sky Blue: Database card applet icon background
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Text,Geist), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 28px heading, 44px display. Tracking -0.02em at display, -0.01em at body, +0.02em at uppercase badges. The typography is technical, reassuring, and assertive, powered by a neutral modernist grotesque like Inter or Geist. The massive weight contrast—leaping from tight, punchy 44px bold display headings directly down to compact 11px uppercase metadata and data rows—communicates infrastructural rigor. Free alternatives like Inter or Plus Jakarta Sans are drop-in equivalents.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1440px container, comfortable density.
DEPTH
Depth is created strictly through clean layering rather than heavy ambient occlusion. Surfaces use pure white (#FFFFFF) against an ultra-light gray ground (#F8F9FC), defined primarily by crisp 1px borders (#EAEFF5). Any shadows present are featherweight (0 4px 12px rgba(15, 23, 42, 0.03)), preserving a flat, engineered aesthetic.
IMAGERY
This interface avoids raster photography entirely, relying instead on structured UI schematics, micro-diagrams, and stylized functional iconography. Category icons are clean, filled white glyphs seated on brightly colored rounded square surfaces. Introducing real-world photography or loose hand-drawn illustrations would violate the precision-engineered security atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the modular Category Audit Card featuring a rounded 48px vibrant applet icon above a miniature real-time execution log table. It grounds abstract AI guardrails into concrete, verifiable key-value rows with explicit 'Blocked' and 'Passed' semantic status flags. Misusing it by stripping the table into plain marketing text destroys its developer-native credibility.
MUST
- Use 20px border radius on all main elevated cards to maintain a smooth, friendly geometry.
- Reserve vibrant red (#EF4444) and green (#10B981) exclusively for real-time status results like Blocked or Passed.
- Set category icon containers to exact 48x48px squares with 12px border radius.
- Include hair-thin 1px dividers (#F1F5F9) between the card header and tabular rule logs.
AVOID
- Never use dark dramatic drop shadows; rely on crisp 1px borders (#EAEFF5) and subtle multi-layer elevation.
- Do not use saturated accent colors as full card backgrounds; keep surfaces clean white (#FFFFFF).
- Avoid centering body text or tabular items; all headers and rules must remain left-aligned.
- Never display raw unformatted numbers in statistics—include symbols, milliseconds, or ratios.
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 
