Back to Hub
Fusion Sample / Neon x Swiss Go to Hub

Neon Grid Protocol

A style that fuses Neon energy with Swiss alignment systems. Colors are futuristic while structure remains strict.

AI Request Prompt

Design a landing page that combines a dark cyber-neon aesthetic with a clean, grid-based Swiss typography layout.

Style rules:
- Background: Deep dark (#0c0c14), strict 12-column grid with visible grid lines (#1a1a2e, 1px)
- Typography: Headings in bold grotesque sans-serif (Space Grotesk or Inter 800), body in light weight (300-400)
- Colors: Base text #e8e8f0, muted #6b6b80, single neon accent (cyan #00d4ff or magenta #ff0080)
- Layout: Swiss grid alignment — all elements snap to column boundaries, asymmetric but ordered
- Components: Cards with 1px neon border, no fill or minimal dark fill (#14141e), clean internal spacing
- Accent usage: Neon applied sparingly — section headers, active states, CTA only (never body text)

Responsive:
- Mobile (~768px): Grid reduces to 4 columns, neon accents maintained, stack layout
- Desktop: max-width 1200px, strict 12-column Swiss grid

Restrictions:
- No more than 2 accent colors — discipline is the core principle
- No rounded corners exceeding 8px — keep Swiss geometric precision
- No decorative illustrations or icons — typography and grid are the design tools
- Text contrast must be WCAG AA or above at all times

Output:
1) Swiss grid system + neon color tokens
2) Section layout with grid alignment rules
3) HTML/CSS code with responsive support