Design a light-mode website section: clinical financial automation framed in crisp porcelain tiles, measured metrics, and deliberate cobalt wayfinding.
LAYOUT
The section starts with an asymmetric header: title and badge on the left, descriptive paragraph and ghost link on the right. Below, an irregular 3-row, 3-column bento grid organizes information by operational priority. The top-left spans roughly 60% with a spotlight workflow, flanked by compact monitoring cards, while bottom rows balance interactive lists, multi-metric performance readouts, and a testimonial block.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ice: Global application backdrop providing subtle contrast against elevated pure white cards.
- #FFFFFF — Tile Pure White: Background for all primary content modules, cards, badges, and the interactive spotlight frame.
- #0F172A — Ink Navy: Dominant header typography, hero statement, primary metrics, and high-emphasis labels.
- #64748B — Muted Slate: Explanatory body copy, sub-labels, table labels, and secondary supporting descriptions.
- #E2E8F0 — Border Grey: Structural 1px outlines on cards, metric dividers, list items, and button perimeters.
- #1D4ED8 — Cobalt Engine: Primary call-to-action button, active indicator nodes, highlighted chart markers, and category pips.
- #0D9488 — Teal Outcome: Indicator icon, sparkline stroke, and metric header for positive financial uplift statistics.
- #7C3AED — Lavender Shield: Compliance badge header, lock icon, and subtle workflow background diagram gradients.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 28px heading-lg, 40px display. Tracking -0.02em at display, 0.04em at eyebrow captions. The typographic tone is authoritative, institutional, and highly objective. Using a modern grotesque sans-serif like Inter or Plus Jakarta Sans with tight negative letter-spacing on display numbers imparts mathematical precision. The text is crisp and dense, perfectly reflecting enterprise software built for risk-averse financial institutions.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created almost entirely without drop shadows. The design relies on flat surface separation where pure white (#FFFFFF) modules rest on an ultra-light slate (#F8FAFC) canvas, bound by crisp 1px borders (#E2E8F0). Internal 3D depth is restricted to vector illustrations, which use gentle lilac radial gradients and faint layered offsets.
IMAGERY
Vector-based schematic diagrams replace photographic imagery. Visuals feature floating card mockups, dashed connection lines, circular route nodes, and isometric document representations tinted in slate, white, and soft purple. Photos, human portraits, or realistic product screenshots would disrupt this clean architectural language.
SIGNATURE DETAIL — the thing that makes this design itself
The multi-metric bento tile paired with an icon-driven uppercase eyebrow and vector node schematic. It blends hard analytical financial proof (percentages, times, counts) with delicate infrastructure schematics in a unified 16px pill-bordered enclosure.
MUST
- Anchor each card with an uppercase, icon-prefixed eyebrow tag to maintain strict hierarchy.
- Use 1px solid #E2E8F0 borders exclusively to separate surfaces without heavy drop shadows.
- Restrict the primary cobalt #1D4ED8 blue to actionable elements and key focal statistics.
- Maintain uniform 16px corner radii across all bento cards regardless of dimensions.
AVOID
- Do not apply deep, blurry drop shadows that break the clean, clinical aesthetic.
- Do not use saturated gradient backgrounds across entire cards; reserve tints for internal illustrations.
- Never drop card border-radius below 12px or leave borders off on light backgrounds.
- Do not allow body text to exceed 55 characters per line inside bento tiles.
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 
