---
name: Café Noir
version: "1.0"
slug: cafe-noir
tier: premium
price: 29
type: Café-bookshop / Living venue
axis: "10 — Living Rhythm (the living plate)"
theme: light-polar-bookshop
gesture: "The homepage is a comic plate: nine framed panels, each one a full page of the site, each one alive on its own prime-number clock (5, 7, 11, 13, 17, 19, 23, 29, 31 s) so no two ever synchronise. The life is a STAMP — a hand-made B&W onomatopoeia (FSSSH.., Zzz…, DRRRING!!) that snaps onto the photo like a rubber stamp, holds ≤ 1/3 of its cycle, snaps out. Franc, never timid: between hits the plate rests completely. Hover leans a panel in (scale 1.028); click zooms it into the full page."
colors:
  paper:     "#EDEAE3"
  paper-hi:  "#F6F3EC"
  ink:       "#17181C"
  ink-soft:  "#46474D"
  ink-faint: "#8B8A85"
  cherry:    "#C13B4B"
fonts:
  display: "Big Shoulders Display"
  body:    "Schibsted Grotesk"
  hand:    "Shadows Into Light"
  stamp:   "hand-drawn vector lettering (paths, no font)"
spacing:
  gutter: "clamp(10px, 1.4vw, 18px)"
  s1: "0.25rem"
  s2: "0.5rem"
  s3: "1rem"
  s4: "1.5rem"
  s5: "2rem"
  s6: "3rem"
  s7: "4rem"
  s8: "5.5rem"
radius:
  none: "0 — panels, buttons, tokens are always square-cut"
  dot:  "50% — the cherry dot and palette swatches only"
type-scale:
  hero:    "clamp(58px, 10.5vw, 150px)"
  page:    "clamp(40px, 7vw, 84px)"
  section: "clamp(19px, 2vw, 25px)"
  body:    "16px / 1.6"
  hand:    "1.25em of context, cherry only"
  label:   "10.5–12px / ls .12–.2em / uppercase"
full-kit: "https://www.stacklift.design/kit/cafe-noir"
---

# Café Noir — Design System

## §1 Identity

Café Noir is the site of a crime-fiction café-bookshop in Paris — espresso on the
counter, three thousand suspects on the shelves. Its rupture is **axis 10, Living
Rhythm**: the homepage is a *planche* — a comic plate of nine framed panels, and
every panel is a full page of the site. Nothing is hidden behind navigation; the
whole house is visible at a glance, like a building at dusk where every window is
lit. And each window is **alive** — in comic language, not in pantomime: on its
own clock, each panel gets HIT by a hand-made onomatopoeia stamp. *FSSSH..* over
the espresso, *BZZZT!* on the neon, *Zzz…* above the cat, *CLIC!* as the lamp
snaps on, *PLIC PLOC* on the rainy pane, *CHHHUT…* along the shelves, *PLOP!*
at the machine, *CLAP CLAP!* in the back room, *DRRRING!!* beside the bakelite.
The stamps are the author's hand-drawn vector series, inline SVG in the page:
paper **die-cut shapes** with cherry lettering drawn as paths — no font, no
raster. They are the one place where the accent takes the stage: cherry ink on
paper stickers, snapped onto silver photographs. No circles, no containers that
don't belong to the sound — a cloud hisses, a thought bubble sleeps, a burst
rings.

The language is silver-print noir: cool grey paper (`#EDEAE3`), off-black ink
(`#17181C`, never #000), black-and-white photography at 35mm grain, hard 2px ink
frames on paper gutters, hard offset shadows without blur. One accent only —
cherry `#C13B4B` — reserved for the dot, the numbered panel tags, the neon, the
ribbon, and the hand-written script. Big Shoulders Display shouts the titles like
a silkscreened poster; Schibsted Grotesk does the quiet body work; Shadows Into
Light is the bookseller's pen, always cherry, always slightly rotated.

## §2 The Signature Gesture — The Stamped Plate

Three rules make the plate live instead of twitch:

1. **Prime clocks.** Every panel's stamp hits on its own prime-number cycle —
   5, 7, 11, 13, 17, 19, 23, 29, 31 seconds. Primes guarantee the hits drift
   against each other and the plate never falls into a loop the eye can learn.
   JS drives the clocks (`setInterval` per panel, staggered starts) so every
   hit lands exactly; `prefers-reduced-motion` disables them entirely.
2. **The rest budget — and no half-measures.** A stamp holds at most **one
   third** of its cycle (capped at ~2.3 s), then vanishes. Between hits the
   panel is completely still. The lesson learned building this kit: a *subtle*
   life on a photograph reads as a rendering bug. A stamp is binary — fully
   there or fully gone. Franc, never timid.
3. **The snap.** In: `scale(0) rotate(-14°) → scale(1)` through an overshoot
   bezier (`cubic-bezier(.3,1.9,.5,1)`, ~.3 s) with a hard offset drop-shadow —
   a rubber stamp hitting paper. Out: a fast .15 s shrink. The stamps are
   positioned in % over the photo (`.vie`, `pointer-events:none`), sized 17–32%
   of their panel, placed next to their subject like a comic effect: the tail
   of the *Zzz…* touches the cat.

The stamp is the ONLY life language — no second grammar coexists with it. One
exception bound to the same hit: on the armchair panel, the *CLIC !* switches
the lamp halo ON for exactly the stamp's hold (`.live` drives both). The
storefront photograph carries a real neon sign; the *BZZZT !* hits beside it —
the photo holds the object, the stamp holds the sound.

Navigation is the same gesture at another scale: hover leans a panel in
(`scale(1.028)` + hard offset shadow, the caption strip reveals its destination);
click zooms the panel into a full-screen page (`.page`, scale .965 → 1 fade).
Panels are `<article data-open="slug">`; pages close with ×, Escape, or the brand.
Prev/next walk the plate in order. `prefers-reduced-motion` stills every life.

## §3 Colour Rules

- `--paper` is the plate — the universal ground. `--paper-hi` lifts pages,
  caption tags and the DS panel. Never pure white.
- `--ink` frames everything: 2px solid borders, display type, footer rule.
  `--ink-soft` for body text, `--ink-faint` for metadata and kickers.
- `--cherry` is the **only** accent and it is rationed: the stamps (their one
  stage — cherry lettering on paper die-cuts), the brand dot, panel numbers,
  hand-written script, hover states, one ledger value per page. Never fill a
  large surface with cherry, never a second hue anywhere.
- Photography is always `filter: grayscale(1) contrast(1.04)` — the plate stays
  silver even if source images carry colour.

## §4 Type Rules

- Big Shoulders Display 700/800, uppercase, leading .9–.95, for the hero, page
  titles, panel numbers, stats and ledger values. Tracking tight, never loose.
- Schibsted Grotesk 400/500/600 for everything that must simply be read.
  Labels: 10.5–12px, uppercase, letter-spacing .12–.2em.
- The comic voice is hand-drawn: the stamps' onomatopoeia lettering exists as
  vector paths, not as a typeface — it cannot leak into the interface. Shadows
  Into Light is the human voice — margin notes, script asides. Script is always
  cherry, always rotated −2° to −8°, never used for structure or navigation.
- Every big title may carry one script aside, bottom-right, at .24–.3em of the
  title size.

## §5 Components

- **Panel (`.case`)** — 2px ink frame, photo full-bleed, caption tag pinned
  bottom-left (`--paper-hi`, ink frame, Nº in cherry + uppercase name + revealed
  destination on hover). Hover: scale 1.028 + `6px 6px 0` hard shadow.
- **Stamp (`.stamp`)** — inline-SVG onomatopoeia from the hand-drawn series,
  absolutely positioned over the photo, snapped in/out by its panel's `live`
  class. Anatomy: paper die-cut shape (fill `#F6F3EC`) under cherry lettering
  drawn as paths (fill `#C13B4B`). Colours are token-mapped at integration —
  new stamps must ship in exactly these two fills. Crisp at any scale.
- **The plate (`.plate`)** — 6-column grid, prime-gapped gutters
  `clamp(10–18px)`, spans build the gaufrier (one 3×2 anchor panel, wide strips,
  singles). Collapses to 2 columns under 900px.
- **Page (`.page`)** — full-screen zoomed panel: crumb with Nº, close ×, display
  title + script aside, lead, framed hero image (opens the lightbox), sections
  with cherry-dot h3s, prev/next plate-walk.
- **Ledger** — dotted-fill rows for hours, menus, addresses, shelf counts; values
  in Big Shoulders; one cherry value allowed per ledger.
- **Picks** — framed cards on `--paper` with genre kicker, display title, author,
  and a hand-written cherry verdict.
- **Events** — date in cherry display type, title, meta, optional `waitlist` tag.
- **Buttons** — square-cut, ink fill (hover cherry) or ghost; inert links are
  `.is-soon` (dimmed, `pointer-events:none`), never dead `#`.
- **Lightbox** — reuses the DOM image (`img.currentSrc || img.src`), arrows walk
  the nine panels, closes on ×, Escape, backdrop.
- **Design System panel** — the tenth panel of the plate, typographic on
  `--paper-hi`, opens the full DS page (tokens, type, rhythm rules).

## §6 Agent Instructions

1. **Keep the plate honest.** Every panel must be a real destination — one panel,
   one page. Never add a panel that goes nowhere, never hide a page off-plate.
2. **Respect the clocks.** New stamps get an unused prime (37, 41…). Never sync
   two panels, never hold past a third of the cycle, and never soften the snap —
   a stamp is binary, fully there or fully gone. Subtle overlays on photographs
   read as bugs; that mistake is why this system exists.
3. **Re-skinning the venue** (florist, record shop, barber, wine bar): keep the
   grammar — B&W photos, ink frames, one accent, prime clocks — and draw a new
   stamp series from the new venue's real sounds (*SNIP SNIP*, *CRRRR* on the
   turntable, *POP* of a cork). Same grain, white interiors, one stamp per
   panel. The accent hue may change; there is still only one.
4. Photography must stay grayscale-filtered; the accent enters as vector overlay
   or typography, never inside the image.
5. The brand (header and footer) always returns to the hero — smooth scroll,
   closing any open page. Content images always open the DOM-reuse lightbox.
6. Café Noir v1.0 — a Stacklift kit · https://www.stacklift.design/kit/cafe-noir