Design a dark-mode website section: an obsidian enterprise cockpit where classical editorial typography meets mint-illuminated autonomic workflows and radiant thermal gradients.
LAYOUT
The viewport is orchestrated as a split two-column hero with an asymmetric visual hierarchy. The left column contains the product badge, giant serif statement, descriptive paragraph, dual CTA buttons, and a bottom KPI metric bar. The right column showcases a multi-tier dashboard mosaic: one large horizontal live workflow card on top, supported by two equally-sized telemetry cards ('Under the hood' code and 'Built for scale' radar) below.
PALETTE (use these exact hex values)
- #040911 — Obsidian Ground: Deepest canvas background providing absolute contrast for text and glowing nodes.
- #09121f — Midnight Card Base: Background fill for telemetry panels and interactive sandbox cards.
- #050b14 — Terminal Inset: Recessed background for code blocks and inner status tags.
- #2ec980 — Boreal Emerald: Primary action button fill, headline accent phrase, completed check indicators, and live pulses.
- linear-gradient(135deg, rgba(8,16,30,0) 25%, #731733 65%, #e0533b 85%, #fba360 100%) — Solar Flare Gradient: Radial highlight inside the primary demo card signifying real-time execution energy.
- #f1f4f8 — Frost White: Hero headline serif typography, critical metric values, and high-emphasis labels.
- #7d8b9d — Slate Muted: Paragraph body text, inactive pipeline labels, and code terminal syntax.
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, Playfair Display, EB Garamond), weights 400. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 68px display. Tracking -0.02em. The typographic character balances venerable editorial stature with strict cybernetic utility. Newsreader delivers the gravitas of legacy institutions, suggesting stability and enterprise readiness, while Inter and JetBrains Mono communicate precision, latency-zero speed, and engineering discipline. For web substitution, Instrument Serif or Playfair Display paired with Plus Jakarta Sans closely mimic this tone.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely without drop shadows or blurred box-shadows. Instead, elevation relies on three tiers of luminance: the deep void ground (#040911), lifted card surfaces (#09121f) wrapped in 1px translucent borders, and subtle radial gradient lights embedded inside cards to suggest internal luminescence.
IMAGERY
This interface eschews conventional photography and 3D renders in favor of hyper-clean, deterministic UI telemetry. Diagrams consist of hairline vector connectors, concentric sonar waves, and stylized micro-icons encased in dark pill containers. Any photographic asset or generic illustration would clash with the precise, mechanical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The defining visual gesture is the juxtaposition of an oversized, classical serif headline with an intense, ember-colored thermal sunset gradient contained within an otherwise cool, nocturnal telemetry card. It bridges humanistic literary elegance with raw computational power. Replicate it by keeping the background pitch-dark, the serif classical, and channeling warm light only into active execution states.
MUST
- Use Newsreader Serif exclusively for the primary H1 display headline and wordmark.
- Highlight the final words of the headline in the signature mint accent (#2ec980).
- Confine the intense sunset/amber gradient solely to the interactive workflow visual card.
- Maintain hairline borders (rgba(255, 255, 255, 0.08)) across all dark surface panels.
AVOID
- Never apply serif typography to body copy, UI buttons, or metadata tags.
- Do not spread the solar flare warm gradient across the root page background.
- Avoid harsh pure white (#ffffff) fills for secondary and body typography.
- Never omit the subtle 1px border stroke on cards resting on the midnight 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. 在 DraPub 中尝试 
