Design a dark-mode website section: deep-space obsidian canvas punctuated by bioluminescent violet glows, crisp tabular metrics, and architectural typography.
LAYOUT
The design follows a structured two-tiered vertical stack. The upper tier pairs a left-aligned CTA value proposition (display headline, paragraph, dual buttons) alongside a right-aligned telemetry card displaying platform stats. A full-width hairline rule divides the CTA from a comprehensive footer. The lower tier positions a prominent brand block and newsletter input on the left against a balanced four-column link matrix on the right, terminating in a low-contrast legal bar.
PALETTE (use these exact hex values)
- #090d16 — Obsidian Base: Global application background setting maximum contrast for text and elevated surfaces
- #0f1624 — Slate Card: Slightly elevated surface for status containers, widgets, and input blocks
- #1a2333 — Border Subtle: Dividers, hairline card borders, and input boundaries
- #826df8 — Electric Iris: Primary button fill, brand logo accent, active indicator dots, and glowing halos
- #f87171 — Coral Accent: Metric emphasis, turnaround times, and wordmark punctuation dot
- #ffffff — Pure White: High-emphasis display headings, metrics values, and primary action text
- #94a3b8 — Cool Slate: Body paragraphs, navigation links, and input placeholder strings
- #505d73 — Muted Cobalt: Micro-copy, copyright lines, column category headers, and input helper text
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, 48px heading-lg, 56px display. Tracking -0.03em at display, 0.08em at uppercase captions. The typographic tone is authoritative, technical, and executive. By employing an unadorned grotesque sans-serif (Inter match) with tightly tracked display weights and generous uppercase tracking on metadata, the interface projects engineering precision and AI reliability. Free substitutions like Inter or Plus Jakarta Sans are exact structural matches.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through surface color shifts rather than heavy drop shadows. The background rests at deep obsidian (#090d16), while interactive and status panels lift to translucent slate (#0f1624) bounded by a 1px border (#1a2333). The only notable atmospheric shadow is a blurred, glowing violet aura emitting beneath primary interactive CTA buttons.
IMAGERY
This interface intentionally avoids photographic or illustrative assets, relying entirely on clean tabular data, UI badges, and monochrome line icons. Graphic interest is generated by glowing accents, typography scale, and crisp system telemetry symbols. If imagery were added, it would strictly need to be high-fidelity product UI captures or dark glassmorphic 3D artifacts.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the combination of massive, tight-kerning white typography ending with a coral period, balanced against an electric violet glowing CTA button and a live 'PLATFORM STATUS' data card. Misusing this pattern usually involves omitting the glowing button halo or using non-grotesque type, which strips the layout of its high-end dev-tool authority.
MUST
- Use solid electric violet (#826df8) exclusively for primary conversion elements and interactive anchors.
- Preserve letter-spacing expansion (+0.08em) for all uppercase 11px category labels.
- Enforce strict right-alignment for numerical KPIs inside tabular metrics cards.
- Pair the brand headline 'Standout.' with its signature contrast coral/pink final punctuation dot.
AVOID
- Do not introduce pure black (#000000); keep all canvas depth grounded in rich obsidian navy (#090d16).
- Never make footer category headings lowercase or mixed-case; keep them strictly uppercase.
- Avoid solid heavy borders; card borders must never exceed 1px or opacity thresholds beyond subtle slate (#1a2333).
- Do not apply drop shadows to secondary buttons or navigation text.
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. 在 DraPub 中尝试