open-design/design-systems/atelier-zero/DESIGN.md

Atelier Zero

Category: Editorial · Studio A magazine-grade, collage-driven visual system: warm paper canvas, surreal plaster-and-architecture imagery, oversized display type, hairline rules, Roman-numeral section markers, and tiny editorial annotations. Inspired by the production values of high-end print magazines (Monocle, Apartamento, IDEA) translated into a working website.

1. Visual Theme & Atmosphere

A small, high-craft studio's annual report rendered as a webpage. The canvas is warm handmade paper. Every surface earns its lines. Type does the heavy lifting; collage imagery does the storytelling. Coral provides the only spark of warmth; mustard, olive, and bone are quiet companions. The page feels printed, slightly aged, and intentionally restrained — never noisy, never neon.

• Visual style: editorial, collage, museum-catalog calm.
• Posture: asymmetric, generous, top-biased.
• Reading rhythm: Roman numerals (I, II, III…) walk the reader through the page like chapters in a printed essay.
• Mood: intelligent, tactile, slightly poetic, unmistakably international.

Print production references

The three magazines are not interchangeable inspiration — each owns a specific dimension of the system. When a brief asks "shift it closer to X", consult this map before changing tokens:

• Monocle: warm paper stock (#efe7d2), tight body leading (~1.55), monospace coordinates and SHA stamps, the international metadata strip ("Filed under …"), the small ★ in the nav.
• Apartamento: surreal collage composition (plaster + architecture
  • small human figure), torn-edge textures inside the imagery, the rotated side notes, and the willingness to leave generous negative space around an image.
• IDEA: Roman-numeral section walks (I → VIII), oversized italic-serif words mixed inline with bold sans (Playfair Italic 500 inside Inter Tight 800), hairline rules threading through method steps, the closing mega-word footer.

2. Color

All values are tokens. Do not invent new hex.

• Paper: #efe7d2 — primary background, warm ivory.
• Paper-warm: #ece4cf — second-tier surface tint.
• Paper-dark: #ddd2b6 — subtle wells, cards on cards.
• Bone: #f7f1de — elevated card surface (always on Paper).
• Ink: #15140f — body text, primary buttons, strong rules.
• Ink-soft: #2a2620 — secondary text, dense paragraphs.
• Ink-mute: #5a5448 — captions, lab descriptions.
• Ink-faint: #8b8676 — coordinates, page numbers, microcopy.
• Coral (accent): #ed6f5c — single hot accent. CTA fills, Roman-numeral marks, eyebrow underlines, pulse dots, "fin." marks.
• Coral-soft: #f08e7c — hover/secondary coral states only.
• Mustard: #e9b94a — used sparingly: a single ★ in the nav, a highlighted ring in stats, occasional dot on a numbered annotation.
• Olive: #6e7448 — quiet third accent for tags or partner glyphs.

Color rules

• One coral moment per ~600vh. If two CTAs are coral, the Roman numerals should be ink-faint instead.
• Mustard is never used for a CTA. It is jewelry.
• Pure white (#fff) only inside the dark "selected work" panel as inverse text. Never on Paper.
• Pure black is forbidden. The darkest value is Ink #15140f.

Why single-accent (not multi-accent)

Multi-accent editorial systems (e.g. The New Yorker using red for Opinion and teal for Culture) work when the publication has stable content categories and a long-term reader who learns the code. A single-shot studio landing page does not have that runway. One coral moment per ~600vh forces the agent to pick the single most important beat per viewport instead of balancing two chromatic hierarchies, and keeps the page calibrated to the warm-paper canvas. Mustard and olive exist as jewelry (≤1% surface area: a star, a dot, a partner glyph) — never as semantic signals, and never as CTA fills.

Surface noise

Every page MUST overlay a faint paper noise texture using a fixed, pointer-events-disabled ::before pseudo-element with a multiply-blend SVG turbulence at ~5–7% opacity, plus two soft radial gradients in rgba(106, 92, 56, 0.06) to simulate hand-pressed paper warmth.

3. Typography

Families

• Display / sans: Inter Tight 700–900 weights — headlines, section titles, button text. Letter-spacing -0.025em to -0.04em at display sizes.
• Italic emphasis / serif: Playfair Display Italic, weight 500. Used inline inside display headlines on emphasized nouns, on Roman numerals, on testimonial quotes, on the brand mark Ø.
• Body: Inter 300–500 — paragraph copy, lab descriptions.
• Mono: JetBrains Mono 400–500 — code spans, coordinates, SHAs, plate numbers ("FIG. 01 / OD-26").

Scale (px)

9.5 · 10.5 · 11 · 13 · 14 · 16 · 17 · 22 · 26 · 38 · 54 · 66 · 78 · 90 · 200

Headline construction

Display headlines mix bold sans and italic serif in the same line. The serif italic carries the emotional words; the sans carries the structure. End every section H1/H2 with a coral period — <span class="dot">.</span>.

Designing intelligence with skills, taste, and code.
^^^^^^^^^                ^^^^^^^^  ^^^^^      ^^^^
sans bold                serif italic         coral dot

Microcopy

• Eyebrow / label: 11px Inter Tight 600, letter-spacing: 0.22em, uppercase, coral, prefixed with an 18px coral hairline.
• Coordinates: 10px JetBrains Mono, letter-spacing: 0.04em, ink-faint, e.g. 52.5200° N · 13.4050° E.
• Page-of-pages: 004 / 008 in Inter Tight 11px ink-faint.
• Roman numerals: Playfair Italic 14px, coral, I. II. III. etc. at the head of every section rule.

4. Spacing & Grid

• Container: max-width 1360px, side padding 64px desktop, 44px at ≤1280, 32px at ≤1080, 24px at ≤880.
• Section padding: 130px top+bottom desktop, 90px for tight sections, 80px ≤560.
• Grid: 12-column conceptual, executed as CSS Grid with task-specific column ratios. Hero is 0.78fr 1.22fr.
• Vertical rhythm: 8px baseline. Allow 32–48px between paragraph blocks.
• Side rails: Two 36px-wide fixed vertical strips on the left and right edges of the viewport, each containing a single rotated text label in 10px Inter Tight 600 letter-spaced 0.42em.

5. Layout & Composition

• Top metadata strip is mandatory: a single horizontal bar above the nav containing the volume/issue, a "Filed under …" badge, and a live-status pulse with version + locale. Inter Tight 10.5px, ink-faint, 1px ink-line border-bottom.
• Section rule is mandatory at the top of every section: [Roman.] · [meta middle] · [page-of-008].
• Image annotations: every featured image carries 4 corner brackets (1px hairlines, 22×22), at least 1 plate number ("Plate Nº 08"), and a coordinate or SHA.
• Hero must extend above the fold at 1440×900 minimum. The image fills the viewport vertically (calc(100vh - 160px)), aligned to the right edge.
• Method sections must use a 4-step layout with a horizontal hairline running through the step heads at the same Y, with → separators between titles.

6. Components

Buttons

• Primary: coral fill #ed6f5c, white label, 999px radius, 14px 22px padding, with a white arrow ↗ SVG at 14px and a coral 0,14,26,-16 rgba shadow.
• Ghost: transparent, 1px solid rgba(21,20,15,0.2) border, ink label, same radius and padding.

Cards

• Bone-fill cards (#f7f1de), 18px radius, 28×26 padding, inset 1px ink-at-6% ring + 30/60/-30/15 ambient shadow.
• Each card has a 01–04 italic serif num plus a tag eyebrow on the same row.
• A bottom-right 28px circular arrow mark turns coral on hover.

Pill filters

• 10×18 padding, 999px, 1px solid line border, transparent.
• Active state: coral fill, white label, count separator opacity 0.7.

Stat rings

• 32–34px circular dashed rings carrying a 2-digit number; one ring per row may be coral-stroked to denote the highlighted stat.

Page numbers / index card

• Hero artwork carries a small bordered card on the right edge with 01–04 index entries. The current entry uses bold ink; the rest ink-faint. Each item prefixes the digit with a coral 01 token.

Side rails

• Fixed 36px vertical strips at left + right edges, hidden below 1280px. Each contains rotated 10px Inter Tight uppercase text letter-spaced 0.42em, never wraps.

Roman section rules

Every section opens with a .sec-rule: top hairline 1px, then a flex row containing [Roman], a centered metadata cluster, and the page-of-008 counter on the right.

7. Motion & Interaction

• Pulse dot: 6×6 coral circle at top metadata bar and footer, pulse 2.4s ease-in-out infinite between 1.0 and 0.35 opacity.
• Card hover: translateY(-3px), arrow mark fills coral.
• Button hover: translateY(-1px), darker coral fill.
• Pill hover: ink-at-4% wash.
• Transitions: 0.18s ease everywhere; never longer than 0.25s.
• No parallax, no scroll-jacking, no auto-rotators. Editorial pages do not animate themselves at the user.

8. Voice & Brand

• Headlines mix declarative and italicized emotional words.
• Body copy is plain-spoken and specific. Quote real numbers (12 / 31 / 72), real coordinates (52.5200° N · 13.4050° E), real commands (pnpm tools-dev).
• Microcopy uses publication metaphors: "Filed under", "Plate Nº", "Vol. 01 / Issue Nº 26", "FIN.", "MMXXVI", "Edited by".
• Latin numerals — Roman for sections, Arabic for stats.

9. Anti-patterns

• ❌ No drop shadows above 30px blur. No gradients on text.
• ❌ No emoji in product copy. ★ is allowed once in the nav CTA.
• ❌ No glassmorphism, no neon, no neumorphism, no rounded corners larger than 24px (except 32px on the dark "Selected Work" panel).
• ❌ No more than one coral CTA per viewport.
• ❌ No collage image without corner brackets and at least one monospace annotation.
• ❌ No Roman numeral skipped — sections must be sequential.
• ❌ No pure white, no pure black, no pure 100%-saturation accent.

Anti-patterns specific to AI-generated imagery

This system is paired with gpt-image-fal / gpt-image-azure via the open-design-landing skill. Several common image-model defaults will silently break the Atelier Zero aesthetic, so they are forbidden in every collage prompt and rejected on visual review:

• ❌ No lens flares, light leaks, bloom, or cinematic post-FX. The paper-and-museum mood is matte, not cinematic.
• ❌ No glitch, datamosh, RGB-split, or scanline artifacts.
• ❌ No photorealistic human faces or stock-portrait people. Plaster fragments, busts, and small scale figures only — eyes never look at the viewer.
• ❌ No visible AI signatures, watermarks, generator logos, or hallucinated model captions. The rendered surface must read as a printed page, not a model output.
• ❌ No DSLR-style shallow depth-of-field bokeh on the collage fragments — every plane stays in focus.

10. Responsive Behavior

• Desktop ≥ 1280px: full container, two side rails visible, metadata strip shows all three columns.
• Laptop 1080–1279px: side rails hidden, container 32–44px padding, metadata strip's middle column collapses.
• Tablet 880–1079px: hero / about / capabilities / testimonial / cta grids collapse to 1 column at 50px gap. Method becomes 2×2, the connecting hairline is removed. Nav links + brand-meta hide; brand-mark + CTA remain.
• Phone < 560px: all multi-column grids become 1 col; section padding drops to 80px.

11. Imagery

This system is collage-first. Every page-level image must be generated to match these constraints:

• Background: warm ivory paper with subtle grain, faint vertical folds, drafting registration marks.
• Subject: classical plaster head fragments, brutalist concrete blocks, archways, stairs, tree, sky cutouts, one small human figure.
• Color overlay: restrained — cream, stone, charcoal, washed coral, occasional mustard, pale-blue inside small sky cutouts.
• Annotations baked in: thin hairline circles, crosshairs, dotted matrices, numbered tags. Never typography that conflicts with on-page copy.

See skills/open-design-landing/assets/imagegen-prompts.md for the working prompt pack and per-section variants. All renders should be at 16:9 (heroes) or 1:1 (cards / about / cta), saved as PNG, ≥1024px on the long edge.

12. Agent Prompt Guide

When generating against this design system:

• The page is a printed magazine that happens to deploy. Lean into print metaphors before web metaphors.
• Always include the metadata strip, the side rails, the Roman section rules, and a footer with a giant Open Design. (or brand) word at clamp(70px, 13vw, 200px).
• Coral is a single character on stage. If you find yourself reaching for a second coral element in the same viewport, use ink-faint or mustard instead.
• Italic serif words inside display headlines should always be emotional nouns: intelligence, taste, memorable, open, visually. Never verbs, never adjectives.
• If asked for "more dramatic," the lever is typography size (clamp top to 90–110px) and image height (push to 100vh - nav). Do not reach for color.
• If asked for "more minimal," remove decorative side notes and reduce annotations to one per image — never remove the Roman rules or the metadata strip.