Design a dark-mode website section: an obsidian developer workspace where glowing isometric cloud infrastructure orbits a high-contrast terminal prompt.
LAYOUT
The header spans the full width with a left-anchored brand mark, center-weighted navigation links, and right-aligned auth actions. The hero section utilizes an asymmetrical two-column desktop split: the left 45% holds product positioning, headline, description, dual action buttons, and proof badges. The right 55% presents an orbital constellation where four modular hardware cards encircle a central elevated CLI terminal.
PALETTE (use these exact hex values)
- #07090e — Void Canvas: Deepest canvas background providing high contrast for glowing borders and crisp typography
- #0d111a — Card Surface: Background fill for floating feature cards and the central CLI terminal container
- #2f68fa — Electric Cobalt: Primary action background for main CTA button and active status indicators
- #34d399 — Console Emerald: Terminal status output, CLI checkmarks, and active environment indicator dots
- #f43f5e — Hardware Magenta: Subtle border glow on GPU and database feature tags signaling specialized compute
- #38bdf8 — Cyan Glow: Secondary isometric edge highlight and technical status tag strokes
- #ffffff — Pure White: Hero display headlines, active navigation labels, and bolded terminal command keywords
- #8b949e — Slate Muted: Body descriptive copy, inactive navigation links, and terminal stdout responses
- #1e2638 — Border Subtle: Dividers, secondary button strokes, pill wrappers, and card perimeter outlines
TYPOGRAPHY
Typeface Inter Display (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 28px heading, 60px display. Tracking -0.03em at display, 0 at body. The voice is razor-sharp, low-friction, and unapologetically engineered. Inter Display provides an authoritative, neutral vehicle for the bold hero value proposition, while JetBrains Mono reinforces raw command-line speed in terminal logs and status badges. The balance creates immediate credibility with backend engineers who prioritize terminal autonomy over GUI bloat.
GEOMETRY & SPACING
Corner radii — cards 14px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created using an orbital layered plane rather than heavy drop shadows. The primary canvas remains pitch black, while card panels sit on z-index 1 with subtle 1px luminous rim strokes (rgba(255,255,255,0.08)). The central terminal window casts a soft, diffuse 40px indigo glow (#1e1b4b at 25% opacity) over the faint orbital dashed lines behind it.
IMAGERY
Imagery consists exclusively of dark-mode isometric 3D hardware artifacts: dual-fan GPU accelerator cards, stacked 1U server chassis, code chevron glyphs, and cylindrical database clusters. Each model features deep metallic charcoal finishes accented with electric cyan and magenta rim highlights. Photography, human avatars, or flat corporate vector art are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the interactive CLI terminal card positioned at the geometric center of an isometric hardware orbit. It grounds the entire value proposition by visually proving that server racks, GPUs, and databases are orchestrated with a single, concise terminal command.
MUST
- Keep background canvas strictly near-black (#07090e) to let glowing terminal elements pop cleanly.
- Use uppercase monospace typography with wide letter-spacing for technical attribute chips.
- Render isometric hardware assets with deep shadows and neon rim-light reflections.
- Position the interactive CLI container at the center of orbital infrastructure cards.
AVOID
- Do not introduce warm yellow or orange accents that clash with the cybernetic cold blue and magenta.
- Do not use generic flat SaaS vector illustrations; stick strictly to dark isometric 3D models.
- Avoid solid bright borders; keep bounding lines semi-transparent at 1px rgba(255,255,255,0.08).
- Never center-align the left marketing narrative; maintain strict left-alignment on display type and CTAs.
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 中尝试 
