Design a light-mode website section: deep spruce architecture grounding crisp white credit infrastructure proof points.
LAYOUT
The vertical composition is organized into three balanced tiers: a centered light-mode hero CTA block (headline, subhead, dual buttons); an overlapping or anchored 4-cell metric card; and an expansive dark-teal footer basin. The footer itself splits into a 12-column grid featuring identity/trust on the left, four navigation columns centrally, and newsletter subscription on the far right. The design terminates in a cleanly delimited legal utility row.
PALETTE (use these exact hex values)
- #04201E — Deep Spruce: Dominates the base footer container, providing an authoritative, grounded anchor.
- #FFFFFF — Pristine Canvas: Main canvas background for high-clarity headline and metric components.
- #0E483F — Forest Primary: Primary conversion button background and key brand identity tone.
- #27AE7A — Mint Accent: Logo glyph, inline newsletter submit fill, and confirmation micro-badges.
- #DE5D43 — Amber Coral: Eyebrow tag text and leading status indicator icon.
- #0D1B1A — Slate Text: Display headers and high-contrast statistical figures on white surfaces.
- #8FA6A2 — Muted Sage: Footer navigation links, subtitles, and input placeholder states.
- #E5ECE9 — Subtle Line Border: Outlines metric strip card, secondary button border, and internal dividers.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 26px heading, 44px display. Tracking -0.03em at display, +0.06em at micro caps. Plus Jakarta Sans delivers an institutional yet forward-leaning fintech cadence. The tight negative tracking on display sizes (-0.03em) makes the punchy three-sentence value proposition feel urgent and solid, while loose letter-spacing (+0.08em) on captions keeps tiny micro-copy legible. Inter or General Sans work as seamless drop-in alternatives without altering vertical metrics.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled with exceptional restraint. The metrics card floats with a barely perceptible 0 8px 24px rgba(0,0,0,0.04) shadow accompanied by a sharp 1px border (#E5ECE9). In the footer, elevation is flattened completely into translucent surface fills (rgba(255,255,255,0.05)) without drop shadows.
IMAGERY
This interface intentionally foregoes raster photography in favor of strict typography, high-precision SVG icons (16px and 20px stroked pictograms), and subtle atmospheric background grain. Any addition of lifestyle or stock photography would disrupt the fintech rigor; use only crisp vector illustrations if graphics are required.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the massive curved junction where the white page snaps into the 48px top-radius deep spruce footer directly below the floating metrics strip. It creates an architectural shelf that transitions the user from an action-oriented conversion mindset into institutional compliance and deep site exploration. Misusing it involves flattening the top corners to 0px or shifting the background to neutral grey.
MUST
- Use generous 48px radii on the top corners of the dark footer container to establish its signature scoop.
- Pair coral uppercase eyebrows (#DE5D43) strictly with large-scale 44px display headlines.
- Keep metric icons thin-line and monochrome within the proof bar to preserve clinical credibility.
- Encase compliance certifications inside low-opacity glass pods against the dark spruce background.
AVOID
- Never make the footer container sharp or square at the top; the 48px curve is essential.
- Do not introduce pure black; all dark surfaces must maintain a deep green/teal tint (#04201E).
- Avoid heavy drop shadows; separation is accomplished through fine 1px structural borders and soft 12px blur.
- Do not center-align the footer links or newsletter form; keep them left-aligned within their grid columns.
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 
