Design a dark-mode website section: deep obsidian surfaces illuminated by neon sapphire gradients and surgical financial telemetry.
LAYOUT
A balanced split 50/50 two-column hero section within a 1240px container. The left column stacks narrative brand hierarchy: pill badge, high-impact headline, descriptive body, dual action buttons, security value props, and partner logo strip. The right column houses the high-fidelity dashboard widget array anchored by an iconic dark sidebar and asymmetric grid cards.
PALETTE (use these exact hex values)
- #050914 — Canvas Midnight: Global background canvas absorbing ambient neon backlights
- #0d1527 — Card Surface: Background fill for the preview dashboard chassis and metric tiles
- #080d1a — Nested Panel: Deep recessed interior panels within telemetry cards
- #2563eb — Primary Accent Blue: Main CTA button fill, highlighted headline text, and progress fills
- #38bdf8 — Electric Azure: Sparkline endpoint node, badge accents, and gradient highlights
- #22c55e — Metric Positive: Positive delta indicators and healthy cash flow histogram bars
- #1e293b — Card Border: Hairline structural borders defining dashboard containers and cards
- #ffffff — Text Primary: Primary headings, large data metrics, and high-visibility text
- #94a3b8 — Text Secondary: Body copy, secondary labels, metadata, and inactive nav icons
- #475569 — Text Muted: Footer logo cloud, minor descriptors, and inactive borders
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 54px display. Tracking -0.03em at display, -0.01em at body, 0.05em at micro caps. The typographic tone is authoritative, quantitative, and restrained, driven by Inter's geometric neutrality. Display weights use tight negative tracking (-0.035em) to give headline words density and command. It projects enterprise reliability, mimicking modern financial tools like Stripe or Linear where precision is paramount.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through luminance layering and atmospheric rear glow rather than conventional CSS box shadows. The base level is deep obsidian (#050914), stepping up to card frames (#0b1220) etched with 1px slate borders (#1e293b). A diffuse cyan-to-sapphire radial backlight creates the illusion that the entire dashboard floats forward in space.
IMAGERY
No photographic imagery is present; the interface relies entirely on vector UI wireframes, sparkline data visualizations, and minimal line iconography. The product mock acts as the hero image, styled with precise stroke lines and smooth synthetic gradients. Incorporating photography or playful 3D illustrations would break the austere, enterprise-grade aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-zone electric sapphire ambient bloom emitting from behind a rounded dark dashboard container, paired with a royal blue accented keyword underscored by a subtle swooping arc. Misuse occurs when the ambient glow is over-saturated or spread over the text column, degrading body text contrast.
MUST
- Anchor the product mockup using radial sapphire blurs positioned behind top and bottom edges.
- Emphasize the primary noun in the display headline with royal blue (#2563eb) and an organic crescent swoop underline.
- Use hairline borders (#1e293b, 1px) to separate dark cards without relying on dropped drop-shadows.
- Format currency metrics in large tabular numerals (32px) accompanied by green (+XX%) delta indicators.
AVOID
- Do not use sharp 0px corners; all cards must feature a smooth 12px to 16px radius.
- Do not place warm colors (yellow, orange, red) in standard interface elements unless indicating critical errors.
- Do not allow the background glow to wash over text; keep the left hero column legible on deep void black.
- Do not use heavy, opaque drop shadows on cards—rely entirely on border strokes and tonal value shifts.
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 
