De Stijl Neoplastic
굵은 순흑 수직·수평 선이 화면을 비대칭 직사각형 면으로 분할하고, 소수의 면만 순수 삼원색으로 채우는 1917년 신조형주의 스타일 — 모션은 없다.
설명
몬드리안·리트벨트의 신조형주의를 웹으로 옮긴다. 6–12px 순흑 룰이 화면 전체를 크기가 제각각인 직사각형 plane으로 빈틈없이 분할하고, 대부분은 흰 면으로 두되 소수의 면만 순수 빨강·노랑·파랑으로 채운다. 사선·곡선·둥근 모서리·그림자·그라디언트·모션이 전부 금지되는 완전 정적 구성이며, 타이포그래피는 Archivo Black 대문자 디스플레이 하나로 밀어붙인다.
타입 스케일
display Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
디스플레이는 Archivo Black(단일 웨이트 400) 대문자 — 기하학적 그로테스크. 본문은 Archivo 500, 라벨은 Archivo 700 대문자 + 넓은 자간. h2는 display의 축소 파생 스텝. 텍스트는 면 안에서 수평·수직 정렬만 — 회전·사선 텍스트 금지.
골든 예제 (exemplar)
Do
- 화면 전체를 굵은 검정 룰(주 8–12px·보조 6px)로 사방이 닫힌 비대칭 직사각형 면으로 빈틈없이 분할한다
- 대부분의 면은 흰색으로 두고 소수의 면만 순수 빨강·노랑·파랑으로 채운다
- 면 크기는 의도적으로 불균등하게(fr 값을 다르게), 룰 두께·면 패딩은 통일한다
- 색 면은 항상 검정 룰을 공유하는 인접 면과 맞물리게 배치한다
Don't
- 원·삼각형·대각선 구성 금지 — 직사각형 면 분할만 (사선·곡선·회전 텍스트 절대 금지)
- 삼원색(빨강·노랑·파랑) 외 유채색 금지 — 보라·초록·주황·파스텔 전부 금지
- 그라디언트·그림자·둥근 모서리·이모지 금지
- 모션·트랜지션 애니메이션 금지 — 정적 구성이 정체성 (호버는 0ms 즉시 색 교체만)
- 검정 선을 6px 미만으로 가늘게 쓰기 금지 — 굵은 선이 정체성
- 모든 면을 색으로 채우기 금지 — 대부분 흰 면, 소수만 삼원색
- 균등한 면 분할 금지 — 비대칭 불균등 면 크기
- 경계 없는 빈 보이드·홀로 떠 있는 색 사각형 금지 — 모든 면은 검정 룰로 사방이 닫히고 인접 면과 맞물린다
- 회색 '이미지 영역' 플레이스홀더 블록 금지
- 검정 룰을 가늘게·면 분할을 균등하게 만들어 일반 그리드 사이트로 회귀 금지
컴포넌트 노트
- button
- 레드 또는 블루 직사각형 면 + 굵은 검정 보더(4–6px), Archivo Black 대문자, 패딩 14px 32px, radius 0. 호버 시 면 색이 0ms로 다른 삼원색·검정으로 즉시 교체 — 트랜지션 없음.
- card
- 직사각형 면(plane), 굵은 검정 보더. 색 면 또는 흰 면. 내부 패딩 clamp(24px,3vw,48px), 제목↔본문 16px, 텍스트는 좌상단/좌하단 정렬 — 면 안 죽은 공백 금지.
- nav
- 상단 가로 흰 면 1개, 하단 8px 검정 룰. 좌측 워드마크(Archivo Black), 우측 메뉴는 작은 색 면(노랑/블루)에 담긴 라벨, 항목 사이 검정 선 구분.
- icon
- 제너릭 아이콘 세트 금지 — 직사각형·직선만으로 구성한 기하 도형(검정 또는 삼원색). 이모지 금지.
- image
- 직사각형 면에 꽉 차게, radius 0, 굵은 검정 보더로 면과 분리. '이미지 영역' 회색 플레이스홀더 금지.