Selvage

Selvage is the tulip hoop on the frame, used as an interface.

Download DESIGN.md

Tokens and rules, ready for an agent to follow.

Preview

Open full page

Built with

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

accent#C99A1F

bg#E6E1D5

surface#F2EFE8

text#1E2A44

muted#595E6B

border#D2CCBF

on accent#1E2A44

success#44603A

warning#7A5B0E

PaletteIts colours: 9 of its 14 colour tokens

Typography

Each face set in this language's own words.

headline lgCorben, 33px, 700

Selvage

headline mdCorben, 27px, 600

Selvage

body mdRosario, 17px, 400

Selvage is the tulip hoop on the frame, used as an interface.

label mdRosario, 12px, 600

Selvage is the tulip hoop on the frame, used as an interface.

Specification

Philosophy

summary

Selvage is the tulip hoop on the frame, used as an interface. One beech embroidery hoop sits on a flat flax table: cream linen drum-tight, a folk tulip worked in madder, indigo and saffron, one leaf still half a blue line, a needle parked beside it. It is the only thing in a view with light and shadow, and it means the order on the frame now. Around it everything is flat and small: Rosario for what you read, Corben for names and one big word, saffron for the thing to do, madder for the thing happening now.

It values

One object is the interface: the tulip hoop, photographed as a real thing with a use, and it is the only lit or raised element in a view.
Progress looks like the work: stitched where it is done, still a pale blue line where it is not.
Depth is a verb. The thread pulls taut only while you point at it; the hoop's shadow is its only standing depth.
Three flosses used like highlighters: saffron for the action, madder for what is on the frame, indigo for the thread itself.
The studio's own words are the content: order numbers, floss numbers, the ship day, half a leaf to go.

It refuses

A weave pattern over the ground or inside panels.
Fabric tabs stuck to the edges of boxes, or dashes framing every card.
Cards, panels and boxed lists in place of space.
All three flosses spread across the chrome at once.
A monospace face for data the body face can set in lining figures.
Borders, rules and hairlines in place of value and space.

visual character

The hoop stands whole on the #E6E1D5 flax table once per page, at about 55 to 60% of the hero width on the landing and 600px wide on the embodiment, with table on every side and its own warm two-layer shadow falling down and right.
A steel needle threaded with indigo floss is drawn over the photograph in its pixel space, lit from the same top-left light, with its own small warm shadow on the linen.
One big word per view, Corben 400 at 72 to 136px with -0.02em tracking, sits on one baseline with a small grey Rosario lead-in; when that word is the ship day, a row of eight madder running stitches marks it.
Saffron #C99A1F is spent only on the one action per view, a flat round-ended button with ink text; madder #AB382C marks only On the frame, the logo knot and the ship-day stitch.
Nothing is boxed: packing lists, kit lists, hours and forms sit straight on the table, rows parted by space; the only filled shapes are linen wells, one open overlay and the leaf photograph at 24px.

lineage

A revision of Selvage (generation 2), rebuilt the elevated (Inspora) way from the approved specimen. It keeps the embroidery world, the linen ground family, indigo ink and the madder, indigo and saffron flosses, and the hoop as the signature. It drops the woven grid, the fabric edge tabs, the running-stitch frames on every card, the mono face and the Fraunces and Inter pairing.

Tokens

colors14

#E6E1D5

surface

#F2EFE8

text

#1E2A44

muted

#595E6B

border

#D2CCBF

accent

#C99A1F

on accent

#1E2A44

success

#44603A

warning

#7A5B0E

error

#AB382C

info

#2D4A7C

madder

#AB382C

floss

#2D4A7C

shade

#5A3E22

derived8

madder: var(--error): the on-the-frame state and the ship-day stitch
pencil: color-mix(in srgb, var(--info) 38%, var(--surface)): the pale blue line of work not yet done
floss dark: color-mix(in srgb, var(--floss) 72%, black)
floss light: color-mix(in srgb, var(--floss) 62%, white)
floss sheen: color-mix(in srgb, var(--floss) 30%, white)
steel: four stops mixed from var(--text) and white (2, 14, 45 and 80 percent ink) for the needle
contact: color-mix(in srgb, var(--shade) 62%, black): the tight contact shadow
note: The eleven role colours drive the page. floss and shade belong to the photographed hoop, so the drawn needle and floss keep matching the photograph when a palette is swapped; every other shade is mixed in CSS.

typography14

heading font: Corben
body font: Rosario
heading weight: 400
body weight: 400
emphasis weight: 500
button weight: 600
heading transform: none
letter spacing: -0.02em on Corben; 0 on Rosario
line height: 1.6
base size: 17px
numerals: Rosario lining tabular figures for order numbers, prices, floss numbers and times
scale: 14.5px, 17px, 21px, 28px, 40px, 64px, clamp(72px, 9.4vw, 136px)
roles: display Corben 400: the wordmark, section titles, kit names and the one big word of a view (Friday.)body Rosario 400 at 17px for copy and control labels, 500 for the facts inside a sentence, 600 for labels and button textcaption Rosario 400 at 14.5px for captions, order numbers, dates and help
google fonts url: https://fonts.googleapis.com/css2?family=Corben&family=Rosario:wght@400;500;600&display=swap

radii3

none: 0
lg: 24px
full: 9999px

shadows4

hoop: Photographed with the hoop: a tight dark contact shadow under the lower-right ring and a wide warm ambient one, both falling down and right from a top-left light.
needle: drop-shadow 0.8px 1.4px 0.7px contact at 45% plus 3.2px 5.4px 2.6px shade at 28%, in the hoop photo's pixel space
overlay: 0 1px 2px shade at 22%, 10px 18px 36px -14px shade at 42%: open overlays only (menu, dialog, toast)
note: One key light from the top left. Shadows are warm brown from the shade token, never grey, and only the hoop and an open overlay carry one.

spacing2

base: 8px
scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 88px, 136px

surfaces5

treatment: one-object-on-a-flat-flax-table
material: The tulip hoop is the only material object: pale beech rings with a brass tension screw on brass straps, cream linen drum-tight, a folk tulip in madder, indigo and saffron floss, one leaf half filled. It is a studio photograph cut out with its own warm shadow; the needle and indigo floss are drawn over it in the same light so they can move.
table: The page ground bg is the flax table. On the landing the hero image is the empty table itself, softly lit from the top left, and the cut-out hoop stands on it.
card style: No cards or panels. Lists, forms, hours and specimens sit straight on the table, grouped by space and a Corben title. The linen surface appears only as a control well, a hover tint, an open overlay or the one sheet in a view.
photograph: A later view shows a part of the hoop, never the whole again: the half-worked leaf close up, at a 24px radius.

borders3

default width: 0
style: none
character: No borders, rules, outlines or hairlines. Rows part by space; wells are linen on flax. Focus is a 2px ink outline, 3px out from the control. The running stitch is not a border: it marks the ship day under the big word and appears under a link on hover.

motion4

duration: 550ms
easing: linear(0, .62 18%, 1.08 34%, .97 52%, 1.01 70%, 1)
reveal: 900ms cubic-bezier(.2,.7,.2,1), rising 26px, 100ms apart
philosophy: Motion is a physical verb: pull the thread. Pointing at the hoop or the saffron button slides the needle out along its own axis and draws the indigo floss taut from the unfinished leaf, with a small overshoot. The madder stitches under the ship day arrive one by one; a floss track runs out to its length. The settled state renders with no JavaScript; an inline script adds .anim to <html> to gate start states, and prefers-reduced-motion skips all travel while state changes still happen.

controls3

height: 50px
radius: 9999px for one-line controls, 24px for a textarea
wells: surface on the table

Rules

composition

Give every view one object moment: the hoop whole on the table, or a part of it (the half-worked leaf) close up. Everything else in that view stays flat.
Stand the hoop on the table with air on every side and its own shadow; never put it in a card, a panel or behind a scrim.
Order a page like a product page: the hoop and its caption, the one big word with its lead-in, two-tone copy, one saffron action, then the week's list.
Separate by space and value, never by boxes or lines: lists and forms sit straight on the table; a filled linen surface appears only as a well, a hover tint or one open overlay.
Show the whole hoop once per page; later views move in on a part of it.
Keep saffron to one action per view and madder to the one thing on the frame.

hierarchy

One big word per view in Corben 400 at the display step; everything else stays between 14.5 and 40px.
Corben 400 at -0.02em for the wordmark (21px), kit names (21px) and section titles (40px, 28px on phones).
Rosario 400 at 17px for copy, in two tones: the facts in ink at 500, the rest in slate.
Rosario at 14.5px for captions, order numbers, dates and help, with lining tabular figures.
Status is a 9px dot and a word, never a coloured field; On the frame is madder at 600.

density

Calm product-page density: one object and one big word per view, 136px between sections on desktop and 96px on phones, 50px controls, list rows about 54px tall parted by space, and prose held to about 34em.

signature patterns

The tulip hoop: a studio photograph (assets/hoop.webp) cut out with its own warm contact and ambient shadow and set on the flax table, with an SVG needle and indigo floss drawn over it in the photograph's 976 by 810 pixel space.
Pull the thread: pointing at the hoop or the saffron button moves the needle 23.12 by -11.89 units along its axis and morphs the floss path taut from the leaf over 550ms on linear(0, .62 18%, 1.08 34%, .97 52%, 1.01 70%, 1); the caption changes from half a leaf to go.
The ship-day stitch: eight short madder strokes with a faint linen highlight under the one big word, arriving 90ms apart on first load.
The thread key: 9px floss dots with their numbers (321, 820, 783) in the caption under the hoop, the same dots marking status in lists.
Worked or not yet: progress drawn as indigo floss where the work is done and a thin pale blue line where it is not, in step lines and stock tracks.
Links sew a running stitch under themselves on hover and focus.

Layout

grid

type: object-first product page
max width: 1180px content on the landing and 1240px on the embodiment, 1320 to 1360px from 1800px wide
gutter: 40px desktop, 20px phone
column behavior: The landing hero is two columns, minmax(0,5fr) copy and minmax(0,6fr) hoop; later views use the same split for photo and list, a four-column step line and a four-column kit list. Every track is minmax(0,1fr)-safe and every grid child min-width:0.

whitespace

section gap: 136 to 140px desktop, 96 to 100px phone
card gap: no cards; 15px row padding in lists, 26px in the kit list, 56 to 72px between groups
content padding: content sits on the table aligned to the grid edge; overlays pad 26 to 32px
approach: The table is empty space on purpose: the hoop needs air on every side, and each view has one focal point.

density

default: comfortable
comfortable: button height 50pxinput height 50pxrow height about 54px list rows

responsive

Phones (390px) stack to one column with the hoop first, hide all nav links but one, hide the meta column of the kit list and the customer and floss columns of tables, and let the hoop take the full width. Tablets (768 to 1100px) keep the two-column splits and fold the step line into two columns. Ultra-wide caps and centres the content and lets the hoop grow to 920px; only the landing hero spans the full width.

breakpoints

mobile: 390px
phone max: 600px
tablet: 860 to 1100px
desktop: 1280px
wide: 1440px
ultrawide: 1800px and 2560px

Guidance

Do

Put the hoop at the centre of the first view, whole, on the flat table with air all round.
Set one big word per view and let the rest stay small and quiet.
Spend saffron on one action per view and madder on the one thing on the frame.
Separate rows by space and value, and keep at most one filled surface in a view.
Write in the studio's own words: order numbers, floss numbers, the ship day, what is left to stitch.
Style every control explicitly: round linen wells, round switches and checks, a 2px ink focus ring.

Avoid

Don't put a weave pattern on the ground or inside panels.
Don't stick fabric tabs on box edges or frame cards with stitches.
Don't draw borders, rules or hairlines between rows.
Don't box content in cards or panels, or light more than one thing in a view.
Don't show the whole hoop twice on one page, or pair a secondary button with the saffron one; use a quiet link.
Don't put emoji or symbol glyphs on buttons.

Imagery

pairs with

woven-sampler-embroidery

summary

Studio product photographs of Selvage's one object and its parts on a flat flax table: a pale beech embroidery hoop with a brass screw, cream linen drum-tight, a folk tulip in satin stitch and French knots in madder, indigo and saffron cotton floss, one leaf half worked and still a pale blue transfer line, a steel needle. One soft key light from the top left, warm brown two-layer shadows falling down and right, true neutral colour.

subjects

the tulip hoop whole, from 25 degrees above
the half-worked leaf with the needle parked, close up
the brass tension screw on its straps
three skeins of 321, 820 and 783 floss
the empty flax table, lit from the top left

usage

One full-bleed hero per landing: the empty flax table, softly lit from the top left, with the cut-out hoop standing on it beside the headline. Inside pages use the cut-out hoop once and then close-ups of its parts, never the whole hoop twice. The Sampler art style lives inside the hoop: the stitching itself follows its satin stitch, French knots and couched outlines in matte cotton floss. The photographs around it are studio product photography, which Sampler's own prompt rules out for full illustrations; use Sampler's full prompt for any illustration that is not the object (a kit's design, a stitch card). No text, no people, no hands, no props beside the object.

Katagami spec file

# Selvage

## Philosophy

### Values

- One object is the interface: the tulip hoop, photographed as a real thing with a use, and it is the only lit or raised element in a view.
- Progress looks like the work: stitched where it is done, still a pale blue line where it is not.
- Depth is a verb. The thread pulls taut only while you point at it; the hoop's shadow is its only standing depth.
- Three flosses used like highlighters: saffron for the action, madder for what is on the frame, indigo for the thread itself.
- The studio's own words are the content: order numbers, floss numbers, the ship day, half a leaf to go.

### Anti-Values

- A weave pattern over the ground or inside panels.
- Fabric tabs stuck to the edges of boxes, or dashes framing every card.
- Cards, panels and boxed lists in place of space.
- All three flosses spread across the chrome at once.
- A monospace face for data the body face can set in lining figures.
- Borders, rules and hairlines in place of value and space.

### Visual Character

- The hoop stands whole on the #E6E1D5 flax table once per page, at about 55 to 60% of the hero width on the landing and 600px wide on the embodiment, with table on every side and its own warm two-layer shadow falling down and right.
- A steel needle threaded with indigo floss is drawn over the photograph in its pixel space, lit from the same top-left light, with its own small warm shadow on the linen.
- One big word per view, Corben 400 at 72 to 136px with -0.02em tracking, sits on one baseline with a small grey Rosario lead-in; when that word is the ship day, a row of eight madder running stitches marks it.
- Saffron #C99A1F is spent only on the one action per view, a flat round-ended button with ink text; madder #AB382C marks only On the frame, the logo knot and the ship-day stitch.
- Nothing is boxed: packing lists, kit lists, hours and forms sit straight on the table, rows parted by space; the only filled shapes are linen wells, one open overlay and the leaf photograph at 24px.

### Lineage

> A revision of Selvage (generation 2), rebuilt the elevated (Inspora) way from the approved specimen. It keeps the embroidery world, the linen ground family, indigo ink and the madder, indigo and saffron flosses, and the hoop as the signature. It drops the woven grid, the fabric edge tabs, the running-stitch frames on every card, the mono face and the Fraunces and Inter pairing.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#E6E1D5` |
| surface | `#F2EFE8` |
| text | `#1E2A44` |
| muted | `#595E6B` |
| border | `#D2CCBF` |
| accent | `#C99A1F` |
| on_accent | `#1E2A44` |
| success | `#44603A` |
| warning | `#7A5B0E` |
| error | `#AB382C` |
| info | `#2D4A7C` |
| madder | `#AB382C` |
| floss | `#2D4A7C` |
| shade | `#5A3E22` |

### Derived

- **Madder**: var(--error): the on-the-frame state and the ship-day stitch
- **Pencil**: color-mix(in srgb, var(--info) 38%, var(--surface)): the pale blue line of work not yet done
- **Floss Dark**: color-mix(in srgb, var(--floss) 72%, black)
- **Floss Light**: color-mix(in srgb, var(--floss) 62%, white)
- **Floss Sheen**: color-mix(in srgb, var(--floss) 30%, white)
- **Steel**: four stops mixed from var(--text) and white (2, 14, 45 and 80 percent ink) for the needle
- **Contact**: color-mix(in srgb, var(--shade) 62%, black): the tight contact shadow
- **Note**: The eleven role colours drive the page. floss and shade belong to the photographed hoop, so the drawn needle and floss keep matching the photograph when a palette is swapped; every other shade is mixed in CSS.

### Typography

- **Heading Font**: Corben
- **Body Font**: Rosario
- **Heading Weight**: 400
- **Body Weight**: 400
- **Emphasis Weight**: 500
- **Button Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on Corben; 0 on Rosario
- **Line Height**: 1.6
- **Base Size**: 17px
- **Numerals**: Rosario lining tabular figures for order numbers, prices, floss numbers and times
- **Scale**: ["14.5px","17px","21px","28px","40px","64px","clamp(72px, 9.4vw, 136px)"]
- **Roles**: {"display":"Corben 400: the wordmark, section titles, kit names and the one big word of a view (Friday.)","body":"Rosario 400 at 17px for copy and control labels, 500 for the facts inside a sentence, 600 for labels and button text","caption":"Rosario 400 at 14.5px for captions, order numbers, dates and help"}
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Corben&family=Rosario:wght@400;500;600&display=swap

### Radii

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

### Shadows

- **Hoop**: Photographed with the hoop: a tight dark contact shadow under the lower-right ring and a wide warm ambient one, both falling down and right from a top-left light.
- **Needle**: drop-shadow 0.8px 1.4px 0.7px contact at 45% plus 3.2px 5.4px 2.6px shade at 28%, in the hoop photo's pixel space
- **Overlay**: 0 1px 2px shade at 22%, 10px 18px 36px -14px shade at 42%: open overlays only (menu, dialog, toast)
- **Note**: One key light from the top left. Shadows are warm brown from the shade token, never grey, and only the hoop and an open overlay carry one.

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","64px","88px","136px"]

### Surfaces

- **Treatment**: one-object-on-a-flat-flax-table
- **Material**: The tulip hoop is the only material object: pale beech rings with a brass tension screw on brass straps, cream linen drum-tight, a folk tulip in madder, indigo and saffron floss, one leaf half filled. It is a studio photograph cut out with its own warm shadow; the needle and indigo floss are drawn over it in the same light so they can move.
- **Table**: The page ground bg is the flax table. On the landing the hero image is the empty table itself, softly lit from the top left, and the cut-out hoop stands on it.
- **Card Style**: No cards or panels. Lists, forms, hours and specimens sit straight on the table, grouped by space and a Corben title. The linen surface appears only as a control well, a hover tint, an open overlay or the one sheet in a view.
- **Photograph**: A later view shows a part of the hoop, never the whole again: the half-worked leaf close up, at a 24px radius.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, rules, outlines or hairlines. Rows part by space; wells are linen on flax. Focus is a 2px ink outline, 3px out from the control. The running stitch is not a border: it marks the ship day under the big word and appears under a link on hover.

### Motion

- **Duration**: 550ms
- **Easing**: linear(0, .62 18%, 1.08 34%, .97 52%, 1.01 70%, 1)
- **Reveal**: 900ms cubic-bezier(.2,.7,.2,1), rising 26px, 100ms apart
- **Philosophy**: Motion is a physical verb: pull the thread. Pointing at the hoop or the saffron button slides the needle out along its own axis and draws the indigo floss taut from the unfinished leaf, with a small overshoot. The madder stitches under the ship day arrive one by one; a floss track runs out to its length. The settled state renders with no JavaScript; an inline script adds .anim to <html> to gate start states, and prefers-reduced-motion skips all travel while state changes still happen.

### Controls

- **Height**: 50px
- **Radius**: 9999px for one-line controls, 24px for a textarea
- **Wells**: surface on the table

## Rules

### Composition

- Give every view one object moment: the hoop whole on the table, or a part of it (the half-worked leaf) close up. Everything else in that view stays flat.
- Stand the hoop on the table with air on every side and its own shadow; never put it in a card, a panel or behind a scrim.
- Order a page like a product page: the hoop and its caption, the one big word with its lead-in, two-tone copy, one saffron action, then the week's list.
- Separate by space and value, never by boxes or lines: lists and forms sit straight on the table; a filled linen surface appears only as a well, a hover tint or one open overlay.
- Show the whole hoop once per page; later views move in on a part of it.
- Keep saffron to one action per view and madder to the one thing on the frame.

### Hierarchy

- One big word per view in Corben 400 at the display step; everything else stays between 14.5 and 40px.
- Corben 400 at -0.02em for the wordmark (21px), kit names (21px) and section titles (40px, 28px on phones).
- Rosario 400 at 17px for copy, in two tones: the facts in ink at 500, the rest in slate.
- Rosario at 14.5px for captions, order numbers, dates and help, with lining tabular figures.
- Status is a 9px dot and a word, never a coloured field; On the frame is madder at 600.

### Density

### Signature Patterns

- The tulip hoop: a studio photograph (assets/hoop.webp) cut out with its own warm contact and ambient shadow and set on the flax table, with an SVG needle and indigo floss drawn over it in the photograph's 976 by 810 pixel space.
- Pull the thread: pointing at the hoop or the saffron button moves the needle 23.12 by -11.89 units along its axis and morphs the floss path taut from the leaf over 550ms on linear(0, .62 18%, 1.08 34%, .97 52%, 1.01 70%, 1); the caption changes from half a leaf to go.
- The ship-day stitch: eight short madder strokes with a faint linen highlight under the one big word, arriving 90ms apart on first load.
- The thread key: 9px floss dots with their numbers (321, 820, 783) in the caption under the hoop, the same dots marking status in lists.
- Worked or not yet: progress drawn as indigo floss where the work is done and a thin pale blue line where it is not, in step lines and stock tracks.
- Links sew a running stitch under themselves on hover and focus.

## Layout

### Grid

- **Type**: object-first product page
- **Max Width**: 1180px content on the landing and 1240px on the embodiment, 1320 to 1360px from 1800px wide
- **Gutter**: 40px desktop, 20px phone
- **Column Behavior**: The landing hero is two columns, minmax(0,5fr) copy and minmax(0,6fr) hoop; later views use the same split for photo and list, a four-column step line and a four-column kit list. Every track is minmax(0,1fr)-safe and every grid child min-width:0.

### Whitespace

- **Section Gap**: 136 to 140px desktop, 96 to 100px phone
- **Card Gap**: no cards; 15px row padding in lists, 26px in the kit list, 56 to 72px between groups
- **Content Padding**: content sits on the table aligned to the grid edge; overlays pad 26 to 32px
- **Approach**: The table is empty space on purpose: the hoop needs air on every side, and each view has one focal point.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"50px","input_height":"50px","row_height":"about 54px list rows"}

### Responsive

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 860 to 1100px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 1800px and 2560px

## Guidance

### Do

- Put the hoop at the centre of the first view, whole, on the flat table with air all round.
- Set one big word per view and let the rest stay small and quiet.
- Spend saffron on one action per view and madder on the one thing on the frame.
- Separate rows by space and value, and keep at most one filled surface in a view.
- Write in the studio's own words: order numbers, floss numbers, the ship day, what is left to stitch.
- Style every control explicitly: round linen wells, round switches and checks, a 2px ink focus ring.

### Don't

- Don't put a weave pattern on the ground or inside panels.
- Don't stick fabric tabs on box edges or frame cards with stitches.
- Don't draw borders, rules or hairlines between rows.
- Don't box content in cards or panels, or light more than one thing in a view.
- Don't show the whole hoop twice on one page, or pair a secondary button with the saffron one; use a quiet link.
- Don't put emoji or symbol glyphs on buttons.

### Accessibility

WCAG AA on the flax table #E6E1D5: ink #1E2A44 is 11.0:1, slate #595E6B is 5.0:1, madder #AB382C is 4.8:1, indigo #2D4A7C is 6.8:1, sage #44603A is 5.4:1 and ochre #7A5B0E clears 4.8:1; ink on saffron is 5.5:1; every role colour is higher on linen #F2EFE8. Focus is a visible 2px ink outline on every control. Status never relies on colour alone: every dot has a word. The hoop has a full alt text; the drawn needle is aria-hidden. prefers-reduced-motion skips the pull, the sewing-in and the reveals; state changes still happen.

## Imagery Direction

### Pairs With

woven-sampler-embroidery

### Summary

### Subjects

- the tulip hoop whole, from 25 degrees above
- the half-worked leaf with the needle parked, close up
- the brass tension screw on its straps
- three skeins of 321, 820 and 783 floss
- the empty flax table, lit from the top left

### Usage

DESIGN.md file

---
version: "alpha"
name: "Selvage"
description: "Selvage is the tulip hoop on the frame, used as an interface. One beech embroidery hoop sits on a flat flax table: cream linen drum-tight, a folk tulip worked in madder, indigo and saffron, one leaf still half a blue line, a needle parke..."
colors:
bg: "#E6E1D5"
surface: "#F2EFE8"
text: "#1E2A44"
muted: "#595E6B"
border: "#D2CCBF"
accent: "#C99A1F"
on_accent: "#1E2A44"
success: "#44603A"
warning: "#7A5B0E"
error: "#AB382C"
info: "#2D4A7C"
madder: "#AB382C"
floss: "#2D4A7C"
shade: "#5A3E22"
typography:
headline-lg:
fontFamily: "Corben"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Corben"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Rosario"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.6
letterSpacing: "-0.02em"
label-md:
fontFamily: "Rosario"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
lg: "24px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "88px"
step-9: "136px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
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-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
color-reference-madder:
backgroundColor: "{colors.madder}"
color-reference-floss:
backgroundColor: "{colors.floss}"
color-reference-shade:
backgroundColor: "{colors.shade}"
button-primary:
backgroundColor: "{colors.accent}"
textColor: "{colors.on_accent}"
typography: "{typography.label-md}"
rounded: "{rounded.lg}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.lg}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.lg}"
height: "44px"
---

# Selvage

## Overview

### Values

### Anti-Values

### Visual Character

### Lineage

## 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 | `#E6E1D5` |
| surface | `#F2EFE8` |
| text | `#1E2A44` |
| muted | `#595E6B` |
| border | `#D2CCBF` |
| accent | `#C99A1F` |
| on_accent | `#1E2A44` |
| success | `#44603A` |
| warning | `#7A5B0E` |
| error | `#AB382C` |
| info | `#2D4A7C` |
| madder | `#AB382C` |
| floss | `#2D4A7C` |
| shade | `#5A3E22` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Corben&family=Rosario:wght@400;500;600&display=swap

- **Headline-Lg**: Corben, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Corben, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Rosario, 17px, weight 400, line-height 1.6.
- **Label-Md**: Rosario, 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**: `64px`
- **Step-8**: `88px`
- **Step-9**: `136px`

### Grid

### Whitespace

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"50px","input_height":"50px","row_height":"about 54px list rows"}

### Responsive

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 860 to 1100px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 1800px and 2560px

## Elevation & Depth

### Shadows

## Shapes

### Rounded

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

### Surfaces

### Borders

## Components

### Composition

### Hierarchy

### Density

### Signature Patterns

## 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-01a0ecb5-468b-7363-b03a-dba6f795c759/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0ecb5-468b-7363-b03a-dba6f795c759/shadcn.json` (registry theme), `/language/en-01a0ecb5-468b-7363-b03a-dba6f795c759/shadcn-components.md` (component recipes) and `/language/en-01a0ecb5-468b-7363-b03a-dba6f795c759/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

- Do Put the hoop at the centre of the first view, whole, on the flat table with air all round.
- Do Set one big word per view and let the rest stay small and quiet.
- Do Spend saffron on one action per view and madder on the one thing on the frame.
- Do Separate rows by space and value, and keep at most one filled surface in a view.
- Do Write in the studio's own words: order numbers, floss numbers, the ship day, what is left to stitch.
- Do Style every control explicitly: round linen wells, round switches and checks, a 2px ink focus ring.
- Don't Don't put a weave pattern on the ground or inside panels.
- Don't Don't stick fabric tabs on box edges or frame cards with stitches.
- Don't Don't draw borders, rules or hairlines between rows.
- Don't Don't box content in cards or panels, or light more than one thing in a view.
- Don't Don't show the whole hoop twice on one page, or pair a secondary button with the saffron one; use a quiet link.
- Don't Don't put emoji or symbol glyphs on buttons.

### Accessibility

## Imagery Direction

### Pairs With

woven-sampler-embroidery

### Summary

### Subjects

### Usage

shadcn/ui theme file

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "selvage",
  "type": "registry:theme",
  "title": "Selvage shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#E6E1D5",
      "foreground": "#1E2A44",
      "card": "#F2EFE8",
      "card-foreground": "#1E2A44",
      "popover": "#F2EFE8",
      "popover-foreground": "#1E2A44",
      "primary": "#1E2A44",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#595E6B",
      "muted-foreground": "#1E2A44",
      "accent": "#C99A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#AB382C",
      "border": "#D2CCBF",
      "input": "#D2CCBF",
      "ring": "#C99A1F",
      "chart-1": "#1E2A44",
      "chart-2": "#f4f4f5",
      "chart-3": "#C99A1F",
      "chart-4": "#44603A",
      "chart-5": "#7A5B0E",
      "sidebar": "#F2EFE8",
      "sidebar-foreground": "#1E2A44",
      "sidebar-primary": "#1E2A44",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2D4A7C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D2CCBF",
      "sidebar-ring": "#C99A1F",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1E2A44",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C99A1F",
      "accent-foreground": "#ffffff",
      "destructive": "#AB382C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C99A1F",
      "chart-1": "#1E2A44",
      "chart-2": "#f4f4f5",
      "chart-3": "#C99A1F",
      "chart-4": "#44603A",
      "chart-5": "#7A5B0E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1E2A44",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C99A1F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C99A1F",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0ecb5-468b-7363-b03a-dba6f795c759",
    "slug": "selvage",
    "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",
        "bg",
        "border",
        "error",
        "floss",
        "info",
        "madder",
        "muted",
        "on_accent",
        "shade",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "derived": [
        "contact",
        "floss_dark",
        "floss_light",
        "floss_sheen",
        "madder",
        "note",
        "pencil",
        "steel"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "emphasis_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "numerals",
        "roles",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "none"
      ],
      "shadows": [
        "hoop",
        "needle",
        "note",
        "overlay"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "card_style",
        "material",
        "photograph",
        "table",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy",
        "reveal"
      ],
      "controls": [
        "height",
        "radius",
        "wells"
      ]
    }
  }
}
```

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: #E6E1D5;
  --foreground: #1E2A44;
  --card: #F2EFE8;
  --card-foreground: #1E2A44;
  --popover: #F2EFE8;
  --popover-foreground: #1E2A44;
  --primary: #1E2A44;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #595E6B;
  --muted-foreground: #1E2A44;
  --accent: #C99A1F;
  --accent-foreground: #ffffff;
  --destructive: #AB382C;
  --border: #D2CCBF;
  --input: #D2CCBF;
  --ring: #C99A1F;
  --chart-1: #1E2A44;
  --chart-2: #f4f4f5;
  --chart-3: #C99A1F;
  --chart-4: #44603A;
  --chart-5: #7A5B0E;
  --sidebar: #F2EFE8;
  --sidebar-foreground: #1E2A44;
  --sidebar-primary: #1E2A44;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2D4A7C;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D2CCBF;
  --sidebar-ring: #C99A1F;
  --radius: 24px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1E2A44;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #C99A1F;
  --accent-foreground: #ffffff;
  --destructive: #AB382C;
  --border: #303642;
  --input: #303642;
  --ring: #C99A1F;
  --chart-1: #1E2A44;
  --chart-2: #f4f4f5;
  --chart-3: #C99A1F;
  --chart-4: #44603A;
  --chart-5: #7A5B0E;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1E2A44;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #C99A1F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #C99A1F;
  --radius: 24px;
}

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 SelvageShadcnKit() {
  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">Selvage</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 JSONStored, not verified

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "selvage",
  "type": "registry:theme",
  "title": "Selvage",
  "description": "The tulip hoop on a flax table: flat linen wells, no borders, round ends on one-line controls and 24px on surfaces, one saffron action, madder for what is on the frame.",
  "cssVars": {
    "theme": {
      "font-sans": "Rosario, system-ui, sans-serif",
      "font-display": "Corben, Georgia, serif",
      "radius": "1.5rem"
    },
    "light": {
      "background": "#E6E1D5",
      "foreground": "#1E2A44",
      "card": "#F2EFE8",
      "card-foreground": "#1E2A44",
      "popover": "#F2EFE8",
      "popover-foreground": "#1E2A44",
      "primary": "#C99A1F",
      "primary-foreground": "#1E2A44",
      "secondary": "#F2EFE8",
      "secondary-foreground": "#1E2A44",
      "muted": "#F2EFE8",
      "muted-foreground": "#595E6B",
      "accent": "#F2EFE8",
      "accent-foreground": "#1E2A44",
      "destructive": "#AB382C",
      "destructive-foreground": "#F2EFE8",
      "border": "transparent",
      "input": "transparent",
      "ring": "#1E2A44",
      "chart-1": "#2D4A7C",
      "chart-2": "#AB382C",
      "chart-3": "#C99A1F",
      "chart-4": "#44603A",
      "chart-5": "#595E6B",
      "radius": "1.5rem"
    },
    "dark": {
      "background": "#E6E1D5",
      "foreground": "#1E2A44",
      "card": "#F2EFE8",
      "card-foreground": "#1E2A44",
      "popover": "#F2EFE8",
      "popover-foreground": "#1E2A44",
      "primary": "#C99A1F",
      "primary-foreground": "#1E2A44",
      "secondary": "#F2EFE8",
      "secondary-foreground": "#1E2A44",
      "muted": "#F2EFE8",
      "muted-foreground": "#595E6B",
      "accent": "#F2EFE8",
      "accent-foreground": "#1E2A44",
      "destructive": "#AB382C",
      "destructive-foreground": "#F2EFE8",
      "border": "transparent",
      "input": "transparent",
      "ring": "#1E2A44",
      "chart-1": "#2D4A7C",
      "chart-2": "#AB382C",
      "chart-3": "#C99A1F",
      "chart-4": "#44603A",
      "chart-5": "#595E6B",
      "radius": "1.5rem"
    }
  },
  "componentManifest": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "meta": {
    "nativeTokenNames": {
      "bg": "background",
      "surface": "card / popover / secondary / muted / accent",
      "text": "foreground",
      "muted": "muted-foreground",
      "accent": "primary",
      "on_accent": "primary-foreground",
      "error": "destructive",
      "info": "chart-1",
      "madder": "native only (alias of error)",
      "floss": "native only",
      "shade": "native only"
    },
    "note": "Selvage is a light-ground language by concept (a flax table); the dark scope repeats the light values.",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ]
  }
}

component recipesStored, not verified

---
artifact: component-recipes-v1
language: selvage
author: katagami-agent
primitives: 16
---

# Selvage shadcn/ui Components

Author: `katagami-agent`

## Intent

Selvage dresses shadcn/ui as the precise, flat interface around one real object: a beech tulip hoop on a flax table, cream linen drum-tight, a folk tulip in madder, indigo and saffron floss, one leaf half worked and a needle parked beside it. The hoop is the only raised or lit thing in a view, shown whole once per page. Nothing else is boxed: content sits straight on the table, parted by space; the only filled surfaces are linen wells, one open overlay and the one sheet in a view. Saffron is spent on one action per view; madder marks the order on the frame.

## Required primitives

button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, table. Import them from `@/components/ui/*`; do not build a second component system.

## Token cues

```css
--background:#E6E1D5;
--foreground:#1E2A44;
--card:#F2EFE8;
--card-foreground:#1E2A44;
--popover:#F2EFE8;
--popover-foreground:#1E2A44;
--primary:#C99A1F;
--primary-foreground:#1E2A44;
--secondary:#F2EFE8;
--secondary-foreground:#1E2A44;
--muted:#F2EFE8;
--muted-foreground:#595E6B;
--accent:#F2EFE8;
--accent-foreground:#1E2A44;
--destructive:#AB382C;
--destructive-foreground:#F2EFE8;
--border:transparent;
--input:transparent;
--ring:#1E2A44;
--radius:1.5rem;
--font-sans:Rosario; --font-display:Corben;
```

Native names are kept in the theme: `bg`, `surface`, `text`, `muted`, `accent`, `on_accent`, `madder`, `floss`, `shade`.

## Visual character to preserve

- One object per view: the tulip hoop on the table with its own warm shadow. Never put it in a Card.
- No borders, dividers, hairlines, cards or panels. Rows and groups separate by space and type value; at most one filled surface per view.
- Round like the hoop: one-line controls have round ends; surfaces holding more than one line take 24px.
- Saffron only on the primary action; madder only on On the frame and the ship-day stitch; indigo for the thread and work that is done.
- Corben 400 for names and the one big word, Rosario for everything read, lining tabular figures for numbers. No mono face.
- Shadows fall down and right from one top-left light, warm brown, in two layers, only on the hoop and an open overlay.

## ShadSync visual profile

- family: craft-object
- material: flat flax and linen around one photographed beech hoop
- contour: round, radius 24 and 9999
- border: none
- underlay: false
- grain: false
- stickerBadges: false
- motion: thread pull on hover, settle on scroll
- density: comfortable
- accents: saffron-action, madder-state

## Signature component recipes

- **button:** 50px, round ends, Rosario 600 at 17px, no border, never wraps. Primary is flat saffron with ink text, one per view, rising 1px on hover. Secondary is linen; ghost is text alone; destructive is madder text on a faint madder tint. Focus is a 2px ink outline.
- **card:** No frame around content: transparent, no padding, grouped by space and a Corben title. Linen at 24px is kept for overlays and the one sheet in a view; never around the hoop or a list.
- **input:** A flat 50px linen well on the table, round ends, no border; slate placeholder; 2px ink outline on focus.
- **textarea:** The linen well at 120px with a 24px radius, 16px vertical padding, vertical resize only.
- **select:** The round linen well with a drawn chevron in slate; content is a linen panel at 24px with round-ended rows.
- **dialog:** A linen panel at 24px with the two-layer warm shadow; Corben title at 21px; a destructive-tint action beside a ghost one.
- **sheet:** A linen side panel at 24px listing what is in the box, rows parted by space.
- **tabs:** No tray: 42px Rosario triggers on the table; the active one takes a round linen fill and ink. No underline.
- **badge:** Not a filled chip: a 9px dot in the state colour and a Rosario word. On the frame is madder at 600.
- **separator:** Not drawn. Row padding and space between groups do the job; render transparent if a primitive needs one.
- **checkbox:** A 24px round linen well that fills saffron with a drawn ink tick when checked.
- **switch:** A 46 by 26px round track in the border token with a linen knob; on turns the track saffron and slides the knob with a small overshoot.
- **slider:** A 6px round track in the border token, indigo range and a 22px ink thumb; the value prints in Rosario above it.
- **tooltip:** Ink with linen text at 14.5px, round ends, the small warm shadow.
- **dropdown-menu:** A linen panel at 24px with the warm shadow; round-ended rows with a slate count on the right, highlighted with the flax tone.
- **table:** The packing list: rows straight on the table, parted by space, no dividers; order numbers in slate lining figures; status as a dot and a word; the order on the frame in madder; hover tints the row linen with round ends.

### The tulip hoop (the signature, outside shadcn)

The hoop is not a shadcn primitive. Build it once: the cut-out photograph (`hoop.webp`, its shadow in the alpha) in a box with `aspect-ratio: 976/810`, and an SVG in the same 976 by 810 space over it holding the indigo floss (four strokes: dark, floss, light, a fine sheen) and the steel needle (four stops mixed from ink and white, two warm drop shadows). Pointing at the hoop or the saffron button translates the needle `23.12px, -11.89px` along its axis and morphs the floss path taut over 550ms on `linear(0, .62 18%, 1.08 34%, .97 52%, 1.01 70%, 1)`. Show it whole once per page, with the caption and thread key under it.

## Preview shots

- `application-shell`: the studio desk. The hoop on the table as the one object, Friday. as the big word, one saffron Pack today's orders, the packing list on the page with no panels.
- `detail-editor`: place an order. Round linen wells with the focus ring, kit select, note textarea, checks, the Friday note switch, the strands slider, one saffron Place the order.
- `data-operations`: floss and orders. Tabs, an open kit menu, the order table with status dots, a sheet of what is in the box, and a destructive dialog to cancel an order waiting on floss.

Each shot carries a renderable `scene` with headline, description, actions and rows or fields.

## Implementation contract

- Start from local `@/components/ui/*` shadcn primitives and apply `/katagami/shadcn/selvage/registry-theme.json`.
- Keep `--border` and `--input` transparent; wells get their tone from `bg-card` on the page.
- Set `--radius: 1.5rem` for surfaces; give one-line controls `rounded-full`.
- One `default` (saffron) button per view; a second action is a quiet link.
- No Card frames around content; show the whole hoop once per page, then parts of it.
- Respect `prefers-reduced-motion`: skip the pull and the reveals, keep the state change.

## Copy-paste component example

```tsx
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

const week = [
  { no: "1041", kit: "Fern sampler", who: "Ines Moraes", status: "Waiting on floss", tone: "bg-[#7A5B0E]", live: false },
  { no: "1042", kit: "Alphabet band", who: "Theo Park", status: "Ready to post", tone: "bg-[#44603A]", live: false },
  { no: "1043", kit: "Tulip hoop", who: "Mariam Aziz", status: "On the frame", tone: "bg-destructive", live: true },
];

export function ThisWeek() {
  return (
    <Card className="gap-2 border-0 bg-transparent p-0 shadow-none">
      <CardHeader className="flex-row items-baseline justify-between p-0 pb-2">
        <CardTitle className="font-[Corben] text-[21px] font-normal tracking-[-0.02em]">Going out Friday</CardTitle>
        <span className="text-[14.5px] text-muted-foreground tabular-nums">3 kits</span>
      </CardHeader>
      <CardContent className="flex flex-col p-0 text-[17px]">
        {week.map((r) => (
          <div key={r.no} className="grid grid-cols-[52px_1fr_auto] items-baseline gap-x-4 py-[15px]">
            <span className="text-[14.5px] text-muted-foreground tabular-nums">{r.no}</span>
            <span>{r.kit} <span className="text-muted-foreground">· {r.who}</span></span>
            <Badge className={`h-auto gap-2 bg-transparent p-0 text-[17px] font-normal ${r.live ? "font-semibold text-destructive" : "text-muted-foreground"}`}>
              <span className={`size-[9px] rounded-full ${r.tone}`} />{r.status}
            </Badge>
          </div>
        ))}
        <Button className="mt-6 h-[50px] self-start rounded-full px-7 text-[17px] font-semibold">Pack today&apos;s orders</Button>
      </CardContent>
    </Card>
  );
}
```

preview shotsStored, not verified

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "author": "katagami-agent",
  "requiresVisualProfile": true,
  "language": {
    "id": "en-019efddc-be6b-7972-89f9-33558ff1c338",
    "name": "Selvage",
    "slug": "selvage"
  },
  "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": [
    "One object per view: the tulip hoop on a flat flax table, with its own warm shadow; a needle pulls its floss taut on hover.",
    "No borders, dividers, cards or panels; content sits on the table, parted by space, with at most one filled surface per view.",
    "Saffron for the one action, madder for the order on the frame, indigo for the thread itself.",
    "Corben for names and one big word, Rosario for everything read, lining figures for numbers."
  ],
  "visualProfile": {
    "family": "craft-object",
    "material": "flat flax and linen around one photographed beech hoop",
    "contour": "round",
    "border": "none",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "thread pull on hover, settle on scroll",
    "density": "comfortable",
    "radius": [
      0,
      24,
      9999
    ],
    "accents": [
      "saffron-action",
      "madder-state"
    ]
  },
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "50px, round ends, Rosario 600 at 17px, no border, never wraps. Primary is flat saffron with ink text, one per view, rising 1px on hover. Secondary is linen; ghost is text alone; destructive is madder text on a faint madder tint. Focus is a 2px ink outline.",
      "recipe": "50px, round ends, Rosario 600 at 17px, no border, never wraps. Primary is flat saffron with ink text, one per view, rising 1px on hover. Secondary is linen; ghost is text alone; destructive is madder text on a faint madder tint. Focus is a 2px ink outline."
    },
    {
      "primitive": "card",
      "intent": "No frame around content: transparent, no padding, grouped by space and a Corben title. Linen at 24px is kept for overlays and the one sheet in a view; never around the hoop or a list.",
      "recipe": "No frame around content: transparent, no padding, grouped by space and a Corben title. Linen at 24px is kept for overlays and the one sheet in a view; never around the hoop or a list."
    },
    {
      "primitive": "input",
      "intent": "A flat 50px linen well on the table, round ends, no border; slate placeholder; 2px ink outline on focus.",
      "recipe": "A flat 50px linen well on the table, round ends, no border; slate placeholder; 2px ink outline on focus."
    },
    {
      "primitive": "textarea",
      "intent": "The linen well at 120px with a 24px radius, 16px vertical padding, vertical resize only.",
      "recipe": "The linen well at 120px with a 24px radius, 16px vertical padding, vertical resize only."
    },
    {
      "primitive": "select",
      "intent": "The round linen well with a drawn chevron in slate; content is a linen panel at 24px with round-ended rows.",
      "recipe": "The round linen well with a drawn chevron in slate; content is a linen panel at 24px with round-ended rows."
    },
    {
      "primitive": "dialog",
      "intent": "A linen panel at 24px with the two-layer warm shadow; Corben title at 21px; a destructive-tint action beside a ghost one.",
      "recipe": "A linen panel at 24px with the two-layer warm shadow; Corben title at 21px; a destructive-tint action beside a ghost one."
    },
    {
      "primitive": "sheet",
      "intent": "A linen side panel at 24px listing what is in the box, rows parted by space.",
      "recipe": "A linen side panel at 24px listing what is in the box, rows parted by space."
    },
    {
      "primitive": "tabs",
      "intent": "No tray: 42px Rosario triggers on the table; the active one takes a round linen fill and ink. No underline.",
      "recipe": "No tray: 42px Rosario triggers on the table; the active one takes a round linen fill and ink. No underline."
    },
    {
      "primitive": "badge",
      "intent": "Not a filled chip: a 9px dot in the state colour and a Rosario word. On the frame is madder at 600.",
      "recipe": "Not a filled chip: a 9px dot in the state colour and a Rosario word. On the frame is madder at 600."
    },
    {
      "primitive": "separator",
      "intent": "Not drawn. Row padding and space between groups do the job; render transparent if a primitive needs one.",
      "recipe": "Not drawn. Row padding and space between groups do the job; render transparent if a primitive needs one."
    },
    {
      "primitive": "checkbox",
      "intent": "A 24px round linen well that fills saffron with a drawn ink tick when checked.",
      "recipe": "A 24px round linen well that fills saffron with a drawn ink tick when checked."
    },
    {
      "primitive": "switch",
      "intent": "A 46 by 26px round track in the border token with a linen knob; on turns the track saffron and slides the knob with a small overshoot.",
      "recipe": "A 46 by 26px round track in the border token with a linen knob; on turns the track saffron and slides the knob with a small overshoot."
    },
    {
      "primitive": "slider",
      "intent": "A 6px round track in the border token, indigo range and a 22px ink thumb; the value prints in Rosario above it.",
      "recipe": "A 6px round track in the border token, indigo range and a 22px ink thumb; the value prints in Rosario above it."
    },
    {
      "primitive": "tooltip",
      "intent": "Ink with linen text at 14.5px, round ends, the small warm shadow.",
      "recipe": "Ink with linen text at 14.5px, round ends, the small warm shadow."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "A linen panel at 24px with the warm shadow; round-ended rows with a slate count on the right, highlighted with the flax tone.",
      "recipe": "A linen panel at 24px with the warm shadow; round-ended rows with a slate count on the right, highlighted with the flax tone."
    },
    {
      "primitive": "table",
      "intent": "The packing list: rows straight on the table, parted by space, no dividers; order numbers in slate lining figures; status as a dot and a word; the order on the frame in madder; hover tints the row linen with round ends.",
      "recipe": "The packing list: rows straight on the table, parted by space, no dividers; order numbers in slate lining figures; status as a dot and a word; the order on the frame in madder; hover tints the row linen with round ends."
    }
  ],
  "shots": [
    {
      "id": "application-shell",
      "title": "This week at the frame",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "badge",
        "table",
        "tabs",
        "tooltip"
      ],
      "composition": "The studio desk: the tulip hoop whole on the flax table as the one object, the caption and thread key under it, Friday. as the one big word, two-tone copy, one saffron Pack today's orders, then the packing list on the table with no panels.",
      "mustShow": [
        "the hoop with the needle parked",
        "Friday. with the madder stitch under it",
        "one saffron button",
        "On the frame in madder",
        "status dots with words"
      ],
      "avoid": [
        "borders or dividers",
        "cards or panels around content",
        "a weave pattern",
        "fabric tabs on box edges"
      ],
      "mustShowStates": [
        "primary saffron button",
        "live row in madder",
        "row hover",
        "active tab"
      ],
      "avoidRules": [
        "no borders",
        "no stitched frames",
        "no second accent on chrome",
        "no emoji on buttons"
      ],
      "scene": {
        "eyebrow": "Fernhill Stitchery · Thu 2 Oct",
        "headline": "Three kits go out Friday.",
        "description": "The fern sampler still needs two skeins of blue 820. The alphabet band is pressed, and the tulip hoop is on the frame now.",
        "primaryAction": "Pack today's orders",
        "secondaryAction": "Print labels",
        "rows": [
          {
            "label": "1041 Fern sampler · Ines Moraes",
            "value": "Fri 3 Oct",
            "status": "Waiting on floss"
          },
          {
            "label": "1042 Alphabet band · Theo Park",
            "value": "Fri 3 Oct",
            "status": "Ready to post"
          },
          {
            "label": "1043 Tulip hoop · Mariam Aziz",
            "value": "Fri 3 Oct",
            "status": "On the frame"
          }
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Place an order",
      "viewport": "desktop",
      "primitives": [
        "card",
        "input",
        "select",
        "textarea",
        "checkbox",
        "switch",
        "slider",
        "button",
        "badge"
      ],
      "composition": "A form straight on the table: name and email wells with the focus ring, a kit select, the card note textarea, hoop size, wrap and spare-needle checks, the Friday note switch, the strands slider, one saffron Place the order.",
      "mustShow": [
        "focused email well",
        "drawn select chevron",
        "checked saffron checkbox",
        "switch on in saffron",
        "strands slider at 2 of 6"
      ],
      "avoid": [
        "browser default controls",
        "outlined inputs",
        "grey borders"
      ],
      "mustShowStates": [
        "focus ring in ink",
        "checked",
        "switch on",
        "primary button"
      ],
      "avoidRules": [
        "no borders",
        "no nested cards"
      ],
      "scene": {
        "eyebrow": "Tulip hoop kit · £28",
        "headline": "Place an order",
        "description": "Order by Thursday at noon and it goes in Friday's post bag with the others.",
        "primaryAction": "Place the order",
        "secondaryAction": "Keep browsing",
        "fields": [
          {
            "label": "Name on the order",
            "value": "Mariam Aziz",
            "type": "text"
          },
          {
            "label": "Email",
            "value": "mariam@fernmail.net",
            "type": "email"
          },
          {
            "label": "Kit",
            "value": "Tulip hoop, 4 in",
            "type": "select"
          },
          {
            "label": "Strands of floss",
            "value": "2 of 6",
            "type": "range"
          }
        ],
        "statuses": [
          "Focus",
          "Checked",
          "Placed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Floss and orders",
      "viewport": "desktop",
      "primitives": [
        "tabs",
        "dropdown-menu",
        "table",
        "badge",
        "dialog",
        "sheet",
        "button",
        "separator"
      ],
      "composition": "Tabs for This week, Next week and Posted, a kit dropdown open, the order table with status dots, a sheet listing what is in the box, and a destructive dialog to cancel an order waiting on floss.",
      "mustShow": [
        "active tab",
        "open kit menu",
        "status dots in four state colours",
        "destructive-tint Cancel order"
      ],
      "avoid": [
        "row dividers",
        "solid red buttons",
        "a weave pattern"
      ],
      "mustShowStates": [
        "active tab",
        "menu open",
        "row hover",
        "destructive action"
      ],
      "avoidRules": [
        "no dividers",
        "no second accent"
      ],
      "scene": {
        "eyebrow": "Stock checked 9:10 am",
        "headline": "Floss and orders",
        "description": "820 is out until Thursday; one order waits on it. Everything else can be cut and packed today.",
        "primaryAction": "Cut today's floss",
        "secondaryAction": "Cancel order 1041",
        "rows": [
          {
            "label": "321 madder",
            "value": "14 skeins",
            "status": "In stock"
          },
          {
            "label": "820 indigo",
            "value": "0 skeins, 2 due Thu",
            "status": "Waiting on floss"
          },
          {
            "label": "783 saffron",
            "value": "9 skeins",
            "status": "In stock"
          },
          {
            "label": "1044 Saffron bee · Lena Hart",
            "value": "Fri 10 Oct",
            "status": "Traced"
          }
        ],
        "statuses": [
          "In stock",
          "Waiting on floss",
          "Traced",
          "On the frame"
        ]
      }
    }
  ],
  "qualityRules": {
    "do": [
      "Keep the hoop as the one object per view, shown whole once per page",
      "Separate with space and type value",
      "One saffron action per view; a second action is a quiet link",
      "Madder only for the order on the frame"
    ],
    "dont": [
      "No borders or dividers",
      "No cards or panels around content",
      "No weave pattern or fabric tabs",
      "No mono face",
      "No emoji on buttons"
    ]
  }
}

Try a remix

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

UI language

Selvage

Palette

Art style