Design a light-mode website section: warm ambient glow framing high-precision autonomous fintech with layered glass accents.
LAYOUT
The hero uses a 50/50 two-column asymmetric layout inside a 1200px constrained container. The left column stacks a live pill badge, a massive 3-line headline, supportive paragraph copy, paired CTA buttons, and a three-column trust-badge row. The right column stacks a dominant dark operational console card above a three-card horizontal grid of equal-width metric stat tiles.
PALETTE (use these exact hex values)
- #FAF7F5 — Canvas Warm: Global page background providing an organic, warm paper-like foundation beneath luminous blur overlays.
- #141518 — Console Dark: Dominant dark card surface housing autonomous operational features and the 3D illuminated shield graphic.
- #FFFFFF — Card Surface Pure: Background for floating metric tiles, badge chips, and light interactive components.
- #11141A — Text Primary: Display headlines, primary button text on dark, and heavy quantitative metrics.
- #5A606D — Text Muted: Body copy, navigation links, secondary microcopy, and comparison footnotes.
- #E83D2A — Vivid Coral: Hero headline accent, live badge dot, claims stat metric, and atmospheric top-right aura glow.
- #264366 — Deep Steel Blue: Accent text on headline terminus ('business.') and policy metric figures.
- #12B76A — Metric Emerald: Savings percentage metric, trend line chart, and operational 'Active' pill badge.
- #56A5DC — Atmosphere Cyan: Ambient soft illumination under bottom metric cards and glass lower bevel edge.
TYPOGRAPHY
Typeface Inter (or Geist Sans,Plus Jakarta Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 22px subheading, 32px heading, 52px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. The typography is technical, contemporary, and relentlessly disciplined, executed in a clean geometric neo-grotesk with tightly tracked letterforms (-0.03em). It communicates autonomous mathematical efficiency without feeling cold, bolstered by intentional colored word highlights. Geist Sans or Inter makes an exact functional substitute for the observed letterforms.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created primarily through color luminance contrast rather than traditional drop shadows. The deep graphite console (#141518) pushes backward like an anchor, while white stat cards float gently forward using subtle 0 4px 20px rgba(0, 0, 0, 0.04) diffused blurs. The 3D layered glass shield uses internal specular highlights and ambient backlight glow to produce physical volumetric separation.
IMAGERY
Features a single high-fidelity 3D rendered isometric illustration of layered translucent glass shields glowing with vibrant red and cyan refractive light. Realistic caustics, soft specular edges, and blurred rear geometry define the asset. Generic stock photography or flat 2D vector illustrations are strictly prohibited and would disrupt the technical fintech aura.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the dual-tone headline terminus paired with the giant crimson-to-cyan ambient blur bleeding behind floating white and dark cards. Without this glowing chromatic haze framing the dark console card, the interface would collapse into a standard light-mode dashboard. Misusing it involves oversaturating the blur into a chaotic gradient instead of an out-of-focus background atmospheric backlight.
MUST
- Retain the warm off-white canvas (#FAF7F5) to ensure glowing red and cyan aura blurs do not feel clinical.
- Split the final display headline phrase between coral (#E83D2A) and navy (#264366) exactly as shown.
- Pair the dark operational console card (#141518) with pure white metric tiles below it for sharp contrast.
- Use translucent 3D glassmorphic elements within the dark console, lit from beneath with atmospheric backlighting.
AVOID
- Do not set the page canvas to pure hex #FFFFFF; it destroys the depth of the ambient color bleeds.
- Never make all three bottom metric tiles the same accent color; each needs its distinct semantic tint (green, blue, red).
- Avoid heavy drop shadows; cards should rely on subtle 0.5px borders and soft, diffused 8px-spread blurs.
- Do not place the dark console card on a dark page background; its visual weight depends on resting on the warm light canvas.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub