Design a dark-mode web interface screen: dense dark-mode developer canvas glowing with cryptographic cyan accents and razor-sharp slate data interfaces.
LAYOUT
The page follows a structured technical narrative starting with a two-column hero: headline and conversion cluster on the left balanced by an oversized dashboard mockup on the right. Below, an inline stat row anchors the hero before transitioning into a 1-to-3 grid layout for feature pillars. The rhythm concludes with a centered technical section highlighting an embedded, interactive terminal interface.
PALETTE (use these exact hex values)
- #05090f — Obsidian Void: Root page background canvas providing maximum contrast for glowing foreground elements
- #0b121c — Slate Bedrock: Background fill for feature cards, dashboard containers, and terminal windows
- #162536 — Deep Midnight Border: Structural 1px outlines separating panels, table cells, and module boundaries
- #00d2ee — Vibrant Cyan: Primary interactive buttons, key display text spans, verified badges, and glow focal points
- #fb7185 — Signal Coral: Warning badges, expiry notices, and cryptographic fingerprint security iconography
- #34d399 — Terminal Mint: Terminal success prompts, verified status indicators, and uptime iconography
- #ffffff — Stark White: Primary headings, active navigation links, and key numeric figures
- #8b9eb5 — Steel Slate: Secondary copy, passive navigation labels, table headers, and command outputs
TYPOGRAPHY
Typeface Inter (or Geist, 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, 56px display. Tracking -0.03em at display, 0.01em at body. The typography communicates machine precision, enterprise reliability, and developer-first velocity. Using clean, neutral neo-grotesque typefaces (Inter or Geist) keeps the interface legible under dense informational loads, while JetBrains Mono injects authentic command-line authority. Licensing is straightforward via open-source OFL distributions.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 112px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through luminance layering and atmospheric cyan backlights rather than directional drop shadows. The background void sits at #05090f, with mid-ground components elevated to #0b121c and #0e1824, each bounded by a crisp 1px #162536 border. Soft radial gradients in cyan (#00d2ee08) positioned behind the dashboard create a subtle three-dimensional levitation effect.
IMAGERY
Photography is entirely omitted in favor of hyper-precise, vector-based dashboard interfaces and cryptographic iconography. Icons use clean dual-tone vector lines with soft circular glow halos (e.g., check-shield, speedometer, fingerprint). Any introduction of human lifestyle photography or hand-drawn illustrations would immediately degrade the precise, automated developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast between the deep slate-blue container grid and the piercing cyan (#00d2ee) accent glow that selectively illuminates key phrases like 'Just 1 Step' and verification icons. It must be applied with extreme restraint—only highlighting 1-2 words per headline and primary actions. Overusing it across ordinary body text or general borders destroys the precise cybernetic hierarchy.
MUST
- Reserve vibrant cyan (#00d2ee) exclusively for top-tier interactions, primary metrics, and verified states.
- Use 1px subtle borders (#162536) on all elevated dark cards instead of harsh drop shadows.
- Pair terminal commands and cryptographic IDs with a clean monospace font at 13px.
- Keep typography strictly sans-serif for UI with tight negative letter-spacing on display sizes (-0.03em).
AVOID
- Never introduce warm colors like amber, orange, or gold into status pills or primary buttons.
- Do not use blurry, heavy box-shadows; rely on surface color shifts and 1px borders for depth.
- Avoid fully rounded pill buttons for primary CTAs—adhere strictly to the refined 6px border-radius.
- Do not set long-form paragraphs to full white (#ffffff); always use muted slate (#8b9eb5).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2400:3424. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
