Design a dark-mode website section: deep navy void heated by sunset radial blooms and razor-thin glass borders.
LAYOUT
The upper section splits into a two-column bento formation: a large CTA hero card on the left balances a two-story telemetry and metric block on the right. Below, an expansive 5-column footer aligns product metadata, site links, and email capture cleanly across the container width.
PALETTE (use these exact hex values)
- #090c15 — Void Canvas: Deepest canvas background behind footer and section layouts
- #0d1322 — Glass Card Base: Background fill for top feature cards and data panels
- #f43f5e — Sunset Coral: Primary CTA gradient start point and highlight badge tone
- #fb7185 — Sunset Peach: Gradient shift for primary buttons and warm ember backdrops
- #ffffff — Text Primary: Hero headers, primary labels, and bold metric numbers
- #94a3b8 — Text Secondary: Body copy, feature descriptions, table column labels, footer links
- #64748b — Text Muted: Sub-captions, copyright notices, and secondary metadata
- #1e293b — Border Subtle: Hairline card boundaries, button outlines, and horizontal rules
- #22c55e — Success Emerald: Positive metrics, growth badges, and live pulse dots
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 40px display. Tracking -0.025em on display, 0 on body. The typography is technical, crisp, and authoritative. A modern neo-grotesk with tight letter-spacing communicates precision AI engineering without feeling robotic, balancing crisp legible data displays with assertive product statements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous edge contrast rather than traditional dropshadows. Panels utilize a semi-translucent 1px top/border highlight (#334155 / #ffffff15) over dark glass containers, layered against an expansive, low-frequency atmospheric gradient bloom.
IMAGERY
No photographic imagery is present. Visual interest is driven exclusively by smooth synthetic vector sparklines, clean geometric status glyphs, and subtle linear brand marks against smooth gradient atmospheric washes.
SIGNATURE DETAIL — the thing that makes this design itself
The soft sunset flare bleed—a warm coral-to-violet radial gradient glowing from behind dark glass cards—contrasted against hyper-crisp telemetry lines and 1px borders.
MUST
- Use deep dark navy (#090c15) instead of pure #000000 to retain atmospheric depth.
- Restrict vibrant sunset gradient flares to focal areas behind primary CTA panels.
- Enclose all data cards with 1px hairline borders in subtle slate (#1e293b).
- Keep footer column headers in white (#ffffff) and child links in slate (#94a3b8).
AVOID
- Never use pure white backgrounds or harsh saturated fills on secondary buttons.
- Avoid thick borders greater than 1px on interface panels and input wells.
- Do not disperse warm sunset gradients across every container; keep it focal.
- Never set footer navigation text to pure white; preserve hierarchy with #94a3b8.
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