Design a dark-mode website section: deep tech dark mode energized by vertical aurora rays, chartreuse-cyan gradients, and disciplined micro-architecture.
LAYOUT
The upper section utilizes an asymmetric 2-column bento layout (approx. 7:5 ratio) where the left panel houses the primary hero narrative, action buttons, and a 3-column metric bar. The right column stacks two equal-width secondary cards vertically with a 16px gap. Below, a continuous 1px divider opens into a comprehensive 6-column footer encompassing brand metadata, four categorized link columns, and a dedicated newsletter subscription unit.
PALETTE (use these exact hex values)
- #030507 — Void Canvas: Primary background canvas for the entire layout and global footer base.
- #070c0e — Deep Bento Surface: Base fill for interactive bento CTA cards and subtle input wrappers.
- #152426 — Bento Stroke: Hairline structural border on cards, input containers, and social icon buttons.
- linear-gradient(90deg, #1be7e0 0%, #c8f53a 100%) — Hyper Accent Gradient: High-conversion primary actions, newsletter subscribe buttons, and hero text highlights.
- #1be7e0 — Laser Cyan: Eyebrow tag text, hyperlinked domains, and checkmark accents.
- #c8f53a — Electric Chartreuse: Headline emphasis words and glowing wireframe node highlights.
- #ffffff — Crisp White: Headings, primary card titles, numeric metric values, and logo text.
- #8b9ca1 — Muted Slate: Supporting descriptions, list items, footer navigation links, and copyright text.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 26px heading, 36px display. Tracking -0.02em at display, 0.05em at micro caps. The typographic tone is ultra-modern, technical, and uncompromisingly direct. Set in Inter or an equivalent modern grotesque, tight negative letter spacing (-0.02em) on display sizes delivers an enterprise-grade posture, while micro-caps with expanded tracking provide cryptographic precision. Inter or Geist Sans are ideal zero-cost open-source alternatives that maintain this aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through luminous optical depth rather than traditional drop shadows. Cards feature dark slate backdrops accented by ambient vertical aurora light curtains (#1be7e0 and #c8f53a) radiating from the interior out toward a sharp 1px border (#152426). Ground zero is a pitch-black canvas (#030507) that causes contained glowing elements to float cleanly.
IMAGERY
Visual assets are strictly schematic and algorithmic: 3D wireframe isometric geometries, precision matrix grids, and vertical fiber-optic light curtains. Photorealistic human imagery or stock lifestyle photography is strictly forbidden; all graphics represent high-tech material science and physics simulations.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone optical light curtain: a subtle vertical fiber-optic aurora in cyan and electric chartreuse shining through dark container cards behind high-contrast sans-serif type. It transforms an otherwise stark dark grid into a glowing, laboratory-grade computational artifact without compromising text legibility.
MUST
- Use electric chartreuse (#c8f53a) strictly for terminal accent words or gradient endpoints to preserve shock value.
- Enclose all major CTA content inside 16px rounded cards with 1px hairline borders (#152426).
- Keep footer column headers in uppercase 11px font with 0.08em letter spacing.
- Pair cyan and lime luminous glows exclusively against deep void surfaces (#070c0e or darker).
AVOID
- Do not use solid white backgrounds or light mode panels anywhere in this layout.
- Never apply harsh drop shadows; depth must come entirely from hairline borders and radial background glows.
- Avoid fully rounded pill buttons for primary CTAs; keep border-radius at an engineered 8px.
- Do not set footer category links to bright white; they must remain muted slate (#8b9ca1).
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