Design System — A Catalogue of Parts · Vol. I
Accent
Light
A Living Reference · No Build Step
❧

A Catalogue
of Parts

The design system behind the catalogue raisonné — every token, type-set, ornament and component, set in order and ready to be lifted.

Lucas Schoenherr· Volume I· MMXXVI· Figma-ready
Turn the page↓
—

Contents

Eleven gatherings. Tokens lead; the components follow. Every value is a click away from your clipboard.

I

Principles

Five tenets. Read them before you touch the CSS — they explain every decision the tokens encode.

1

Editorial first

Typography leads, colour punctuates, hairlines divide. Marginalia — gloss, footnotes, page counter — builds the atmosphere.

2

Classic, not dated

Drop caps, roman numerals and EB Garamond live beside a modern grid, subtle micro-interactions and serious responsiveness.

3

Chromatic restraint

The page is cream and ink. Oxblood, cobalt and highlighter appear sparingly — when they appear, they matter.

4

Contained movement

Animation is short (≤1s), eased and never pyrotechnic. Everything respects prefers-reduced-motion.

5

Accessibility

AA contrast minimum. Visible focus. Touch targets ≥ 44px on mobile. The inactive language leaves the a11y tree entirely.

II

Colour

Paper for grounds, ink for text and rules, oxblood & cobalt for rare accents. Never a raw hex in a component — always var(--token).

Palette

III

Typography

Three families. Italic marks voice, not decoration. Numbers run on tabular figures; chapters on roman numerals.

Families

3 typefaces

Type scale

9 steps · 10 → 120px
IV

Spacing & Measure

A 4px base with editorial leaps for page and spread. Container widths set the measure of every column.

Spacing scale

12 steps · 4 → 160px

Container widths

3 measures
V

Radius, Borders & Elevation

Corners stay sharp; the pill is the one exception. Borders are hairlines first. Shadow is used with great reluctance.

Radius

4 tokens

Borders

4 tokens

Elevation

2 tokens
VI

Motion

Four easings, four durations. Nothing exceeds --dur-page. Hover any card to watch the curve; click to copy it.

Easings

3 curves

Durations

4 steps
VII

Layers

Four named stacking levels. Content sits low; cursor glyph rides on top. Never invent a one-off z-index.

VIII

Components

Live specimens — the real parts, rendered from the same tokens. Each is a section of the book made physical.

Drop cap

.drop-cap

The catalogue opens, as catalogues do, with a held breath. A drop cap sets the first letter of a long passage in display serif and oxblood, anchoring the eye before the body settles into its even, generous measure — nineteen pixels of EB Garamond at a loose line height.

Epigraph

.case-epigraph
“
Restraint is the loudest thing on the page.
— House rule, plate I

Footnotes

.fn · .footnotes

Footnotes are set as superscript numerals in oxblood1, and hovering one lifts its corresponding entry below in highlighter2. The apparatus is part of the atmosphere, not an afterthought.

1.Superscript marks use JetBrains Mono so the figure reads cleanly at small sizes.
2.Highlight colour is --highlighter, the same swatch used for ::selection.

Table of contents

.toc-row

Plate

.plate · .plate-grid
PlateIV
ClientConfidential
YearMMXXV
RoleProduct Design
Dimensions1440 × 1024
[ product shot ]

A design conducted like a score

A short gloss in EB Garamond italic-adjacent prose describing the work, its constraints, and the part the studio played in it.

0%Conversion lift
0Markets
0Store rating

Buttons & controls

.btn · .lang-toggle
return to catalogue

Marginalia statistics

.marginalia-stat
+0
Daily active, thousands
0
Years in practice
~0×
Faster checkout

Reception clipping

.reception-clipping
“He treats an interface the way a binder treats a book — every seam considered, nothing loud for its own sake.”
— A collaborator, on the record

Ex Libris card

.exlibris-card
Ex Libris

Lucas Schoenherr

Product designer · thirteen years at the bench
Correspond ↗
Mensura · Ordo · Lux

Inline marks

highlighter · tabular-nums
The marker draws the eye to a single passage without breaking the line.
Figures align on 1,204.50 / 9,887.00 with tabular numerals.
Roman numerals carry chapters: I · II · III · IV · V · VI.
IX

Breakpoints

Five widths. Marginalia never disappears — below 1024 it folds into an inline note with an oxblood left rule.

≥1280Wide desktopFull layout: 3-col spread, 3-col plate-grid, 2-col apparatus.
≤1024Laptop / landscape tabletSingle-column spread. Margins become inline blocks with a 2px oxblood left border.
≤768Portrait tabletReduced page padding. Frontispiece min-height 80vh. Footnote targets ≥22px.
≤640Large mobile17px body. Compact chrome. Touch targets ≥44px. ToC drops its leaders.
≤380Small mobile16px body. Lower type-scale floor. Single-column acta & stats.
X

Accessibility

The atmosphere never costs access. Status below: ✓ shipped, ○ on the docket.

✓
prefers-reduced-motion

A global rule in tokens.css cuts transitions, animations and smooth scroll; reveals become instant; lens & cursor glyph vanish.

✓
Visible focus

Global :focus-visible — 2px oxblood outline, 3px offset.

✓
Touch targets ≥ 44×44

Applied to language toggle, footnotes, to-catalogue and folio nav at ≤640.

✓
Hover off on touch

@media (hover: none) hides the lens and the cursor glyph.

✓
AA contrast

Ink on paper runs high; ink-faint is reserved for captions and metadata only.

○
Semantic hierarchy audit

Confirm each case has exactly one h1 and ordered h2/h3.

○
Alt text on plates

When real screenshots land, guarantee descriptive alt on every plate image.

Colophon & Figma Export

⁂

This catalogue of parts is set in EB Garamond, Instrument Serif and JetBrains Mono. Every value shown is mirrored, one-for-one, from design-system/tokens.css — the single source of truth.

The tokens are CSS custom properties shaped to match Figma Variables (collection → group → token). The export below ships them as a Tokens Studio JSON, importable directly via the Tokens Studio plugin.

Take it into Figma

One file, every token, grouped by kind (colour, type, spacing, radius, shadow, motion, layers).

  1. Download the JSON below.
  2. In Figma, open the Tokens Studio plugin → Settings → Import.
  3. Choose the file, then Import & override.
  4. Push the set to native Figma Variables from the plugin.