Design a dark-mode website section: deep space terminal architecture grounding abruptly into a luminous white operational dock.
LAYOUT
The composition follows a two-tiered stacked rhythm. The top tier features an asymmetric two-column split containing editorial copy on the left and a floating execution terminal on the right. The bottom tier transitions into a full-width centered card organizing 4-column capability highlights above an avatar stack and numerical performance statistics.
PALETTE (use these exact hex values)
- #040711 — Void Canvas: Deepest background space anchoring the hero section and terminal display.
- #0B1220 — Terminal Slate: Fill for the floating execution preview window.
- #FFFFFF — Pure Dock: High-contrast ground sheet hosting feature pillars and performance metrics.
- #1D75FE — Electric Azure: Primary action button fill, headline accent phrase, and top neon rim glow.
- #10B981 — Mint Operational: Checkmark indicators, badge pulse point, and completed pipeline status tokens.
- #F59E0B — Solar Amber: Star rating icons and team feature indicator background.
- #94A3B8 — Ghost Muted: Dark-mode subtitle text, micro checklists, and terminal secondary descriptors.
- #0F172A — Charcoal Head: Primary metric integers and feature title typography within the white dock.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The voice is clinical, decisive, and relentlessly efficient. Tight negative tracking on Inter Display gives the title a heavy, monolithic software-grade authority, while the monospaced terminal logs provide undeniable proof of autonomous capability. For open-source builds, Inter pairs flawlessly with JetBrains Mono.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using a dramatic contrast transition rather than tiered drop shadows. The dark console card hovers slightly via an angled plane and faint ambient blue back-glow, while the bottom white card uses a high-intensity cyan-blue laser bloom along its top rim to feel physically docked under an intense studio spotlight.
IMAGERY
No photographic imagery is used; the interface relies on precise vector telemetry, rounded icon badges, and a crisp simulated CLI terminal window. Any prospective imagery must consist solely of clean, high-fidelity developer tooling snapshots or sharp code syntax graphics.
SIGNATURE DETAIL — the thing that makes this design itself
The singular identifying gesture is the stark, non-gradient threshold where the deep void canvas collides with a pure white rounded dock, illuminated by an intense blue horizon bloom along the card's top edge. To recreate it, apply a tight radial/linear cyan glow directly behind the overlapping top border of the light panel. Misusing it means softening the boundary into a muddy grey gradient or omitting the blue laser rim.
MUST
- Reserve #1D75FE strictly for the conversion CTA, critical headline focus, and glowing boundary accents.
- Use JetBrains Mono exclusively inside terminal panes, code tokens, and system status pills.
- Maintain high contrast between the dark upper viewport and the solid white bottom proof card.
- Apply 1px border strokes with low alpha (#1E293B) to dark mode components for crisp separation.
AVOID
- Never tint the white foundation dock with grey or dark mode fills; it must remain pure #FFFFFF.
- Do not spread the electric blue accent onto secondary buttons, icons, or standard body copy.
- Avoid standard drop shadows on the bottom dock; use an upward-directed blue neon bloom instead.
- Never set terminal pipeline logs in proportional sans-serif type; code context demands monospacing.
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. Try in DraPub