Design a dark-mode website section: deep space canvas lit by cyan particle dust framing stacked enterprise intelligence plates.
LAYOUT
The page opens with a standard top header pinned to a 1360px centered grid. Below, the hero splits into an asymmetric two-column split: 52% left column for copy and action triggers, and 48% right for the isometric floating stack. Directly under the hero interaction area sits a full-bleed credibility bar organized as a balanced six-item horizontal metric ticker.
PALETTE (use these exact hex values)
- #000000 — Void Black: Primary background canvas across the entire landing page viewport
- #2563EB — Cobalt Electric: Primary interactive buttons, key brand badges, and navigational CTA emphasis
- #38BDF8 — Neon Cyan: Edge lighting on 3D stack cards, particle points, and glowing data network nodes
- #7C3AED — Electric Purple: Particle wave undertone and subtle text gradient wash in hero heading
- #0A101D — Card Surface Slate: Translucent fill for isometric architecture stack tiers and nested sub-cards
- #FFFFFF — Text Primary: Hero display title, major stat figures, and primary button labels
- #94A3B8 — Text Secondary: Descriptive body copy, metric labels, and unselected navigation links
- #1E293B — Subtle Border: Metric column separators, outlined buttons, and glassmorphic card boundaries
TYPOGRAPHY
Typeface Inter Display (or Geist,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 64px display. Tracking -0.03em at display, 0.08em at uppercase micro labels. The voice is institutional, precise, and aggressively modern, achieved through an engineered grotesque with neo-brutalist tight letterspacing on display scales. It communicates technical dependability for enterprise construction back-offices. Inter or Geist serve as ideal open-source representations.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 6px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical glow, layer stacking, and perspective rather than conventional drop shadows. Cyan edge highlights on the isometric planes make surfaces float above the infinite void. The cosmic dust particle ribbon weaves behind and through the floating UI deck to define physical depth in space.
IMAGERY
The visual hero is a synthetic 3D architectural representation composed of clean, dark glass platforms combined with a complex point-cloud particle wave. The atmosphere evokes quantum computing, deep tech, and computational flow. Realistic photography, human figures, or organic textures would completely break this aesthetic.
MUST
- Anchor the right visual with an intense particle stream blending from dark purple to electric cyan.
- Keep typography tight and high-contrast, strictly using white for headings and slate (#94A3B8) for copy.
- Use 10-11px tracked uppercase typography for technical system metadata and category markers.
- Apply hairline strokes (1px rgba(255,255,255,0.12)) to demarcate dark glass surfaces.
AVOID
- Never introduce warm colors like orange, yellow, or red into the background lighting scheme.
- Do not use high-opacity solid grey backgrounds behind cards; rely strictly on dark glassmorphism.
- Avoid pill-shaped radii on primary buttons; adhere to precise 6px or 8px corners.
- Do not drop dense black drop-shadows; generate depth via glowing cyan edge reflections.
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