Spine

Risograph set in condensed type, with the original Risograph's colours and colour roles as the music video “Clanker, I'm Fine” used them and pages built from that original version, listed under Risograph Generation 2 because the original is no longer in the library.

Its pictures are drawn in Misprint.

Made by Claude · Claude Code · claude-sonnet-5-5

Download DESIGN.md

Tokens, rules and the paired art style Misprint.

Preview

Open full page

Built with

The art style its pictures are drawn in and the colours its tokens carry.

Art styleMisprintprintView

accent#FF2E88

bg#F3EAD8

surface#FBF5E8

text#211A2E

muted#6E5A6B

border#E4D6BA

surface 2#ECE0C6

accent 2#FFC21F

accent 3#1F5CFF

PaletteIts colours: 9 of its 16 colour tokens

Typography

Each face set in this language's own words.

headline lgBig Shoulders Display, 31px, 700

Spine

headline mdBig Shoulders Display, 25px, 600

Spine

body mdArchivo Narrow, 16px, 400

Risograph set in condensed type, with the original Risograph's colours and colour roles as the music video “Clanker, I'm Fine” used them and pages...

label mdShare Tech Mono, 12px, 600

Risograph set in condensed type, with the original Risograph's colours and colour roles as the music video “Clanker, I'm Fine” used them and pages...

Specification

Philosophy

summary

Tokens

colors16

#F3EAD8

surface

#FBF5E8

surface 2

#ECE0C6

text

#211A2E

muted

#6E5A6B

border

#E4D6BA

accent

#FF2E88

accent 2

#FFC21F

accent 3

#1F5CFF

overprint

#6A2AB0

on accent

#211A2E

on yellow

#211A2E

success

#1F8A4C

warning

#FFC21F

error

#E11D48

info

#1F5CFF

typography4

heading font: Big Shoulders Display
body font: Archivo Narrow
mono font: Share Tech Mono
google fonts url: https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Archivo+Narrow:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

radii4

none: 0px
md: 16px
lg: 24px
full: 9999px

spacing2

base: 8px
scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 72px, 112px

Rules

components

- **Buttons:** Archivo Narrow 700, 16px radius, labels never wrap. Primary is pink with a blue plate and a plum label; blue is the second action, with a pink plate and a cream label; sunflower adds, with a pink plate and a plum label; a quiet ghost button is a 2px inset blue ring that fills blue on hover. Disabled is a flat `surface-2` well. - **Sheets and cards:** cream `surface` on a 6px plate of blue, pink, sunflower or violet, a registration crosshair tick in a corner, a Big Shoulders Display 700 title at 28px and muted 17px copy. - **Run metrics:** a Share Tech Mono label, a Big Shoulders Display 800 figure (44 to 64px) and a delta line with an ink dot. - **Pills:** Share Tech Mono on a full round; pink and sunflower pills take plum, blue and violet pills take cream, and an outline pill is a 2px inset blue ring. - **Job ticket form:** uppercase Share Tech Mono labels; fields on `surface` inside a 2px inset `surface-2` ring; focus turns the ring pink and adds a 3px blue plate; the select carries a blue chevron. Checkboxes fill blue with a cream tick; toggles turn pink with a cream knob on a blue plate. - **Run sheet:** a 16px sheet on a pink plate, a press-blue header in cream Share Tech Mono, alternating `surface-2` rows, figures and statuses in Share Tech Mono with an ink dot. - **Press notes:** sheets with a 6px rounded ink bar in the semantic colour and a 22px Big Shoulders Display title. - **Plate registration:** 14px round tracks filled with each ink. - **Empty state:** a halftone dot field with a sunflower badge on a pink plate and one blue button. - **Crew:** 60px ink discs with Big Shoulders Display initials on an offset plate. Motion carries the press metaphor: hover re-registers a plate, press slips it a touch back out of register, over 200ms with `cubic-bezier(0.2,0.9,0.2,1)`. The settled page renders with no JavaScript; reveals are added on top behind an `html.reveal-on` class and `prefers-reduced-motion` holds every plate in register.

Layout

summary

A **press-sheet grid**: a wide lead column plus a narrow proof rail on desktop, anchored to shared paper gutters of `clamp(20px, 5vw, 72px)` and a 1180px content width. Warm paper is the reset between bursts of ink: every sheet keeps a breathing strip so saturated colour always meets open stock. Sections sit about 96px apart. The landing opens on one full-bleed riso hero painted with `var(--hero-image)`. The headline sits on a solid paper plate sized to its text block, standing on a pink offset plate, so the picture stays visible around it; then three passes, a full-width press-blue band with the overprint figure, the week's runs, a printer's line and a plum closing card. - **Desktop** keeps the proof rail and full plate offsets. - **Tablet** drops to a single column below 900px. - **Mobile** is one column; plate offsets shrink to about 3px so nothing clips, non-essential nav links and table columns drop, and display headlines shrink with `clamp()` and wrap, never clipping the 390px edge.

Guidance

Avoid

outline cards in heavy black keylines or rely on grey drop shadows.
stamp one shape everywhere as wallpaper until it stops meaning anything.
flood whole panels in saturated ink; let paper out-area the colour.
use a white `#FFF` ground or default browser form controls.
track the condensed faces wide, and don't bold Share Tech Mono.
use the serif-upright and serif-italic headline swap.
lay a gradient scrim behind hero type; set it on a solid paper plate.

Imagery

pairs with

misprint-riso

art style id

en-019efd20-27ed-7ec3-9d1a-ba1553784762

Katagami spec file

# Spine

## Philosophy

Risograph set in condensed type, with the original Risograph's colours and colour roles as the music video “Clanker, I'm Fine” used them and pages built from that original version, listed under Risograph Generation 2 because the original is no longer in the library.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F3EAD8` |
| surface | `#FBF5E8` |
| surface-2 | `#ECE0C6` |
| text | `#211A2E` |
| muted | `#6E5A6B` |
| border | `#E4D6BA` |
| accent | `#FF2E88` |
| accent-2 | `#FFC21F` |
| accent-3 | `#1F5CFF` |
| overprint | `#6A2AB0` |
| on-accent | `#211A2E` |
| on-yellow | `#211A2E` |
| success | `#1F8A4C` |
| warning | `#FFC21F` |
| error | `#E11D48` |
| info | `#1F5CFF` |

### Typography

- **Heading Font**: Big Shoulders Display
- **Body Font**: Archivo Narrow
- **Mono Font**: Share Tech Mono
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Archivo+Narrow:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

### Radii

- **None**: 0px
- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","72px","112px"]

## Rules

### Components

- **Buttons:** Archivo Narrow 700, 16px radius, labels never wrap. Primary is pink with a blue plate and a plum label; blue is the second action, with a pink plate and a cream label; sunflower adds, with a pink plate and a plum label; a quiet ghost button is a 2px inset blue ring that fills blue on hover. Disabled is a flat `surface-2` well.
- **Sheets and cards:** cream `surface` on a 6px plate of blue, pink, sunflower or violet, a registration crosshair tick in a corner, a Big Shoulders Display 700 title at 28px and muted 17px copy.
- **Run metrics:** a Share Tech Mono label, a Big Shoulders Display 800 figure (44 to 64px) and a delta line with an ink dot.
- **Pills:** Share Tech Mono on a full round; pink and sunflower pills take plum, blue and violet pills take cream, and an outline pill is a 2px inset blue ring.
- **Job ticket form:** uppercase Share Tech Mono labels; fields on `surface` inside a 2px inset `surface-2` ring; focus turns the ring pink and adds a 3px blue plate; the select carries a blue chevron. Checkboxes fill blue with a cream tick; toggles turn pink with a cream knob on a blue plate.
- **Run sheet:** a 16px sheet on a pink plate, a press-blue header in cream Share Tech Mono, alternating `surface-2` rows, figures and statuses in Share Tech Mono with an ink dot.
- **Press notes:** sheets with a 6px rounded ink bar in the semantic colour and a 22px Big Shoulders Display title.
- **Plate registration:** 14px round tracks filled with each ink.
- **Empty state:** a halftone dot field with a sunflower badge on a pink plate and one blue button.
- **Crew:** 60px ink discs with Big Shoulders Display initials on an offset plate.

Motion carries the press metaphor: hover re-registers a plate, press slips it a touch back out of register, over 200ms with `cubic-bezier(0.2,0.9,0.2,1)`. The settled page renders with no JavaScript; reveals are added on top behind an `html.reveal-on` class and `prefers-reduced-motion` holds every plate in register.

## Layout

### Summary

A **press-sheet grid**: a wide lead column plus a narrow proof rail on desktop, anchored to shared paper gutters of `clamp(20px, 5vw, 72px)` and a 1180px content width. Warm paper is the reset between bursts of ink: every sheet keeps a breathing strip so saturated colour always meets open stock. Sections sit about 96px apart.

The landing opens on one full-bleed riso hero painted with `var(--hero-image)`. The headline sits on a solid paper plate sized to its text block, standing on a pink offset plate, so the picture stays visible around it; then three passes, a full-width press-blue band with the overprint figure, the week's runs, a printer's line and a plum closing card.

- **Desktop** keeps the proof rail and full plate offsets.
- **Tablet** drops to a single column below 900px.
- **Mobile** is one column; plate offsets shrink to about 3px so nothing clips, non-essential nav links and table columns drop, and display headlines shrink with `clamp()` and wrap, never clipping the 390px edge.

## Guidance

### Don't

- outline cards in heavy black keylines or rely on grey drop shadows.
- stamp one shape everywhere as wallpaper until it stops meaning anything.
- flood whole panels in saturated ink; let paper out-area the colour.
- use a white `#FFF` ground or default browser form controls.
- track the condensed faces wide, and don't bold Share Tech Mono.
- use the serif-upright and serif-italic headline swap.
- lay a gradient scrim behind hero type; set it on a solid paper plate.

## Imagery Direction

### Pairs With

misprint-riso

### Art Style Id

en-019efd20-27ed-7ec3-9d1a-ba1553784762

DESIGN.md file

---
version: "alpha"
name: "Spine"
description: "Risograph set in condensed type, with the original Risograph's colours and colour roles as the music video “Clanker, I'm Fine” used them and pages built from that original version, listed under Risograph Generation 2 because the original..."
colors:
  bg: "#F3EAD8"
  surface: "#FBF5E8"
  surface-2: "#ECE0C6"
  text: "#211A2E"
  muted: "#6E5A6B"
  border: "#E4D6BA"
  accent: "#FF2E88"
  accent-2: "#FFC21F"
  accent-3: "#1F5CFF"
  overprint: "#6A2AB0"
  on-accent: "#211A2E"
  on-yellow: "#211A2E"
  success: "#1F8A4C"
  warning: "#FFC21F"
  error: "#E11D48"
  info: "#1F5CFF"
typography:
  headline-lg:
    fontFamily: "Big Shoulders Display"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Big Shoulders Display"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Archivo Narrow"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Share Tech Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "72px"
  step-8: "112px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface-2:
    backgroundColor: "{colors.surface-2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent-2:
    backgroundColor: "{colors.accent-2}"
  color-reference-accent-3:
    backgroundColor: "{colors.accent-3}"
  color-reference-overprint:
    backgroundColor: "{colors.overprint}"
  color-reference-on-accent:
    backgroundColor: "{colors.on-accent}"
  color-reference-on-yellow:
    backgroundColor: "{colors.on-yellow}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Spine

## Overview

Risograph set in condensed type, with the original Risograph's colours and colour roles as the music video “Clanker, I'm Fine” used them and pages built from that original version, listed under Risograph Generation 2 because the original is no longer in the library.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#F3EAD8` |
| surface | `#FBF5E8` |
| surface-2 | `#ECE0C6` |
| text | `#211A2E` |
| muted | `#6E5A6B` |
| border | `#E4D6BA` |
| accent | `#FF2E88` |
| accent-2 | `#FFC21F` |
| accent-3 | `#1F5CFF` |
| overprint | `#6A2AB0` |
| on-accent | `#211A2E` |
| on-yellow | `#211A2E` |
| success | `#1F8A4C` |
| warning | `#FFC21F` |
| error | `#E11D48` |
| info | `#1F5CFF` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Archivo+Narrow:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

- **Headline-Lg**: Big Shoulders Display, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Big Shoulders Display, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo Narrow, 16px, weight 400, line-height 1.5.
- **Label-Md**: Share Tech Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `72px`
- **Step-8**: `112px`

### Summary

A **press-sheet grid**: a wide lead column plus a narrow proof rail on desktop, anchored to shared paper gutters of `clamp(20px, 5vw, 72px)` and a 1180px content width. Warm paper is the reset between bursts of ink: every sheet keeps a breathing strip so saturated colour always meets open stock. Sections sit about 96px apart.

The landing opens on one full-bleed riso hero painted with `var(--hero-image)`. The headline sits on a solid paper plate sized to its text block, standing on a pink offset plate, so the picture stays visible around it; then three passes, a full-width press-blue band with the overprint figure, the week's runs, a printer's line and a plum closing card.

- **Desktop** keeps the proof rail and full plate offsets.
- **Tablet** drops to a single column below 900px.
- **Mobile** is one column; plate offsets shrink to about 3px so nothing clips, non-essential nav links and table columns drop, and display headlines shrink with `clamp()` and wrap, never clipping the 390px edge.

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`

## Components

### Components

- **Buttons:** Archivo Narrow 700, 16px radius, labels never wrap. Primary is pink with a blue plate and a plum label; blue is the second action, with a pink plate and a cream label; sunflower adds, with a pink plate and a plum label; a quiet ghost button is a 2px inset blue ring that fills blue on hover. Disabled is a flat `surface-2` well.
- **Sheets and cards:** cream `surface` on a 6px plate of blue, pink, sunflower or violet, a registration crosshair tick in a corner, a Big Shoulders Display 700 title at 28px and muted 17px copy.
- **Run metrics:** a Share Tech Mono label, a Big Shoulders Display 800 figure (44 to 64px) and a delta line with an ink dot.
- **Pills:** Share Tech Mono on a full round; pink and sunflower pills take plum, blue and violet pills take cream, and an outline pill is a 2px inset blue ring.
- **Job ticket form:** uppercase Share Tech Mono labels; fields on `surface` inside a 2px inset `surface-2` ring; focus turns the ring pink and adds a 3px blue plate; the select carries a blue chevron. Checkboxes fill blue with a cream tick; toggles turn pink with a cream knob on a blue plate.
- **Run sheet:** a 16px sheet on a pink plate, a press-blue header in cream Share Tech Mono, alternating `surface-2` rows, figures and statuses in Share Tech Mono with an ink dot.
- **Press notes:** sheets with a 6px rounded ink bar in the semantic colour and a 22px Big Shoulders Display title.
- **Plate registration:** 14px round tracks filled with each ink.
- **Empty state:** a halftone dot field with a sunflower badge on a pink plate and one blue button.
- **Crew:** 60px ink discs with Big Shoulders Display initials on an offset plate.

Motion carries the press metaphor: hover re-registers a plate, press slips it a touch back out of register, over 200ms with `cubic-bezier(0.2,0.9,0.2,1)`. The settled page renders with no JavaScript; reveals are added on top behind an `html.reveal-on` class and `prefers-reduced-motion` holds every plate in register.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-01a1137f-98fc-7511-918e-3cc1ea9aba0f/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a1137f-98fc-7511-918e-3cc1ea9aba0f/shadcn.json` (registry theme), `/language/en-01a1137f-98fc-7511-918e-3cc1ea9aba0f/shadcn-components.md` (component recipes) and `/language/en-01a1137f-98fc-7511-918e-3cc1ea9aba0f/shadcn-shots.json` (preview shots). The human-facing handoff is still DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Don't outline cards in heavy black keylines or rely on grey drop shadows.
- Don't stamp one shape everywhere as wallpaper until it stops meaning anything.
- Don't flood whole panels in saturated ink; let paper out-area the colour.
- Don't use a white `#FFF` ground or default browser form controls.
- Don't track the condensed faces wide, and don't bold Share Tech Mono.
- Don't use the serif-upright and serif-italic headline swap.
- Don't lay a gradient scrim behind hero type; set it on a solid paper plate.

## Imagery Direction

### Pairs With

misprint-riso

### Art Style Id

en-019efd20-27ed-7ec3-9d1a-ba1553784762

shadcn/ui theme file

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spine",
  "type": "registry:theme",
  "title": "Spine shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F3EAD8",
      "foreground": "#211A2E",
      "card": "#FBF5E8",
      "card-foreground": "#211A2E",
      "popover": "#FBF5E8",
      "popover-foreground": "#211A2E",
      "primary": "#211A2E",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6E5A6B",
      "muted-foreground": "#211A2E",
      "accent": "#FF2E88",
      "accent-foreground": "#ffffff",
      "destructive": "#E11D48",
      "border": "#E4D6BA",
      "input": "#E4D6BA",
      "ring": "#FF2E88",
      "chart-1": "#211A2E",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF2E88",
      "chart-4": "#1F8A4C",
      "chart-5": "#FFC21F",
      "sidebar": "#FBF5E8",
      "sidebar-foreground": "#211A2E",
      "sidebar-primary": "#211A2E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1F5CFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E4D6BA",
      "sidebar-ring": "#FF2E88",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#211A2E",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF2E88",
      "accent-foreground": "#ffffff",
      "destructive": "#E11D48",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF2E88",
      "chart-1": "#211A2E",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF2E88",
      "chart-4": "#1F8A4C",
      "chart-5": "#FFC21F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#211A2E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#FF2E88",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF2E88",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a1137f-98fc-7511-918e-3cc1ea9aba0f",
    "slug": "spine",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent-2",
        "accent-3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on-accent",
        "on-yellow",
        "overprint",
        "success",
        "surface",
        "surface-2",
        "text",
        "warning"
      ],
      "typography": [
        "body_font",
        "google_fonts_url",
        "heading_font",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ]
    }
  }
}
```

shadcn/ui kit

Theme variables only

The theme variables are generated from the tokens. Component recipes and preview shots have not been written for this language yet.

Theme check

Standard shadcn primitives drawn with this language’s theme variables.

primaryaccentsurfacemutedwarningerror

table rhythm

button	ok
card	ok
input	ok

DESIGN.md with shadcn

For an app that uses shadcn/ui: the DESIGN.md plus the install list, theme variables, component recipes, preview shots and a starter TSX file, in one Markdown file.

Implementation filesShow

The same pieces as separate files: theme, CSS, TSX starter, recipes and the preview contract.

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #F3EAD8;
  --foreground: #211A2E;
  --card: #FBF5E8;
  --card-foreground: #211A2E;
  --popover: #FBF5E8;
  --popover-foreground: #211A2E;
  --primary: #211A2E;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #6E5A6B;
  --muted-foreground: #211A2E;
  --accent: #FF2E88;
  --accent-foreground: #ffffff;
  --destructive: #E11D48;
  --border: #E4D6BA;
  --input: #E4D6BA;
  --ring: #FF2E88;
  --chart-1: #211A2E;
  --chart-2: #f4f4f5;
  --chart-3: #FF2E88;
  --chart-4: #1F8A4C;
  --chart-5: #FFC21F;
  --sidebar: #FBF5E8;
  --sidebar-foreground: #211A2E;
  --sidebar-primary: #211A2E;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1F5CFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #E4D6BA;
  --sidebar-ring: #FF2E88;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #211A2E;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FF2E88;
  --accent-foreground: #ffffff;
  --destructive: #E11D48;
  --border: #303642;
  --input: #303642;
  --ring: #FF2E88;
  --chart-1: #211A2E;
  --chart-2: #f4f4f5;
  --chart-3: #FF2E88;
  --chart-4: #1F8A4C;
  --chart-5: #FFC21F;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #211A2E;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #FF2E88;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #FF2E88;
  --radius: 16px;
}

tsx starter

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function SpineShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Spine</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

theme JSONGenerated from the tokens

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spine",
  "type": "registry:theme",
  "title": "Spine shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F3EAD8",
      "foreground": "#211A2E",
      "card": "#FBF5E8",
      "card-foreground": "#211A2E",
      "popover": "#FBF5E8",
      "popover-foreground": "#211A2E",
      "primary": "#211A2E",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6E5A6B",
      "muted-foreground": "#211A2E",
      "accent": "#FF2E88",
      "accent-foreground": "#ffffff",
      "destructive": "#E11D48",
      "border": "#E4D6BA",
      "input": "#E4D6BA",
      "ring": "#FF2E88",
      "chart-1": "#211A2E",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF2E88",
      "chart-4": "#1F8A4C",
      "chart-5": "#FFC21F",
      "sidebar": "#FBF5E8",
      "sidebar-foreground": "#211A2E",
      "sidebar-primary": "#211A2E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1F5CFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E4D6BA",
      "sidebar-ring": "#FF2E88",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#211A2E",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF2E88",
      "accent-foreground": "#ffffff",
      "destructive": "#E11D48",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF2E88",
      "chart-1": "#211A2E",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF2E88",
      "chart-4": "#1F8A4C",
      "chart-5": "#FFC21F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#211A2E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#FF2E88",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF2E88",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a1137f-98fc-7511-918e-3cc1ea9aba0f",
    "slug": "spine",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent-2",
        "accent-3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on-accent",
        "on-yellow",
        "overprint",
        "success",
        "surface",
        "surface-2",
        "text",
        "warning"
      ],
      "typography": [
        "body_font",
        "google_fonts_url",
        "heading_font",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ]
    }
  }
}

component recipesGenerated from the tokens

# Spine shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-01a1137f-98fc-7511-918e-3cc1ea9aba0f`
Slug: `spine`

## Intent

Risograph set in condensed type, with the original Risograph's colours and colour roles as the music video “Clanker, I'm Fine” used them and pages built from that original version, listed under Risograph Generation 2 because the original is no longer in the library.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

## Token cues

Colors:

{
  "bg": "#F3EAD8",
  "surface": "#FBF5E8",
  "surface-2": "#ECE0C6",
  "text": "#211A2E",
  "muted": "#6E5A6B",
  "border": "#E4D6BA",
  "accent": "#FF2E88",
  "accent-2": "#FFC21F",
  "accent-3": "#1F5CFF",
  "overprint": "#6A2AB0",
  "on-accent": "#211A2E",
  "on-yellow": "#211A2E",
  "success": "#1F8A4C",
  "warning": "#FFC21F",
  "error": "#E11D48",
  "info": "#1F5CFF"
}

Typography:

{
  "heading_font": "Big Shoulders Display",
  "body_font": "Archivo Narrow",
  "mono_font": "Share Tech Mono",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Archivo+Narrow:wght@400;500;600;700&family=Share+Tech+Mono&display=swap"
}

## Visual character to preserve

- Make the source language's structural identity visible in every component state.

## ShadSync visual profile

{
  "family": "system",
  "material": "flat",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": false,
  "stickerBadges": false,
  "motion": "still",
  "density": "balanced",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/spine/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: follow the Katagami source guidance
- Do not: outline cards in heavy black keylines or rely on grey drop shadows.; stamp one shape everywhere as wallpaper until it stops meaning anything.; flood whole panels in saturated ink; let paper out-area the colour.; use a white `#FFF` ground or default browser form controls.; track the condensed faces wide, and don't bold Share Tech Mono.; use the serif-upright and serif-italic headline swap.; lay a gradient scrim behind hero type; set it on a solid paper plate.

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function SpineShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Spine</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}
```

## Layout notes

{
  "summary": "A **press-sheet grid**: a wide lead column plus a narrow proof rail on desktop, anchored to shared paper gutters of `clamp(20px, 5vw, 72px)` and a 1180px content width. Warm paper is the reset between bursts of ink: every sheet keeps a breathing strip so saturated colour always meets open stock. Sections sit about 96px apart.\n\nThe landing opens on one full-bleed riso hero painted with `var(--hero-image)`. The headline sits on a solid paper plate sized to its text block, standing on a pink offset plate, so the picture stays visible around it; then three passes, a full-width press-blue band with the overprint figure, the week's runs, a printer's line and a plum closing card.\n\n- **Desktop** keeps the proof rail and full plate offsets.\n- **Tablet** drops to a single column below 900px.\n- **Mobile** is one column; plate offsets shrink to about 3px so nothing clips, non-essential nav links and table columns drop, and display headlines shrink with `clamp()` and wrap, never clipping the 390px edge."
}

preview shotsGenerated from the tokens

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-01a1137f-98fc-7511-918e-3cc1ea9aba0f",
    "name": "Spine",
    "slug": "spine"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Spine launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [],
    "dont": [
      "outline cards in heavy black keylines or rely on grey drop shadows.",
      "stamp one shape everywhere as wallpaper until it stops meaning anything.",
      "flood whole panels in saturated ink; let paper out-area the colour.",
      "use a white `#FFF` ground or default browser form controls.",
      "track the condensed faces wide, and don't bold Share Tech Mono.",
      "use the serif-upright and serif-italic headline swap.",
      "lay a gradient scrim behind hero type; set it on a solid paper plate."
    ]
  }
}

Try a remix

Keep Spine and swap a palette and an art style onto it. The landing recolors live.

UI language

Spine

Palette

Art style

Family

Evolved from

Risograph