styles
← 갤러리

Editorial Swiss

국제주의 타이포그래피 그리드 위에 잡지 편집 감성을 얹은 흑백 중심 스타일 — 여백이 곧 장식이다.

editorial-minimalism swiss-minimaleditorial-magazinegrid-drivenmonochrometypographic
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

스위스 모더니즘의 엄격한 그리드와 산세리프 위계에 에디토리얼 매거진의 큰 디스플레이 타입, 가는 헤어라인 룰, 절제된 단일 액센트 컬러를 결합한다. 장식 효과(그라디언트, 그림자, 블러)는 거의 쓰지 않고, 위계는 오로지 크기·굵기·간격으로만 만든다.

타입 스케일

display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

단일 산세리프 패밀리, 웨이트 3단(400/500/600)만 사용. 캡션은 대문자 + 넓은 자간으로 라벨 역할.

골든 예제 (exemplar)

Issue 01 — Editorial

Whitespace
is the
ornament.

A monochrome grid where hierarchy is built from size, weight, and space — never decoration.

Live

The grid as argument

Structure carries the meaning; the red is used exactly once, here.

Essay

Three weights, no more

400 for reading, 500 for display, 600 for labels.

Note

Hairlines over shadows

Every division is a 1px rule.

Do

  • 위계는 크기·굵기·여백으로만 만든다
  • 섹션마다 대문자 라벨 + 헤어라인 룰로 시작한다
  • 액센트 컬러는 페이지 전체에서 1-2곳만

Don't

  • border-radius > 0 금지
  • 그라디언트·글래스모피즘·컬러풀 아이콘 금지
  • 그림자로 구획 나누기 금지 — 헤어라인을 써라
  • 본문 링크에 accent 컬러 사용 금지 (밑줄로만 표시)

컴포넌트 노트

button
base: radius 0, border 1px solid foreground, 배경 투명, 대문자 caption 타이포, padding 12px 28px
hover: 배경 foreground / 글자 background 반전, 150ms
focus: 2px offset outline (ring)
disabled: opacity 0.4, border muted-foreground
primary_variant: 배경 primary 채움 (페이지당 1개만)
card
그림자 없음. 헤어라인 border 또는 배경색 단차(card vs background)로만 구분. padding 40px.
input
밑줄만 있는 언더라인 스타일 또는 1px 풀 보더, radius 0, 포커스 시 border가 foreground로.
nav
상단 고정 아님. 헤어라인 하단 룰 + 좌측 로고, 우측 대문자 caption 링크. 햄버거 대신 전체 노출 선호.