Design a dark-mode website section: deep obsidian mission control illuminated by warm amber radiation and precision cyan data nodes.
LAYOUT
The header is pinned with an ultra-clean horizontal layout: brand left, center text navigation links, and a pill-bordered CTA on the right. Below, the hero splits into an asymmetric two-column grid: a left-aligned typography block (badge, headline, paragraph, dual CTA buttons, trust note) and a right-aligned multi-card visual stack comprising the Case Intelligence Graph over three smaller telemetry cards. The section terminates in a horizontal four-part validation bar.
PALETTE (use these exact hex values)
- #07080a — Canvas Obsidian: Deep ground canvas across the entire application interface
- #0d1016 — Card Surface: Background fill for telemetry panels and node containers
- #1a222c — Subtle Border: Hairline container borders and structural divider lines
- #e05626 — Amber Flare: Atmospheric blurred background glow creating depth and warmth
- #30c3db — Cyan Node: Primary action button start, active graph hub, and key stat accents
- #50e3a4 — Mint Teal: Action gradient end, connection endpoints, and verified status dots
- #ffffff — Text Primary: Primary headings, active metrics, and primary button labels
- #8a95a5 — Text Secondary: Body copy, supporting graph annotations, and inactive navigation links
- #4d5766 — Text Muted: Category tags, micro badge labels, and subtle trust metrics
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 36px heading, 68px display. Tracking -0.03em at display, 0 at body. The voice is authoritative, enterprise-grade, and surgically precise. Crisp sans-serif letterforms project rigorous computational capability, while a single italicized serif accent injects human bespoke craft and legal pedigree. Inter or Plus Jakarta Sans easily fulfills the UI demands, matched with Playfair Display or Instrument Serif for the display accent.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved purely through luminous contrast and edge definition rather than traditional drop shadows. Translucent dark panels sit slightly above the void through 1px border strokes (#1c232e), while an intense atmospheric amber glow originating from the right edge casts subtle backlighting behind the upper containers.
IMAGERY
This interface relies entirely on procedural synthetic UI graphics rather than photographic assets. The hero visual is a dynamic vector node graph representing data ingestion, case centralisation, and analytical outputs with glowing bezier curves and circular iconography. Photographic stock imagery is completely avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an editorial italicized word ('build') directly embedded in a heavy sans-serif tech headline, set against an off-axis amber ambient radiation that counterbalances vivid cyan workflow nodes.
MUST
- Use a high-contrast serif italic accent solely for one key action verb in large display titles.
- Keep card surfaces extremely dark (#0d1016) with subtle 1px border strokes (#1a222c).
- Restrain the warm amber flare (#e05626) to the right quadrant to create directional stage lighting.
- Pair cyan (#30c3db) and mint (#50e3a4) exclusively for actionable buttons, connection paths, and verified states.
AVOID
- Do not use saturated solid backgrounds for cards; let the dark canvas tone dominate.
- Do not apply the serif italic styling to body copy or standard interface labels.
- Do not use sharp 0px corners; maintain consistent 16px-18px card rounding.
- Avoid multi-color rainbow telemetry; limit data accents strictly to cyan, mint, and muted slate.
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. 在 DraPub 中尝试 
