styles
← 갤러리

Chiaroscuro Motorsport

순흑·순백 면이 엣지투엣지로 극적 분할하는 명암 대비 위에 디스플레이 세리프와 좁은 매거진 칼럼, 단 한 점의 레이싱 레드를 얹은 모터스포츠 에디토리얼.

cinematic-dark chiaroscuromotorsport-editorialhigh-contrastmagazine-columndisplay-seriffull-bleedmonochrome
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

순흑(#0A0A0A) 면과 순백(#FFFFFF) 면이 흐릿한 그레이 없이 화면을 엣지투엣지로 비대칭 분할하는 키아로스쿠로 스타일이다. 그 위에 큰 디스플레이 세리프 헤드라인과 좁고 빽빽한(48–58자) 그로테스크 본문 칼럼이 모터스포츠 매거진처럼 밀도 있게 앉고, 레이싱 레드는 페이지 전체에 단 한 번만 찍혀 시선을 못박는다. 모서리 0px·그림자 없음·그레이스케일 이미지·100–150ms 단호한 스냅 모션. 위계는 명암 면 분할과 타이포로만 만든다.

타입 스케일

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

디스플레이·인덱스는 Newsreader 세리프(weight 600), 본문·키커·캡션은 Inter. 헤드라인은 트래킹 타이트(-0.015em)한 에디토리얼 세리프, 본문은 좁고 빽빽한(48–58자) 그로테스크 칼럼, 키커는 대문자 0.18em 라벨. 헤드라인에 산세리프 금지.

골든 예제 (exemplar)

01

Heritage — Circuit 1947

Light against
the dark.

Pure black meets pure white edge to edge, and the story sits in the seam — a narrow, dense column where every line earns its place against the void.

Enter the archive
Tipo 375 1951 · 4.5L V12

Do

  • 순흑(#0A0A0A)·순백(#FFFFFF) 고대비 면을 엣지투엣지로 비대칭 분할하고 비율을 섹션마다 다르게 한다
  • 헤드라인은 디스플레이 세리프(Newsreader), 본문은 좁고 빽빽한 그로테스크 칼럼(48–58자)으로 짠다
  • 각 흑·백 면을 거대 인덱스 번호·키커·본문으로 dense하게 채워 완결된 매거진 plane으로 만든다
  • 레이싱 레드는 페이지 전체에 단 한 번(키워드 1개 또는 1px 라인 하나)만 찍는다
  • 모션은 100–150ms 스냅으로 단호하게 — 면 와이프·즉시 반전

Don't

  • 레이싱 레드를 두 번 이상 쓰지 말 것 — 페이지 전체 단 한 점
  • 흑/백 분할을 흐릿한 그레이로 약화시키지 말 것 — 순흑·순백 고대비 유지
  • 둥근 카드·그라디언트·그림자·이모지 금지
  • content_max 박스로 콘텐츠 가두지 말 것 — 면은 엣지투엣지
  • 본문 칼럼을 60자 초과로 넓히지 말 것, 헤드라인에 산세리프 쓰지 말 것, 컬러 사진 금지(그레이스케일만)
  • 평면 단색 데드 보이드 금지 — 빈 면은 거대 인덱스 번호나 그레이스케일 이미지로 채운다
  • 느린 페이드(>200ms)·패럴랙스·바운스 금지

컴포넌트 노트

button
모서리 0px, 패딩 12px 28px, Inter 대문자 letter-spacing 0.1em. 흑 면 위 → 흰 솔리드 + 흑 텍스트(primary). 백 면 위 → 흑 솔리드 + 흰 텍스트. 호버 시 흑↔백 즉시 반전 110ms.
card
그레이스케일 이미지 카드 + 하단 반대 명도 캡션 바(모델명 Newsreader + 연식 Inter tabular). 모서리 0px, 갭 2px(면이 거의 맞붙음). 호버 시 이미지 grayscale 해제 130ms.
nav
높이 60px 블랙 필드, 좌측 워드마크(Newsreader 600), 우측 메뉴(Inter 대문자 0.7rem 700 0.18em), 하단 1px #C4C4C4 라인. 스크롤 시 즉시 고정.
table
레이스 기록 — 행 구분 1px 라인, Inter tabular-nums, 헤더행 반전 명도. 우승 행 1개만 좌측에 레드 1px 표시선(레드 단 한 번 사용처).
index_number
거대 인덱스/이슈 번호 — Newsreader 600, clamp(3rem,8vw,7rem). 빈 면을 채우는 에디토리얼 장치(흑 면에 옅은 #C4C4C4).
icon
1px 스트로크 라인, 최소한으로. 모터스포츠 모티프(체커기·랩타임·계기)만. 면 아이콘·이모지·제너릭 아이콘 세트 금지.