Design a dark-mode website section: deep-navy developer console balancing cryptographic precision with ethereal mint and royal blue luminescence.
LAYOUT
The page follows a structured technical rhythm with a fixed-width container capped at 1200px. A slim 64px header navigates at the top, flowing immediately into a balanced 2-column hero split with copy on the left and mockup on the right. Directly below the hero split sits a panoramic four-column metrics panel spanning the full grid width.
PALETTE (use these exact hex values)
- #06080d — Obsidian Canvas: Deepest canvas background providing infinite dark depth across the entire hero layout.
- #0c1017 — Console Surface: Background fill for cards, terminal dialogs, and the bottom metric container.
- #1a2333 — Hairline Border: 1px stroke defining component perimeters, panel borders, and internal table dividers.
- #3b5bfd — Electric Cobalt: Primary CTA button backgrounds, terminal execution chips, and active focus triggers.
- #6366f1 — Periwinkle Accent: Used for the uppercase eyebrow badge text and prompt prefixes.
- #bbf7d0 — Luminescent Mint: Final word gradient highlight on display title and terminal submission action icon.
- #ffffff — Primary Text: Main headline typography, prominent metric figures, and card headers.
- #8b949e — Secondary Text: Descriptive paragraphs, inactive navigation items, labels, and terminal placeholder values.
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographical voice is hyper-competent, surgical, and authoritative. Geist Sans delivers precise, low-contrast readability with tight letter-spacing for enterprise confidence, while JetBrains Mono injects developer-first authenticity for parameters and command strings.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through optical layering rather than physical drop shadows. A faint, diffuse deep-blue radial backlight emanates behind the primary terminal card to lift it off the #06080d base. Panel borders at 1px thickness (#1a2333) catch light to define surfaces against the abyss.
IMAGERY
This interface rejects figurative imagery, stock photography, and 3D renders entirely. Visual communication is strictly carried by an interactive synthetic software GUI, schematic vector iconography (shields, clocks, code tags, locks), and a subtle + crosshair matrix pattern.
SIGNATURE DETAIL — the thing that makes this design itself
The defining hallmark is the developer-console card inlaid over a faint crosshair (+) dot matrix, coupled with the subtle mint gradient finish on the headline. It immediately signals an advanced runtime environment for enterprise agents rather than a generic consumer SaaS tool. Misusing it involves making the crosshairs high-contrast or applying the mint color across entire paragraphs.
MUST
- Use subtle, 1px borders (#1a2333) to separate modular panels from the canvas background.
- Pair terminal/CLI notation ('>_') strictly with monospace fonts (JetBrains Mono or Geist Mono).
- Keep background crosshair grids (+) faint and monochromatic (#151b27) behind visual centerpieces.
- Limit vibrant cobalt (#3b5bfd) strictly to primary interactive states and run triggers.
AVOID
- Never apply heavy multi-layered drop shadows; use 1px border lines and faint blue backlights instead.
- Do not use generic sans-serif for code tokens, paths, or prompt indicators.
- Avoid bright saturated background fills; panels must remain anchored near #0c1017.
- Never make the eyebrow label text standard sentence case or un-tracked.
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 中尝试 
