name: atelier-noir-design
version: alpha
description: >
  Atelier.Noir is a digital editorial magazine cover — Issue Nº 04, "The Quiet
  Insurgents." It sets a warm cream paper surface (`#F2EFE6`) against near-black
  ink (`#0B0D0E`) and runs the whole thing on a Bodoni Moda display face,
  Inria Serif body, and Departure Mono captions. The voltage is split: a lab
  green (`#1AE57A`) carries the editorial accent and an electric laser magenta
  (`#FF2DA8`) marks the period-dot, seams, and hot details. Signature moves are
  the split-clip-reveal hero with a glowing magenta seam, a pinned text-swap
  feature, a scroll-driven cream→ink theme inversion in the gallery, a
  velocity-reactive italic marquee, oversized numbered editor bands, and an SVG
  stroke-draw colophon wordmark. Geometry is print-flat: hairline rules, square
  cards, and pill nav controls — no shadows.
colors:
  # Surface
  cream: '#F2EFE6'        # page paper surface (--cream / --bg)
  ink: '#0B0D0E'          # near-black panels, ribbon, marquee, footer (--ink)
  panel-dark: '#1A1C1D'   # hero-left dark stage / gallery photo backing
  # Text
  text: '#0F1011'         # primary ink body + heading text (--text / --fg)
  text-on-ink: '#E6E3D8'  # body text on dark ink surfaces (--text-on-ink)
  # Brand / Voltage
  lab: '#1AE57A'          # lab-green editorial accent: italic words, numbers, rules
  laser: '#FF2DA8'        # laser-magenta hot accent: period dot, hero seam, glows
  # Hairlines
  chrome: '#A8B0B6'       # muted captions, kickers, hairline rules (--chrome)
  chrome-dim: '#C7CDD1'   # lighter hairline / row dividers (--chrome-dim)
  ribbon-hairline: '#1D2022'  # hairline border on dark sections
typography:
  display:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(140px,18vw,260px)
    fontWeight: 400
    lineHeight: 0.88
    letterSpacing: -0.05em
  display-italic:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(160px,20vw,340px)
    fontWeight: 400
    lineHeight: 0.88
    letterSpacing: -0.05em
  display-black:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(140px,17vw,300px)
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.06em
  heading:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(40px,4.4vw,64px)
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -0.03em
  body:
    fontFamily: "'Inria Serif', serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.7
  mono:
    fontFamily: "'Departure Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08em
    textTransform: uppercase
  kicker:
    fontFamily: "'Departure Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.12em
    textTransform: uppercase
rounded:                    # near-flat print geometry
  none: 0px                 # cards, stat tiles, inputs, image mounts
  full: 999px               # nav/filter/load pills, CTA disc, dots
spacing:                    # base unit 4px; section padding leans on 28px gutter
  xs: 4px
  sm: 8px
  md: 14px
  lg: 24px
  xl: 28px
  xxl: 48px
  section: 96px
components:
  subscribe-pill:
    textColor: '{colors.text}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.full}'
    padding: '8px 16px'
    typography: '{typography.kicker}'
    note: 'hover fills {colors.ink} with {colors.cream} text; label "Subscribe ↗"'
  hero-cta-disc:
    textColor: '{colors.text}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.full}'
    padding: '52px circle'
    note: 'hover fills {colors.laser}; arrow glyph in Bodoni Moda 22px'
  dir-filter:
    textColor: '{colors.text}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.full}'
    padding: '8px 16px'
    typography: '{typography.kicker}'
    note: 'active state fills {colors.ink} with {colors.cream} text'
  stat-tile:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.text}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '18px'
    note: 'inverted variant fills {colors.ink}/{colors.cream}; numbers in display 56px, lab-num colored {colors.lab}'
  ed-form-input:
    backgroundColor: transparent
    textColor: '{colors.text}'
    border: '0; 1px solid {colors.ink} bottom only'
    typography: '{typography.body}'
    padding: '10px 0'
    note: 'focus turns bottom border {colors.laser}; placeholder rgba(15,16,17,0.4)'
  ed-form-submit:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    padding: '13px 16px'
    typography: '{typography.mono}'
    note: 'hover fills {colors.laser}; label "Begin Subscription →"'
  chip:
    textColor: '{colors.text}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '4px 10px'
    typography: '{typography.kicker}'
  plate-caption:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    rounded: '{rounded.none}'
    padding: '14px 28px'
    typography: '{typography.kicker}'
    note: 'lab-colored sub-credit; full-width strip over full-bleed photo'
motion:
  hero-curtain: 'split clip-path reveal, clip-path 1.4s cubic-bezier(.86,0,.07,1), right panel +.12s delay'
  hero-word-rise: 'staggered clip-path inset wipe per word, 1s cubic-bezier(.2,.8,.2,1), 180ms stagger'
  hero-seam: 'magenta seam scaleY grows on scroll, glow box-shadow 0 0 12px/24px rgba(255,45,168,...)'
  ribbon-slide: 'translateX -50% loop, slide 60s linear infinite'
  feature-swap: 'pinned 400vh; panels + words crossfade opacity .5-.55s + translateY 40px on scroll progress'
  gallery-inversion: 'scroll-scrubbed color-mix cream→ink bg/fg; lab hairline scaleX peaks at mid-section'
  marquee-velocity: 'rAF translate3d, base 0.5px/frame boosted by scroll velocity * 0.15'
  text-reveal: 'IntersectionObserver line masks translateY(102%)→0, .8s cubic-bezier(.2,.8,.2,1)'
  count-up: 'rApF numeric tick on stat grid + editor bands, padStart(2,0)'
  colophon-draw: 'SVG stroke-dashoffset path draw on scroll, per-path sliced progress; credits cascade in at p>0.7'
  dir-preview: 'cursor-tracked floating image, lerp 0.18, clip-path inset wipe in .45s'
icons:
  library: inline glyphs / unicode (no icon font)
  style: 'typographic arrows (→ ↗ ↓), star ❋, bullet ●, circles ○; SVG stroke wordmark in colophon'
  sizes: { sm: 10px, md: 11px, lg: 22px }
  color: '{colors.text}'

Atelier.Noir

atelier-noir-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Atelier.Noir is a long-scroll editorial magazine cover for an imagined quarterly on independent design — Issue Nº 04, "The Quiet Insurgents." It lives on warm cream paper (#F2EFE6, --cream) printed in near-black ink (#0B0D0E, --ink), with body text in #0F1011. The type story is the whole identity: oversized Bodoni Moda display (often italic) for headlines, Inria Serif for reading body, and Departure Mono for every caption, kicker, ribbon, and spec line — set tiny (9–11px), uppercase, and letter-spaced. The palette runs a deliberate two-voltage system: a lab green (#1AE57A, --lab) for italic accent words, numerals, and rules, and a hot laser magenta (#FF2DA8, --laser) reserved for the brand period-dot, the glowing hero seam, the active pull-quote rule, and form focus. The geometry is print-flat — hairline rules everywhere (#A8B0B6 chrome, #C7CDD1 dim), square cards and inputs, and only nav/filter controls and the CTA disc rounded to pills. Signature moves: a split-clip-reveal hero bisected by a glowing magenta seam, a 400vh pinned feature whose left-side word and right-side panel swap on scroll, a velocity- reactive italic marquee on ink, a scroll-driven cream→ink theme inversion in the gallery, oversized count-up editor numerals, and a colophon wordmark drawn stroke-by-stroke as an SVG path.

Colors

Surface. cream #F2EFE6 is the dominant paper for masthead, hero-right, feature, directory, and editor sections. ink #0B0D0E flips the ribbon, marquee, contact sheet, and footer/colophon to dark. panel-dark #1A1C1D backs the hero-left photo stage and the gallery photo column. Text. text #0F1011 is primary body/heading ink on cream; text-on-ink #E6E3D8 carries body copy on the dark surfaces. Brand / Voltage. lab #1AE57A is the editorial green — italic display words (feature-h2 em, hero l2), directory numerals, year cells, lab-bars, and several rules. laser #FF2DA8 is the rare hot accent — the .dot period after the wordmark, the hero seam and its playhead (with magenta glow), the pull-quote left rule, the dir-row underline sweep, and input focus / submit hover. Hairlines. chrome #A8B0B6 (muted captions, kickers, base rules) and chrome-dim #C7CDD1 (lighter row dividers). On dark sections, borders use #1D2022.

Typography

Three Google-hosted faces loaded in one @import: Bodoni Moda (display, opsz 6–96, weights 400/700/900 + italics), Inria Serif (body, 300/400/700 + italic), and Departure Mono (monospaced captions). All are open-source on Google Fonts, so no substitution is required. Display headlines run enormous (clamp(140px,18vw,260px) and up) with tight negative tracking and sub-1.0 line-heights; mono runs are tiny, uppercase, and widely tracked (0.08–0.32em).

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(140px,18vw,260px)	400	0.88	-0.05em	Hero l3, feature words
display-italic	clamp(160px,20vw,340px)	400 it	0.88	-0.05em	Hero l2, feature-left word swap
display-black	clamp(140px,17vw,300px)	900	0.90	-0.06em	Editor oversized numbers
heading	clamp(40px,4.4vw,64px)	400	0.96	-0.03em	Feature/gallery/dir/colophon h2
body	17px	400	1.7	—	Inria Serif reading copy (max 62ch)
mono	11px	400	1.5	0.08em	Captions, CTAs, spec lines (uppercase)
kicker	10px	400	1.5	0.12em	Eyebrows, ribbon, filters (uppercase)

Layout

Base unit is 4px; section gutters lean on a 28px horizontal padding and a 1480px max-width content rail. The page is a vertical sequence of full-width sections, several of which are tall scroll-driven stages: the hero is a 92vh two-column grid (1fr 1fr); the feature is a 400vh pin with a sticky 100vh split; the gallery is a 250vh pin with a 60% 40% split; the footer/colophon is a 250vh pin. Static sections (directory, editor) use the centered 1480px rail with 96px vertical padding. Internal grids are explicit: masthead 1fr 2fr 1fr, directory rows 80px 1fr 180px 140px 60px, editor bands repeat(4,1fr), contact sheet repeat(6,1fr), colophon credits repeat(4,1fr). Whitespace is generous and print-like; structure is announced with folios, plate numbers, and mono coordinate labels.

Elevation & Depth

Essentially flat — this is paper, not glass. There are no card box-shadows. Depth comes from (1) hairline borders separating every section and dividing rows (1px solid var(--ink) / var(--chrome) / var(--chrome-dim)), (2) full ink panels inverting whole sections, and (3) two intentional glows: the hero seam (box-shadow:0 0 12px rgba(255,45,168,0.6), 0 0 24px rgba(255,45,168,0.25) plus a glowing playhead) and the gallery inversion hairline (0 0 18px var(--lab)). The hero photo uses mix-blend-mode:difference meta overlays and a contrast(1.05) saturate(0.95) filter; backdrop-filter is explicitly none. The gallery meta-rail sits on a semi-opaque ink panel rgba(11,13,14, 0.78).

Shapes

Print-flat geometry. The default radius is 0 — cards, stat tiles, image mounts, chips, the contact grid, and form inputs are all hard rectangles. The only rounding is the pill (999px): the subscribe pill, directory filter pills, the "load directory" button, the 52px circular hero CTA disc, and small dots (seam playhead, period marks). Borders are uniformly 1px hairlines; the only heavier strokes are the SVG colophon wordmark (1.6px, magenta dot-path 3px).

Components

• subscribe-pill — transparent, 1px solid var(--ink), 999px, 8px 16px, mono; hover fills ink with cream. Label "Subscribe ↗".
• hero-cta-disc — 52px circle, 1px solid var(--ink); hover fills laser magenta with cream; Bodoni Moda 22px arrow "→". Paired mono label underlined in lab green.
• dir-filter — pill, 1px solid var(--ink), mono; data-active="true" fills ink with cream. Labels like "All · 42", "Womenswear · 18".
• stat-tile (feature-statgrid) — square, 1px solid var(--ink), 18px; .inv variant fills ink/cream; numbers Bodoni Moda 56px, lab-num green.
• dir-row — grid row with hairline divider; hovering scales the lab numeral 1.6×, sweeps a laser underline (scaleX 0→1), and dims sibling rows to 0.32.
• ed-form input — transparent, bottom hairline only; focus turns the border laser magenta. submit — solid ink, cream mono text, hover → laser.
• chip — square, 1px solid var(--ink), mono; e.g. "£84 / YEAR".
• plate-caption — solid ink strip, cream mono text with a lab sub-credit, over full-bleed photography.
• ribbon — ink bar, cream mono, with an auto-sliding masked marquee track.

Motion

This template is motion-forward, driven by a single rAF master loop plus IntersectionObservers. The hero plays a split clip-path "curtain" (1.4s cubic-bezier(.86,0,.07,1)) with per-word clip wipes staggered 180ms, and a magenta seam that grows (scaleY) and pulls the panels apart on scroll. The ribbon slides infinitely (60s linear). The feature is a 400vh pin whose left word and right panel crossfade/slide as scroll progress crosses panel thresholds, with a count-up on the closing stat grid. The gallery scrubs a color-mix cream→ink inversion of background and foreground, peaking a glowing lab hairline mid-section, then blur-reveals a quote. The marquee speed reacts to scroll velocity. Line-mask headings rise (translateY(102%)→0, .8s) on intersection; editor numerals count up; the colophon wordmark draws stroke-by- stroke via stroke-dashoffset and its credits cascade in. The directory shows a cursor-tracked image preview that lerps toward the pointer and wipes in.

Iconography

No icon font. All "icons" are typographic glyphs and unicode: directional arrows (→ ↗ ↓), the section star ❋, bullet ● for stat markers, and circle marks ○ in the end-strip. Sizes follow the surrounding type (10–11px in mono contexts, 22px for the hero CTA arrow). The one drawn mark is the colophon: an inline SVG spelling "Atelier.Noir" as stroked letter paths (stroke:var(--lab), 1.6px, round caps; the period a separate magenta dot-path at 3px) animated on scroll.

Do's and Don'ts

• Do keep the surface cream paper and reserve full-ink for whole-section inversions (ribbon, marquee, contact, footer).
• Do use the two voltages sparingly and by role — lab green for italic accents/numerals, laser magenta only for the dot, seam, focus, and hot rules.
• Do set captions/kickers in Departure Mono, tiny, uppercase, tracked.
• Do keep cards, inputs, and tiles square with 1px hairlines; reserve pills for nav controls and the CTA disc.
• Don't add drop shadows or glassy blur — depth is hairlines, ink panels, and the two intentional neon glows only.
• Don't mix the voltages (no green seam, no magenta numerals) or let either become a background fill.
• Don't soften the display tracking — Bodoni headlines must stay huge with tight negative letter-spacing and sub-1.0 line-heights.

Known Gaps

• The gallery inversion uses live color-mix(in oklab, ...) between #F2EFE6 and #0B0D0E; intermediate values are computed at runtime, not fixed tokens.
• Marquee/seam motion values are read from JS constants (base 0.5px/frame, velocity factor 0.15, seam glow radii) rather than CSS; described as authored.
• panel-dark #1A1C1D and the #1D2022 dark-section hairline are one-off surface values, not part of the named -- token set in :root.
• Spacing scale is inferred from recurring paddings (4/8/14/24/28/48/96px); the HTML uses ad-hoc values, not a formal token scale.