Design system
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
Downloads10
Download package
DESIGN.mdSKILL.md

Overview

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.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (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

Typography (6)

display
"Inter Tight", Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
headline
"Inter Tight", Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
italic
"Playfair Display", Georgia, serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
body
Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
mono
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
microcopy
"Inter Tight", Inter, system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234

Components (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 sources

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 sources
Missing states: 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 sources
Missing states: 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 sources
Missing states: 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 sources
Missing states: 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 sources
Missing states: 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 sources
Missing states: 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 sources
Missing states: 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 sources
Missing states: 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 sources

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 sources
Missing states: 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 sources
Missing states: 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 sources
Missing states: 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.

Adapters (6)

  • adapters/tokens.css

    text/css

    Download
  • adapters/shadcn-registry.json

    application/json

    Download
  • adapters/tailwind.config.js

    text/javascript

    Download
  • adapters/react/index.ts

    text/typescript

    Download
  • adapters/html/index.html

    text/html

    Download
  • adapters/html/styles.css

    text/css

    Download

All files (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

Versions