styles
← 갤러리

Anthropic Paper

따뜻한 크림 페이퍼 위에 기하학적 산세리프 헤드라인과 고전 세리프 스테이트먼트를 얹고, 저채도 진흙빛 코랄을 구두점처럼 쓰는 절제된 에디토리얼 스타일.

warm-paper warm-papercream-canvaseditorialserif-sans-pairingclay-coral-accentprint-likerestrainedgeometric-grotesque
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

Anthropic.com의 홈페이지에서 추출한 따뜻한 페이퍼 미학. 배경은 오크LCH 0.948의 크림(#f0eee6), 잉크는 0.191의 거의 검정(#141413)으로 인쇄물 같은 대비를 만든다. 위계는 색이 아니라 타입 페어링에서 나온다 — 기하학적 그로테스크 산세리프의 굵은 히어로 헤드라인(700)과 고전 트랜지셔널 세리프의 큰 스테이트먼트(400)를 의도적으로 대비시킨다. 브랜드 액센트는 단 하나, Anthropic의 진흙빛 코랄(clay, #d97757)이며 CTA나 강조 한두 곳에만 구두점처럼 쓴다. 주 버튼은 코랄이 아니라 잉크 검정 필(pill)이다. 라운드는 중간(카드 16px, 필드 8px), 구획은 두꺼운 섀도우가 아니라 얇은 따뜻한 헤어라인과 미세한 톤 단차로 나눈다. 다크는 라이트 히어로 안의 다크 카드(#141413 그라운드 + #faf9f5 크림 텍스트 + 화이트 필)를 근거로 저술한 따뜻한 near-black 세트다.

타입 스케일

display Ag 스타일 견본 Style Specimen
serif-display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
small Ag 스타일 견본 Style Specimen

두 패밀리의 의도적 대비가 시그니처다. 기하학적 그로테스크 산세리프(Anthropic Sans, Styrene 계열 → Google 대체 Space Grotesk가 Styrene에서 파생돼 가장 근접)는 히어로 헤드라인에 700 굵기로, 고전 트랜지셔널 세리프(Anthropic Serif, Tiempos 계열 → Newsreader)는 큰 스테이트먼트(예: 'Anthropic is built on hard questions')에 400으로 쓴다. 산세리프 헤드라인은 음수 자간(-0.02em)으로 촘촘하게, 세리프 스테이트먼트는 -0.01em. 측정 H1 60.87px/700, 본문 20px/400 lh28. 웨이트는 400/600/700.

골든 예제 (exemplar)

AI research and products that put safety at the frontier

AI will have a vast impact on the world. We build it to be trustworthy, human, and calm.

Built on hard questions.

Learn more →

Latest releases

Responsible scaling

How we take on the hardest questions across safety and governance.

Model details

Economic index

Tracking how AI is adopted across the real economy.

Explore
Core views on AI safety Announcements
Our constitution Alignment
Build and learn Education

Do

  • 따뜻한 크림 배경 + near-black 잉크로 인쇄물 같은 대비를 만든다
  • 굵은 기하학적 산세리프 헤드라인과 큰 고전 세리프 스테이트먼트를 의도적으로 페어링한다
  • 코랄 액센트는 페이지당 한두 곳(주요 CTA·강조)에만 구두점처럼 쓴다
  • 주 버튼은 코랄이 아니라 잉크 검정 필로 한다
  • 구획은 얇은 따뜻한 헤어라인과 톤 단차로 나누고 섀도우는 거의 쓰지 않는다

Don't

  • 코랄을 배경·큰 면적에 남용 금지 — 코랄은 구두점이다
  • 차가운 순회색·순백 금지 — 모든 중립색은 살짝 따뜻해야(hue 95–107) 한다
  • 그라디언트·글래스모피즘·네온·두꺼운 드롭 섀도우 금지
  • 산세리프만 또는 세리프만으로 통일 금지 — 대비가 시그니처다
  • 바운스·스프링·과한 패럴랙스 모션 금지 — 차분하게

컴포넌트 노트

button
base: primary는 배경 var(--primary) 잉크 검정 + var(--primary-foreground) 크림 텍스트, radius var(--radius)(8px) 필형, padding 12px 20px, 폰트 14–16px/500. 'Try Claude' 같은 주 CTA 패턴.
hover: 배경 살짝 밝게 또는 미세 translateY(-1px), 150ms ease-standard. 담백하게.
focus: 2px var(--ring) 코랄 링(box-shadow 0 0 0 2px ring), 오프셋 2px.
disabled: opacity 0.4, cursor not-allowed.
secondary_variant: 배경 투명, 1px var(--border) 헤어라인, 텍스트 var(--foreground). 텍스트 링크형 버튼은 세리프 + 밑줄.
accent_variant: 코랄 채움은 페이지당 한두 곳의 강조 CTA에만 — 남용 금지.
card
배경 var(--card)(크림보다 밝은 off-white), 1px var(--border) 헤어라인 또는 톤 단차, radius var(--radius)(16px), padding 24–32px. 섀도우 기본 없음. 다크 스테이트먼트 패널만 잉크 배경으로 반전.
input
배경 var(--card), 1px var(--border) 보더, radius var(--radius-field)(8px), padding 12px 14px. placeholder는 var(--muted-foreground). 포커스 시 border→var(--ring) 코랄.
nav
상단, 좌측 워드마크(ANTHROP\C), 우측 세리프 링크(Research/Policy/…) + 잉크 필 'Try Claude'. 투명 배경, 하단 헤어라인 선택.
list-row
정책·릴리스 리스트는 좌측 제목 + 우측 카테고리 라벨, 항목마다 하단 1px 헤어라인 룰.