web-big-type-statement

Big Type Statement

화면을 가득 채우는 초대형 디스플레이 타이포가 콘텐츠 자체, 음수 자간과 무채 + 강조 하나.

미리보기

Big Type Statement 샘플 렌더

색 토큰

bg
#F4F4F2
surface
#F4F4F2
text
#0E0E0E
muted
#7C7C78
accent
#FF3B00
border
#0E0E0E

타이포 · 간격 토큰

display · {"family":"Anton","fallback":"Archivo Black, Impact, sans-serif","size":"clamp(3.5rem,12vw,14rem)","weight":400,"tracking":"-0.04em","leading":0.9}
heading · {"family":"Anton","fallback":"Impact, sans-serif","size":"clamp(2rem,5vw,4rem)","weight":400,"leading":0.95}
body · {"family":"Inter","fallback":"system-ui, sans-serif","size":"1.0625rem","weight":400,"leading":1.6}
caption · {"family":"Inter","fallback":"sans-serif","size":"0.8125rem","weight":600,"tracking":"0.08em","transform":"uppercase"}
spacing.unit · 8
spacing.section · 120
spacing.text_column · 680px
spacing.content_max · 100vw

스타일 축

색채mono
타이포heavy-display
레이아웃full-bleed
여백airy
모션subtle
familybig-typography

출처

원자산은 각 출처 라이선스를 따름. 본 팩이 배포하는 것은 디자인 명세·토큰이며 원자산 사본이 아님.

이 팩 적용하기 — design-pick 스킬

Claude Code에 design-pick 스킬이 설치돼 있으면, 아래 한 줄을 붙여넣는 것으로 이 팩이 적용됩니다.

웹사이트 만들기
design-pick 스킬로 "web-big-type-statement" 팩을
적용해서 [내 주제] 웹사이트를 만들어줘

스킬이 없다면 — GitHub 저장소의 design-diversity 에서 skills/design-pick .claude/skills/에 복사하면 됩니다.

스킬 없이 쓰기 — 디자인 지시문(prompt.md) 직접 복사
prompt.md
# Big Type Statement — web 디자인 팩

## 이 스타일의 정체성
초대형 디스플레이 타이포 그 자체가 콘텐츠다. 한 화면(뷰포트)에 단어 몇 개만, 글자가 화면 가장자리까지 꽉 차게 — `clamp` 6~14vw 스케일에 음수 자간으로 글자를 서로 밀착시킨다. 이미지는 거의 없고, 무채색 + 강조 하나. 카드도 그리드도 박스도 없이, 거대한 글자의 크기·잘림·여백만으로 위계를 만든다. "글자가 화면을 압도한다"가 정답.

## 색
- 배경: `#f4f4f2` (오프화이트)
- 텍스트: `#0e0e0e` (거의 순흑 — 거대 타이포의 무게)
- 보조 텍스트(작은 캡션): `#7c7c78`
- 강조: `#ff3b00` (강렬한 오렌지레드) — 단 1개. 특정 단어 하이라이트·링크·작은 라벨에만. 거대 텍스트는 검정 유지, 강조색은 1~2단어 또는 작은 요소에만.
- 그라디언트 금지. 그라디언트 텍스트 금지.

## 타이포그래피
- 디스플레이: `"Anton", "Archivo Black", Impact, sans-serif` (Anton은 Google Fonts 공개 웹폰트 — 초압축 헤비 디스플레이)
- 본문/캡션: `Inter, system-ui, sans-serif` (Google Fonts)
- 거대 텍스트(스테이트먼트): `clamp(3.5rem, 12vw, 14rem)`, weight 400(Anton은 이미 헤비), letter-spacing `-0.04em`, line-height 0.9
- H2급 텍스트: `clamp(2rem, 5vw, 4rem)`, line-height 0.95
- 본문: `1.0625rem`, weight 400 (Inter), line-height 1.6 — 본문은 짧게, 거대 텍스트의 보조 역할만.
- 캡션/라벨: `0.8125rem`, weight 600, 대문자, letter-spacing `0.08em`
- 거대 텍스트는 종종 화면 폭을 넘쳐 가장자리에서 잘린다(`overflow: hidden`으로 의도적 크롭).

## 레이아웃 / 그리드
- 거대 텍스트 블록은 `max-width` 없이 화면 폭 전체(`100vw`) 사용. 작은 본문·캡션만 `680px`로 제한.
- 좌우 패딩 `clamp(20px, 4vw, 64px)`
- full-bleed — 각 섹션이 최소 한 뷰포트(`min-height: 90vh`)를 차지하고 거대 텍스트로 채운다.
- 브레이크포인트: `clamp()`가 대부분 처리. `<768px`에서 line-height만 0.95로 살짝 완화.
- 섹션 간격 `120px` 이상 (airy — 거대 텍스트 주변에 빈 공간을 충분히).
- 텍스트 정렬은 섹션마다 바꾼다(좌/우/꽉참) — 단조로움 회피.

## 형태 / 질감
- radius `0px`. 박스·카드 자체를 거의 쓰지 않는다.
- 그림자 전무.
- 구분선: 굵은 룰 라인(`4px solid #0e0e0e`) 또는 거대 텍스트 사이의 빈 공간.
- 이미지: 최소한으로. 쓰더라도 직각·흑백·작게, 거대 텍스트의 들러리.
- 장식 없음 — 타이포가 곧 그래픽.

## 모션
- subtle. 트랜지션 `400ms cubic-bezier(0.16, 1, 0.3, 1)`.
- 스크롤 시 거대 텍스트가 아래에서 `translateY(40px)` + `opacity 0→1`로 등장 (`600ms`).
- 호버: 강조 단어에 밑줄 또는 색 반전, `200ms`.
- 거대 텍스트가 스크롤에 따라 천천히 수평 이동(가벼운 패럴럭스)은 허용 — 단 어지럽지 않게.

## 하지 말 것
- 보라/인디고 그라디언트 금지. 그라디언트 텍스트 절대 금지 — 거대 텍스트는 솔리드 검정.
- 거대 텍스트를 작게 쓰지 말 것 — 스테이트먼트는 반드시 `clamp` 상한 10rem 이상 도달.
- 거대 텍스트를 항상 중앙 정렬하지 말 것 — 좌/우/꽉참을 섹션마다 교차.
- 카드 그리드·3박스 반복 금지 — 콘텐츠는 거대 타이포 흐름.
- 둥근 모서리·soft shadow 금지. 이모지 금지. blob 도형 금지.
- 이미지로 화면을 채우지 말 것 — 화면을 채우는 건 글자.
- 본문 텍스트가 거대 텍스트만큼 길어지지 말 것 — 본문은 보조.

## 적용 예
- **히어로**: 오프화이트 배경, `min-height: 95vh`. 화면 폭을 넘치는 거대 스테이트먼트 텍스트(Anton, clamp 12vw, line-height 0.9, 음수 자간)를 좌측 정렬로 2~3줄. 한 단어만 강조 오렌지. 하단에 작은 대문자 캡션 1줄.
- **콘텐츠 섹션**: 다음 섹션은 우측 정렬 거대 텍스트, 그 다음은 화면 꽉 채우는 텍스트 — 정렬 교차. 거대 텍스트 옆 또는 아래에 680px 작은 본문.
- **푸터**: 색 반전 — `#0e0e0e` 배경에 오프화이트 거대 텍스트(연락처/CTA 한 문장), 오렌지 링크.

복사한 지시문을 Claude(claude.ai)나 Claude Code에 붙여넣고 “위 디자인 팩을 그대로 따라 [내 주제]로 만들어줘”라고 요청하세요.