Blueprint Grid
24px 헤어라인 도트/라인 그리드를 의도적으로 노출하고 콘텐츠를 격자에 스냅시키는 청사진형 웹 스타일 — 흑백 양극에 단 하나의 시그널 레드.
설명
페이지 전면에 1px 헤어라인 도트/라인 그리드가 청사진처럼 깔리고, 모든 콘텐츠 블록이 격자선에 정확히 스냅된다. 그리드 텍스처 자체가 주인공이며 숨기지 않고 노출한다. 등폭(monospace) 영향의 라벨·좌표·치수 캡션이 청사진 느낌을 강화하고, 섹션 경계는 그림자가 아니라 1px 분할선과 모서리 십자(+) 마커로 표현된다. 색은 흑·백 양극과 면적 5% 이하의 단일 시그널 레드뿐. 잉크 블랙 다크 모드도 지원하되 한 페이지는 한 모드를 고수한다.
타입 스케일
헤딩·본문은 IBM Plex Sans(등폭 산세 인상을 위해 좁은 트래킹). 라벨·코드·좌표 캡션은 JetBrains Mono 대문자로 통일하고 '// 라벨'·'[01]'·'x: 240 / y: 88' 같은 등폭 접두 기호를 붙여 청사진 느낌을 만든다.
골든 예제 (exemplar)
// INTRO — x: 24 / y: 48
Snap every block
to the grid.
The hairline grid is exposed, not hidden. Division is 1px rules and corner crosshairs — never shadow.
[01]
Edge to edge
Corners snap to grid intersections. The red index marks the active node.
[02]
One signal
A single red, under five percent of the surface, used only as punctuation.
[03]
1px only
Every division is a hairline. Radius stays zero; shadows are banned.
w: 1200 / cols: 12 / cell: 24 — end of section
Do
- 배경 그리드선을 노출한다 — 그리드가 정체성이다
- 모든 콘텐츠를 24px 배수에 스냅하고 카드 모서리를 그리드 교차점에 맞춘다
- 라벨·좌표·캡션은 등폭 폰트 대문자로 '// LABEL'·'[01]'·'x: 240' 형식으로
- 섹션·카드 네 모서리에 십자(+) 마커를 둔다
- 시그널 레드는 CTA·활성 노드·강조점에만, 면적 5% 이하
Don't
- 배경 그리드를 숨기지 말 것 — 지우면 평범한 스위스 미니멀이 된다
- border-radius > 0 금지, 그림자 금지 — 분리는 1px 선과 십자 마커로
- 보더를 2px 이상으로 굵게 하지 말 것 — 청사진 헤어라인은 항상 1px
- 그라디언트·시그널 레드 외 유채색·보라/인디고 금지
- 콘텐츠를 그리드선 사이 임의 위치에 두지 말 것
- 이모지·blob 도형·둥근 일러스트 금지, 라벨에 일반 산세 쓰지 말 것
컴포넌트 노트
- button
- base: radius 0, 1px solid border, 등폭 대문자 라벨, padding 12px 24px, 배경 투명hover: 보더가 시그널 레드로 전환(160ms ease-out), transform 없음focus: 2px offset outline (ring = 시그널 레드)primary_variant: 1차 CTA만 시그널 레드 배경 + 흰 라벨 (페이지당 최소한으로)
- card
- 배경 표면색(card), 1px 보더, radius 0. 네 모서리를 그리드선 교차점에 맞추고 12px 십자(+) 마커를 둔다. 좌상단에 '[01]' 등폭 인덱스. 호버 시 보더가 시그널 레드로. 그림자 없음.
- input
- 1px 풀 보더 또는 언더라인, radius 0, 등폭 라벨. 포커스 시 보더가 시그널 레드로.
- nav
- 그리드선 하단 룰 + 등폭 대문자 링크를 좌표 라벨처럼 정렬. 색 반전하지 않음.
- grid_overlay
- background repeating-linear-gradient로 24px 셀 도트/라인 그리드를 border 색으로 전면 노출. 콘텐츠 뒤에 항상 보이게.