@mitcsutt/kiln-ui 0.1.0

package/skills/custom-theme/references/tokens.md

@@ -0,0 +1,199 @@
+<!-- Generated from the Kiln docs by apps/docs/src/skills. Edit the docs pages, then run `pnpm generate:skills`. -->
+
+# Tokens
+
+> The three tiers of design tokens, the contract every theme fills in, and the axes that scope them.
+
+Source: https://kiln.mitchellsutton.com/docs/ui/foundations/tokens
+
+Everything visual in Kiln is a CSS custom property. A component never contains a colour, a size or a duration: it reads a token, and the theme on the page decides what the token is. That's why one `<Button>` can look like four different products.
+
+## Three tiers
+
+Components read tiers 2 and 3 only.
+
+| Tier            | Where it's set                               | Examples                                                                                       |
+| --------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| 1. Theme inputs | a theme stylesheet                           | `--density`, `--type-base`, `--type-ratio`, `--motion-scale`, font stacks, OKLCH colour values |
+| 2. Semantic     | derived from the inputs, or set by the theme | `--space-5`, `--text-lg`, `--color-ink`, `--radius-field`, `--dur-2`                           |
+| 3. Component    | read inside a component's CSS, with fallback | `var(--button-radius, var(--radius-action))`                                                   |
+
+A theme sets its inputs and its semantic colours, radii and type roles. The scales (space, type sizes, control heights, durations) are formulas over the inputs, so a theme never sets them directly: Ledger sets `--density: 0.86` and every space step, control height and gap gets denser.
+
+## The scales
+
+These come from formulas, and every theme gets them.
+
+| Family        | Tokens                                                                | How it's derived                                                                     |
+| ------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| Space         | `--space-1` … `--space-12`                                            | 4 8 12 16 24 32 48 64 96 144 192 256px × `--density`. Props take the step: `gap={5}` |
+| Controls      | `--control-sm`, `--control-md`, `--control-lg`                        | 32, 40, 48px × `--density`                                                           |
+| Type          | `--text-2xs` … `--text-3xl`, `--text-display-sm/md/lg`                | `--type-base × --type-ratio^n`. Display steps are fluid                              |
+| Width         | `--width-narrow/text/content/wide`, `--gutter`                        | 32, 42, 68, 84rem. The gutter is fluid                                               |
+| Motion        | `--dur-1`, `--dur-2`, `--dur-3`                                       | 110, 190, 340ms × `--motion-scale`, and 1ms under reduced motion                     |
+| Layers        | `--z-raised`, `--z-sticky`, `--z-overlay`, `--z-popover`, `--z-toast` | Fixed                                                                                |
+| Control edges | `--color-line-control`                                                | Mixed from `--color-line-strong` and ink, at least 3:1 against its surroundings      |
+| Breakpoints   | `sm` 40em, `md` 48em, `lg` 64em, `xl` 80em                            | Mobile-first. Media queries can't read custom properties, so these are fixed         |
+
+[Spacing](https://kiln.mitchellsutton.com/docs/ui/foundations/spacing), [Type](./type.md) and [Motion](./motion.md) show each scale measured in the theme you're looking at.
+
+## The theme contract
+
+Every theme sets every one of these tokens. Together they're Kiln's public theming API, so they're a semver surface: renaming or removing one is a breaking change. The values below are Paper's, read from `paper.css` when these docs are built. kiln-ui's test suite fails if Paper and this list ever disagree.
+
+Type roles:
+
+| Token | Paper |
+| --- | --- |
+| `--font-display` | `'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif` |
+| `--font-text` | `'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif` |
+| `--font-prose` | `'Newsreader', 'Iowan Old Style', Georgia, serif` |
+| `--font-mono` | `'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace` |
+| `--font-numeric` | `'Newsreader', 'Iowan Old Style', Georgia, serif` |
+| `--type-base` | `1rem` |
+| `--display-scale` | `1` |
+| `--type-ratio` | `1.25` |
+| `--display-weight` | `640` |
+| `--display-style` | `normal` |
+| `--display-stretch` | `100%` |
+| `--display-transform` | `none` |
+| `--display-tracking` | `-0.04em` |
+| `--display-opsz` | `72` |
+| `--heading-font` | `var(--font-display)` |
+| `--heading-weight` | `620` |
+| `--heading-tracking` | `-0.015em` |
+| `--heading-transform` | `none` |
+| `--label-weight` | `560` |
+| `--label-tracking` | `0` |
+| `--label-transform` | `none` |
+| `--numeric-stretch` | `100%` |
+| `--mono-stretch` | `87.5%` |
+| `--leading-tight` | `1` |
+| `--leading-snug` | `1.2` |
+| `--leading-body` | `1.55` |
+| `--prose-size` | `1.125rem` |
+| `--prose-leading` | `1.6` |
+
+Structure & temperament:
+
+| Token | Paper |
+| --- | --- |
+| `--density` | `1` |
+| `--motion-scale` | `1` |
+| `--ease-out` | `cubic-bezier(0.25, 1, 0.5, 1)` |
+| `--ease-in-out` | `cubic-bezier(0.65, 0, 0.35, 1)` |
+| `--ease-spring` | `var(--ease-out)` |
+| `--icon-stroke` | `1.5` |
+| `--border-width` | `1px` |
+| `--border-width-strong` | `2px` |
+| `--radius-action` | `0.375rem` |
+| `--radius-field` | `0.375rem` |
+| `--radius-surface` | `0.5rem` |
+| `--radius-media` | `0.25rem` |
+| `--radius-chip` | `0.375rem` |
+| `--radius-avatar` | `50%` |
+
+Colour:
+
+| Token | Paper |
+| --- | --- |
+| `--color-canvas` | `light-dark(oklch(0.976 0.004 85), oklch(0.188 0.005 85))` |
+| `--color-surface` | `light-dark(oklch(0.993 0.002 85), oklch(0.215 0.006 85))` |
+| `--color-surface-sunken` | `light-dark(oklch(0.955 0.005 85), oklch(0.165 0.005 85))` |
+| `--color-surface-raised` | `light-dark(oklch(0.997 0.002 85), oklch(0.245 0.006 85))` |
+| `--color-surface-inverse` | `light-dark(oklch(0.235 0.008 85), oklch(0.93 0.005 85))` |
+| `--color-ink` | `light-dark(oklch(0.215 0.008 85), oklch(0.935 0.005 85))` |
+| `--color-ink-muted` | `light-dark(oklch(0.435 0.008 85), oklch(0.755 0.006 85))` |
+| `--color-ink-subtle` | `light-dark(oklch(0.515 0.008 85), oklch(0.64 0.006 85))` |
+| `--color-ink-inverse` | `light-dark(oklch(0.965 0.004 85), oklch(0.2 0.008 85))` |
+| `--color-line` | `light-dark(oklch(0.9 0.005 85), oklch(0.3 0.006 85))` |
+| `--color-line-strong` | `light-dark(oklch(0.8 0.006 85), oklch(0.4 0.007 85))` |
+| `--color-accent` | `light-dark(oklch(0.25 0.008 85), oklch(0.92 0.005 85))` |
+| `--color-accent-hover` | `light-dark(oklch(0.34 0.008 85), oklch(0.84 0.006 85))` |
+| `--color-accent-ink` | `light-dark(oklch(0.975 0.004 85), oklch(0.2 0.008 85))` |
+| `--color-accent-text` | `light-dark(oklch(0.25 0.008 85), oklch(0.92 0.005 85))` |
+| `--color-accent-soft` | `light-dark(oklch(0.925 0.006 85), oklch(0.285 0.007 85))` |
+| `--color-highlight` | `light-dark(oklch(0.935 0.035 228), oklch(0.315 0.045 235))` |
+| `--color-highlight-ink` | `var(--color-ink)` |
+| `--color-focus` | `var(--color-ink)` |
+| `--color-selection` | `light-dark(oklch(0.88 0.06 228), oklch(0.42 0.07 235))` |
+| `--color-scrim` | `light-dark(oklch(0.22 0.008 85 / 0.4), oklch(0.07 0.005 85 / 0.66))` |
+| `--tone-positive` | `light-dark(oklch(0.52 0.11 155), oklch(0.72 0.12 158))` |
+| `--tone-positive-soft` | `light-dark(oklch(0.94 0.035 155), oklch(0.28 0.045 158))` |
+| `--tone-positive-text` | `light-dark(oklch(0.45 0.1 155), oklch(0.78 0.11 158))` |
+| `--tone-positive-ink` | `light-dark(oklch(0.985 0.01 155), oklch(0.18 0.03 158))` |
+| `--tone-caution` | `light-dark(oklch(0.74 0.14 78), oklch(0.8 0.13 85))` |
+| `--tone-caution-soft` | `light-dark(oklch(0.95 0.05 88), oklch(0.3 0.05 80))` |
+| `--tone-caution-text` | `light-dark(oklch(0.5 0.1 70), oklch(0.84 0.11 88))` |
+| `--tone-caution-ink` | `light-dark(oklch(0.22 0.04 70), oklch(0.2 0.04 80))` |
+| `--tone-critical` | `light-dark(oklch(0.54 0.19 25), oklch(0.68 0.17 24))` |
+| `--tone-critical-soft` | `light-dark(oklch(0.94 0.035 22), oklch(0.29 0.06 24))` |
+| `--tone-critical-text` | `light-dark(oklch(0.5 0.18 25), oklch(0.76 0.14 24))` |
+| `--tone-critical-ink` | `light-dark(oklch(0.985 0.01 22), oklch(0.18 0.03 24))` |
+| `--tone-info` | `light-dark(oklch(0.52 0.09 240), oklch(0.72 0.09 238))` |
+| `--tone-info-soft` | `light-dark(oklch(0.94 0.025 240), oklch(0.28 0.04 240))` |
+| `--tone-info-text` | `light-dark(oklch(0.46 0.09 240), oklch(0.78 0.08 238))` |
+| `--tone-info-ink` | `light-dark(oklch(0.985 0.01 240), oklch(0.18 0.03 240))` |
+| `--color-cat-1` | `light-dark(oklch(0.8 0.06 228), oklch(0.7 0.07 228))` |
+| `--color-cat-2` | `light-dark(oklch(0.8 0.07 160), oklch(0.7 0.08 160))` |
+| `--color-cat-3` | `light-dark(oklch(0.82 0.08 75), oklch(0.72 0.09 75))` |
+| `--color-cat-4` | `light-dark(oklch(0.79 0.07 20), oklch(0.69 0.08 20))` |
+| `--color-cat-5` | `light-dark(oklch(0.8 0.05 300), oklch(0.7 0.06 300))` |
+| `--color-cat-6` | `light-dark(oklch(0.82 0.06 125), oklch(0.72 0.07 125))` |
+| `--color-cat-7` | `light-dark(oklch(0.8 0.05 195), oklch(0.7 0.06 195))` |
+| `--color-cat-8` | `light-dark(oklch(0.8 0.01 85), oklch(0.7 0.01 85))` |
+| `--color-cat-ink` | `oklch(0.21 0.008 85)` |
+
+Edges & depth:
+
+| Token | Paper |
+| --- | --- |
+| `--shadow-surface` | `none` |
+| `--active-shift` | `0px` |
+| `--shadow-active` | `none` |
+| `--shadow-float` | `0 1px 2px oklch(0.2 0.008 85 / 0.1), 0 8px 24px -6px oklch(0.2 0.008 85 / 0.18)` |
+| `--shadow-overlay` | `0 2px 4px oklch(0.15 0.008 85 / 0.12), 0 20px 56px -12px oklch(0.15 0.008 85 / 0.32)` |
+| `--canvas-image` | `none` |
+
+## Optional theme tokens
+
+Some themes set a few more: Fiesta's inks for text on its gold rows, Ledger's table rule. Every theme scope resets these first, so a theme nested inside another falls back to the component's default instead of inheriting its parent's value. Set them only when your theme's idea needs them:
+
+`--canvas-image-size`, `--control-checked-border`, `--highlight-accent-text`, `--highlight-tone-caution-text`, `--highlight-tone-critical-text`, `--highlight-tone-info-text`, `--highlight-tone-positive-text`, `--marquee-edge`, `--numeral-scale`, `--numeral-weight`, `--section-divider-color`, `--stat-fit`, `--table-foot-rule`, `--table-head-font`
+
+## Component tokens
+
+A component exposes a few tokens of its own where a theme might reasonably differ, always read with a fallback to a semantic token: `--button-radius`, `--card-radius`, `--link-thickness`, `--prose-measure`, `--code-bg`, `--app-shell-sidebar-width`. Each component's CSS lists its tokens at the top. Set one in a theme, or on a single element, when one component needs to step away from the rest.
+
+## Shape and depth
+
+Radii are roles, not one global roundness. A theme can make actions pills and surfaces square.
+
+
+One edge treatment per element: a border, a shadow or a change of fill, never all three. Static structure uses hairlines. Soft shadows are only for things that float, like popovers and dialogs. Fiesta's hard offset is its one deliberate exception: it's the print misregistration, and it _is_ the edge.
+
+
+## Axes and scoping
+
+Three attributes select tokens, and they're independent of each other.
+
+```html
+<html data-theme="monograph" data-mode="dark">
+  <div data-theme="fiesta">a Fiesta panel that keeps the page's dark mode</div>
+  <div data-density="compact">a denser table</div>
+</html>
+```
+
+- `data-theme` is `paper`, `monograph`, `ledger`, `fiesta`, or the name of a theme you wrote. No attribute means Paper.
+- `data-mode` is `light`, `dark` or `system`. It drives `color-scheme`, which drives every `light-dark()` colour. Leave it off nested scopes and they inherit the page's mode.
+- `data-density` is `compact` or `comfortable`, and multiplies the theme's own density.
+
+The derived scales are re-declared on every `[data-theme]` and `[data-density]`, so a nested scope recomputes from its own inputs rather than inheriting its parent's already-resolved sizes. In React, `ThemeProvider` sets the attributes on `<html>`, and `ThemeScope` sets them on a subtree.
+
+## Inverted bands
+
+`Section surface="inverse"` (or `"accent"`) and `Box surface="inverse"` re-point the colour roles for everything inside: ink, muted ink, lines, focus and accent text. Any component placed on a dark band stays legible without extra props.
+
+## Cascade layers
+
+Kiln declares `@layer kiln.reset, kiln.tokens, kiln.themes;` at the top of every stylesheet, so the order holds whichever file loads first. Layers have the lowest priority, so your own CSS always wins over Kiln's globals. Component CSS is deliberately _not_ layered: a layered rule loses to any unlayered rule, so a typical app reset (`button { color: inherit }`) would otherwise break every button. A single-class component selector beats an element reset, and a `className` you pass wins on source order.

package/skills/custom-theme/references/type.md

@@ -0,0 +1,61 @@
+<!-- Generated from the Kiln docs by apps/docs/src/skills. Edit the docs pages, then run `pnpm generate:skills`. -->
+
+# Type
+
+> Type roles a theme fills in, a modular scale with big display steps, and figures that line up.
+
+Source: https://kiln.mitchellsutton.com/docs/ui/foundations/type
+
+A theme picks at most two families (plus a mono where it needs one) and assigns them to roles. Components ask for a role, so a heading is set in the theme's heading face at the theme's heading weight, whatever the theme is.
+
+## Roles
+
+| Role    | Tokens                                                                                                                   | Used by                                    |
+| ------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
+| Display | `--font-display`, `--display-weight`, `--display-tracking`, `--display-stretch`, `--display-transform`, `--display-opsz` | `Heading` at display sizes, `Stat` heroes  |
+| Heading | `--heading-font`, `--heading-weight`, `--heading-tracking`, `--heading-transform`                                        | `Heading`, `SectionHeader`, card titles    |
+| Text    | `--font-text`, `--leading-body`                                                                                          | `Text`, controls, labels                   |
+| Label   | `--label-weight`, `--label-tracking`, `--label-transform`                                                                | field labels, buttons, tabs                |
+| Prose   | `--font-prose`, `--prose-size`, `--prose-leading`                                                                        | `Prose` (these paragraphs)                 |
+| Numeric | `--font-numeric`, `--numeric-stretch`                                                                                    | `Numeral`, `Amount`, `Stat`, numeric cells |
+| Mono    | `--font-mono`, `--mono-stretch`                                                                                          | `Code`, `CodeBlock`, `Kbd`                 |
+
+Fiesta sets `--heading-transform: uppercase` for poster headlines; Ledger sets its numerals in condensed Martian Mono so a column of figures reads like receipt tape. Neither needed a component change.
+
+## The scale
+
+Sizes are a modular scale: `--type-base × --type-ratio^n`. The display steps are fluid and jump hard, so the largest is at least five times body size. Display tracking tightens as size grows. Here's the scale in the current theme:
+
+
+`Heading` and `Text` take these steps as `size`: `<Heading size="display-sm">`, `<Text size="sm">`. Both accept a responsive value, `size={{ base: 'xl', md: '2xl' }}`.
+
+## Figures
+
+Every number that aligns or updates uses tabular, lining figures: counts, money, tables, dates. `Numeral` and `Amount` do it for you, and so does `Table.Cell numeric`.
+
+```tsx
+;<>
+  <Amount value={-1240.5} currency="GBP" accounting />
+  <Numeral value={0.284} format={{ style: 'percent', maximumFractionDigits: 1 }} />
+</>
+```
+
+## Rules
+
+- Keep prose to about 70 characters a line (`width="text"`, or `Prose`, which sets its own measure).
+- Headings balance their lines and paragraphs avoid orphans; the reset does both.
+- Don't accent one word of a headline in italic or colour. Don't put a tracked all-caps eyebrow over every section. Don't number things `01 / 02 / 03` unless they're a sequence. Don't use monospace as decoration.
+
+## Fonts
+
+Kiln self-hosts every face its themes use, so there's nothing to set up:
+
+| Face                | Used by                              | Ships in            |
+| ------------------- | ------------------------------------ | ------------------- |
+| Schibsted Grotesk   | Paper, Monograph, Ledger             | `styles.css`        |
+| Newsreader          | Paper (prose and figures), Monograph | `styles.css`        |
+| Martian Mono        | code everywhere, Ledger's figures    | `styles.css`        |
+| Big Shoulders       | Fiesta display                       | `themes/fiesta.css` |
+| Bricolage Grotesque | Fiesta text                          | `themes/fiesta.css` |
+
+Browsers download a face only when something renders in it, so a declared face you never use costs nothing. All five are licensed under the SIL Open Font License 1.1, and the licences ship in the package at `dist/assets/fonts/licenses/`. A theme of your own loads its own fonts: see [Theming](../SKILL.md#5-load-its-fonts).

package/skills/design-rules/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: design-rules
+description: "Use when designing or reviewing a screen, component, theme, example or copy built with @mitcsutt/kiln-ui, to avoid generic AI-generated UI: one accent, tinted neutrals, no gradients or glow, two type families, left-aligned asymmetric layout, not everything a card, one edge treatment, motion only in answer to an action, and specific copy."
+metadata:
+  purpose: Kiln's binding principles and anti-slop rules, as a checklist for anything built with it.
+  type: core
+  library: "@mitcsutt/kiln-ui"
+sources:
+  - mitcsutt/kiln:DESIGN.md
+---
+
+<!-- Generated from the Kiln docs by apps/docs/src/skills. Edit the docs pages, then run `pnpm generate:skills`. -->
+
+# Kiln design rules
+
+Kiln's binding principles and anti-slop rules, as a checklist for anything built with it.
+
+These rules come from [DESIGN.md](https://github.com/mitcsutt/kiln/blob/main/DESIGN.md), which is binding for everything in the Kiln repository. They apply just as well to screens you build with Kiln: the components and tokens make most of them the default, and the rest are a review checklist.
+
+## Principles
+
+1. **Themes are data, components are structure.** A component never knows which theme it is in. Everything visual is a token; a new theme is one CSS file and zero component changes.
+2. **One idea per theme, drawn from its subject.** Paper is a typeset proof on good stock. Monograph is a scholar's monograph read under a desk lamp. Ledger is an accountant's ruled book. Fiesta is a screen-printed festival poster. If a choice can't be justified by the idea, it doesn't ship.
+3. **Props, not styles.** Consumers compose layout and intent through typed props (`gap={5}`, `tone="critical"`, `width="text"`). No utility classes, no inline style soup, no raw px/hex/ms at call sites. `className` exists as an escape hatch, not a workflow.
+4. **Durable by default.** Every component forwards refs, spreads native props, works with React 18 and 19, is keyboard- and screen-reader-complete, respects `prefers-reduced-motion`, and renders on the server.
+5. **Specific beats safe.** The median choice is the wrong choice (see [Not AI slop](#not-ai-slop)).
+
+## Not AI slop
+
+Generated UI converges on the statistical median: indigo buttons, Inter, gradient text, three rounded cards with an icon in a tinted circle, fade-up on scroll. The "tasteful" escapes have converged too: cream + serif + terracotta; near-black + one acid accent; hairline broadsheet layouts; mono ALL-CAPS eyebrows over every section. Distinctive systems share one trait: **a single idea from the subject matter, applied consistently, with everything else quiet.** These rules are enforced by the tokens and components wherever possible; the rest are review checklist items.
+
+### Colour
+
+- Authored in **OKLCH**. Neutrals are **tinted** (chroma 0.004–0.02 toward the theme's hue). Never `#000`/`#fff` surfaces, never stock slate/zinc.
+- **One accent, ~5–10% of pixels**: the primary action, the current item, live state, key data. A second hue only when it carries meaning (`--color-highlight` = "you" / selected; tones = status).
+- **No gradients** unless they encode data. No gradient text. No glow halos in dark mode.
+- No indigo/violet as a primary. No cream `#F4F1EA` + terracotta `#D97757`.
+
+### Type
+
+- **Two families max per theme** (+ a mono for code/figures where the theme needs it), clearly distinct, one with real character.
+- **Big contrast**: the largest display step is ≥ 5× body. Display tracking tightens with size (−0.02 to −0.04em); line-height drops to ~0.9–1.05.
+- **`tabular-nums` on every number that aligns or updates**: counts, money, tables, dates. `<Numeral>`/`<Amount>` do this for you.
+- Prose measure ≤ 70ch (`width="text"`). `text-wrap: balance` on headings, `pretty` on paragraphs (the reset does it).
+- **Banned patterns:** accenting one word of a headline in italic/colour; a tracked ALL-CAPS eyebrow over every section; `01 / 02 / 03` numbering on things that aren't a sequence; monospace used as decoration for small labels.
+
+### Layout
+
+- **Left-aligned by default.** Centre is an exception (empty states, a lone CTA).
+- **Asymmetric splits** (`<Split ratio="5/7">`), a hang column for labels, at least one element per page that breaks the column.
+- **Vary section rhythm.** The space scale is non-linear (4 8 12 16 24 32 48 64 96 144…) and adjacent `<Section>`s should not use the same `space`.
+- **Not everything is a card.** Prefer lists, tables, rules and whitespace. A card needs a reason: it's interactive, draggable, or a self-contained object.
+- The hero is the subject's most characteristic thing: the open invoices, the release board, today's orders. Not a stat row with a gradient.
+
+### Components & depth
+
+- **Radii are roles**, not a global roundness: `--radius-action`, `--radius-field`, `--radius-surface`, `--radius-media`, `--radius-chip`, `--radius-avatar`. Nested radii shrink (inner = outer − padding).
+- **One edge treatment per element**: a border _or_ a shadow _or_ a fill change. Static structure uses hairlines; soft shadows are only for things that float (popover, menu, dialog). Fiesta's hard offset is its one deliberate exception: it's the print misregistration, and it _is_ the edge.
+- **Icons**: the library ships ~20 glyphs on a 20px grid with a themed stroke. At most one icon per row; never an icon in a tinted chip; never emoji as UI.
+- **No left-border-accent callouts.** Alerts are a neutral hairline frame; the tone lives only in the glyph and a short tab on the top edge (`variant="soft"` for a tinted box when it must shout).
+- **Empty states** mark their frame with printer's crop marks, not a dashed box.
+- **Focus is neutral** (`--color-focus` = ink) and always visible on `:focus-visible`. Focus must never look like validation; only error/warning/success tint a field.
+
+### Motion
+
+- Motion answers an action or shows a state change (count updated, row expanded, panel opened). **No fade-up-on-scroll, no hover-scale on static cards, no parallax.**
+- Durations and easings are tokens (`--dur-1/2/3`, `--ease-out`, `--ease-spring`) and collapse to ~0 under `prefers-reduced-motion`.
+
+### Copy (for stories, docs and examples)
+
+- Sentence case. Specific nouns, active verbs: "Send invoice", "Export CSV", "Read the release notes". Never "Get started →", "Learn more", "Elevate", "Seamless", "Unleash".
+- Realistic content in stories and docs: specific names, amounts, places and projects. It's invented, never copied from a real product, and never lorem ipsum.
+
+**Review question for every screen:** _"Would I produce this for any similar page?"_ If yes, change something until the answer is no. Spend boldness in one place; remove one accessory before shipping.