styles
← 갤러리

Editorial Confidence

넓은 미색 캔버스에 비대칭 다단 그리드, 큰 디스플레이 세리프 헤드라인과 단 하나의 딥 포레스트 면강조색으로 잡지 같은 차분한 권위를 내는 편집형 스타일.

editorial-minimalism editorial-magazinedisplay-serifasymmetric-gridsingle-accentprint-like
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

잡지 펼침면이 웹이 된 듯한 자신감 있는 편집 레이아웃이다. 따뜻한 화이트 위에 12열 비대칭 그리드, 큰 Fraunces 디스플레이 세리프 헤드라인과 Inter 산세리프 본문을 짜고, 단 하나의 진한 딥 포레스트 색을 면 단위 블록으로 과감히 칠해 강조한다. 헤어라인 룰과 넉넉한 행간·여백으로 위계를 만들며, 그림자·그라디언트·둥근 모서리는 쓰지 않는다.

타입 스케일

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

역할 이원화: 헤드라인·풀쿼트는 Fraunces 디스플레이 세리프(opsz 큰 값), 본문·캡션·킥커는 Inter 산세리프. 세리프/산세리프 역할을 섞지 않는다. 본문은 62~70ch 측정 폭 유지, 킥커는 대문자 + 넓은 자간으로 섹션 오버라인.

골든 예제 (exemplar)

On Craft

Confidence is a
layout decision.

Read the feature

A magazine spread that happens to be a website: a wide canvas, one deep accent used as a whole plane, and type that carries the argument. Every division is a hairline rule, never a shadow.

The whole plane is the emphasis. There is no second color to reach for.

Essay

Serif for weight

Fraunces sets the headline; Inter never crosses into display.

Note

Asymmetry as voice

Text at seven columns, whitespace holding the rest.

Method

Hairlines, not shadows

A single 1px rule opens every block.

Do

  • 헤드라인은 Fraunces 디스플레이 세리프, 본문은 Inter로 역할을 고정한다
  • 강조는 면 단위 딥 포레스트 단색 하나로만 — 링크·밑줄·면 블록 모두 이 색
  • 비대칭 다단 그리드로 짜고, 섹션마다 킥커 + 헤어라인 룰로 연다
  • 본문은 62~70ch 넓은 단으로 두고 넉넉한 행간·여백을 유지한다

Don't

  • border-radius > 0 금지 — 카드·이미지·블록 모두 직각 모서리
  • soft drop-shadow·그라디언트·글래스모피즘 금지 — 구획은 헤어라인 룰과 여백, 면 블록으로만
  • 강조색을 2개 이상 쓰지 말 것 — 보조 강조색·네온 금지
  • 모든 섹션을 중앙 대칭으로 만들지 말 것 — 비대칭 다단이 정체성
  • 세리프와 산세리프 역할을 섞지 말 것, 본문을 좁은 카드에 욱여넣지 말 것

컴포넌트 노트

button
base: radius 0. 텍스트 링크형 또는 1px solid accent(딥 포레스트) 사각 보더, 배경 투명, padding 14px 28px.
hover: 면강조 블록 위 CTA는 배경 background로 반전 + 텍스트 accent, 180ms ease-out.
focus: 2px offset outline (ring)
disabled: opacity 0.4
card
보더·그림자 없음. 1px 상단 헤어라인 룰 + 넉넉한 패딩으로만 구획. radius 0. Fraunces H2 + Inter 본문 + 작은 캡션.
input
1px 풀 보더 또는 언더라인, radius 0. 포커스 시 border가 accent로.
nav
비고정(스크롤과 함께 흐름), 높이 80px. 좌측 Fraunces 워드마크, 우측 텍스트 메뉴, 하단 1px 헤어라인 룰.
link
본문 링크는 accent 텍스트 + 1px 밑줄(text-underline-offset 3px), 호버 시 밑줄 2px.
blockquote
좌측 2px accent 세로 룰 + Fraunces 1.5rem 이탤릭.
accent_panel
한 섹션/단을 accent(딥 포레스트) 단색으로 통째 칠하고 accent-foreground 텍스트. radius 0. 내부 보조선은 반투명 흰 룰.