Design a light-mode website section: precision fintech analytics cloaked in crisp white cards and deep evergreen institutional trust.
LAYOUT
Structured around a 12-column grid split into a 4-column editorial left rail and an 8-column 3x2 feature matrix. The left column stacks category tag, display headline, narrative copy, primary CTA, and three micro feature bullets. Below this dual-column arrangement sits a single monolithic stat bar spanning the full 12 columns with unified horizontal rhythm.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Primary surface background across the entire feature section and cards.
- #0C3C30 — Evergreen Deep: Primary buttons, dark icon badges, and dominant brand elements.
- #06221C — Footer Slate Pine: Background container for bottom trust banner and key metric stats.
- #0F172A — Text Primary: Primary headings, card titles, and prominent data callouts.
- #64748B — Text Secondary: Paragraph summaries, card body copy, and metadata subtext.
- #EAEFEF — Border Subtle: 1px hairline borders wrapping all feature cards and stat dividers.
- #E27233 — Signal Amber: Category eyebrow bullet dot and dynamic sparkline trend peak indicators.
- #EBF6F3 — Chart Mint Fill: Subtle fill gradients beneath sparklines, bar tracks, and icon pills.
- #277867 — Chart Teal Active: Primary stroke for trendlines, donut chart dominant segment, and progress fills.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 42px display. Tracking -0.025em for display, 0.05em for uppercase captions. Disciplined, institutional, and quantitative. The neutral geometric sans-serif communicates institutional credibility and financial precision, entirely eschewing decorative flair in favor of razor-sharp numerals and clean, low-contrast prose. Inter or Plus Jakarta Sans are optimal substitutes.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through outline boundaries and tonal contrast rather than layered shadows. Cards rely on clean 1px borders (#EAEFEF) over pure white. The sole major dimensional contrast comes from the bottom grounding banner, which uses deep chromatic obsidian pine (#06221C) to anchor the viewport.
IMAGERY
Contains zero photographic imagery; the visual language is entirely built from bespoke, highly stylized analytical charts (area line fills, scored track bars, segmented donuts, and tabular rows). Iconography is minimalist, single-weight line art enclosed in solid dark squircles. Photo realistic art or abstract gradients would clash with the institutional rigor.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious coexistence of high-density financial data widgets (donut charts, drawdown graphs, score tracks) encapsulated inside warm, approachable enterprise cards topped with deep forest-green icon badges.
MUST
- Keep each card's inner chart strictly contained to a 100-120px height window.
- Use solid evergreen (#0C3C30) for card icon tiles to maintain balanced visual anchors.
- Pair every feature card with an actionable inline link followed by a unicode right arrow.
- Set card borders to 1px hairline neutral (#EAEFEF) with zero harsh box shadows.
AVOID
- Do not introduce multi-colored card backgrounds; keep cards pure white (#FFFFFF).
- Never use soft drop shadows with heavy blur; structure hierarchy through hairline outlines.
- Do not mix icon container shapes; keep all card header icons 32px rounded squircles.
- Avoid bright saturated primary blues or reds; adhere strictly to pine, mint, and amber.
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 
