Neon Grid Protocol
A style that fuses Neon energy with Swiss alignment systems. Colors are futuristic while structure remains strict.
Neon의 에너지와 Swiss의 정렬 체계를 결합한 스타일입니다. 색은 미래지향, 구조는 엄격하게 유지합니다.
Neonのエネルギーとスイスの整列体系を融合したスタイルです。色は未来志向、構造は厳格に保ちます。
A style that fuses Neon energy with Swiss alignment systems. Colors are futuristic while structure remains strict.
Neon의 에너지와 Swiss의 정렬 체계를 결합한 스타일입니다. 색은 미래지향, 구조는 엄격하게 유지합니다.
Neonのエネルギーとスイスの整列体系を融合したスタイルです。色は未来志向、構造は厳格に保ちます。
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
어두운 사이버 네온 미학과 깔끔한 그리드 기반의 스위스 타이포그래피 레이아웃을 결합한 랜딩 페이지를 설계해줘. 스타일 규칙: - 배경: 딥 다크(#0c0c14), 가시적 그리드 라인(#1a1a2e, 1px)이 있는 엄격한 12열 그리드 - 타이포: 헤딩은 굵은 그로테스크 산세리프(Space Grotesk 또는 Inter 800), 본문은 라이트 웨이트(300-400) - 컬러: 기본 텍스트 #e8e8f0, 뮤트 #6b6b80, 단일 네온 포인트(시안 #00d4ff 또는 마젠타 #ff0080) - 레이아웃: 스위스 그리드 정렬 — 모든 요소가 컬럼 경계에 스냅, 비대칭이지만 질서 있음 - 컴포넌트: 1px 네온 보더 카드, 채움 없거나 최소 다크 필(#14141e), 깔끔한 내부 간격 - 포인트 사용: 네온은 절제해서 — 섹션 헤더, 활성 상태, CTA에만(본문 텍스트엔 절대 안 됨) 반응형: - 모바일(~768px): 그리드 4열로 축소, 네온 포인트 유지, 스택 레이아웃 - 데스크톱: max-width 1200px, 엄격한 12열 스위스 그리드 금지사항: - 포인트 컬러 2개 초과 금지 — 절제가 핵심 원칙 - 8px 초과 border-radius 금지 — 스위스의 기하학적 정밀함 유지 - 장식적 일러스트나 아이콘 금지 — 타이포와 그리드가 유일한 디자인 도구 - 텍스트 대비는 항상 WCAG AA 이상 출력: 1) 스위스 그리드 시스템 + 네온 컬러 토큰 2) 그리드 정렬 규칙이 포함된 섹션 레이아웃 3) 반응형 대응이 포함된 HTML/CSS 코드
暗いサイバーネオンの美学とクリーンなグリッドベースのスイスタイポグラフィレイアウトを組み合わせたランディングページを設計してください。 スタイルルール: - 背景: ディープダーク(#0c0c14)、可視グリッドライン(#1a1a2e, 1px)のある厳格な12列グリッド - タイポグラフィ: ヘッディングは太いグロテスクサンセリフ(Space GroteまたはInter 800)、本文はライトウェイト(300-400) - カラー: ベーステキスト#e8e8f0、ミュート#6b6b80、単一ネオンアクセント(シアン#00d4ffまたはマゼンタ#ff0080) - レイアウト: スイスグリッド整列 — 全要素がカラム境界にスナップ、非対称だが秩序ある - コンポーネント: 1pxネオンボーダーカード、塗りなしまたは最小ダークフィル(#14141e)、クリーンな内部スペーシング - アクセント使用: ネオンは控えめに — セクションヘッダー、アクティブ状態、CTAのみ(本文テキストには絶対不可) レスポンシブ: - モバイル(~768px): グリッド4列に縮小、ネオンアクセント維持、スタックレイアウト - デスクトップ: max-width 1200px、厳格な12列スイスグリッド 禁止事項: - アクセントカラー2色超過禁止 — 規律が核心原則 - 8px超のborder-radius禁止 — スイスの幾何学的精密さを維持 - 装飾的イラストやアイコン禁止 — タイポとグリッドが唯一のデザインツール - テキストコントラストは常にWCAG AA以上 出力: 1) スイスグリッドシステム+ネオンカラートークン 2) グリッド整列ルール付きセクションレイアウト 3) レスポンシブ対応を含むHTML/CSSコード