Hub
01 — Manifesto

Precision
Meets Neon
Energy

정밀함이
네온 에너지를
만나다

精密さが
ネオンの
エネルギーと融合

Swiss design gave us the grid, the column, the rule. Neon Drift gave us the glow, the pulse, the energy of midnight streets. This fusion holds both truths: structure is freedom, and light is language.

12-Col Grid Space Grotesk 700 Neon Accent: #16f2d1
02

Type
Scale

5.2rem Display
2.2rem Headline
1.5rem Subhead
1.0rem Body Text
0.78rem Caption
03 — Grid

Modular Composition

Grid System 12 Columns
Photo Area
Border Radius 4px
Typeface Space Grotesk
Accent #16f2d1
Weight 700
Image
Philosophy Swiss Precision, Neon Soul
Motion None
04

Color
Tokens

--bg
#070b15
--surface
#0b1325
--rule
#2d4d85
--line
#8fb7ff
--text
#eef4ff
--accent
#16f2d1
01
Grid First
Every element aligns to the 12-column grid. Asymmetry is intentional, but never random. Structure precedes expression.
02
Restrained Glow
Neon accents are limited to structural emphasis only. No gratuitous glow. Each light source serves a typographic or navigational purpose.
03
Type as Design
Typography is the primary design tool. No decorative icons or illustrations. Scale, weight, and glow intensity create the entire visual hierarchy.

AI Request Prompt

Design a landing page in Neon Swiss fusion style — combining Neon Drift night city energy with Swiss Poster grid precision.

COLOR TOKENS:
--bg: #070b15
--bg-glow: radial-gradient(circle at 90% 10%, rgba(22, 242, 209, 0.18), transparent 35%)
--line: #8fb7ff
--text: #eef4ff
--accent: #16f2d1
--hero-bg: rgba(10, 14, 26, 0.9)
--rule-border: #2d4d85
--prompt-bg: #0b1325
--prompt-border: #4468a8
No other colors.

TYPOGRAPHY:
- Headings: 'Space Grotesk', sans-serif — font-weight: 500 | 700, letter-spacing: -0.02em
- Body: 'IBM Plex Sans', sans-serif — font-weight: 400 | 500 | 700
- Hero h1: clamp(2rem, 5vw, 4rem), line-height: 0.95, text-transform: uppercase
- Body text: line-height: 1.7, color: var(--text)
- Rule text: font-size: 0.95rem

UI:
- Hero section: border: 2px solid var(--line), border-radius: 18px, background: rgba(10, 14, 26, 0.9), display: grid, grid-template-columns: 1.3fr 1fr
- Left column: padding: clamp(20px, 4vw, 38px), border-right: 2px solid var(--line)
- Right column: padding: 18px
- Rule items: border-top: 1px solid #2d4d85, padding-top: 10px, font-size: 0.95rem
- Prompt section: border: 2px solid #4468a8, border-radius: 14px, background: #0b1325, padding: 14px
- CTA button: border: 1px solid var(--accent), color: var(--accent), background: transparent, border-radius: 999px, padding: 7px 12px

LAYOUT:
- Page wrapper: width: min(1100px, 92vw), margin: 0 auto, padding: 26px 0 70px
- Hero grid: 2-column split (1.3fr 1fr) with internal border divider
- Swiss alignment: all elements snap to column boundaries, asymmetric but ordered
- Neon accent usage: section headers, active states, CTA only — never body text

MOTION:
- No animations — Swiss discipline demands stillness
- Hover interactions limited to CTA border glow only

RESPONSIVE:
- Desktop (>800px): 2-column hero grid (1.3fr 1fr), left column has border-right divider, h1 scales to 4rem
- Mobile (<=800px): hero grid collapses to 1 column, left border-right removed, replaced with border-bottom: 2px solid var(--line), h1 scales down to 2rem

FORBIDDEN:
- More than 2 accent colors — discipline is the core principle
- border-radius exceeding 18px — maintain Swiss geometric precision
- Decorative illustrations or icons — typography and grid are the only design tools
- Neon color on body text — accent is for structural emphasis only
- Background images or patterns — solid dark + single radial glow only

OUTPUT:
1) Swiss grid system with neon color tokens
2) 2-column hero layout with internal border divider
3) Full HTML/CSS with responsive breakpoints