@mitcsutt/kiln-ui 0.2.1 → 0.3.0

package/skills/layout-composition/references/container.md

@@ -8,6 +8,18 @@ Source: https://kiln.mitchellsutton.com/docs/ui/layout/container
 
 `Container` sets a maximum width and centres its content. The gutter sits _outside_ the width, so `width="text"` is a true reading measure at any screen size.
 
+| `width`   | Max width | For                                 |
+| --------- | --------- | ----------------------------------- |
+| `narrow`  | 32rem     | sign-in, short forms, confirmations |
+| `text`    | 42rem     | articles and long reading           |
+| `content` | 68rem     | most pages (the default)            |
+| `wide`    | 84rem     | dashboards and wide tables          |
+| `full`    | 100%      | edge to edge, inside the gutter     |
+
+Pass `gutter={false}` when the parent already pads its content.
+
+The `narrow`, `text` and `content` widths, one above the other.
+
 ```tsx
 import { Container, Stack, Text } from '@mitcsutt/kiln-ui'
 
@@ -26,25 +38,15 @@ export function Usage() {
 }
 ```
 
-| `width`   | Max width | For                                 |
-| --------- | --------- | ----------------------------------- |
-| `narrow`  | 32rem     | sign-in, short forms, confirmations |
-| `text`    | 42rem     | articles and long reading           |
-| `content` | 68rem     | most pages (the default)            |
-| `wide`    | 84rem     | dashboards and wide tables          |
-| `full`    | 100%      | edge to edge, inside the gutter     |
-
-Pass `gutter={false}` when the parent already pads its content.
-
 ## API
 
 `ContainerProps`:
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `width` | `'content' \| 'narrow' \| 'text' \| 'wide' \| 'full'` |  | Maximum content width: `narrow` 32rem · `text` 42rem (prose measure) · `content` 68rem (default) · `wide` 84rem · `full` (no maximum). |
+| `width` | `'content' \| 'narrow' \| 'text' \| 'wide' \| 'full'` | `content` | Maximum content width: `narrow` 32rem · `text` 42rem (prose measure) · `content` 68rem (default) · `wide` 84rem · `full` (no maximum). |
 | `gutter` | `boolean` | `true` | Keep the fluid page gutter on either side. Default `true`. |
-| `as` | `'div' \| 'section' \| 'article' \| 'header' \| 'footer' \| 'main' \| 'nav'` |  |  |
+| `as` | `'div' \| 'section' \| 'article' \| 'header' \| 'footer' \| 'main' \| 'nav'` | `div` |  |
 | `hideBelow` | `'sm' \| 'md' \| 'lg' \| 'xl'` |  | Hide below this breakpoint (e.g. `md` → hidden on phones, shown from 48em). |
 | `hideAbove` | `'sm' \| 'md' \| 'lg' \| 'xl'` |  | Hide from this breakpoint up (e.g. `md` → shown on phones only). |
 

package/skills/layout-composition/references/divider.md

@@ -8,6 +8,8 @@ Source: https://kiln.mitchellsutton.com/docs/ui/layout/divider
 
 `Divider` separates groups. For a rule between every item of a list, use `Stack dividers` instead, which spaces the rules for you.
 
+A labelled divider names the group that follows. `spacing` adds space above and below from the space scale, `strong` uses the stronger line colour, and `decorative` hides the rule from assistive technology when it carries no meaning (it's a `separator` otherwise).
+
 ```tsx
 import { Divider, Inline, Stack, Text } from '@mitcsutt/kiln-ui'
 
@@ -30,8 +32,6 @@ export function Usage() {
 }
 ```
 
-A labelled divider names the group that follows. `spacing` adds space above and below from the space scale, `strong` uses the stronger line colour, and `decorative` hides the rule from assistive technology when it carries no meaning (it's a `separator` otherwise).
-
 ## API
 
 `DividerProps`:
@@ -39,11 +39,11 @@ A labelled divider names the group that follows. `spacing` adds space above and
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `orientation` | `'horizontal' \| 'vertical'` | `horizontal` | Default `horizontal`. A vertical rule stretches to its flex/grid row. |
-| `strong` | `boolean` |  | Heavier rule in `--color-line-strong` at `--border-width-strong`. |
+| `strong` | `boolean` | `false` | Heavier rule in `--color-line-strong` at `--border-width-strong`. |
 | `label` | `ReactNode` |  | Text set into a horizontal rule, e.g. "Earlier this week". It also names the separator. |
 | `labelPosition` | `'start' \| 'center'` | `start` | Where the label sits. Default `start` (left-aligned by default); `center` for a lone break. |
 | `spacing` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12` |  | Margin on both sides of the rule (block axis if horizontal, inline if vertical). |
-| `decorative` | `boolean` |  | Purely visual: hide it from assistive tech. Use when the rule only repeats a boundary that headings or landmarks already convey. |
+| `decorative` | `boolean` | `false` | Purely visual: hide it from assistive tech. Use when the rule only repeats a boundary that headings or landmarks already convey. |
 | `hideBelow` | `'sm' \| 'md' \| 'lg' \| 'xl'` |  | Hide below this breakpoint (e.g. `md` → hidden on phones, shown from 48em). |
 | `hideAbove` | `'sm' \| 'md' \| 'lg' \| 'xl'` |  | Hide from this breakpoint up (e.g. `md` → shown on phones only). |
 

package/skills/layout-composition/references/section.md

@@ -0,0 +1,69 @@
+<!-- Generated from the Kiln docs by apps/docs/src/skills. Edit the docs pages, then run `pnpm generate:skills`. -->
+
+# Section
+
+> A full-bleed band of vertical space, with an optional surface and rules. Put a Container inside it for width.
+
+Source: https://kiln.mitchellsutton.com/docs/ui/layout/section
+
+`Section` is how a page gets its rhythm: each band pads itself top and bottom with a step from the space scale, and can paint a surface across the full width. Width is the `Container`'s job, so a section is almost always `Section` then `Container`.
+
+Vary `space` between neighbours. The scale is non-linear for this reason: a page of `space={8}` everywhere has no rhythm at all.
+
+```tsx
+import { Button, Container, Heading, Section, Stack, Text } from '@mitcsutt/kiln-ui'
+
+export function Usage() {
+  return (
+    <>
+      <Section space={7}>
+        <Container width="text">
+          <Stack gap={3}>
+            <Heading level={3} size="2xl">
+              Ride the coast for less
+            </Heading>
+            <Text tone="muted">An annual pass covers every ferry and bus in the bay.</Text>
+          </Stack>
+        </Container>
+      </Section>
+      <Section space={6} surface="inverse" divider="top">
+        <Container width="text">
+          <Stack gap={4} align="start">
+            <Text>Commuting every day? The pass pays for itself in five weeks.</Text>
+            <Button>Buy an annual pass</Button>
+          </Stack>
+        </Container>
+      </Section>
+    </>
+  )
+}
+```
+
+## Surfaces and bands
+
+`surface` is `canvas`, `surface`, `sunken`, `inverse` or `accent`. On `inverse` and `accent`, the colour roles flip for everything inside, so text, links, focus rings and buttons stay legible with no extra props. `divider` adds a rule at the `top`, `bottom` or `both`.
+
+## API
+
+`SectionProps`:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `space` | `Responsive<Space>` | `8` | Block padding (top and bottom), as a step on the space scale. Responsive. Vary it: adjacent sections should not share the same step. Default `8`. |
+| `surface` | `'accent' \| 'surface' \| 'canvas' \| 'sunken' \| 'inverse'` |  | Full-bleed band colour. Omit to stay transparent on the canvas. `inverse` and `accent` re-point the ink, line and focus colours so children stay legible. |
+| `divider` | `'top' \| 'bottom' \| 'both'` |  | A hairline across the full bleed at the top, bottom or both edges. |
+| `as` | `'div' \| 'section' \| 'article' \| 'aside' \| 'header' \| 'footer'` | `section` |  |
+| `hideBelow` | `'sm' \| 'md' \| 'lg' \| 'xl'` |  | Hide below this breakpoint (e.g. `md` → hidden on phones, shown from 48em). |
+| `hideAbove` | `'sm' \| 'md' \| 'lg' \| 'xl'` |  | Hide from this breakpoint up (e.g. `md` → shown on phones only). |
+
+Also accepts every prop of `HTMLAttributes<HTMLElement>`.
+
+### Component tokens
+
+Set these in a theme, or on one element, to change this component without touching the rest.
+
+| Token | Default and use |
+| --- | --- |
+| `--section-fill` | / --section-on   (read-only) the band's fill and ink on inverse/accent |
+| `--section-space-default` | block padding when `space` is unset (default var(--space-8)) |
+| `--section-divider-color` | hairline colour for `divider` (default var(--color-line)) |

package/skills/layout-composition/references/visually-hidden.md

@@ -8,6 +8,8 @@ Source: https://kiln.mitchellsutton.com/docs/ui/layout/visually-hidden
 
 `VisuallyHidden` keeps text in the accessibility tree while hiding it from view: the rest of a sentence a glyph implies, a heading the layout already makes obvious, a table caption.
 
+Screen readers announce the rating above as "4.2 out of 5, from 318 passenger reviews". `as` renders it as another element, such as a heading (`as="h2"`). `focusable` makes a hidden link appear when it receives focus, which is how a skip link works.
+
 ```tsx
 import { Inline, Text, VisuallyHidden } from '@mitcsutt/kiln-ui'
 
@@ -26,15 +28,13 @@ export function Usage() {
 }
 ```
 
-Screen readers announce the rating above as "4.2 out of 5, from 318 passenger reviews". `as` renders it as another element, such as a heading (`as="h2"`). `focusable` makes a hidden link appear when it receives focus, which is how a skip link works.
-
 ## API
 
 `VisuallyHiddenProps`:
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `focusable` | `boolean` |  | Reveal the content while it (or something inside it) has keyboard focus — for skip links and other keyboard-only affordances. |
+| `focusable` | `boolean` | `false` | Reveal the content while it (or something inside it) has keyboard focus — for skip links and other keyboard-only affordances. |
 | `as` | `'div' \| 'span' \| 'label' \| 'a' \| 'h1' \| 'h2' \| 'h3'` | `span` | Default `span`. |
 | `href` | `string` |  | Only for `as="a"`. |
 

package/skills/setup-and-theming/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: setup-and-theming
-description: "Use when installing @mitcsutt/kiln-ui in a React app: loading its stylesheet, wrapping the app in ThemeProvider, choosing Paper or a preset theme (Monograph, Ledger, Fiesta) and a colour mode, setting the theme before first paint with themeScript under SSR or the Next.js App Router, and passing router links through asChild."
+description: "Use when installing @mitcsutt/kiln-ui in a React app: loading its stylesheet, wrapping the app in ThemeProvider, choosing Paper or a preset theme (Monograph, Ledger, Fiesta, Flightdeck, Riso) and a colour mode, setting the theme before first paint with themeScript under SSR or the Next.js App Router, and passing router links through asChild."
 metadata:
   purpose: Install kiln-ui, load its CSS, and apply a built-in theme and colour mode correctly on the client and the server.
   type: lifecycle
@@ -11,6 +11,8 @@ sources:
   - mitcsutt/kiln:apps/docs/content/docs/ui/themes/monograph.mdx
   - mitcsutt/kiln:apps/docs/content/docs/ui/themes/ledger.mdx
   - mitcsutt/kiln:apps/docs/content/docs/ui/themes/fiesta.mdx
+  - mitcsutt/kiln:apps/docs/content/docs/ui/themes/flightdeck.mdx
+  - mitcsutt/kiln:apps/docs/content/docs/ui/themes/riso.mdx
 ---
 
 <!-- Generated from the Kiln docs by apps/docs/src/skills. Edit the docs pages, then run `pnpm generate:skills`. -->
@@ -54,14 +56,14 @@ With no `theme`, you get **Paper**, the neutral default. `ThemeProvider` writes
 
 ```tsx
 import '@mitcsutt/kiln-ui/styles.css'
-import '@mitcsutt/kiln-ui/themes/monograph.css'
+import '@mitcsutt/kiln-ui/themes/flightdeck.css'
 
-;<ThemeProvider theme="monograph" defaultMode="dark">
+;<ThemeProvider theme="flightdeck" defaultMode="dark">
   …
 </ThemeProvider>
 ```
 
-Presets are separate files, so an app pays only for the ones it imports. [Themes](references/paper.md) shows all four, and [Theming](https://kiln.mitchellsutton.com/docs/ui/foundations/theming) shows how to write your own.
+Presets are separate files, so an app pays only for the ones it imports. [Themes](references/paper.md) shows all six, and [Theming](https://kiln.mitchellsutton.com/docs/ui/foundations/theming) shows how to write your own.
 
 ## Compose a screen
 
@@ -229,7 +231,9 @@ Merges class names, filtering falsy values.
 
 Read a reference when its description matches the task:
 
-- [Paper](references/paper.md): The neutral default. A typeset proof on good uncoated stock, where the ink is the accent.
+- [Paper](references/paper.md): The neutral default. An office that prints for everyone, with white sheets on grey stock, blue-black ink as the accent and Golos Text for type.
 - [Monograph](references/monograph.md): A scholarly monograph read under a desk lamp at night. Blue slate, one ember accent, a big serif display. Dark-first.
-- [Ledger](references/ledger.md): An accountant's ruled book. Green-grey paper, bank-note green, accounting red, and figures set like receipt tape.
+- [Ledger](references/ledger.md): An accountant's columnar pad. A white sheet ruled in green, banknote-green actions, accounting red, and figures set condensed instead of in a monospace.
 - [Fiesta](references/fiesta.md): A screen-printed festival poster. Flat spot inks, hard offsets, condensed signage numerals and springy motion.
+- [Flightdeck](references/flightdeck.md): A glass-cockpit flight display. Cyan for what you set, a reverse-video box for what you select, and green, amber and red for status, set in B612. Dark-first.
+- [Riso](references/riso.md): A two-drum risograph zine. Fluorescent pink and blue on white stock, screen tints instead of borders, and Shantell Sans.

package/skills/setup-and-theming/references/fiesta.md

@@ -8,6 +8,8 @@ Source: https://kiln.mitchellsutton.com/docs/ui/themes/fiesta
 
 _A screen-printed festival poster and sticker album._ Screen printing can't do gradients, so neither does Fiesta: flat spot inks on apricot poster stock, everything keylined in aubergine, and a hard misregistered offset where other themes have a soft shadow.
 
+Fiesta predates Kiln's [second-order design rules](https://kiln.mitchellsutton.com/docs/ui/foundations/design-rules#second-order-tells) and ships unchanged for compatibility, so it isn't the model for a new theme.
+
 
 ## Use it
 
@@ -21,7 +23,7 @@ import { ThemeProvider } from '@mitcsutt/kiln-ui'
 </ThemeProvider>
 ```
 
-Fiesta's two faces are declared in its own stylesheet, so they cost nothing unless you import it. It's light-first (the daytime show); dark mode is the floodlit night show.
+Fiesta's faces (Big Shoulders, Bricolage Grotesque and Martian Mono for code) are declared in its own stylesheet, so they cost nothing unless you import it. It's light-first (the daytime show); dark mode is the floodlit night show.
 
 ## The idea, applied
 

package/skills/setup-and-theming/references/flightdeck.md

@@ -0,0 +1,39 @@
+<!-- Generated from the Kiln docs by apps/docs/src/skills. Edit the docs pages, then run `pnpm generate:skills`. -->
+
+# Flightdeck
+
+> A glass-cockpit flight display. Cyan for what you set, a reverse-video box for what you select, and green, amber and red for status, set in B612. Dark-first.
+
+Source: https://kiln.mitchellsutton.com/docs/ui/themes/flightdeck
+
+_A glass-cockpit flight display._ Flightdeck follows the colour convention of electronic flight instruments, where each colour has one fixed meaning, and sets everything in the typefaces designed for Airbus cockpit displays.
+
+
+## Use it
+
+Flightdeck is a preset, so import its stylesheet. It's dark-first, so pair it with `defaultMode="dark"`, and give `themeScript` the same:
+
+```tsx
+import '@mitcsutt/kiln-ui/styles.css'
+import '@mitcsutt/kiln-ui/themes/flightdeck.css'
+import { ThemeProvider, themeScript } from '@mitcsutt/kiln-ui'
+
+;<html lang="en">
+  <head>
+    <script dangerouslySetInnerHTML={{ __html: themeScript('flightdeck', 'dark') }} />
+  </head>
+  <body>
+    <ThemeProvider theme="flightdeck" defaultMode="dark">
+      …
+    </ThemeProvider>
+  </body>
+</html>
+```
+
+## The idea, applied
+
+- **Colour.** The cockpit convention, mapped onto Kiln's roles. Cyan is the accent: what the pilot sets and acts on. What you selected is a neutral reverse-video box, like the selected line of a flight-management display. Green, amber and red are the positive, caution and critical tones, and info is steel blue. Neutrals are dark blue-grey display glass, never black. Light mode is the day mode of an electronic flight bag: pale cool grey with the cyan darkened to pass contrast.
+- **Type.** B612 for text, display and figures (its digits are already equal width), and B612 Mono for code. B612 ships static regular and bold weights and a Latin subset only, so Latin Extended text falls back to a system face. There are no uppercase transforms.
+- **Shape.** Square instrument bezels: small radii on actions, fields and surfaces. Chips are pills, like annunciator capsules.
+- **Depth.** Hairlines, with no shadow on static surfaces. Floating layers add a very subtle dark shadow, with no glow.
+- **Motion.** Instruments move linearly and quickly: a gentle ease-out, a little faster than the default, and no bounce.

package/skills/setup-and-theming/references/ledger.md

@@ -2,11 +2,11 @@
 
 # Ledger
 
-> An accountant's ruled book. Green-grey paper, bank-note green, accounting red, and figures set like receipt tape.
+> An accountant's columnar pad. A white sheet ruled in green, banknote-green actions, accounting red, and figures set condensed instead of in a monospace.
 
 Source: https://kiln.mitchellsutton.com/docs/ui/themes/ledger
 
-_An accountant's ruled book._ Quiet, dense and numeric. In Ledger the numbers are the content, so they get their own face: a condensed monospace, always tabular, like receipt tape.
+_An accountant's columnar pad._ Quiet, dense and numeric. In Ledger the numbers are the content, so they get their own treatment: the same face set condensed, always tabular, so a column of money reads like receipt tape.
 
 
 ## Use it
@@ -25,8 +25,8 @@ Ledger is light-first. It suits screens that are mostly tables and totals: invoi
 
 ## The idea, applied
 
-- **Colour.** Faint green-grey ledger paper, a bank-note green accent, accounting red for negatives and a highlighter-yellow highlight.
-- **Type.** Schibsted Grotesk throughout, and Martian Mono at 80% width for every figure. A 15px base on a 1.2 ratio.
-- **Shape.** 5px radii everywhere, and a compact density of 0.86, so every space step and control is smaller.
-- **Depth.** Hairlines, and a double rule above a table's footer (`--table-foot-rule`), as a ledger totals a column.
-- **Motion.** Brief and flat (`--motion-scale: 0.8`).
+- **Colour.** A white sheet, with the green carried by the rules rather than the paper. Banknote green for actions, accounting red for negatives and a flat highlighter yellow for the highlight. Dark mode is a blue-green carbon-copy night with dim green rules, not a green-screen terminal.
+- **Type.** Archivo throughout. Figures use its width axis to set condensed (`--numeric-stretch`) with tabular numerals, so they get receipt-tape narrowness without a monospace. Atkinson Hyperlegible Mono is for code only. A 15px base on a 1.2 ratio.
+- **Shape.** Tight radii on actions, fields and surfaces, squarer chips, and rounded-square avatars like ledger stamps. A compact density of 0.86, so every space step and control is smaller.
+- **Depth.** Hairlines in the ledger green, with flat surfaces, and a double rule above a table's footer (`--table-foot-rule`), as a ledger totals a column.
+- **Motion.** Brief and flat, with no bounce (`--motion-scale: 0.8`).

package/skills/setup-and-theming/references/monograph.md

@@ -8,6 +8,8 @@ Source: https://kiln.mitchellsutton.com/docs/ui/themes/monograph
 
 _A scholarly monograph read under a desk lamp at night._ Modern nostalgia: blue slate rather than black, a single ember accent that behaves like phosphor, and a serif display set big and tight over a newsroom grotesk.
 
+Monograph predates Kiln's [second-order design rules](https://kiln.mitchellsutton.com/docs/ui/foundations/design-rules#second-order-tells) and ships unchanged for compatibility, so it isn't the model for a new theme.
+
 
 ## Use it
 
@@ -30,6 +32,8 @@ import { ThemeProvider, themeScript } from '@mitcsutt/kiln-ui'
 </html>
 ```
 
+Its faces (Newsreader, Schibsted Grotesk and Martian Mono) are declared in its own stylesheet, so they cost nothing unless you import it.
+
 ## The idea, applied
 
 - **Colour.** Blue-slate neutrals (hue 255, never black). One ember accent (`oklch(0.72 0.15 52)` in dark, `oklch(0.565 0.158 44)` in light) that marks what's live and current, and never decorates. A cool slate highlight.

package/skills/setup-and-theming/references/paper.md

@@ -2,11 +2,11 @@
 
 # Paper
 
-> The neutral default. A typeset proof on good uncoated stock, where the ink is the accent.
+> The neutral default. An office that prints for everyone, with white sheets on grey stock, blue-black ink as the accent and Golos Text for type.
 
 Source: https://kiln.mitchellsutton.com/docs/ui/themes/paper
 
-_A typeset proof on good uncoated stock._ Paper is the theme you get when you set none. It's in the base stylesheet, and it's built to sit under any brand without arguing with it: graphite ink on warm-neutral paper, with the ink itself as the accent.
+_An office that prints for everyone._ Paper is the theme you get when you set none. It's in the base stylesheet, and it's built to sit under any brand without arguing with it: white sheets on grey recycled stock, blue-black ink as the accent, and a typeface drawn for public services, so that everyone can read it.
 
 
 ## Use it
@@ -24,12 +24,12 @@ Paper is also declared on the document root at zero specificity, so a preset or
 
 ## The idea, applied
 
-- **Colour.** Warm-neutral paper (hue 85, chroma no more than 0.008) and graphite ink. The primary action, the current item and live state are solid ink, and links are ink told apart by their underline. The one other hue is the editor's non-photo blue, kept for "you", the selected row and text selection. Tones are the only saturated colour on the page.
-- **Type.** Schibsted Grotesk for everything you scan (text, headings, and display at weight 640 with −0.04em tracking), Newsreader for long reading and for figures, whose tabular punctuation sits tighter, and Martian Mono for code. A 16px base on a 1.25 ratio.
-- **Shape.** Square-shouldered: 6px actions, fields and chips, 8px surfaces, round avatars.
-- **Depth.** Hairlines only. Soft graphite shadows for floating layers.
+- **Colour.** Cool grey stock for the canvas and near-white sheets for surfaces, so a surface reads against the page by fill alone. The primary action, the current item and live state are solid blue-black ink, and links are ink told apart by their underline. The one other hue is the proofreader's non-photo blue, kept for "you", the selected row and text selection. Tones are the only saturated colour on the page.
+- **Type.** Golos Text for everything: text, headings, display, prose and figures. Atkinson Hyperlegible Mono for code. Paratype drew Golos for a national public-services website, so it has a plain zero, true tabular figures and distinct I, l and 1, and that is why it is here. The bundle has no italic file, so italics are synthesised. There is no serif. A 16px base on a 1.25 ratio.
+- **Shape.** Square-shouldered actions and fields, slightly rounder surfaces, and pill chips as the one deliberate contrast. Round avatars.
+- **Depth.** A fill change rather than a border: a sheet on stock needs no edge. Soft blue-black shadows for floating layers.
 - **Motion.** A quart ease-out, brisk, with no bounce.
 
-## All four themes
+## All six themes
 
 The same screen in each built-in theme, in the page's current mode:

package/skills/setup-and-theming/references/riso.md

@@ -0,0 +1,32 @@
+<!-- Generated from the Kiln docs by apps/docs/src/skills. Edit the docs pages, then run `pnpm generate:skills`. -->
+
+# Riso
+
+> A two-drum risograph zine. Fluorescent pink and blue on white stock, screen tints instead of borders, and Shantell Sans.
+
+Source: https://kiln.mitchellsutton.com/docs/ui/themes/riso
+
+_A two-drum risograph zine._ A riso print can't do gradients or soft shadows. It does flat spot ink, screen tints and the occasional misregistration, so that is all Riso uses: two inks on bright white stock, set in a typeface drawn from handwriting.
+
+
+## Use it
+
+```tsx
+import '@mitcsutt/kiln-ui/styles.css'
+import '@mitcsutt/kiln-ui/themes/riso.css'
+import { ThemeProvider } from '@mitcsutt/kiln-ui'
+
+;<ThemeProvider theme="riso" defaultMode="light">
+  …
+</ThemeProvider>
+```
+
+Riso's face is declared in its own stylesheet, so it costs nothing unless you import it. It's light-first, and dark mode is the deep-blue-stock edition.
+
+## The idea, applied
+
+- **Colour.** Two drums: fluorescent pink is the accent and blue is the text colour, on bright white stock. Surfaces are screen tints (a percentage of an ink) rather than borders. The highlight is an overprint: a pink tint under blue ink. Night mode is the same two inks printed on deep blue stock, not black.
+- **Type.** Shantell Sans for every role except code, drawn from the artist Shantell Martin's own handwriting. It has no tabular figures, so numerals are not column-aligned. Atkinson Hyperlegible Mono is for code. A 1.25 ratio.
+- **Shape.** Hand-cut and mixed: generous radii on actions and surfaces, smaller radii on fields, and pill chips.
+- **Depth.** A fill change, with no shadow on static surfaces. The one misregistered moment is a hard pink offset on floating layers, as if the second drum printed slightly off.
+- **Motion.** A mild spring: things land with a small overshoot.