Design a dark-mode website section: luminescent vertical scanlines piercing deep carbon glass to frame autonomous engineering workflows.
LAYOUT
Structured around a balanced two-column hero arrangement constrained to 1240px width. The left 45% houses narrative hierarchy: status badge, display typography, brief explainer paragraph, CTA pair, and a tripartite value proposition footer. The right 55% hosts the focal point: an elevated developer terminal console bathed in radiant vertical green scanlines.
PALETTE (use these exact hex values)
- #030708 — Carbon Void: Root background canvas framing the entire viewport.
- #081313 — Glass Dark: Semi-transparent backdrop fill for the terminal console and pill chips.
- #53F59F — Laser Mint: Primary button fill, accent title word, status bullets, and focused border highlights.
- linear-gradient(180deg, rgba(83,245,159,0.45) 0%, rgba(16,185,129,0.85) 50%, rgba(5,150,105,0.1) 100%) — Emerald Flute: Backdrop illumination laser columns piercing the right half of the canvas.
- #FFFFFF — Text Primary: Main headline typography and high-priority labels.
- #8899A6 — Text Muted: Paragraph description text, navigation links, and terminal placeholder values.
TYPOGRAPHY
Typeface Geist Sans (or Inter, Plus Jakarta Sans, SF Pro Display), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The voice is analytical, authoritative, and frictionless. A surgical geometric sans (Geist Sans or Inter) drives clarity and confidence in marketing claims, while crisp monospace (JetBrains Mono) confers hardcore engineering legitimacy in the interactive product demo.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through optical light transmission rather than physical dropshadows. The glowing vertical backdrop beam illuminates translucent dark glass surfaces (#081313 at ~80% opacity), bounded by a subtle neon edge glow (1px solid #53F59F at 28% opacity) that defines component boundaries against the pure carbon void.
IMAGERY
No photographic imagery or lifestyle assets are used. Visual interest is driven purely by vertical generative laser light lines, glowing status pills, and high-fidelity code execution wireframes. Any photographic imagery would shatter the pure algorithmic developer atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The vertical emerald laser beam backdrop radiating directly behind a dark glass terminal console. It transforms standard developer tooling UI into an energetic, futuristic command center by slicing through the dark void with clean vertical scanlines.
MUST
- Use solid mint green (#53F59F) exclusively for primary CTA buttons and the decisive keyword in headlines.
- Render code and task-list statuses in a dedicated monospace font like JetBrains Mono.
- Keep terminal glass panels semi-translucent so the backdrop light beams gently bleed through.
- Pair active state dots with a faint radial outer glow matching the mint brand color.
AVOID
- Do not blur the background laser lines into a generic circular radial blob; maintain vertical fluting.
- Do not use full 999px pills for standard buttons; buttons must have 8px rounded corners.
- Do not use pure white for body text; reserve white strictly for headlines and primary labels.
- Never introduce warm tones (yellows, reds, oranges) outside standard error states.
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. Try in DraPub