Design a dark-mode web interface screen: precision dark glass, deep space gradients, and luminous cyan telemetry for modern financial systems.
LAYOUT
The page follows a balanced asymmetric hierarchy. The top hero splits 45/55 between a punchy left-aligned typography column with input field and a vast right-aligned SaaS console mock-up grounded by a luminous planetary arc. Below the fold, the layout transitions to a centered section header, followed by a 4-column feature card array, a 4-segment horizontal proof bar, and right-rail trust widgets.
PALETTE (use these exact hex values)
- #030712 — Cosmic Void: Deepest foundation background across the full layout canvas
- #0B1120 — Panel Midnight: Background fill for floating app dashboard and feature cards
- #0F172A — Card Elevated: Inner KPI metrics tiles and nested sub-surface containers
- #1E293B — Subtle Border: Fine 1px structural stroke on cards, dividers, and tables
- #38BDF8 — Vivid Cyan: High-visibility primary buttons, interactive accents, and luminous gradient endpoints
- #2563EB — Electric Azure: Deep gradient driver, active states, and brand anchor fills
- #F8FAFC — Text Primary: Main headlines, hero display text, and high-emphasis metric values
- #94A3B8 — Text Secondary: Body copy, subtitles, secondary actions, and unselected tabs
- #64748B — Text Muted: Captions, micro tags, helper labels, and subtle table headers
- #F43F5E — Berry Negative: Deductions, negative trend indicators, and alert states in dashboard
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px heading, 36px heading-lg, 56px display. Tracking -0.03em at display, -0.01em at body, 0.05em at caps. The typographic voice is precise, engineered, and unmistakably modern fintech. Set in a pure geometric neo-grotesque like Inter, the heavy display weights convey structural solidity while tightly tracked micro labels inject telemetry-grade authority. If Inter is unavailable, Plus Jakarta Sans or SF Pro Display preserve the necessary digital-first crispness.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered flat-architectural rather than physical. Layers are distinguished by steps in color luminance (#030712 canvas -> #0B1120 container -> #0F172A inner tile) surrounded by delicate 1px borders (#1E293B). Luminous radial back-lighting behind the focal window simulates an otherworldly glow without standard drop shadows.
IMAGERY
No photographic imagery is used except for tiny circular team member portraits inside avatars. Visual interest is driven exclusively by razor-sharp product UI previews, financial SVG charts, wireframe cyan iconography, and glowing mathematical vector curves. Stock photography or lifestyle portraits would completely break the technical immersion.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the brilliant cyan horizon arc cutting across the dark void beneath the floating dashboard mockup. It suggests an orbital planetary silhouette and casts an upward atmospheric cyan glow that anchors the software UI in space. To replicate it, use a fine 1px path with a bright cyan stroke and an underlying blurred radial gradient; misusing it as a heavy solid shape ruins the ethereal lighting.
MUST
- Keep card surfaces deep and cool (#0B1120 to #0F172A) with strictly 1px borders in #1E293B.
- Use high-contrast 56px white text accented with cyan-to-blue gradient spans for primary hero titles.
- Rely on tabular numbers (tnum) and 11-13px uppercase tracking for metrics and dashboard data.
- Preserve deep negative space around the central software preview window to let radial glow breathe.
AVOID
- Do not introduce warm tones (yellows, oranges, warm greys); stay strictly within slate and cyan.
- Never use heavy drop shadows; depth must be created solely through 1px borders and layered surface hexes.
- Avoid solid bright colored card backgrounds; reserve bright cyan/blue for buttons and data points.
- Do not exceed 1px stroke weight on containers or card dividers.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3312:2480. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub