Design a light-mode website section: airy modern enterprise clarity anchored by punchy cobalt accents and soft ambient gradients.
LAYOUT
The layout is strictly center-aligned and vertically stacked in hierarchical rhythm: pill badge, two-line display headline, concise body text, twin CTAs, and inline compliance items. Below the fold sits a 4-column feature grid spaced at 20px gaps, followed immediately by a self-contained proof bar dividing 4 metrics across full width.
PALETTE (use these exact hex values)
- #FAFBFC — Canvas Background: Primary light canvas background base underlying the soft gradient aura
- #FFFFFF — Card White: Solid white container background for feature cards and trust bar
- #155EEF — Cobalt Primary: Primary CTA fill, headline punctuation dot, metric numbers, and active highlights
- #0F172A — Ink Navy: Display headings, strong titles, and high-emphasis body text
- #475467 — Slate Muted: Supporting subheads, card descriptions, and secondary metadata
- #E2E8F0 — Subtle Border: Hairline strokes on feature cards, badge pills, and stat divider boundaries
- #E0EAFF — Azure Glow: Pill badge background, left ambient atmospheric haze, and document icon tint
- #ECFDF3 — Mint Glow: Right ambient atmospheric haze and visibility analytics icon backing
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px heading, 28px heading-lg, 52px display. Tracking -0.03em on headline, 0.05em on tracking pills. The typographic tone is authoritative, corporate, and modern. Tight letter-tracking (-0.03em) on large weights delivers an efficient, no-nonsense enterprise voice suitable for financial software, while open tracking on uppercase labels conveys precision. Inter or Plus Jakarta Sans are the standard fits.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1120px container, comfortable density.
DEPTH
Elevation is achieved through contrast rather than physical depth. The pure white surfaces (#FFFFFF) sit crisply against the faint off-white and gradient-cloud canvas, demarcated by hair-thin 1px borders (#E2E8F0) and an imperceptible, diffuse ambient shadow (0 2px 8px rgba(0, 0, 0, 0.02)).
IMAGERY
There is no photographic or rendered 3D imagery present. Visual personality is carried exclusively by geometric linear iconography, micro-sized colored icon wells, and ambient, organic color glows at the canvas edges. Literal construction site photos would dilute the software-centric clarity.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the deliberate royal cobalt accent dot (#155EEF) concluding the display headline, echoing the primary CTA and metric stats while humanizing rigorous enterprise architecture.
MUST
- Use exactly one primary cobalt button alongside an outlined secondary button.
- Keep card backgrounds pure solid white (#FFFFFF) to punch through the gradient mesh.
- Style the terminal period of the primary headline in cobalt blue (#155EEF).
- Maintain uniform 16px border-radius across all major content cards and stat panels.
AVOID
- Do not saturate the background mesh; gradients must remain ghostly and atmospheric.
- Never use dark high-contrast drop shadows; rely on crisp 1px borders (#E2E8F0).
- Do not apply fully rounded pill shapes to primary CTA buttons; keep them at 10px.
- Avoid colored backgrounds for the main metric panel—keep it clean white or transparent.
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 
