Salt

A white salt flat at noon, used as an interface.

Its pictures are drawn in Halite.

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

Download DESIGN.md

Tokens, rules and the paired art style Halite.

Preview

Open full page

Built with

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

Art styleHalite3dView

accent#D52B1E

bg#FFFFFF

surface#FFFFFF

text#0B0B0C

muted#5F656D

well#F2F4F6

text 2#3B3F45

steel#A7AEB6

groove#E3E7EB

PaletteIts colours: 9 of its 16 colour tokens

Typography

Each face set in this language's own words.

headline lgGloock, 31px, 700

Salt

headline mdGloock, 25px, 600

Salt

body mdFamiljen Grotesk, 16px, 400

A white salt flat at noon, used as an interface.

label mdChivo Mono, 12px, 600

A white salt flat at noon, used as an interface.

Specification

Philosophy

summary

A white salt flat at noon, used as an interface. The ground is blank white to one razor-thin horizon, and everything on the page is either set on the salt or pressed into it. Black ink sets the words, a cool steel grey carries what is quiet, and one stamp red is kept for verdicts: a rubber stamp pressed onto a tasting card. Cards stand on the white like place cards on a long table, with a pale cool shadow and never a border, and the one huge word on each page is pressed into the ground instead of printed on it.

Tokens

colors16

#FFFFFF

surface

#FFFFFF

well

#F2F4F6

text

#0B0B0C

text 2

#3B3F45

muted

#5F656D

steel

#A7AEB6

groove

#E3E7EB

shadow

#C7D0DA

accent

#D52B1E

on accent

#FFFFFF

peach

#F7B994

success

#0B0B0C

warning

#F7B994

error

#D52B1E

info

#5F656D

typography4

heading font: Gloock
body font: Familjen Grotesk
mono font: Chivo Mono
google fonts url: https://fonts.googleapis.com/css2?family=Gloock&family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Chivo+Mono:wght@400;500;700&display=swap

radii2

none: 0px
full: 9999px

spacing8

base: 8px
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 48px
xxl: 96px
section: 160px

Rules

components

- **Navigation.** The wordmark in Gloock 28px on the left; links in Familjen Grotesk 500 at 17px with 36px to 40px between them, the current one underlined in ink (2px, 8px below the baseline); on the right a Chivo Mono date line (`SUN 04 OCT · 13:42`) and one secondary button. The horizon runs under it. - **Buttons.** Primary: ink fill, white Familjen Grotesk 600 at 17px, 52px tall, 28px side padding, radius 0, one per view. Stamp: the one red button, white capitals in Familjen Grotesk 700, used only for the action that stamps a verdict. Secondary: white, ink text, the standing shadow, no border. Tertiary: an ink word with a 1px underline 4px below. Hover lifts 2px; active presses 1px and the ink lightens to `#2A2C30`; focus draws a 2px ink outline 3px outside; disabled is a `well` fill with `muted` text and no shadow. Labels never wrap. - **Inputs, selects and text areas.** A `well` fill pressed into the salt with a 1px `steel` line along its foot, no border, radius 0, 52px tall, Familjen Grotesk 18px in ink. The label sits above in Chivo Mono capitals in `muted`; help text sits below at 15px. Focus keeps the well and adds the 2px ink outline. An error turns the label red, adds a 2px red line along the well's foot and states the fix in one sentence in ink. Selects draw their own steel chevron; every control sets `appearance: none`. - **Checkboxes, radios and toggles.** A 22px white square with a 1.5px `muted` ring for a checkbox (ink fill and a white tick when on), a 22px round one for a radio (an ink dot inside the ring when on), and a 44 by 24px round track with a `muted` ring and a `muted` knob for a toggle (the track turns ink and the knob white when on). The rings keep every control above 3:1 against the salt; nothing else in Salt has a ring. - **Tasting card.** The core object. A Chivo Mono header (`COURSE 4 OF 9 · 13:42`), the dish in Gloock 32px to 48px, notes in Familjen Grotesk 18px in `text_2`, a footer with the best-before date in Chivo Mono, and a stamp area at the lower right where the verdict lands, inside the card or overlapping its right edge, never over its words. One card holds one course and at most one stamp. - **Verdict stamp.** The word in Familjen Grotesk 700 capitals inside a 3px frame with a 1px rule 4px inside it, the date line under the word in Chivo Mono. TASTE is stamp red; SLOP is ink. The impression is never solid: an SVG turbulence filter roughens the edges and lets the white show through in small specks, at 92% opacity. It lands with a 220ms press (scale 1.3 to 0.96 to 1). - **Place card.** A folded tent standing on the white: a guest's name in Gloock 24px, the seat and role in Chivo Mono under it, an initial disc on the left. Place cards name people: guests, critics, jurors, authors. - **Pressed word.** One per page, in Gloock at 160px to 320px, set in `well` with the pressed shadow and hidden from screen readers. It repeats something the page already says in ink, the course numeral or the verdict, so it decorates without carrying meaning. - **Course table.** Rows 64px tall in Familjen Grotesk 500 at 17px; number and time in Chivo Mono; the verdict column shows a small stamp; rows are separated by pressed grooves, never vertical lines; the hovered row is a well. Filter tabs sit above it as words with a Chivo Mono count, the chosen one underlined in ink. - **Best-before marker.** The date in Chivo Mono on a `peach` highlighter fill, only when a verdict turns within 48 hours. - **Toast.** A white card standing at the lower left with an ink sentence and a Chivo Mono time. A filed verdict shows its small stamp; nothing else is coloured. - **Questions.** Native `details` and `summary`: the question in Familjen Grotesk 600 at 20px, a steel plus that turns 45deg when open, a pressed groove between questions.

Layout

summary

The page is mostly empty salt, and the emptiness is the layout. - **Negative space first.** At least half of every first screen is empty white. Text never sits in the middle of the page: prose and forms take a column on the left or right third (prose 62ch, forms 560px, cards 520px to 640px), and the other two thirds stay open or hold one picture or one pressed word. - **Grid.** 12 columns with 24px gutters, outer margins of 96px from 1280px up, 48px on tablets and 20px on phones. Grid children carry `min-width: 0`; columns use `minmax(0, 1fr)`. - **Rhythm.** Sections sit 160px apart (96px on phones). Cards pad 48px (28px on phones), with at least 40px above any title, so no title is ever stuck to the top of its card. Space separates groups; a pressed groove separates rows; nothing else divides. - **The horizon.** One line per page, full bleed, directly under the header: 1px of `groove` with 1px of white beneath it. A landing that opens on a picture draws no line: the picture's own horizon is the page's horizon. Nothing else on the page is a drawn line. - **Pictures.** A landing opens on one full-bleed picture in the paired art style, its subject on one third and its empty white sky on the other two. On wide screens the headline is set in that empty sky; below 1024px the picture shows its subject and the headline moves underneath on the white. - **Phones (390px).** One column; place cards scroll sideways in a row; the course table becomes a list of number, dish and verdict; the pressed word drops to about a third of the screen's width and moves below the text it sat beside; stamps shrink and keep their tilt. Nothing scrolls the page sideways.

Guidance

Do

leave at least half of every first screen empty white.
keep red for stamp ink: verdicts, the one stamping action and refusals.
stand cards on the salt with the cool shadow, and press words, wells and grooves into it.
give every card one course, one note and at most one stamp.
set every label, time and count in Chivo Mono capitals.
keep exactly one horizon per page: the line under the header, or the hero picture's own horizon.
style every control yourself, from the checkbox to the select chevron.

Avoid

draw borders around cards, inputs or tables, and don't use grey boxes.
use a second accent colour, a gradient, a glow or a tinted background.
stamp text that is still being read; a stamp overlaps an edge or empty space.
put more than one pressed word on a page, or let one carry meaning by itself.
round rectangles, set Gloock in bold, or set display type below 22px.
centre a lone paragraph in the middle of the page.
put emoji on buttons or words inside pictures.

Imagery

pairs with

halite

art style id

en-01a1173b-f1ea-7220-92bd-2b9a4242d99e

Katagami spec file

# Salt

## Philosophy

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#FFFFFF` |
| well | `#F2F4F6` |
| text | `#0B0B0C` |
| text_2 | `#3B3F45` |
| muted | `#5F656D` |
| steel | `#A7AEB6` |
| groove | `#E3E7EB` |
| shadow | `#C7D0DA` |
| accent | `#D52B1E` |
| on_accent | `#FFFFFF` |
| peach | `#F7B994` |
| success | `#0B0B0C` |
| warning | `#F7B994` |
| error | `#D52B1E` |
| info | `#5F656D` |

### Typography

- **Heading Font**: Gloock
- **Body Font**: Familjen Grotesk
- **Mono Font**: Chivo Mono
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Gloock&family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Chivo+Mono:wght@400;500;700&display=swap

### Radii

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

### Spacing

- **Base**: 8px
- **Xs**: 4px
- **Sm**: 8px
- **Md**: 16px
- **Lg**: 24px
- **Xl**: 48px
- **Xxl**: 96px
- **Section**: 160px

## Rules

### Components

- **Navigation.** The wordmark in Gloock 28px on the left; links in Familjen Grotesk 500 at 17px with 36px to 40px between them, the current one underlined in ink (2px, 8px below the baseline); on the right a Chivo Mono date line (`SUN 04 OCT · 13:42`) and one secondary button. The horizon runs under it.
- **Buttons.** Primary: ink fill, white Familjen Grotesk 600 at 17px, 52px tall, 28px side padding, radius 0, one per view. Stamp: the one red button, white capitals in Familjen Grotesk 700, used only for the action that stamps a verdict. Secondary: white, ink text, the standing shadow, no border. Tertiary: an ink word with a 1px underline 4px below. Hover lifts 2px; active presses 1px and the ink lightens to `#2A2C30`; focus draws a 2px ink outline 3px outside; disabled is a `well` fill with `muted` text and no shadow. Labels never wrap.
- **Inputs, selects and text areas.** A `well` fill pressed into the salt with a 1px `steel` line along its foot, no border, radius 0, 52px tall, Familjen Grotesk 18px in ink. The label sits above in Chivo Mono capitals in `muted`; help text sits below at 15px. Focus keeps the well and adds the 2px ink outline. An error turns the label red, adds a 2px red line along the well's foot and states the fix in one sentence in ink. Selects draw their own steel chevron; every control sets `appearance: none`.
- **Checkboxes, radios and toggles.** A 22px white square with a 1.5px `muted` ring for a checkbox (ink fill and a white tick when on), a 22px round one for a radio (an ink dot inside the ring when on), and a 44 by 24px round track with a `muted` ring and a `muted` knob for a toggle (the track turns ink and the knob white when on). The rings keep every control above 3:1 against the salt; nothing else in Salt has a ring.
- **Tasting card.** The core object. A Chivo Mono header (`COURSE 4 OF 9 · 13:42`), the dish in Gloock 32px to 48px, notes in Familjen Grotesk 18px in `text_2`, a footer with the best-before date in Chivo Mono, and a stamp area at the lower right where the verdict lands, inside the card or overlapping its right edge, never over its words. One card holds one course and at most one stamp.
- **Verdict stamp.** The word in Familjen Grotesk 700 capitals inside a 3px frame with a 1px rule 4px inside it, the date line under the word in Chivo Mono. TASTE is stamp red; SLOP is ink. The impression is never solid: an SVG turbulence filter roughens the edges and lets the white show through in small specks, at 92% opacity. It lands with a 220ms press (scale 1.3 to 0.96 to 1).
- **Place card.** A folded tent standing on the white: a guest's name in Gloock 24px, the seat and role in Chivo Mono under it, an initial disc on the left. Place cards name people: guests, critics, jurors, authors.
- **Pressed word.** One per page, in Gloock at 160px to 320px, set in `well` with the pressed shadow and hidden from screen readers. It repeats something the page already says in ink, the course numeral or the verdict, so it decorates without carrying meaning.
- **Course table.** Rows 64px tall in Familjen Grotesk 500 at 17px; number and time in Chivo Mono; the verdict column shows a small stamp; rows are separated by pressed grooves, never vertical lines; the hovered row is a well. Filter tabs sit above it as words with a Chivo Mono count, the chosen one underlined in ink.
- **Best-before marker.** The date in Chivo Mono on a `peach` highlighter fill, only when a verdict turns within 48 hours.
- **Toast.** A white card standing at the lower left with an ink sentence and a Chivo Mono time. A filed verdict shows its small stamp; nothing else is coloured.
- **Questions.** Native `details` and `summary`: the question in Familjen Grotesk 600 at 20px, a steel plus that turns 45deg when open, a pressed groove between questions.

## Layout

### Summary

The page is mostly empty salt, and the emptiness is the layout.

- **Negative space first.** At least half of every first screen is empty white. Text never sits in the middle of the page: prose and forms take a column on the left or right third (prose 62ch, forms 560px, cards 520px to 640px), and the other two thirds stay open or hold one picture or one pressed word.
- **Grid.** 12 columns with 24px gutters, outer margins of 96px from 1280px up, 48px on tablets and 20px on phones. Grid children carry `min-width: 0`; columns use `minmax(0, 1fr)`.
- **Rhythm.** Sections sit 160px apart (96px on phones). Cards pad 48px (28px on phones), with at least 40px above any title, so no title is ever stuck to the top of its card. Space separates groups; a pressed groove separates rows; nothing else divides.
- **The horizon.** One line per page, full bleed, directly under the header: 1px of `groove` with 1px of white beneath it. A landing that opens on a picture draws no line: the picture's own horizon is the page's horizon. Nothing else on the page is a drawn line.
- **Pictures.** A landing opens on one full-bleed picture in the paired art style, its subject on one third and its empty white sky on the other two. On wide screens the headline is set in that empty sky; below 1024px the picture shows its subject and the headline moves underneath on the white.
- **Phones (390px).** One column; place cards scroll sideways in a row; the course table becomes a list of number, dish and verdict; the pressed word drops to about a third of the screen's width and moves below the text it sat beside; stamps shrink and keep their tilt. Nothing scrolls the page sideways.

## Guidance

### Do

- leave at least half of every first screen empty white.
- keep red for stamp ink: verdicts, the one stamping action and refusals.
- stand cards on the salt with the cool shadow, and press words, wells and grooves into it.
- give every card one course, one note and at most one stamp.
- set every label, time and count in Chivo Mono capitals.
- keep exactly one horizon per page: the line under the header, or the hero picture's own horizon.
- style every control yourself, from the checkbox to the select chevron.

### Don't

- draw borders around cards, inputs or tables, and don't use grey boxes.
- use a second accent colour, a gradient, a glow or a tinted background.
- stamp text that is still being read; a stamp overlaps an edge or empty space.
- put more than one pressed word on a page, or let one carry meaning by itself.
- round rectangles, set Gloock in bold, or set display type below 22px.
- centre a lone paragraph in the middle of the page.
- put emoji on buttons or words inside pictures.

## Imagery Direction

### Pairs With

halite

### Art Style Id

en-01a1173b-f1ea-7220-92bd-2b9a4242d99e

DESIGN.md file

---
version: "alpha"
name: "Salt"
description: "A white salt flat at noon, used as an interface. The ground is blank white to one razor-thin horizon, and everything on the page is either set on the salt or pressed into it. Black ink sets the words, a cool steel grey carries what is qu..."
colors:
  bg: "#FFFFFF"
  surface: "#FFFFFF"
  well: "#F2F4F6"
  text: "#0B0B0C"
  text_2: "#3B3F45"
  muted: "#5F656D"
  steel: "#A7AEB6"
  groove: "#E3E7EB"
  shadow: "#C7D0DA"
  accent: "#D52B1E"
  on_accent: "#FFFFFF"
  peach: "#F7B994"
  success: "#0B0B0C"
  warning: "#F7B994"
  error: "#D52B1E"
  info: "#5F656D"
typography:
  headline-lg:
    fontFamily: "Gloock"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Gloock"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Familjen Grotesk"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Chivo Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "48px"
  xxl: "96px"
  section: "160px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-well:
    backgroundColor: "{colors.well}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-text_2:
    backgroundColor: "{colors.text_2}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-steel:
    backgroundColor: "{colors.steel}"
  color-reference-groove:
    backgroundColor: "{colors.groove}"
  color-reference-shadow:
    backgroundColor: "{colors.shadow}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-peach:
    backgroundColor: "{colors.peach}"
  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.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Salt

## Overview

A white salt flat at noon, used as an interface. The ground is blank white to one razor-thin horizon, and everything on the page is either set on the salt or pressed into it. Black ink sets the words, a cool steel grey carries what is quiet, and one stamp red is kept for verdicts: a rubber stamp pressed onto a tasting card. Cards stand on the white like place cards on a long table, with a pale cool shadow and never a border, and the one huge word on each page is pressed into the ground instead of printed on it.

## 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 | `#FFFFFF` |
| surface | `#FFFFFF` |
| well | `#F2F4F6` |
| text | `#0B0B0C` |
| text_2 | `#3B3F45` |
| muted | `#5F656D` |
| steel | `#A7AEB6` |
| groove | `#E3E7EB` |
| shadow | `#C7D0DA` |
| accent | `#D52B1E` |
| on_accent | `#FFFFFF` |
| peach | `#F7B994` |
| success | `#0B0B0C` |
| warning | `#F7B994` |
| error | `#D52B1E` |
| info | `#5F656D` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Gloock&family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Chivo+Mono:wght@400;500;700&display=swap

- **Headline-Lg**: Gloock, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Gloock, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: Familjen Grotesk, 16px, weight 400, line-height 1.5.
- **Label-Md**: Chivo Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `16px`
- **Lg**: `24px`
- **Xl**: `48px`
- **Xxl**: `96px`
- **Section**: `160px`

### Summary

The page is mostly empty salt, and the emptiness is the layout.

- **Negative space first.** At least half of every first screen is empty white. Text never sits in the middle of the page: prose and forms take a column on the left or right third (prose 62ch, forms 560px, cards 520px to 640px), and the other two thirds stay open or hold one picture or one pressed word.
- **Grid.** 12 columns with 24px gutters, outer margins of 96px from 1280px up, 48px on tablets and 20px on phones. Grid children carry `min-width: 0`; columns use `minmax(0, 1fr)`.
- **Rhythm.** Sections sit 160px apart (96px on phones). Cards pad 48px (28px on phones), with at least 40px above any title, so no title is ever stuck to the top of its card. Space separates groups; a pressed groove separates rows; nothing else divides.
- **The horizon.** One line per page, full bleed, directly under the header: 1px of `groove` with 1px of white beneath it. A landing that opens on a picture draws no line: the picture's own horizon is the page's horizon. Nothing else on the page is a drawn line.
- **Pictures.** A landing opens on one full-bleed picture in the paired art style, its subject on one third and its empty white sky on the other two. On wide screens the headline is set in that empty sky; below 1024px the picture shows its subject and the headline moves underneath on the white.
- **Phones (390px).** One column; place cards scroll sideways in a row; the course table becomes a list of number, dish and verdict; the pressed word drops to about a third of the screen's width and moves below the text it sat beside; stamps shrink and keep their tilt. Nothing scrolls the page sideways.

## Shapes

### Rounded

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

## Components

### Components

- **Navigation.** The wordmark in Gloock 28px on the left; links in Familjen Grotesk 500 at 17px with 36px to 40px between them, the current one underlined in ink (2px, 8px below the baseline); on the right a Chivo Mono date line (`SUN 04 OCT · 13:42`) and one secondary button. The horizon runs under it.
- **Buttons.** Primary: ink fill, white Familjen Grotesk 600 at 17px, 52px tall, 28px side padding, radius 0, one per view. Stamp: the one red button, white capitals in Familjen Grotesk 700, used only for the action that stamps a verdict. Secondary: white, ink text, the standing shadow, no border. Tertiary: an ink word with a 1px underline 4px below. Hover lifts 2px; active presses 1px and the ink lightens to `#2A2C30`; focus draws a 2px ink outline 3px outside; disabled is a `well` fill with `muted` text and no shadow. Labels never wrap.
- **Inputs, selects and text areas.** A `well` fill pressed into the salt with a 1px `steel` line along its foot, no border, radius 0, 52px tall, Familjen Grotesk 18px in ink. The label sits above in Chivo Mono capitals in `muted`; help text sits below at 15px. Focus keeps the well and adds the 2px ink outline. An error turns the label red, adds a 2px red line along the well's foot and states the fix in one sentence in ink. Selects draw their own steel chevron; every control sets `appearance: none`.
- **Checkboxes, radios and toggles.** A 22px white square with a 1.5px `muted` ring for a checkbox (ink fill and a white tick when on), a 22px round one for a radio (an ink dot inside the ring when on), and a 44 by 24px round track with a `muted` ring and a `muted` knob for a toggle (the track turns ink and the knob white when on). The rings keep every control above 3:1 against the salt; nothing else in Salt has a ring.
- **Tasting card.** The core object. A Chivo Mono header (`COURSE 4 OF 9 · 13:42`), the dish in Gloock 32px to 48px, notes in Familjen Grotesk 18px in `text_2`, a footer with the best-before date in Chivo Mono, and a stamp area at the lower right where the verdict lands, inside the card or overlapping its right edge, never over its words. One card holds one course and at most one stamp.
- **Verdict stamp.** The word in Familjen Grotesk 700 capitals inside a 3px frame with a 1px rule 4px inside it, the date line under the word in Chivo Mono. TASTE is stamp red; SLOP is ink. The impression is never solid: an SVG turbulence filter roughens the edges and lets the white show through in small specks, at 92% opacity. It lands with a 220ms press (scale 1.3 to 0.96 to 1).
- **Place card.** A folded tent standing on the white: a guest's name in Gloock 24px, the seat and role in Chivo Mono under it, an initial disc on the left. Place cards name people: guests, critics, jurors, authors.
- **Pressed word.** One per page, in Gloock at 160px to 320px, set in `well` with the pressed shadow and hidden from screen readers. It repeats something the page already says in ink, the course numeral or the verdict, so it decorates without carrying meaning.
- **Course table.** Rows 64px tall in Familjen Grotesk 500 at 17px; number and time in Chivo Mono; the verdict column shows a small stamp; rows are separated by pressed grooves, never vertical lines; the hovered row is a well. Filter tabs sit above it as words with a Chivo Mono count, the chosen one underlined in ink.
- **Best-before marker.** The date in Chivo Mono on a `peach` highlighter fill, only when a verdict turns within 48 hours.
- **Toast.** A white card standing at the lower left with an ink sentence and a Chivo Mono time. A filed verdict shows its small stamp; nothing else is coloured.
- **Questions.** Native `details` and `summary`: the question in Familjen Grotesk 600 at 20px, a steel plus that turns 45deg when open, a pressed groove between questions.

## 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-01a11744-358b-7cf2-849a-5de5ddf0acdd/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11744-358b-7cf2-849a-5de5ddf0acdd/shadcn.json` (registry theme), `/language/en-01a11744-358b-7cf2-849a-5de5ddf0acdd/shadcn-components.md` (component recipes) and `/language/en-01a11744-358b-7cf2-849a-5de5ddf0acdd/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 leave at least half of every first screen empty white.
- Do keep red for stamp ink: verdicts, the one stamping action and refusals.
- Do stand cards on the salt with the cool shadow, and press words, wells and grooves into it.
- Do give every card one course, one note and at most one stamp.
- Do set every label, time and count in Chivo Mono capitals.
- Do keep exactly one horizon per page: the line under the header, or the hero picture's own horizon.
- Do style every control yourself, from the checkbox to the select chevron.
- Don't draw borders around cards, inputs or tables, and don't use grey boxes.
- Don't use a second accent colour, a gradient, a glow or a tinted background.
- Don't stamp text that is still being read; a stamp overlaps an edge or empty space.
- Don't put more than one pressed word on a page, or let one carry meaning by itself.
- Don't round rectangles, set Gloock in bold, or set display type below 22px.
- Don't centre a lone paragraph in the middle of the page.
- Don't put emoji on buttons or words inside pictures.

## Imagery Direction

### Pairs With

halite

### Art Style Id

en-01a1173b-f1ea-7220-92bd-2b9a4242d99e

shadcn/ui theme file

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "salt",
  "type": "registry:theme",
  "title": "Salt shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#0B0B0C",
      "card": "#FFFFFF",
      "card-foreground": "#0B0B0C",
      "popover": "#FFFFFF",
      "popover-foreground": "#0B0B0C",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5F656D",
      "muted-foreground": "#0B0B0C",
      "accent": "#D52B1E",
      "accent-foreground": "#ffffff",
      "destructive": "#D52B1E",
      "border": "#e4e4e7",
      "input": "#e4e4e7",
      "ring": "#D52B1E",
      "chart-1": "#0B0B0C",
      "chart-2": "#f4f4f5",
      "chart-3": "#D52B1E",
      "chart-4": "#0B0B0C",
      "chart-5": "#F7B994",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#0B0B0C",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5F656D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#e4e4e7",
      "sidebar-ring": "#D52B1E",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D52B1E",
      "accent-foreground": "#ffffff",
      "destructive": "#D52B1E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D52B1E",
      "chart-1": "#0B0B0C",
      "chart-2": "#f4f4f5",
      "chart-3": "#D52B1E",
      "chart-4": "#0B0B0C",
      "chart-5": "#F7B994",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D52B1E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D52B1E",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11744-358b-7cf2-849a-5de5ddf0acdd",
    "slug": "salt",
    "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",
        "error",
        "groove",
        "info",
        "muted",
        "on_accent",
        "peach",
        "shadow",
        "steel",
        "success",
        "surface",
        "text",
        "text_2",
        "warning",
        "well"
      ],
      "typography": [
        "body_font",
        "google_fonts_url",
        "heading_font",
        "mono_font"
      ],
      "radii": [
        "full",
        "none"
      ],
      "spacing": [
        "base",
        "lg",
        "md",
        "section",
        "sm",
        "xl",
        "xs",
        "xxl"
      ]
    }
  }
}
```

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.

primaryaccentsurfacemutedwarning

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: #FFFFFF;
  --foreground: #0B0B0C;
  --card: #FFFFFF;
  --card-foreground: #0B0B0C;
  --popover: #FFFFFF;
  --popover-foreground: #0B0B0C;
  --primary: #0B0B0C;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #5F656D;
  --muted-foreground: #0B0B0C;
  --accent: #D52B1E;
  --accent-foreground: #ffffff;
  --destructive: #D52B1E;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #D52B1E;
  --chart-1: #0B0B0C;
  --chart-2: #f4f4f5;
  --chart-3: #D52B1E;
  --chart-4: #0B0B0C;
  --chart-5: #F7B994;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0B0B0C;
  --sidebar-primary: #0B0B0C;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #5F656D;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #e4e4e7;
  --sidebar-ring: #D52B1E;
  --radius: 0.625rem;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0B0B0C;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #D52B1E;
  --accent-foreground: #ffffff;
  --destructive: #D52B1E;
  --border: #303642;
  --input: #303642;
  --ring: #D52B1E;
  --chart-1: #0B0B0C;
  --chart-2: #f4f4f5;
  --chart-3: #D52B1E;
  --chart-4: #0B0B0C;
  --chart-5: #F7B994;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0B0B0C;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #D52B1E;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #D52B1E;
  --radius: 0.625rem;
}

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 SaltShadcnKit() {
  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">Salt</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": "salt",
  "type": "registry:theme",
  "title": "Salt shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#0B0B0C",
      "card": "#FFFFFF",
      "card-foreground": "#0B0B0C",
      "popover": "#FFFFFF",
      "popover-foreground": "#0B0B0C",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5F656D",
      "muted-foreground": "#0B0B0C",
      "accent": "#D52B1E",
      "accent-foreground": "#ffffff",
      "destructive": "#D52B1E",
      "border": "#e4e4e7",
      "input": "#e4e4e7",
      "ring": "#D52B1E",
      "chart-1": "#0B0B0C",
      "chart-2": "#f4f4f5",
      "chart-3": "#D52B1E",
      "chart-4": "#0B0B0C",
      "chart-5": "#F7B994",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#0B0B0C",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5F656D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#e4e4e7",
      "sidebar-ring": "#D52B1E",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D52B1E",
      "accent-foreground": "#ffffff",
      "destructive": "#D52B1E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D52B1E",
      "chart-1": "#0B0B0C",
      "chart-2": "#f4f4f5",
      "chart-3": "#D52B1E",
      "chart-4": "#0B0B0C",
      "chart-5": "#F7B994",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D52B1E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D52B1E",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11744-358b-7cf2-849a-5de5ddf0acdd",
    "slug": "salt",
    "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",
        "error",
        "groove",
        "info",
        "muted",
        "on_accent",
        "peach",
        "shadow",
        "steel",
        "success",
        "surface",
        "text",
        "text_2",
        "warning",
        "well"
      ],
      "typography": [
        "body_font",
        "google_fonts_url",
        "heading_font",
        "mono_font"
      ],
      "radii": [
        "full",
        "none"
      ],
      "spacing": [
        "base",
        "lg",
        "md",
        "section",
        "sm",
        "xl",
        "xs",
        "xxl"
      ]
    }
  }
}

component recipesGenerated from the tokens

# Salt shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-01a11744-358b-7cf2-849a-5de5ddf0acdd`
Slug: `salt`

## Intent

A white salt flat at noon, used as an interface. The ground is blank white to one razor-thin horizon, and everything on the page is either set on the salt or pressed into it. Black ink sets the words, a cool steel grey carries what is quiet, and one stamp red is kept for verdicts: a rubber stamp pressed onto a tasting card. Cards stand on the white like place cards on a long table, with a pale cool shadow and never a border, and the one huge word on each page is pressed into the ground instead of printed on it.

## 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": "#FFFFFF",
  "surface": "#FFFFFF",
  "well": "#F2F4F6",
  "text": "#0B0B0C",
  "text_2": "#3B3F45",
  "muted": "#5F656D",
  "steel": "#A7AEB6",
  "groove": "#E3E7EB",
  "shadow": "#C7D0DA",
  "accent": "#D52B1E",
  "on_accent": "#FFFFFF",
  "peach": "#F7B994",
  "success": "#0B0B0C",
  "warning": "#F7B994",
  "error": "#D52B1E",
  "info": "#5F656D"
}

Typography:

{
  "heading_font": "Gloock",
  "body_font": "Familjen Grotesk",
  "mono_font": "Chivo Mono",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Gloock&family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Chivo+Mono:wght@400;500;700&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/salt/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: leave at least half of every first screen empty white.; keep red for stamp ink: verdicts, the one stamping action and refusals.; stand cards on the salt with the cool shadow, and press words, wells and grooves into it.; give every card one course, one note and at most one stamp.; set every label, time and count in Chivo Mono capitals.; keep exactly one horizon per page: the line under the header, or the hero picture's own horizon.; style every control yourself, from the checkbox to the select chevron.
- Do not: draw borders around cards, inputs or tables, and don't use grey boxes.; use a second accent colour, a gradient, a glow or a tinted background.; stamp text that is still being read; a stamp overlaps an edge or empty space.; put more than one pressed word on a page, or let one carry meaning by itself.; round rectangles, set Gloock in bold, or set display type below 22px.; centre a lone paragraph in the middle of the page.; put emoji on buttons or words inside pictures.

## 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 SaltShadcnKit() {
  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">Salt</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": "The page is mostly empty salt, and the emptiness is the layout.\n\n- **Negative space first.** At least half of every first screen is empty white. Text never sits in the middle of the page: prose and forms take a column on the left or right third (prose 62ch, forms 560px, cards 520px to 640px), and the other two thirds stay open or hold one picture or one pressed word.\n- **Grid.** 12 columns with 24px gutters, outer margins of 96px from 1280px up, 48px on tablets and 20px on phones. Grid children carry `min-width: 0`; columns use `minmax(0, 1fr)`.\n- **Rhythm.** Sections sit 160px apart (96px on phones). Cards pad 48px (28px on phones), with at least 40px above any title, so no title is ever stuck to the top of its card. Space separates groups; a pressed groove separates rows; nothing else divides.\n- **The horizon.** One line per page, full bleed, directly under the header: 1px of `groove` with 1px of white beneath it. A landing that opens on a picture draws no line: the picture's own horizon is the page's horizon. Nothing else on the page is a drawn line.\n- **Pictures.** A landing opens on one full-bleed picture in the paired art style, its subject on one third and its empty white sky on the other two. On wide screens the headline is set in that empty sky; below 1024px the picture shows its subject and the headline moves underneath on the white.\n- **Phones (390px).** One column; place cards scroll sideways in a row; the course table becomes a list of number, dish and verdict; the pressed word drops to about a third of the screen's width and moves below the text it sat beside; stamps shrink and keep their tilt. Nothing scrolls the page sideways."
}

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-01a11744-358b-7cf2-849a-5de5ddf0acdd",
    "name": "Salt",
    "slug": "salt"
  },
  "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": "Salt 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": [
      "leave at least half of every first screen empty white.",
      "keep red for stamp ink: verdicts, the one stamping action and refusals.",
      "stand cards on the salt with the cool shadow, and press words, wells and grooves into it.",
      "give every card one course, one note and at most one stamp.",
      "set every label, time and count in Chivo Mono capitals.",
      "keep exactly one horizon per page: the line under the header, or the hero picture's own horizon.",
      "style every control yourself, from the checkbox to the select chevron."
    ],
    "dont": [
      "draw borders around cards, inputs or tables, and don't use grey boxes.",
      "use a second accent colour, a gradient, a glow or a tinted background.",
      "stamp text that is still being read; a stamp overlaps an edge or empty space.",
      "put more than one pressed word on a page, or let one carry meaning by itself.",
      "round rectangles, set Gloock in bold, or set display type below 22px.",
      "centre a lone paragraph in the middle of the page.",
      "put emoji on buttons or words inside pictures."
    ]
  }
}

Try a remix

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

UI language

Salt

Palette

Art style

More like this

ArdoiseShares editorial