Design a dark-mode website section: deep twilight enterprise canvas driven by neon-lit architectural blueprints and high-contrast typographic hierarchy.
LAYOUT
The view features a sticky or absolute header spanning 1240px max-width, followed by an asymmetric two-column hero layout with left-aligned editorial text and right-aligned product visualization. Below the hero CTA group, a row of compliance trust badges precedes a uniform four-column dashboard grid showing three metric sparkline cards and one developer API code preview.
PALETTE (use these exact hex values)
- #060913 — Obsidian Canvas: Deepest atmospheric page backdrop across the entire viewport
- #0B1124 — Midnight Surface: Semi-opaque card fill grounding interactive panels and stat blocks
- #1A294A — Midnight Border: Crisp 1px borders encasing all cards, badges, and code blocks
- #2B66FF — Electric Azure: Signature brand accent used for punchy display text and key glyphs
- #FFFFFF — Pristine Snow: High-contrast headings, active metrics, and primary CTA fill
- #8A99B5 — Slate Steel: Secondary labels, body copy, inactive navigation, and caption metadata
- #10B981 — Emerald Spark: Success metrics, positive delta lines, and confidence indicators
- #F43F5E — Coral Glow: Revenue sparklines and badge accents on metric widgets
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,SF Pro Display,General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 28px heading, 36px heading-lg, 56px display. Tracking -0.03em on display, 0em on body. Clean, authoritative, and distinctly developer-grade through grotesque sans-serif proportions. The tight display tracking communicates high-velocity SaaS efficiency, while the monospace secondary font anchors the platform as technically rigorous infrastructure rather than light consumer software.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered entirely through layered opacity, 1px glowing structural strokes, and soft atmospheric backlights. No harsh drop shadows or skeuomorphic bevels are used; surfaces rely on dark glass contrast and subtle glow falloffs to float above the canvas.
IMAGERY
Imagery strictly consists of isometric, neon wireframe floor plans resembling architectural CAD drawings bathed in cyan and deep navy. Real-world restaurant food or people photography is forbidden here in favor of technical schematic visuals that reinforce an AI-first developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The three-line typographic hero cadence ending in an electric-blue accent line, directly juxtaposed against an isometric neon-wireframe dining floor plan nestled within an AI dialogue bubble.
MUST
- Reserve #2B66FF for the final punchline phrase of the hero headline.
- Use 1px borders colored #1A294A to clearly demarcate all dark-on-dark surface containers.
- Pair the primary ivory CTA button directly with a transparent bordered secondary button.
- Keep typography tracking tight (-0.03em) on headlines above 32px to retain punchiness.
AVOID
- Do not introduce pure white card backgrounds; all container surfaces must stay dark navy.
- Do not omit the luminous indigo glow behind the right-hand hero graphic.
- Never use generic photography; prioritize isometric neon blueprints and UI mockups.
- Do not make buttons pill-shaped; restrict 9999px radius purely to small announcement badges.
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 中尝试 
