디자인 시스템
web
v1.0.0
90/100

Atelier Zero

@dante · Editorial · Studio

Magazine-grade editorial system: warm paper canvas, oversized display type mixing bold sans with italic serif, Roman-numeral section walks, coral as the single accent, and collage imagery with hairline corner brackets.

HTML/CSS
React
shadcn/ui
Tailwind
#collage
#editorial
#magazine
#serif
#studio
Atelier Zero
다운로드10
패키지 JSON 다운로드
DESIGN.mdSKILL.md

개요

Atelier Zero

Atmosphere

A small high-craft studio's annual report rendered as a webpage. The canvas is warm handmade paper (#efe7d2); every surface earns its lines. Type does the heavy lifting, collage imagery does the storytelling, and Coral provides the only spark of warmth — Mustard, Olive, and Bone are quiet companions. The page reads as printed, slightly aged, and intentionally restrained: editorial, museum-catalog calm, top-biased and asymmetric. Roman numerals walk the reader through the page like chapters in a printed essay.

Color

Paper, Paper-warm, Paper-dark, and Bone form the warm-ivory canvas family. Ink, Ink-soft, Ink-mute, and Ink-faint cover all type and rule weights. Coral (#ed6f5c) is the single accent — used for CTA fills, Roman-numeral marks, eyebrow underlines, pulse dots, and the closing FIN. period. Mustard (#e9b94a) is jewelry: a single ★ in the nav, a highlighted stat ring. Olive (#6e7448) is reserved for tags and partner glyphs. Pure white only inside dark inverse panels; pure black is forbidden. Maximum one coral moment per ~600vh of scroll — when in doubt, swap to ink-faint.

Typography

Inter Tight 700–900 (display, sans), Playfair Display Italic 500 (emphasis on emotional nouns and the brand Ø), Inter 300–500 (body), JetBrains Mono 400–500 (coordinates, SHAs, plate numbers). Every section H1/H2 closes with a coral period. Eyebrows are 11px Inter Tight 600, letter-spacing 0.22em, uppercase, coral, prefixed with an 18px coral hairline.

Spacing & Layout

1360px max container, 64px desktop side padding. Section padding 130px desktop / 90px tight. 12-column conceptual grid; hero is 0.78fr / 1.22fr. Two 36px fixed side rails on the viewport edges carry rotated 10px Inter Tight labels, hidden below 1280px. Vertical rhythm sits on an 8px baseline.

Composition

Every page opens with a top metadata strip (volume/issue, Filed under …, live-status pulse + version + locale, Inter Tight 10.5px ink-faint, 1px ink rule beneath). Every section opens with a section rule of [Roman.] · [meta middle] · [page-of-008]. Every featured image carries 4 corner brackets, a Plate Nº, and one monospace coordinate or SHA. The hero must extend above the fold at 1440×900 minimum. The page closes with a megaword footer at clamp(70px, 13vw, 200px) and a coral period.

프리뷰

새 창으로 열기 ↗

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

색상 (12)

paper
#efe7d2
paperWarm
#ece4cf
paperDark
#ddd2b6
bone
#f7f1de
ink
#15140f
inkSoft
#2a2620
inkMute
#5a5448
inkFaint
#8b8676
coral
#ed6f5c
coralSoft
#f08e7c
mustard
#e9b94a
olive
#6e7448

타이포그래피 (6)

display
"Inter Tight", Inter, system-ui, 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
headline
"Inter Tight", Inter, system-ui, 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
italic
"Playfair Display", Georgia, 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
Inter, system-ui, 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
"JetBrains Mono", ui-monospace, SFMono-Regular, 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
microcopy
"Inter Tight", Inter, system-ui, 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

컴포넌트 (13)

Button

Primary affordance. Coral pill on Paper, ghost variant uses ink hairline border.

html
Hand-tuned CSS, no framework
2 props · 6 states · 5 tags · 2 소스

Card

Bone-fill card on Paper. Italic serif index numeral, eyebrow tag, and circular arrow mark that turns coral on hover.

html
Hand-tuned CSS
2 props · 3 states · 8 tags · 2 소스
누락 상태: disabled

Badge

Pill filter row. Hairline border, transparent default; coral fill marks the active filter with a count separator.

html
Hand-tuned CSS
2 props · 4 states · 6 tags · 2 소스
누락 상태: disabled

Heading

Display headline with bold sans + italic serif emphasis on emotional nouns, closed by a coral period.

html
Hand-tuned CSS
1 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Link

Inline ink link with coral hairline underline that thickens on hover. Outbound link adds a small ↗ glyph.

html
Hand-tuned CSS
1 props · 4 states · 4 tags · 2 소스
누락 상태: disabled

Hero

Above-the-fold editorial hero: metadata strip, eyebrow, mixed-typography display, side coordinate column, faux collage tile with corner brackets and plate number.

html
Hand-tuned CSS
2 props · 1 states · 7 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Nav

Top navigation bar with brand mark Ø, link list, mustard ★, and coral CTA — sitting beneath the editorial metadata strip.

html
Hand-tuned CSS
1 props · 3 states · 6 tags · 2 소스
누락 상태: disabled

Footer

Closing megaword footer: clamp-sized brand word, coral period, FIN. mark, MMXXVI roman year, and pulse dot.

html
Hand-tuned CSS
0 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Stat

Stat row with dashed circular rings; one ring per row may be coral-stroked to mark the headline metric.

html
Hand-tuned CSS
1 props · 1 states · 8 tags · 2 소스
누락 상태: hover, focus-visible, disabled

Input

Editorial subscription input with a coral-period label, ink-faint hairline, and ink fill submit button.

html
Hand-tuned CSS
1 props · 5 states · 7 tags · 2 소스

SectionRule

Mandatory section opener: top hairline, Roman numeral on the left, centered metadata cluster, page-of-008 counter on the right.

html
Hand-tuned CSS
2 props · 1 states · 5 tags · 2 소스
누락 상태: hover, focus-visible, disabled

PullQuote

Italic-serif testimonial pull quote with hairline rules and a coral attribution dot.

html
Hand-tuned CSS
1 props · 1 states · 4 tags · 2 소스
누락 상태: hover, focus-visible, disabled

PageIndex

Hero-side index card listing 01–04 entries; the active row is bold ink, others are ink-faint, each digit prefixed with a coral mono token.

html
Hand-tuned CSS
1 props · 3 states · 5 tags · 2 소스
누락 상태: focus-visible, disabled

DESIGN.md

Atelier Zero

Atmosphere

A small high-craft studio's annual report rendered as a webpage. The canvas is warm handmade paper (#efe7d2); every surface earns its lines. Type does the heavy lifting, collage imagery does the storytelling, and Coral provides the only spark of warmth — Mustard, Olive, and Bone are quiet companions. The page reads as printed, slightly aged, and intentionally restrained: editorial, museum-catalog calm, top-biased and asymmetric. Roman numerals walk the reader through the page like chapters in a printed essay.

Color

Paper, Paper-warm, Paper-dark, and Bone form the warm-ivory canvas family. Ink, Ink-soft, Ink-mute, and Ink-faint cover all type and rule weights. Coral (#ed6f5c) is the single accent — used for CTA fills, Roman-numeral marks, eyebrow underlines, pulse dots, and the closing FIN. period. Mustard (#e9b94a) is jewelry: a single ★ in the nav, a highlighted stat ring. Olive (#6e7448) is reserved for tags and partner glyphs. Pure white only inside dark inverse panels; pure black is forbidden. Maximum one coral moment per ~600vh of scroll — when in doubt, swap to ink-faint.

Typography

Inter Tight 700–900 (display, sans), Playfair Display Italic 500 (emphasis on emotional nouns and the brand Ø), Inter 300–500 (body), JetBrains Mono 400–500 (coordinates, SHAs, plate numbers). Every section H1/H2 closes with a coral period. Eyebrows are 11px Inter Tight 600, letter-spacing 0.22em, uppercase, coral, prefixed with an 18px coral hairline.

Spacing & Layout

1360px max container, 64px desktop side padding. Section padding 130px desktop / 90px tight. 12-column conceptual grid; hero is 0.78fr / 1.22fr. Two 36px fixed side rails on the viewport edges carry rotated 10px Inter Tight labels, hidden below 1280px. Vertical rhythm sits on an 8px baseline.

Composition

Every page opens with a top metadata strip (volume/issue, Filed under …, live-status pulse + version + locale, Inter Tight 10.5px ink-faint, 1px ink rule beneath). Every section opens with a section rule of [Roman.] · [meta middle] · [page-of-008]. Every featured image carries 4 corner brackets, a Plate Nº, and one monospace coordinate or SHA. The hero must extend above the fold at 1440×900 minimum. The page closes with a megaword footer at clamp(70px, 13vw, 200px) and a coral period.

어댑터 (6)

전체 파일 (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

버전