Design a dark-mode website section: deep terminal noir paired with radiant inverted light cards for high-velocity developer infrastructure.
LAYOUT
The section is arranged in a 2-column asynchronous grid on top (left: large 7-span light CTA card; right: two vertically stacked dark modules for features and terminal simulator). Below, a clean horizontal border opens a structured 6-column footer layout (brand metadata, four category link columns, and a newsletter block), followed by a flush bottom copyright bar.
PALETTE (use these exact hex values)
- #0b0e17 — Canvas Dark: Global application and footer background tone providing deepest elevation.
- #121724 — Card Surface Dark: Background for feature grids, terminal containers, and interactive inputs.
- #f8faff — Hero Inverted Surface: High-contrast light container used exclusively for the primary conversion card.
- #070a10 — Terminal Void: Recessed dark inner background for CLI execution code blocks.
- #4f46e5 — Brand Indigo: Primary action buttons, prominent typography highlights, and key brand emblems.
- #22c55e — System Green: Operational status pulse dots indicating real-time system health and terminal readiness.
- #1e2638 — Border Subtle: 1px hairline divider lines, footer category breaks, and container framing.
- #f9fafb — Text Primary Light: Headings, titles, and high-emphasis body text on dark surfaces.
- #8b94a5 — Text Muted Dark: Footer links, metadata, descriptive copy, and subtle terminal logs.
- #0f172a — Hero Text Deep: High-contrast headings and body copy within the light hero card.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 22px heading, 34px display. Tracking -0.02em at display, 0.01em at body. Pragmatic, technical, and frictionless. The crisp neo-grotesque font (Inter or Geist) delivers objective clarity, while monospace injections highlight terminal ergonomics. For production parity, use Geist Sans alongside Geist Mono or JetBrains Mono.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through tonal contrast and 1px borders rather than diffuse drop shadows. Surfaces elevate from Canvas Dark (#0b0e17) to Card Dark (#121724), with code blocks recessed into (#070a10). The single inverted light card visually leaps forward by stark luminosity rather than blur elevation.
IMAGERY
Visual assets are strictly developer-centric: subtle isometric 3D server blades rendered in pale lavender and soft blue monochrome, paired with wireframe hardware motifs. Organic photographs, human portraits, and saturated illustrations are prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The 'Inverted Beacon' pattern: dropping a solitary, luminous light card featuring faint isometric cloud hardware directly into a nocturnal, high-density developer console environment. Misusing it across multiple cards immediately collapses the visual focal point and turns deliberate contrast into visual noise.
MUST
- Use the inverted light card (#f8faff) strictly once per section to maintain decisive focal hierarchy.
- Pair monospace badges and code snippets with neo-grotesque structural typography for clear developer context.
- Ensure the green operational dot (#22c55e) is reserved solely for live telemetry and system health.
- Separate secondary feature columns with 1px hairline rules (#1e2638) instead of drop shadows.
AVOID
- Do not invert all cards; multiple light cards will destroy the conversion anchor effect.
- Never use generic photography; lean exclusively into isometric hardware blueprints or terminal syntax.
- Do not apply heavy drop shadows; depth is strictly mediated through tonal border contrast.
- Avoid using bright accent colors for regular body text; keep indigo (#4f46e5) for targets and emphasis.
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 中尝试 
