Design a light-mode website section: precision enterprise saas bento grid anchored by modular data visualisations and authoritative technical typography.
LAYOUT
The layout is structured as an asymmetrical bento grid anchored by a primary two-line display headline on the upper-left. The upper tier pairs a vertical 5-step milestone list with a wide multi-column pipeline architecture diagram and a high-density candidate card. The lower tier counterbalances with a dark 4-column metric banner, a pipeline conversion funnel, and role calibration sliders.
PALETTE (use these exact hex values)
- #F8F9FC — Canvas Ice: Global application and section background providing soft contrast to white cards.
- #FFFFFF — Card Surface Pure: Primary surface for interactive widgets, data charts, and process containers.
- #E5E9F2 — Border Subtle: Structural outlines on card containers, internal table rows, and horizontal rules.
- #0D1127 — Carbon Obsidian: High-impact anchor card background used for key metric claims and aggregate outcomes.
- #2563EB — Primary Electric Blue: Active step numbers, primary pipeline fills, circular dials, and text links.
- #7C3AED — Flow Violet: Secondary stage chips, chart volume bars, and gradient endpoints in data visualisations.
- #0F172A — Text Primary: Headlines, card titles, candidate names, and heavy metric values.
- #64748B — Text Muted: Body copy, supporting explanations, table headers, and timestamp labels.
- #E0F2FE — Success Emerald Tint: Background fill for low-priority badges, technical skills pills, and inactive steps.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 38px display. Tracking -0.025em at headings, 0.01em at tabular caps. The typographic tone is analytical, surgical, and developer-centric. Inter or a matching neo-grotesque sans provides neutral legibility across dense dashboard chips, tabular code stats, and prominent claims. Negative letter-spacing on display headlines prevents loose phrasing, while small caps in eyebrows reinforce an architectural engineering aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered virtually flat, relying on crisp surface tonal separation between the #F8F9FC canvas and #FFFFFF containers. Borders are hair-thin 1px solid (#E5E9F2), with only the softest ambient diffusion (0 1px 2px rgba(15, 23, 42, 0.04)) applied to active cards. The midnight navy card establishes immediate optical depth through pure color contrast rather than z-axis drop shadows.
IMAGERY
There is zero photographic or metaphorical decorative illustration. Visual storytelling is achieved strictly via authentic simulated product telemetry: mock PR commits, code score dials, git activity pills, and conversion funnel tracks. Any external imagery should mimic legitimate IDE metadata, Git review summaries, or precision data visualization graphs.
SIGNATURE DETAIL — the thing that makes this design itself
The multi-column horizontal pipeline architecture block with dashed connector lines, rounded pastel stage pills, and stacked metadata tag columns. It visualizes an abstract backend ETL process as a transparent, legible software artifact. Misusing it involves making the connector arrows solid or packing disparate tag heights, which breaks the clean horizontal scanning rhythm.
MUST
- Use pure white cards (#FFFFFF) against the pale slate background (#F8F9FC) with a precise 1px border (#E5E9F2).
- Keep card padding uniform at 20px to 24px across all modular bento sections.
- Restrict bright saturated colors strictly to active progress indicators, circular dials, and actionable icons.
- Set section eyebrow headers in uppercase tracking (+0.08em) with primary blue coloration (#2563EB).
AVOID
- Do not use heavy multi-stop drop shadows; rely on crisp 1px borders and subtle 0 1px 3px rgba(0,0,0,0.05).
- Never use generic illustrations or 3D characters; represent features solely with live UI telemetry and functional artifacts.
- Do not mix card corner radii; keep outer bento containers consistently at 16px and internal tags at 6px to 8px.
- Avoid solid black backgrounds; use deep obsidian navy (#0D1127) for high-contrast dark elements.
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 
