4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T2401,# 0nlyType component kit Read intent, core design and the relevant `docs/0nlytype/components/.md` contracts before implementation. Load the full design only when needed. Preserve existing project instructions when merging this kit. ## Non-negotiable rules 1. **Silence is structure.** Space does the layout. A hairline appears only where space alone can't hold two things apart. 2. **Type is the only ornament.** Weight, width, size, tracking and order carry every level of hierarchy. No icons, fills or shadows. 3. **Ours in roman, yours in italic.** Interface text is the voice, upright. Anything the person chose, typed or set turns into the expression italic: a picked option, a typed value, a switch state, a slider value, a named item they own. Display uses `--ot-expression-scale`; text uses the same face in its reading grade, with more ink, a little air and a text-size optical cut where available. Musical and foreign terms are italic too (`.ot-term`), by book convention. 4. **One note of colour.** One accent marks where you are: the current page, the chosen option, focus. At most one accent mark in view. Crimson is only for errors. The highlighter is only for reading marks. 5. **Nothing moves unless you do.** Motion answers an action, then rests. Pointing sketches in pencil; choosing inks it in. The overture plays once per browser, on the home page's first visit, and can be skipped. A demonstration of a component waits for a Demonstrate press. The owner-approved exceptions (2026-10-01) are marquee, text-ribbon and word-relay autoplay: each is pausable and off under reduced motion. - Shape vocabulary, complete: hairline, dot, ring, arc, cross, corner marks, parentheses, pill (tags only), and arrows only where there's a direction. | Refused | Why | |---|---| | Icons | Allowed only as signs made of their own word (owner decision 2026-10-10); no icon drawn as a picture. Words say what an icon only suggests, and an icon set brings a second visual language. Arrows appear only where there's real direction (↗ external, ↓ sort, → opens). | | Cards, fills and shadows | Space already separates things. A box around content says the space failed. | | A second accent colour | The accent means "you are here". Two accents would mean two places. Crimson is kept for errors, and the highlighter for reading marks. | | Motion that plays by itself | Nothing moves unless the person does, apart from the overture on the home page, which plays once, and the owner-approved marquee, text-ribbon and word-relay autoplay exceptions (2026-10-01). Each autoplay exception is pausable and off under reduced motion. | | Decoration of what the person owns | Their choices and words are set in the italic expression face. That's the only way they're marked. | | Effects that have no type-only version (53): adjuster, ambient-background, animated-icon, assembly-part, bento-builder, buy-me-coffee, click-spark, contour-field, contours-background, depth-background, dither-dissolve, dither-sculpture, dock, elastic-mesh, falling-text, float-layer, flow-sculpture, folds-background, ghost-cursor, glass-sculpture, glyph-sculpture, grain-dissolve, icon, image-trail, infinite-spiral, ink-sculpture, magic-rings, meta-balls, orbit-images, organism-assembly, organism-composition, particle-sculpture, particle-text, pebbles-background, pigment-field, pixel-swap, portal-field, ripple-distortion, scroll-organism, sculpture-orbit, semantic-bloom, shape, shape-artwork, shape-scene, sprouts-background, strands, sunwash-background, swarm-cursor, typography-vortex, warp-text, weave-background, writing-caret, zoom-words | Each one's job is only its effect: shapes, fills, particles or motion that plays by itself. With the effect taken away nothing is left for type to carry. A few jobs are still done elsewhere: a hairline scene change covers the dissolves, and a link covers buy-me-coffee. click-spark was weighed as a type mark left where you press, and dropped: every control already answers its own press, so a second mark would decorate the press, not say anything. The owner decided this on 2026-09-30 (click-spark on 2026-10-01); the reasons for each are in `docs/superpowers/specs/2026-09-30-000h-port-inventory.md`, Table C. | | cva, a motion library, a docs framework | Data attributes, CSS and our own components already do the job. Each dependency is a second opinion about how things should look. | 1. Take something away before adding anything. 2. Ask what the person did. If they did nothing, nothing moves except the approved cases above. 3. Ask whose words these are. Ours are roman, theirs are italic. 4. Ask where the accent is. If there are two, remove one. 5. Use the native element. Use Radix or cmdk only when the platform can't do it (menus, floating layers, the combobox and command). 6. When DESIGN.md and the code disagree, fix one of them in the same change. `check:drift` will catch you if you don't. ## Item anatomy - One item is four files: `registry/0nlytype/ui/.tsx`, its sidecar `registry/0nlytype/styles/.css`, the docs meta `content/.ts` and the live example `examples/.tsx`. The base pieces (link, kbd, fraction, meta, corners) have no sidecar; their CSS is in base.css. - `examples/.tsx` default-exports `Example`, the specimen's demo with real copy. An optional `States` export pins each state with `data-force` on the item's root, inside ``. Use your application's component, style and example paths. The paths above describe contributions to the 0nlyType registry. Pair each new item with a contract (anatomy, states, keyboard behaviour), a Motion row and a “Where each move comes from” row. Read one installed item's TSX, sidecar, example and contract end to end as a precedent. ## Naming - Tokens are `--ot-*`. Component classes are `ot-`. - States live on native attributes (`:checked`, `:disabled`, `[aria-selected]`, `[aria-invalid]`, `[aria-current]`, `[aria-pressed]`, `[aria-busy]`). Variants live on `data-variant`, and size on `data-size`. - `[data-force~="hover"]` and `[data-force~="focus"]` pin a state for documentation rows. - Every control is built on the right native element, so the React port can use native elements or Radix without changing the look. - Four switches on ``, all optional: - `data-mode="day | nocturne"` - `data-scheme="blueprint | statue | silence | riso"` (no attribute means cotton) - `data-key="ultramarine | viridian | ember | violet"`, which overrides the scheme's accent and is declared last so it always wins - `data-pair="press | paris | salon"` (no attribute means parma) - One creative move per component, and only one, drawn from the poster references (see "Where each move comes from"). Likewise one motion per component, named as an articulation (see "Motion"). - `[hidden]` always wins over a component's `display`. - Copy: sentence case, active verbs. An action keeps its name through the flow (Upload, Uploading, Uploaded). Errors say what to fix and never apologise. - Item names follow shadcn where shadcn has the component; the class keeps the poster's word. `slider` renders `.ot-ruler`. - Sidecars are wrapped in `@layer components`; base.css is in `@layer base`, so a consumer's Tailwind utilities still win. `!important` appears only on `[hidden]` and `.ot-sr`. - Direction: logical properties, and `:is([dir="rtl"], [dir="rtl"] *)` where a stroke has a direction. Never `:dir()`: Lightning CSS, which Next and Tailwind run, lowers it to a list of `:lang()` that misses a page that only sets `dir`. - Variants are `data-variant` and `data-size`, never classes. There's no cva. - React 19: `ref` is a plain prop. `"use client"` appears only in files that need state, effects, handlers or Radix, so every other item works in a Server Component. Each root and part carries `data-slot`; `className` merges through `cn`. ## Completion checklist - Check the contract's semantics, roles and accessible names; keyboard and visible focus; announcements for state changes; disabled and busy states. Keep decorative copies hidden from assistive technology. - Check reduced motion in CSS and JavaScript: Under `prefers-reduced-motion: reduce`, every tempo is 1ms and the arpeggio is 0: things still change but don't travel. Script-driven motion (rolls, the radio's stretch, tag removal, dusk and dawn) checks the same query and applies the change directly. - Check direction with logical properties and RTL where a stroke or reading order has direction. Isolate numbers inside RTL text. - Check the working component at desktop and phone widths, day and nocturne, and the relevant scheme, key and pair switches. Check forced colours. - Run the relevant tests, typecheck and lint in the consuming app. For upstream work, regenerate the registry and run its registry and drift checks. - Report which source paths you read, the precedent, the checks and their results, and anything unverified. Do not claim a check you did not run. ## References - [Intent](docs/0nlytype/INTENT.md) - [Core design](docs/0nlytype/DESIGN-core.md) - [Full design (on demand)](docs/0nlytype/DESIGN.md) - [Kit version and hashes](docs/0nlytype/manifest.json) 50:T23c9,# 0nlyType component kit Read intent, core design and the relevant `docs/0nlytype/components/.md` contracts before implementation. Load the full design only when needed. Preserve existing project instructions when merging this kit. ## Non-negotiable rules 1. **Silence is structure.** Space does the layout. A hairline appears only where space alone can't hold two things apart. 2. **Type is the only ornament.** Weight, width, size, tracking and order carry every level of hierarchy. No icons, fills or shadows. 3. **Ours in roman, yours in italic.** Interface text is the voice, upright. Anything the person chose, typed or set turns into the expression italic: a picked option, a typed value, a switch state, a slider value, a named item they own. Display uses `--ot-expression-scale`; text uses the same face in its reading grade, with more ink, a little air and a text-size optical cut where available. Musical and foreign terms are italic too (`.ot-term`), by book convention. 4. **One note of colour.** One accent marks where you are: the current page, the chosen option, focus. At most one accent mark in view. Crimson is only for errors. The highlighter is only for reading marks. 5. **Nothing moves unless you do.** Motion answers an action, then rests. Pointing sketches in pencil; choosing inks it in. The overture plays once per browser, on the home page's first visit, and can be skipped. A demonstration of a component waits for a Demonstrate press. The owner-approved exceptions (2026-10-01) are marquee, text-ribbon and word-relay autoplay: each is pausable and off under reduced motion. - Shape vocabulary, complete: hairline, dot, ring, arc, cross, corner marks, parentheses, pill (tags only), and arrows only where there's a direction. | Refused | Why | |---|---| | Icons | Allowed only as signs made of their own word (owner decision 2026-10-10); no icon drawn as a picture. Words say what an icon only suggests, and an icon set brings a second visual language. Arrows appear only where there's real direction (↗ external, ↓ sort, → opens). | | Cards, fills and shadows | Space already separates things. A box around content says the space failed. | | A second accent colour | The accent means "you are here". Two accents would mean two places. Crimson is kept for errors, and the highlighter for reading marks. | | Motion that plays by itself | Nothing moves unless the person does, apart from the overture on the home page, which plays once, and the owner-approved marquee, text-ribbon and word-relay autoplay exceptions (2026-10-01). Each autoplay exception is pausable and off under reduced motion. | | Decoration of what the person owns | Their choices and words are set in the italic expression face. That's the only way they're marked. | | Effects that have no type-only version (53): adjuster, ambient-background, animated-icon, assembly-part, bento-builder, buy-me-coffee, click-spark, contour-field, contours-background, depth-background, dither-dissolve, dither-sculpture, dock, elastic-mesh, falling-text, float-layer, flow-sculpture, folds-background, ghost-cursor, glass-sculpture, glyph-sculpture, grain-dissolve, icon, image-trail, infinite-spiral, ink-sculpture, magic-rings, meta-balls, orbit-images, organism-assembly, organism-composition, particle-sculpture, particle-text, pebbles-background, pigment-field, pixel-swap, portal-field, ripple-distortion, scroll-organism, sculpture-orbit, semantic-bloom, shape, shape-artwork, shape-scene, sprouts-background, strands, sunwash-background, swarm-cursor, typography-vortex, warp-text, weave-background, writing-caret, zoom-words | Each one's job is only its effect: shapes, fills, particles or motion that plays by itself. With the effect taken away nothing is left for type to carry. A few jobs are still done elsewhere: a hairline scene change covers the dissolves, and a link covers buy-me-coffee. click-spark was weighed as a type mark left where you press, and dropped: every control already answers its own press, so a second mark would decorate the press, not say anything. The owner decided this on 2026-09-30 (click-spark on 2026-10-01); the reasons for each are in `docs/superpowers/specs/2026-09-30-000h-port-inventory.md`, Table C. | | cva, a motion library, a docs framework | Data attributes, CSS and our own components already do the job. Each dependency is a second opinion about how things should look. | 1. Take something away before adding anything. 2. Ask what the person did. If they did nothing, nothing moves except the approved cases above. 3. Ask whose words these are. Ours are roman, theirs are italic. 4. Ask where the accent is. If there are two, remove one. 5. Use the native element. Use Radix or cmdk only when the platform can't do it (menus, floating layers, the combobox and command). 6. When DESIGN.md and the code disagree, fix one of them in the same change. `check:drift` will catch you if you don't. ## Item anatomy - One item is four files: `registry/0nlytype/ui/.tsx`, its sidecar `registry/0nlytype/styles/.css`, the docs meta `content/.ts` and the live example `examples/.tsx`. The base pieces (link, kbd, fraction, meta, corners) have no sidecar; their CSS is in base.css. - `examples/.tsx` default-exports `Example`, the specimen's demo with real copy. An optional `States` export pins each state with `data-force` on the item's root, inside ``. Use your application's component, style and example paths. The paths above describe contributions to the 0nlyType registry. Pair each new item with a contract (anatomy, states, keyboard behaviour), a Motion row and a “Where each move comes from” row. Read one installed item's TSX, sidecar, example and contract end to end as a precedent. ## Naming - Tokens are `--ot-*`. Component classes are `ot-`. - States live on native attributes (`:checked`, `:disabled`, `[aria-selected]`, `[aria-invalid]`, `[aria-current]`, `[aria-pressed]`, `[aria-busy]`). Variants live on `data-variant`, and size on `data-size`. - `[data-force~="hover"]` and `[data-force~="focus"]` pin a state for documentation rows. - Every control is built on the right native element, so the React port can use native elements or Radix without changing the look. - Four switches on ``, all optional: - `data-mode="day | nocturne"` - `data-scheme="blueprint | statue | silence | riso"` (no attribute means cotton) - `data-key="ultramarine | viridian | ember | violet"`, which overrides the scheme's accent and is declared last so it always wins - `data-pair="press | paris | salon"` (no attribute means parma) - One creative move per component, and only one, drawn from the poster references (see "Where each move comes from"). Likewise one motion per component, named as an articulation (see "Motion"). - `[hidden]` always wins over a component's `display`. - Copy: sentence case, active verbs. An action keeps its name through the flow (Upload, Uploading, Uploaded). Errors say what to fix and never apologise. - Item names follow shadcn where shadcn has the component; the class keeps the poster's word. `slider` renders `.ot-ruler`. - Sidecars are wrapped in `@layer components`; base.css is in `@layer base`, so a consumer's Tailwind utilities still win. `!important` appears only on `[hidden]` and `.ot-sr`. - Direction: logical properties, and `:is([dir="rtl"], [dir="rtl"] *)` where a stroke has a direction. Never `:dir()`: Lightning CSS, which Next and Tailwind run, lowers it to a list of `:lang()` that misses a page that only sets `dir`. - Variants are `data-variant` and `data-size`, never classes. There's no cva. - React 19: `ref` is a plain prop. `"use client"` appears only in files that need state, effects, handlers or Radix, so every other item works in a Server Component. Each root and part carries `data-slot`; `className` merges through `cn`. ## Completion checklist - Check the contract's semantics, roles and accessible names; keyboard and visible focus; announcements for state changes; disabled and busy states. Keep decorative copies hidden from assistive technology. - Check reduced motion in CSS and JavaScript: Under `prefers-reduced-motion: reduce`, every tempo is 1ms and the arpeggio is 0: things still change but don't travel. Script-driven motion (rolls, the radio's stretch, tag removal, dusk and dawn) checks the same query and applies the change directly. - Check direction with logical properties and RTL where a stroke or reading order has direction. Isolate numbers inside RTL text. - Check the working component at desktop and phone widths, day and nocturne, and the relevant scheme, key and pair switches. Check forced colours. - Run the relevant tests, typecheck and lint in the consuming app. For upstream work, regenerate the registry and run its registry and drift checks. - Report which source paths you read, the precedent, the checks and their results, and anything unverified. Do not claim a check you did not run. ## References - [Intent](INTENT.md) - [Core design](DESIGN-core.md) - [Full design (on demand)](DESIGN.md) - [Kit version and hashes](manifest.json) 51:T1537,# 0nlyType: intent **0nlyType** is a component library made of type and nothing else. Every control, every sign and every ornament is set in words. It gives an interface two typefaces, one accent, a great deal of space, and nothing else to lean on. ## Who it's for - Its makers first. 0nlyType is the library of The Directors, the product studio of Sanjay Kumar and Abhay Rohit. The studio's landing page at thedirectors.agency is built on it next, then the founders' portfolios. - Anyone who installs a component with `npx shadcn add https://thedirectors.agency/ui/r/.json` and wants an interface where type carries the design. - Builders (people and agents) extending it. They read this page, then DESIGN.md, before writing anything. ## What success looks like 1. One command installs a component into a fresh Next app. The app builds, and the component looks and behaves like the specimen. 2. The docs site is made from 0nlyType's own components. If the docs need something the library doesn't have, it's built and added to the library, never borrowed. 3. A stranger can tell from any one screen what the system believes: space does the layout, and type is the only ornament. 4. `npm run check` passes, and it holds this page, DESIGN.md and the code to each other. 5. The registry stays healthy by the shadcn directory's own measures, on every check: - the index and every item validate; - each item installs on its own with `shadcn add --dry-run`; - the registry's `name` matches its namespace; - every endpoint answers over HTTPS with JSON. The catalog grows only through items that each do a job of their own, never through aliases or splits; each sign variant (dots, words, fill) is its own item by owner decision 2026-10-10. ## What it refuses, and why | Refused | Why | |---|---| | Icons | Allowed only as signs made of their own word (owner decision 2026-10-10); no icon drawn as a picture. Words say what an icon only suggests, and an icon set brings a second visual language. Arrows appear only where there's real direction (↗ external, ↓ sort, → opens). | | Cards, fills and shadows | Space already separates things. A box around content says the space failed. | | A second accent colour | The accent means "you are here". Two accents would mean two places. Crimson is kept for errors, and the highlighter for reading marks. | | Motion that plays by itself | Nothing moves unless the person does, apart from the overture on the home page, which plays once, and the owner-approved marquee, text-ribbon and word-relay autoplay exceptions (2026-10-01). Each autoplay exception is pausable and off under reduced motion. | | Decoration of what the person owns | Their choices and words are set in the italic expression face. That's the only way they're marked. | | Effects that have no type-only version (53): adjuster, ambient-background, animated-icon, assembly-part, bento-builder, buy-me-coffee, click-spark, contour-field, contours-background, depth-background, dither-dissolve, dither-sculpture, dock, elastic-mesh, falling-text, float-layer, flow-sculpture, folds-background, ghost-cursor, glass-sculpture, glyph-sculpture, grain-dissolve, icon, image-trail, infinite-spiral, ink-sculpture, magic-rings, meta-balls, orbit-images, organism-assembly, organism-composition, particle-sculpture, particle-text, pebbles-background, pigment-field, pixel-swap, portal-field, ripple-distortion, scroll-organism, sculpture-orbit, semantic-bloom, shape, shape-artwork, shape-scene, sprouts-background, strands, sunwash-background, swarm-cursor, typography-vortex, warp-text, weave-background, writing-caret, zoom-words | Each one's job is only its effect: shapes, fills, particles or motion that plays by itself. With the effect taken away nothing is left for type to carry. A few jobs are still done elsewhere: a hairline scene change covers the dissolves, and a link covers buy-me-coffee. click-spark was weighed as a type mark left where you press, and dropped: every control already answers its own press, so a second mark would decorate the press, not say anything. The owner decided this on 2026-09-30 (click-spark on 2026-10-01); the reasons for each are in `docs/superpowers/specs/2026-09-30-000h-port-inventory.md`, Table C. | | cva, a motion library, a docs framework | Data attributes, CSS and our own components already do the job. Each dependency is a second opinion about how things should look. | ## Non-goals - Being a general-purpose kit that looks like anything. 0nlyType looks like 0nlyType. - Being part of another product. 0nlyType stands on its own. - Matching every shadcn component. An item exists only where the idea can be carried by type and a line. - Supporting browsers without `:has()`, `color-mix()` and native ``. - A theming engine. There are four switches on `` (mode, scheme, key, pair), and that's all. ## When in doubt 1. Take something away before adding anything. 2. Ask what the person did. If they did nothing, nothing moves except the approved cases above. 3. Ask whose words these are. Ours are roman, theirs are italic. 4. Ask where the accent is. If there are two, remove one. 5. Use the native element. Use Radix or cmdk only when the platform can't do it (menus, floating layers, the combobox and command). 6. When DESIGN.md and the code disagree, fix one of them in the same change. `check:drift` will catch you if you don't. 52:T5afa7,# 0nlyType A design system for type and silence. Two typefaces, one accent, and a great deal of space. Read INTENT.md first; this file is the how. - Library: a shadcn registry. `npx shadcn@latest add https://thedirectors.agency/ui/r/.json` - Items: `registry/0nlytype/ui/.tsx`, each with a sidecar `registry/0nlytype/styles/.css` - Base: `registry/0nlytype/styles/{tokens,base,fonts}.css` (the `0nlytype` base item) - Specimen: `specimen/index.html`, the original static page, served at `/specimen/`. It still uses the old `f-` names; everything else uses `ot-`. ## Principles 1. **Silence is structure.** Space does the layout. A hairline appears only where space alone can't hold two things apart. 2. **Type is the only ornament.** Weight, width, size, tracking and order carry every level of hierarchy. No icons, fills or shadows. 3. **Ours in roman, yours in italic.** Interface text is the voice, upright. Anything the person chose, typed or set turns into the expression italic: a picked option, a typed value, a switch state, a slider value, a named item they own. Display uses `--ot-expression-scale`; text uses the same face in its reading grade, with more ink, a little air and a text-size optical cut where available. Musical and foreign terms are italic too (`.ot-term`), by book convention. 4. **One note of colour.** One accent marks where you are: the current page, the chosen option, focus. At most one accent mark in view. Crimson is only for errors. The highlighter is only for reading marks. 5. **Nothing moves unless you do.** Motion answers an action, then rests. Pointing sketches in pencil; choosing inks it in. The overture plays once per browser, on the home page's first visit, and can be skipped. A demonstration of a component waits for a Demonstrate press. The owner-approved exceptions (2026-10-01) are marquee, text-ribbon and word-relay autoplay: each is pausable and off under reduced motion. ## Conventions - Tokens are `--ot-*`. Component classes are `ot-`. - States live on native attributes (`:checked`, `:disabled`, `[aria-selected]`, `[aria-invalid]`, `[aria-current]`, `[aria-pressed]`, `[aria-busy]`). Variants live on `data-variant`, and size on `data-size`. - `[data-force~="hover"]` and `[data-force~="focus"]` pin a state for documentation rows. - Every control is built on the right native element, so the React port can use native elements or Radix without changing the look. - Four switches on ``, all optional: - `data-mode="day | nocturne"` - `data-scheme="blueprint | statue | silence | riso"` (no attribute means cotton) - `data-key="ultramarine | viridian | ember | violet"`, which overrides the scheme's accent and is declared last so it always wins - `data-pair="press | paris | salon"` (no attribute means parma) - One creative move per component, and only one, drawn from the poster references (see "Where each move comes from"). Likewise one motion per component, named as an articulation (see "Motion"). - `[hidden]` always wins over a component's `display`. - Copy: sentence case, active verbs. An action keeps its name through the flow (Upload, Uploading, Uploaded). Errors say what to fix and never apologise. ## Tokens ### Colour | Token | Day | Nocturne | Role | |---|---|---|---| | `--ot-paper` | `#f2f3f0` | `#10111c` | The page | | `--ot-ink` | `#000` | `#e9eaec` | Display type, the statement block | | `--ot-graphite` | `#4a4b50` | `#b4b5bc` | Body text | | `--ot-pencil` | `#6b6c71` | `#83848c` | Placeholders, captions, done or off | | `--ot-rule` | ink at 14% (`color-mix`) | same | Hairlines | | `--ot-rule-strong` | ink at 42% (`color-mix`) | same | Baselines, ticks, rings | | `--ot-accent` | `#2b2bee` | `#8c8cff` | Where you are | | `--ot-signal` | `#c8102e` | `#ff6b7f` | Errors only | | `--ot-mark` | `#ffe45a` | same | Selection, ``, link hover | | `--ot-on-mark` | `#000` | same | Text on the highlighter | Keys (`--ot-accent`, day / nocturne): ultramarine `#2b2bee` / `#8c8cff`, viridian `#0b6e4f` / `#4fd1a5`, ember `#b83d00` / `#ff8a4c`, violet `#6a1b9a` / `#c58cf2`. Every key clears 4.5:1 on every scheme's paper (lowest: ember on silence, 4.56). Schemes move paper, ink, graphite, pencil, accent and signal together. The rules follow the ink. Values are listed as day, then Nocturne. | Scheme | Paper | Ink | Pencil | Accent | From | |---|---|---|---|---|---| | cotton (house) | `#f2f3f0` / `#10111c` | `#000` / `#e9eaec` | `#6b6c71` / `#83848c` | `#2b2bee` / `#8c8cff` | "It has to be design." | | blueprint | `#edf0f7` / `#0a1766` | `#0c1b8f` / `#f0f2ff` | `#58608f` / `#929ad0` | `#c23d00` / `#ff9557` | The calendar posters' one orange dot | | statue | `#ebeae5` / `#0d1528` | `#14213d` / `#eee7d7` | `#5f687e` / `#938d80` | `#875600` / `#e3b04f` | The Renaissance and Greek statue prints | | silence | `#e2e8e3` / `#0c1c18` | `#0e2a23` / `#e1ebe6` | `#4f6962` / `#7a918a` | `#1b3de0` / `#93a6ff` | "the silence that heals" | | riso | `#f6f5f2` / `#1a1537` | `#25286b` / `#f8eef5` | `#636591` / `#9d92ab` | `#b8005f` / `#ff62b0` | Two-drum risograph prints | All text colours (ink, graphite, pencil, accent, signal) clear 4.5:1 on their paper in both modes. Checked with a script, and live on the specimen's palette. ### Type - `--ot-voice`: a grotesque. Everything the interface says. - `--ot-expression`: an italic serif. Everything the person says back. - `--ot-expression-scale`: lifts the display italic until the two x-heights meet. It's set per pair; text roles locally use the reading scale below. | Pair | Voice | Expression | Scale | |---|---|---|---| | parma (house) | Archivo (width 62–125, weight 100–900) | Bodoni Moda (optical size 6–96) | 1.15 | | press | Schibsted Grotesk (weight 400–900) | Newsreader (optical size 6–72) | 1.1 | | paris | Instrument Sans (width 75–100, weight 400–700) | EB Garamond | 1.24 | | salon | Bricolage Grotesque (optical size, width 75–100, weight 200–800) | Cormorant | 1.26 | **The expression's reading grade.** The italic is the same family at every size. At the text steps (`pp`, `p`, `mp`), thin display strokes need more ink and small counters need room. `base.css` applies one shared grade to typed inputs and textareas, editable text, selected values, text-size personal words, prose `em` / `i` and quotations, and small italic labels. `--ot-reading` is the local scale and supplies `--ot-expression-scale` on the expression element itself, never on a panel. Existing leading and component geometry stay with the sidecar. `.ot-reading` opts a new text-size expression into the same rule; use it on the italic, not a parent containing roman or display type. | Pair | `--ot-expression-text-opsz` | `--ot-expression-text-weight` | `--ot-expression-text-tracking` | `--ot-expression-text-scale` | |---|---|---|---|---| | parma | 6 | 500 | 0.012em | 1.18 | | press | 6 | 500 | 0.01em | 1.12 | | paris | No optical-size axis | 500 | 0.015em | 1.3 | | salon | No optical-size axis | 600 | 0.015em | 1.38 | For Bodoni Moda and Newsreader, `--ot-expression-text-variation` pins `"opsz"` to `--ot-expression-text-opsz` with automatic optical sizing off. Garamond and Cormorant use `normal` variation settings and their real weight axes. Small italic prose and labels use full `--ot-ink`, rather than graphite or pencil; intentional accent states, ink reversals, invisible measurement copies, disabled controls and roman placeholders keep their own colours. On cotton paper, ink is 18.85:1 by day and 15.59:1 in nocturne; contrast is measured independently of the font's stroke quality. Display italics keep their original optical sizing, weight, tracking, scale and colour: hero lines, titles, large figures, the overprint and signature fields, sforzando choices, statement relays and fitted type. Do not apply a reading grade to a whole component to catch a small label. Cormorant remains Cormorant; if a use still cannot be read at 16px after grading, propose a text-italic companion for owner review rather than silently substituting a family. The width moves (the title's exhale, the statement button, the disclosure) only travel as far as each voice's width axis allows. Schibsted has no width axis, so under press they change weight only. - `--ot-measure`: 62ch. Dynamics: text steps by a fourth, headings by a fifth. Each size has `-lh` (leading) and `-tr` (tracking) companions. | Token | Size | Leading | Tracking | Use | |---|---|---|---|---| | `--ot-pp` | 13px | 1.45 | 0.01em | Labels, captions | | `--ot-p` | 17px | 1.6 | 0 | Body | | `--ot-mp` | 22px | 1.45 | −0.005em | Lead, control text | | `--ot-mf` | 32px | 1.15 | −0.015em | Heading in a section | | `--ot-f` | 48px | 1.05 | −0.025em | Section heading, dialog question | | `--ot-ff` | 72px | 0.95 | −0.035em | Page title | | `--ot-fff` | clamp(64px, 11vw, 160px) | 0.9 | −0.045em | Movement titles | | `--ot-ffff` | clamp(64px, 17.5vw, 272px) | 0.82 | −0.055em | The overture only | ### Space, line, shape - `--ot-space-1` … `--ot-space-10`: 4, 8, 12, 18, 27, 40, 60, 90, 135, 200 (perfect fifths). - `--ot-hairline` 1px, `--ot-stroke` 1.5px, `--ot-dot` 7px, `--ot-gutter` 24px, `--ot-margin` clamp(20px, 5vw, 80px). - Grid: 12 columns. Columns 1–3 are the margin (names, notes), 4–12 the stave (the work). One column below 860px. - Separation, nearest to farthest. Every boundary on a page is one of five, and each has its own space. The farther apart two things are in meaning, the more silence between them, and a nearer pair never gets more space than a farther one. Silence does the separating; a line appears only where space can't. | Boundary | Space | For example | |---|---|---| | Within one thing: a label and its value, a figure and its name, a title and its note | `--ot-space-1`–`3` (4–12) | a state's label over it; a stat's name under its figure | | A rule and the heading hung under it | `--ot-space-5` (27) on a docs page, `--ot-space-6` (40) on the landing page | a section's rule, then its h2 | | A heading and what it names | one step more than its rule: `--ot-space-6` (40), `--ot-space-7` (60) on the landing page; `--ot-space-3` (12) under a p-size subheading | an h2 and its lead; a table's name and the table | | One block and the next inside a section | `--ot-space-7` (60) | a lead and its example; two tables | | One section and the next | `--ot-space-8` (90) on a docs page, `--ot-space-9` (135) on the landing page, all of it before the rule | the end of Usage, then Contract's rule | - A section begins at one rule, and only one. Its heading hangs just under that rule, or stands on the rule its content opens with (a list of rows, the steps, as SPECTRA's title stands on its line); then the section draws none of its own. A heading never floats between two lines. The first section after a page's head, and the coda at the end of one, begin in silence alone. - Hairlines part siblings of one kind: rows, steps, the rows of a table. A boundary between two kinds of thing is silence. A line stands beside what it belongs to, not across the gutter from it. - When space alone can't carry a boundary (a phone, a dense list), the type changes, one thing at a time and in this order: a step of size, then a step of weight, then the colour, where pencil names a thing, graphite is its body and ink is the thing itself. Two blocks of one kind in one section each carry a visible name, a p-size line in ink, above them. - Indentation says belonging. A nested list steps in by the width of its dash, so its dash hangs under its parent's words. Items in a list take half a paragraph's pause between them, so a long item still reads as one. Whatever hangs (a list's dash, a quotation mark) hangs into empty margin, never against a line; where the margin is too narrow for it, it steps in. - Shape vocabulary, complete: hairline, dot, ring, arc, cross, corner marks, parentheses, pill (tags only), and arrows only where there's a direction. ### Tempo | Token | Value | Use | |---|---|---| | `--ot-allegro` | 160ms | Hover, press | | `--ot-moderato` | 320ms | A state changes | | `--ot-andante` | 640ms | Panels, toasts, dialogs | | `--ot-adagio` | 1400ms | The overture, once | | `--ot-exhale` | cubic-bezier(.16, 1, .3, 1) | Arriving | | `--ot-breath` | cubic-bezier(.65, 0, .35, 1) | Moving between states | | `--ot-spiccato` | cubic-bezier(.34, 1.5, .5, 1) | Landing: one small rebound (about 8%) for dots, rings, frames | | `--ot-arpeggio` | 36ms | The step between things that arrive in turn | Under `prefers-reduced-motion: reduce`, every tempo is 1ms and the arpeggio is 0: things still change but don't travel. Script-driven motion (rolls, the radio's stretch, tag removal, dusk and dawn) checks the same query and applies the change directly. ## Components Each contract lists anatomy, states and keyboard behaviour. "Yours" marks where the italic expression appears. ### ot-btn (button) - Underneath: native ``. For the switches, `role="switch"` and `aria-checked` replace `aria-pressed`, and `data-scene` names the scene change (`ot-dissolve`, `ot-dim`, `ot-fall`). Sizes are in `em`, so it takes the size of the text around it; the hit area is 0.4em wider than the drawing, and in a bar (`.bar-mode`) at least 44px tall. - It only reports the choice: `mode` / `defaultMode` / `onModeChange(mode, event)`. The page applies it (`document.documentElement.dataset.mode = mode`). The site's `useTheme()` does, through a view transition: the appearance hook reads the pressed control's `data-scene` and passes it as the transition's type (`startViewTransition({ update, types })`), and the sidecar draws that scene change under `:active-view-transition-type()`, with the body's colour transition off so the new sheet is final at once and the overlay catching no pointer. Without view transitions, or under reduced motion, the scheme swaps instantly; a browser without transition types gets the appearance's circle. - Each switch is one pair, a toggle and its scene change, answering the press and then resting. After a press the pointing sketch rests (`data-rested`) until the pointer leaves or focus moves on. Both words are always set (stop) or the word never changes width (dimmer, noon's initial cell is as wide as its M), so nothing in a bar moves; all three fit a 320px bar. - Stop, with dissolve: after the calendar's month set over its year, and the full stop of "Renaissance.". Day over Night, flush to the inline end, and the full stop after the one you read by; the other word steps back to pencil. Pressing sets the stop down one line to Night, or raises it back to Day (moderato, spiccato). Pointing pencils a hairline ring where it would land and lifts the other word to graphite. The page dissolves: the new sheet comes up through the still old one at allegro, so the grey middle is only a glance and the stop lands after the page has turned. - Dimmer, with dim: a lamp's fader in one word. Night stands in pencil by day and in ink at night. Pressing brings the ink up through the letters in reading order, one arpeggio apart, or lowers it from the last letter; pointing moves the fader one notch (N inks by day, t steps back to pencil at night). The page follows like a light: going to night the day sheet dims (`brightness`) and the night comes up through it; going to day the day sheet arrives dim and its light is raised. Both ways the page passes through the same dimmed day, whose type stays legible. Moderato. - Noon, with fall: Noon and Moon are one letter apart, so only the initial rolls and "oon" never moves: the N sets below the line and the M comes down from above as night falls, and the N rises back at dawn. The new sheet falls from the top edge, where the switch is, on one straight line (moderato), both ways, so the answer starts at the press and reads down the page. - Eclipse: a ring and a disc that fills it; by day the whole sun, and at night a mask bites the disc from the upper right and leaves a crescent on the moon's rim (registered `--ot-mode-x`, mirrored in RTL). The disc meets the ring: with a gap between them, day read as a checked radio. Horizon: a hairline; the dot stands above it filled by day and sets below it as a ring at night, landing with spiccato. Words: drawn like a select, since it sits in sentences beside them. The word you read by stands in the italic on a hairline, with ↕ in the pencil where a select has ↓; pointing inks both and nudges the arrow toward the other word. Choosing rolls it the way the sun goes: night comes down from above, day comes up from below, and the hairline narrows or widens to the new word. Fermata: the sign as an eye; the lid arc comes down over the dot at night and closes. Sentence: "Read by light." / "Read by night."; the last word rolls (light in from below, night in from above) and the full stop is a dot or a ring. - Knockout: after "the uncreative", where part of a word is reversed out of an ink block. It reads "midday": `mid` in heavy roman on the paper, the half you chose in the italic (`.ot-mode-block`). At night the ink falls over the second half from above, the way Nocturne falls over the page, and "night" reverses out of it; at dawn the ink lifts back up. Pointing lets a sliver of ink fall by day, or lifts it a little at night. - Hour: after the numbers used as data in "the silence that heals". Noon by day and midnight at night: 12:00 and 00:00, the hour yours in the italic and the minutes ours in pencil, in tabular figures and always left to right. A clock only goes forward, so whichever way you choose, the hour turns forward, out at the top and in from below, the units first and the tens one step behind like a carry. It turns only after the mode has changed (`data-turned`), so nothing rolls on first paint. - States: rest (graphite; stop and dimmer carry the state in ink against pencil), hover (ink, or the switch's sketch), focus (accent outline), disabled. Right to left, stop's words and full stop mirror to the inline end; dimmer and noon keep the English word left to right. Reduced motion (also `data-force="reduced"`) changes at once. Forced colours restate every part in system colours: stop's stop and ring in ButtonText, the word not in use and dimmer's day word in GrayText. - Keyboard: Space or Enter. - The site's bar uses dimmer; Tune uses sentence. ### ot-relay (word-relay) - Underneath: native `

` and `

` with three `ot-picks` (pizzicato): Scheme (cotton, blueprint, statue, silence, riso), Key ("its own", its description naming the scheme's own accent, then ultramarine, viridian, ember, violet) and Pair (parma, press, paris, salon, each with its faces as the description). - The move, after "Healthy habits → for creatives", where the voice runs into the italic on one line of thought: the choice is written back as one sentence over the lists, "Cotton, in ultramarine, set in Archivo and Bodoni.", and the night toggle finishes it, "Read by light." Ours in roman and graphite; yours, the three words you chose, in the italic and ink. The sentence is an `` for the three lists, so a reader hears the new sentence after each choice. No key reads the scheme's own accent by name (cotton ultramarine, blueprint orange, statue gold, silence cobalt, riso magenta). - Layout: the lists stand two across with the pair under them, or three across once the control is 36rem wide (a container query); the answer steps up from `--ot-mp` to `--ot-mf` there. The picks are set at `--ot-p`, closer than a standalone list. One accent in view: only the list you're in, or were last in (`data-here`, the scheme to begin with), marks its choice with the accent dot; the others set theirs in ink, and their italic titles still say what's chosen. - It writes only the four switches (`data-mode`, `data-scheme`, `data-key`, `data-pair`; cotton and parma are no attribute) and keeps them together as one JSON object under `0nlytype-theme` in localStorage. `useAppearance()` reads `` through a MutationObserver, so a head script, the page and every control agree. With `value` it holds nothing and writes nothing: `onValueChange(value, from)` reports. - Motion: the new appearance opens over the old as a circle from the control you touched (a view transition, andante, exhale, so the circle is already wide as the press lands; `--ot-appearance-x`, `--ot-appearance-y` on ``). Under the circle the colours are already new, so the body's own colour fade is off for as long as the transition runs (`:active-view-transition`). Reduced motion, or no view transitions, changes it at once, and there the body's colour fade stays. - Faces: a pair's fonts load only when the page first asks for them. Pointing at or focusing the pair list fetches every pair's faces (`warmPairs()`), and choosing a pair whose faces have not arrived waits up to 400ms for them before the page turns, so the new page opens already set in its letters. The control shows the choice at once while it waits; a second change made meanwhile builds on it. The page restores the stored choice before first paint with a one-line script in `` (the docs site's `theme-script.tsx`). - States: those of picks and the mode toggle. Keyboard: Tab through the toggle and the three groups; arrow keys move each choice. - The site's bar opens it from Tune, in a popover, beside the dimmer toggle. ### ot-ruler (slider) - Underneath: native range, plus a hook for the readout. - Anatomy: `.ot-ruler[data-variant="dimension | spread | dynamics"]` holding a label, an ``, `.ot-ruler-hand` (the ``, and for spread `.ot-ruler-letters`) and `.ot-ruler-scale` of ``. Script sets `--p` (0–1). Spread and dynamics need a string label; they keep it in the DOM as `.ot-sr` and draw it `aria-hidden`. - The track is a ruler: minor ticks every 5%, major every 25%, and the filled part in ink. The thumb is an ink hairline topped by the accent dot (`--h` tall). - Dimension (the default). Yours: the value, a large italic numeral set in the gap of a dimension line (after Paul Rand), `.ot-ruler-value`. The line runs from zero to the thumb, with a tick at each end, and always stays true to the hand: when the gap is too short for the figure, script sets `data-outside` and the figure stands outside, past the far tick, as a draughtsman sets it. - Spread. After "Renaissance.", whose words are spread to the edges: the label's letters, in capitals, are the ruler's marks, set out across its whole length over a single baseline (`--h: 64px`). The hand stands through them and inks every letter it has passed, splitting the one it stands in, as "the uncreative" splits its word (`background-clip: text`). Your number, `.ot-ruler-corner`, waits in the far corner; the scale keeps only its two ends. - Dynamics. The score marks loudness pp to ff in italic under the notes. Here the label, `.ot-ruler-loud`, is as loud as the value: its weight runs 100 to 900 and its width 62% to 125% with the hand (as far as the pair's voice allows), with your number after it; its size is set from its letter count and the ruler's width (a size container), so at its heaviest it still fits one line and nothing reflows while you drag. The scale reads pp p mp mf f ff as `.ot-term`, and the nearest marking inks (`data-on`). - The value and unit are one text node, isolated left to right; a shorter number never shifts a separate unit node. The ruler and the figure's placement still follow the page direction. - While the thumb is held (`:active`), the value lifts 5px, and it drops back with spiccato when you let go. - States: rest, focus (outline 8px out), disabled (45% opacity). Right to left, zero is on the right, the fill, the ink through the letters and the outside figure follow. Forced colours: the ruler restates its tokens in system colours (`CanvasText`, `GrayText`, `Highlight` for the dot). - Keyboard: arrows step, Page Up / Page Down jump, Home / End go to the ends. ### ot-field (field) - Underneath: native input and textarea, plus a hook for the counter. The count and filled state follow controlled values, child changes and native form resets as well as input events. - Anatomy: `.ot-field` holding a `.ot-label`, an optional `.ot-field-count`, then the `input` or `textarea`, then an optional `.ot-field-hint` or `.ot-field-error`. The counter stays at the inline end and reads count / limit, isolated left to right even on an RTL page. - No box, only a baseline. Focus draws the accent line outward from where the pointer touched it (script sets `--o`, a percentage) or from the left for the keyboard, and shows the counter. The placeholder steps back to half strength on focus. - Yours: the typed value, in the italic. The placeholder stays in the voice, in pencil. - Textarea: ruled like paper, with lines every `--lh` (2.25rem) that scroll with the text. - A search input (`type="search"`) draws no native clear mark, whose blue × belongs to no scheme; Escape clears it. - States: rest, focus, filled, error (`aria-invalid="true"` turns both lines crimson; the message in `.ot-field-error` is linked with `aria-describedby`), disabled (dotted baseline). - The error is a callout, after Weingart: a crimson hairline pill hung from the baseline by a leader line, with a dot where it meets the line. A textarea's ruled lines turn crimson too. It arrives in order: the dot lands, the leader drops, then the pill and its words. - Error copy says what to fix: "Check the address. It needs a domain after the @, like studio.com." - Variant `overprint` (after "It has to be design."): the label is set in the voice as a heavy condensed word at `--ot-f`, and your italic is printed over its lower half, knocked out of it by a paper outline (`-webkit-text-stroke` in `--ot-paper`, painted under the fill). There's no placeholder; the label is the prompt. Arriving, the word draws in its width (Inhale) and your words and caret take the accent, so the baseline stays a hairline. - Variant `signature` (the printed form's signature line): a cross (`.ot-field-mark`) stands at the start of the line and the label becomes a caption under it. Your words are set larger, at `--ot-mf`. Arriving, the + turns a quarter to the × of "sign here" and inks; once written (`data-filled`) it stays × in pencil. The caption holds the start under the line, so the error callout hangs from the end. ### ot-form (form) - Underneath: a native `

` with `noValidate`, plus a hook. The browser's own constraint validation decides what's wrong; the form only says it the 0nlyType way. - Anatomy: `` holding `ot-field`s on a grid and one `FormSubmit`, a statement button. - On submit it checks every control. Each invalid one gets its Field's error callout (the control's `data-error`, else the browser's message), `aria-invalid` and `aria-describedby`, and focus goes to the first. Typing clears or updates that field's error. - Sending: `FormSubmit` goes busy and says so (`busy="Sending"`), with the breathing periods. A second submit while one runs is ignored. - Copy: the button names the action (Send, Save), never Submit. Errors say what to fix. - Sent: `FormSubmit sent="Sent"` says so once `onSubmit` resolves, until anything is changed, so the action keeps one name: Send, Sending, Sent. - Variants go on `data-variant`: grid (the default), letter, postmark. - Letter, after Weingart's letter to AIGA: the form is a letter, our words in roman prose and each field a blank in it that you fill in italic. The prose names each blank, so its label, hint and callout are kept for screen readers only (the control still gets `aria-invalid` and `aria-describedby`). A textarea stays a block, the letter's body. After a failed send, what's still wrong is said once, in a postscript under the letter (`FormPostscript`): "P.S." in ink, then each thing to fix in the signal, each a link that takes focus to its blank. It arrives once and shortens as you fix things. - Postmark, after the postal hand stamp: once sent, a postmark comes down on the form's end corner, beside the button that sent it and clear of what you wrote (`FormPostmark`, `role="status"`). A double ring set askew, "Sent", the day large as the dot calendar sets it, the month and year, the time. It is ink, so the one accent stays with you. It lands once with spiccato, and lifts off as soon as anything is changed. Right to left it leans the other way; reduced motion, it is simply there; forced colours, `CanvasText` rings on `Canvas`. ### ot-select (select) - Underneath: native `…

`. - Yours: the chosen option, italic over a hairline. A small ↓ follows it. - Where `appearance: base-select` is supported, the open list is restyled: the current option has an accent dot beside it, and the hovered option is highlighted. The list drops in 6px and its options arrive in turn (`sibling-index()` × `--ot-arpeggio`, where supported). - Keyboard: native select. - Variants go on `data-variant`: underline (the default), compose, ruby. Both drawn variants keep the native select for focus, keyboard and list; its own words are made transparent and a copy is set in the same place for script to move. The hairline moves to the box and stretches between the old word's width and the new one's. - Compose, after the compositor distributing type back to the case: choosing a new word resets it letter by letter. Letters the two words share slide across to their new places; the rest of the old word falls away in pencil and the new letters drop in, spiccato, as sorts set into the stick. "newest" to "oldest" keeps its *e*, *s* and *t*. - Ruby, after Japanese ruby and the posters' small notes hung by a large italic: the other choices ride small above the word, ours (roman, pencil) over yours (italic, ink), so every option is in view without opening anything. Clicking one sets it: the two words cross, the picked one down onto the line and the old one up into the ruby, while the others glide aside. The ruby is `aria-hidden`; the select is still the control. Pointing a ruby word draws a hairline under it. - Drawn variants: reduced motion swaps words at once. Right to left the word keeps its own direction (`dir="auto"`) and the ruby hangs from the right. Forced colours drop the copy and show the select's own text. ### ot-progress (progress) - Underneath: native ``, named by a native `` (or `aria-label="Progress"` without one). Leave out `value` (or pass `null`) and it is indeterminate. - Anatomy: `.ot-progress` (`data-variant`, `data-state="loading|complete|indeterminate"`) holding `.ot-progress-label`, the variant's figure (`aria-hidden`), and ``. One number, `--ot-progress-p` (0–1, a registered property), is eased at andante, so the fill, the numeral and the ink glide together. - The label keeps the action's name: "Uploading 12 files", then "Uploaded 12 files". It carries no full stop; every variant ends the same way: when it's done, a full stop lands (spiccato). - `hairline` (default): a line fills in ink toward a ring, and the percentage, `.ot-progress-value`, is set as a large italic numeral that ticks through every number on its way (a CSS counter on the eased value, rounded down, so it never says 100 early). Done, the ring fills into a full stop. - `sentence`: the words are the bar. The label is set large and inks in from pencil, in reading order, with a soft wet edge, sliced across lines so a wrapped sentence inks line after line. Yours (italic) inks in with it. Done, a full stop drops onto the baseline. The native bar is visually hidden. - `count`: for things you can count. A `ot-fraction` (count of total) rolls as each item lands, and `.ot-progress-units` shows one ring per item, like days on the calendar: done is a dot (`data-done`, spiccato pop), the one under way an ink ring (`data-now`), the rest pencil rings. Up to 100 rings; past that each ring stands for a share. Screen readers hear "4 of 8" (`aria-valuetext`). - `parentheses`: from 20(25). The label stands in the middle of the measure between two thin parentheses (`.ot-progress-paren`, weight 100), and the work still to do is the silence inside them. Two `.ot-progress-rest` spacers share the free space by (1 − p) (`flex-grow`, fed by the eased number), so as the work goes the parentheses close on the words from both ends; done, they hold them and the full stop lands inside. Flex, so right to left mirrors, and the glyphs mirror themselves. The native bar is visually hidden. - `tally`: how a hand counts. A `ot-fraction` as in count, and `.ot-progress-tally`: one stroke per item in gates of five (``), four standing and the fifth crossing them, so the count reads in fives at a glance. To come, a stroke is a pencil hairline; as its item lands, ink draws down it (the fifth, across it); the next one waits in ink (`data-now`). Done, a dot lands after the last gate. Up to 100 strokes. Screen readers hear "7 of 12". - Indeterminate: the number stands back and a stroke reads along, only while it runs: a segment passes along the line, a band of ink passes through the words, the rings and the strokes ink in turn, and the parentheses listen, drawing a little way in and back. Reduced motion: no pass, a still rule, the parentheses at the ends. Right to left: the line fills and the words ink from the right; the gates mirror. ### ot-timer (timer) - Underneath: native buttons plus a hook. - Anatomy: `
` holding `.ot-timer-face` (`aria-hidden`, one `ot-ring` from radial-chart with its dot at the arc's start), `.ot-timer-read` (`.ot-timer-time` with `role="timer"`, holding the aria-hidden `.ot-timer-figures` and the time in words in a `.ot-sr`; then `.ot-timer-words`: `.ot-timer-label` and `.ot-timer-note`), `.ot-timer-actions` (two bracket `ot-btn`s) and a polite live region (`.ot-sr`). - SPECTRA's huge figures against tiny print, inside the calendar's ring. The time is set in tabular figures at weight 200, as large as the ring allows (fewer figures set larger, by `--ot-timer-chars`): mm:ss, or h:mm:ss from an hour. Under it the label and one line of small print in pencil: the length when ready, "Ends 14:35" while it runs, Paused, Done. - ring (the default): the ring is the time left. It starts full with the accent dot at the top; as the time goes the dot runs clockwise like a clock's hand and the arc behind it empties, so what is left always runs from the dot on round to the top. - horizon: the Eclipse. A half ring stands on a horizon; the dot crosses it from the start of the line to its end like the sun, and what's left of the arc is the day still to go. The time stands on the line, its words under it. Right to left, the sun crosses the other way. - It counts only because the person pressed Start. It follows the wall clock (a deadline, checked four times a second and again on coming back to the tab), so a hidden tab never falls behind. The arc is drawn from the clock every frame; the figures change once a second, each changed figure turning over downward like a counter's wheel (`roll`), the units first and the carry one arpeggio behind. Paused, the time steps back to pencil. Done, the ring is empty, the dot stands at the top and a full stop lands after 00:00 (spiccato); `onComplete` is called once. - The presses: Start, then Pause and Resume in the same place, and Start again when done; Reset (disabled when ready) sweeps the ring back to full at andante. The two stand either side of the centre line, so a changed name never moves the other. - Screen readers hear it politely and never every second: on each press ("Started, 25 minutes left."), every five minutes, each of the last five, at thirty seconds, and "Time is up." The time can be read on demand from the timer role. Keyboard: native buttons. Reduced motion: the arc steps once a second and the figures change without turning. - `defaultElapsed` opens a session picked up again, paused. `data-force="running | paused | done"` pins a state for the docs without counting. ### ot-toast (toast) - Underneath: hook: a tiny store and a ``. - Anatomy: `.ot-toaster` (`aria-live="polite"`, fixed bottom left), holding `.ot-toast` elements. Each is a sentence, `svg.ot-toast-timer` (a fermata: arc `pathLength="1"` plus an accent dot) hung up against its full stop, the way the sign is written over the note it holds, and an optional bracket action. - The fermata's arc empties over `--life`. Pointing at the toast or focusing it holds the pause, which is literally what a fermata means. At most three toasts show at once. The toast rises, then its sentence is written in from the left. It leaves with `data-leaving`: it sinks and fades, then its height closes so the toasts above settle down into the space. - Yours: the item's name inside the sentence, e.g. "Archived *Spring notes*." - `variant` sits on the Toaster (`data-variant`); each keeps the fermata as its clock, unseen, and pointing still holds the stay. `footnote`: the book's note at the foot of the page. A short ink rule draws in over the first note, and each note carries its number (`.ot-toast-n`) hung in the margin so the sentences keep one edge under the rule. Numbers count up while notes stand and start again at 1 on an empty page; only the newest takes the accent, the rest are pencil. One frame holds the whole foot, not one per note. `dateline`: the frame row of a poster, each toast in its frame holding a sentence, a hairline and the time it happened (`time.ot-toast-time`, the reader's own clock). The hairline (`.ot-toast-rule`) runs out toward the time while the toast stays. Right to left, the rule runs out the other way and the sentence writes in from the right. When a page mounts a second ``, the one mounted last shows the toasts and the others fall silent, so nothing is read out twice. ### ot-dialog (dialog) - Underneath: native `` with `showModal()`, plus a hook. - Anatomy: `` holding ``, the `.ot-dialog-title` question, `.ot-dialog-body`, then `.ot-dialog-actions` with a bracket (safe, `autofocus`) and a statement (the action). - It's set like a poster: corner marks instead of a box (`ot-corners`), an `ot-meta` row of facts along the top (`.ot-dialog-meta`), and the question set large, with the item as yours ("Delete *Spring notes*?"). The backdrop is paper at 86% with a blur. Opening is one short phrase: the corners open out into place, the meta rule draws from the left, and the question breathes out from weight 500 and width 88%. - Keyboard: focus goes to the safe answer; Escape closes; a click outside closes. Smooth scrolling pauses while it's open. - `variant` on DialogContent. `reply` (after "It has to be design."): the question is ours, heavy (800) and narrow (width 72%); the answers are yours, bare `DialogClose` buttons set large in the italic. The answer you point at, or that holds focus, inks and takes a full stop in the accent (`content: "." / ""`, so it isn't read out); pointing at one takes the stop from the other, so only one is ever in view. Opening focuses the safe answer, so it opens with its stop. `ruled` (after "Less is more."): a grid of ink hairlines to the dialog's edges. The meta's two facts go to the top corners; the question is set at `--ot-ff` in the left cell, each of its lines standing on a hairline that draws across from the start as it opens; the detail sits ragged on the far side, set to the end; the answers take the cells below, the safe one at the start, the action at the far end. Below 40rem the grid folds to one column. - Alert dialog: for what can't be undone, `role="alertdialog" closedby="closerequest"` with `aria-describedby` on the body. It closes only with Escape or an answer, never a stray click. Any dialog can carry a form (the specimen's rename); `[data-close]` buttons close it without submitting. ### ot-empty (empty) - Underneath: native. - Anatomy: `.ot-empty` (`data-variant="arc | tacet | blank"`) holding an optional `.ot-empty-figure` (aria-hidden, its text in a ``), then `.ot-empty-title`, one sentence of direction, and one action. - An invitation to act, not a mood. Every variant answers the person reaching for the action (pointing at or focusing it; `data-force="hover"` on the button pins it for the docs). - `arc` (default): the zero is thin, wide and cropped to its top half, so "nothing" reads as the fermata's arc. Reaching for the action raises the arc a little. - `tacet`: what a score prints on a part with nothing to play, "it is silent". The figure is the term (pass `Tacet`), set in the expression italic, as musical terms are, at the movement-title size. Reaching for the action is your entry, so the word dies away (morendo): it fades to the rule and its letters loosen a little. - `blank`: the printer's page left blank on purpose. The words spread to the corners, as the posters' labels do: what is missing at the top start, what to do at the top end in a narrow ragged column, the action at the foot's end. The middle is silence with one small pencil line in it (the figure: "This space is left blank on purpose."). Reaching for the action, that line pales and loosens: it makes room. The region is at least `min(34rem, 80vh)` tall; right to left, the corners mirror. ### ot-tabs (tabs) - Underneath: Radix Tabs. - Anatomy: `
` (Radix Root) holding `
`, then ``. - A dotted underline. On hover or focus, the highlighter marks the term, a dot anchors the leader line, the line draws down, and the ink pill holding the note spreads from the line's tip (`clip-path: circle()`). Leaving plays the same four steps in reverse order. - Keyboard: focus shows it, and Escape dismisses it. - `variant` (`data-variant`, none for leader): `leader`, `ossia`, `expand` or `revise`. - ossia: the score's ossia, a small bar printed over the staff, and the interlinear gloss. The note is always there: a few words at `pp` in pencil in the line space above the term, starting where the term starts and free to run past its end. The term's line opens to hold it (the term is an inline block with the note's height above it), and the term is in ink so the two read as a pair. Pointing inks the note. It is plain text in the page, read as "term (note)" (the parentheses are for screen readers only). Nothing to focus. - expand: an abbreviation that opens into its words. The term's letters are found in the note in order (the start of a word, or a capital inside one: *H*yper*T*ext), and pressing it moves them apart while each word grows out of its initial (inline size to auto, moderato, exhale); a word with no initial ("and") grows whole. The initials stay in ink and the rest arrives in graphite, so the abbreviation stays readable inside its long form; the dotted line goes. It is a span with `role="button"`, `aria-expanded` and `dir="auto"`, because a native button can't break across lines and the words must; the visible letters are aria-hidden, the name is the abbreviation and the description the note. Enter or Space toggles, Escape closes. If the letters can't be found, it falls back to leader. - revise: the editor's correction, after the Basquiat sheet's struck headline and the typed corrections of the Weingart letter (a caret swap, done by hand). `children` is the word in the text and `note` the word that replaces it (a word or a short phrase; it doesn't break). At rest the word is dotted like the others. Pointing sketches a hairline strike in pencil, as the checkbox does. Pressing strikes it in ink at `--ot-stroke`, the pen running a little past the word (0.1em, short of the word before), and the struck word steps back to pencil; then the replacement is written in after it in the italic, its box opening from the start (inline size to auto, moderato, exhale) so the sentence makes room as a pen moves. Pressing again, or Escape, lifts both. It is a span with `role="button"` and `aria-expanded`, so a struck phrase can wrap; the drawn words are aria-hidden and a `.ot-sr` reads the term, or once pressed `` the term and `` the replacement. The space before the replacement is a real one, so where it wraps the space falls away at the break. Right to left the strike draws from the right. Forced colours: a plain line-through. ### ot-toggle (toggle) - Underneath: Radix Toggle. - Anatomy: `