개요

Claude

Visual Theme

A literary salon reimagined as a product page — warm, unhurried, quietly intellectual. The entire experience sits on a parchment-toned canvas (#f5f4ed) that evokes high-quality paper rather than a digital surface. Where most AI brands lean cold and futuristic, this system radiates human warmth, as if the assistant itself has good taste in interior design. The signature move is a medium-weight serif headline family that gives every title the gravitas of a book, paired with organic, hand-drawn-feeling illustrations in terracotta, black, and muted green. Sections alternate between Parchment light and Near Black dark like chapters of a book.

Color Principles

The palette is exclusively warm-toned. Every gray carries a yellow-brown undertone — Olive Gray (#5e5d59), Stone Gray (#87867f), Charcoal Warm (#4d4c48) — and the darkest surfaces (#141413, #30302e) keep a barely perceptible olive warmth. Terracotta Brand (#c96442) is the single chromatic moment, reserved for primary CTAs and editorial accents; Coral (#d97757) takes over on dark surfaces. The only cool note in the entire system is Focus Blue (#3898ec), used purely for input focus accessibility. Borders are cream-tinted (#f0eee6, #e8e6dc); shadows are warm-toned ring halos rather than drop shadows.

Typography

Serif for authority, sans for utility. All headlines use the Anthropic Serif family at a single weight — 500 — across every size from 64px hero to 20px feature title, creating a consistent voice as if one author wrote every heading. Anthropic Sans handles all UI text with quiet efficiency. Body copy runs at a generous 1.60 line-height for a literary reading rhythm; headings tighten to 1.10–1.30. Labels at 12px and below add 0.12px–0.5px letter-spacing to stay legible at small sizes.

Layout

8-px base spacing scaling to 30px, with section gaps of 80–120px for editorial breathing room. Containers max out at ~1200px and recede inside generous whitespace. Border-radius climbs from 4px on inline elements to 8px on standard buttons and cards, 12px for primary controls, 16px for featured containers, and 32px for hero media. Depth comes from 0px 0px 0px 1px ring shadows in warm grays and from light/dark section alternation — never from heavy drop shadows or saturated gradients. The result is a magazine spread that happens to ship as software.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (22)

anthropicNearBlack

#141413

terracottaBrand

#c96442

coralAccent

#d97757

errorCrimson

#b53333

focusBlue

#3898ec

parchment

#f5f4ed

ivory

#faf9f5

pureWhite

#ffffff

warmSand

#e8e6dc

darkSurface

#30302e

deepDark

#141413

charcoalWarm

#4d4c48

oliveGray

#5e5d59

stoneGray

#87867f

darkWarm

#3d3d3a

warmSilver

#b0aea5

borderCream

#f0eee6

borderWarm

#e8e6dc

borderDark

#30302e

ringWarm

#d1cfc5

ringSubtle

#dedc01

ringDeep

#c2c0b6

타이포그래피 (6)

display

Anthropic Serif, Georgia, 'Times New Roman', serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

heading

Anthropic Serif, Georgia, 'Times New Roman', serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

body

Anthropic Sans, Inter, system-ui, Arial, sans-serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

ui

Anthropic Sans, Inter, system-ui, Arial, sans-serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

mono

Anthropic Mono, 'JetBrains Mono', ui-monospace, Menlo, monospace

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

scale

unparsed

{
  "hero": "64px/1.10",
  "section": "52px/1.20",
  "subheadingLarge": "36px/1.30",
  "subheading": "32px/1.10",
  "subheadingSmall": "25px/1.20",
  "featureTitle": "20.8px/1.20",
  "bodySerif": "17px/1.60",
  "bodyLarge": "20px/1.60",
  "body": "16px/1.60",
  "caption": "14px/1.43",
  "label": "12px/1.25",
  "overline": "10px/1.60"
}

컴포넌트 (14)

Button

Primary affordances. Terracotta for top CTAs; Warm Sand for secondary; Dark Charcoal inverted; ring-shadow halos in place of borders.

html

Hand-tuned CSS, no framework

2 props · 6 states · 10 tags · 2 소스

Claude

Visual Theme

A literary salon reimagined as a product page — warm, unhurried, quietly intellectual. The entire experience sits on a parchment-toned canvas (#f5f4ed) that evokes high-quality paper rather than a digital surface. Where most AI brands lean cold and futuristic, this system radiates human warmth, as if the assistant itself has good taste in interior design. The signature move is a medium-weight serif headline family that gives every title the gravitas of a book, paired with organic, hand-drawn-feeling illustrations in terracotta, black, and muted green. Sections alternate between Parchment light and Near Black dark like chapters of a book.

Color Principles

The palette is exclusively warm-toned. Every gray carries a yellow-brown undertone — Olive Gray (#5e5d59), Stone Gray (#87867f), Charcoal Warm (#4d4c48) — and the darkest surfaces (#141413, #30302e) keep a barely perceptible olive warmth. Terracotta Brand (#c96442) is the single chromatic moment, reserved for primary CTAs and editorial accents; Coral (#d97757) takes over on dark surfaces. The only cool note in the entire system is Focus Blue (#3898ec), used purely for input focus accessibility. Borders are cream-tinted (#f0eee6, #e8e6dc); shadows are warm-toned ring halos rather than drop shadows.

Typography

Serif for authority, sans for utility. All headlines use the Anthropic Serif family at a single weight — 500 — across every size from 64px hero to 20px feature title, creating a consistent voice as if one author wrote every heading. Anthropic Sans handles all UI text with quiet efficiency. Body copy runs at a generous 1.60 line-height for a literary reading rhythm; headings tighten to 1.10–1.30. Labels at 12px and below add 0.12px–0.5px letter-spacing to stay legible at small sizes.

Layout

8-px base spacing scaling to 30px, with section gaps of 80–120px for editorial breathing room. Containers max out at ~1200px and recede inside generous whitespace. Border-radius climbs from 4px on inline elements to 8px on standard buttons and cards, 12px for primary controls, 16px for featured containers, and 32px for hero media. Depth comes from 0px 0px 0px 1px ring shadows in warm grays and from light/dark section alternation — never from heavy drop shadows or saturated gradients. The result is a magazine spread that happens to ship as software.

어댑터 (6)

adapters/tokens.css
text/css
다운로드
adapters/shadcn-registry.json
application/json
다운로드
adapters/tailwind.config.js
text/javascript
다운로드
adapters/react/index.ts
text/typescript
다운로드
adapters/html/index.html
text/html
다운로드
adapters/html/styles.css
text/css
다운로드

전체 파일 (11)

DESIGN.mdtext/markdown
SKILL.mdtext/markdown
tokens/colors.jsonapplication/json
tokens/typography.jsonapplication/json
tokens/components.jsonapplication/json
adapters/tokens.csstext/css
adapters/shadcn-registry.jsonapplication/json
adapters/tailwind.config.jstext/javascript
adapters/react/index.tstext/typescript
adapters/html/index.htmltext/html
adapters/html/styles.csstext/css

버전

v1.0.02026. 5. 8.
다운로드