A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md source of truth for most agents and apps.
Hang the interface from one continuous vertical plumb-line; sections are depth-stations clamped to it with a node, tick, and margin depth-tag, the line ending in a plumb-bob at the floor. Deviation reads left and right of the datum; actions hang off dotted amber leaders.
Primary hierarchy belongs to depth and offset from true; secondary to station titles, gauges, and amber leader actions. Space Grotesk display headings, Spline Sans operational copy, Spline Sans Mono for all readouts, depth-tags, and serials.
Medium-low: most of the abyssal ground stays quiet while exact readings cluster at each station; the dark below the bob is left empty to express depth.
The datum-line: a single plumb-line spine with depth-station clamps and metered depth-tags; deviation gauges/profiles against a central datum axis; dotted amber leaders to numbered callouts; recessed LCD readouts on abyssal ink-blue.
Left datum-rail (padding-left 96px, plumb-line at 47px) with stations descending; dashboard uses a fixed datum-rail of depth-stations as nav beside a main deviation profile. minmax(0,1fr)+min-width:0 columns never overflow.
Generous quiet above every title; keep abyssal ground empty below the bob to carry depth at every viewport.
Quiet ground alternated with compressed mono annotation clusters at each station.
Mobile (390px) retracts the datum-line and turns depth-tags into inline labels, single-column stack, non-essential nav and table columns hidden, no horizontal overflow; ultra-wide caps and centres content while only the hero spans 100vw.
plumbline
Plumbline technique applied vertically: a deep-survey sonde descending a shaft on a single plumb-line, segmented into separated matte-graphite fragments along the spine, one-pixel pale reticle arcs and depth ticks, dotted amber leaders to numbered callout tabs, serial labels, and large abyssal negative space — so the hero is the datum-line at full scale.
subjects are interchangeable; the technique (exploded diagnostic plate, reticle arcs, amber leaders, deep void) is what carries.
One full-bleed vertical hero of the sonde descending on the plumb-line, headline overlaid in the left ink-veil; inline diagrams reuse the same exploded-on-ink technique.
# Fathom ## Philosophy Fathom is a depth-survey language: the screen is the readout of a deep plumb sounding. Instead of looking at a distant machine from a cockpit, the whole interface hangs from one continuous plumb-line — depth runs top to bottom, deviation from true vertical runs left and right. Every reading is clamped to the datum at a known depth on an abyssal ink-blue ground, so the operator never loses the thread of the descent. ### Values - One continuous datum — every reading clamps to a single plumb-line at a known depth, never floating free. - Deviation over decoration — what matters is how far the structure has left true vertical, read in millimetres against a tolerance band. - The dark is active material — abyssal ink-blue carries depth and the scale of what lies below the bob. - Evidence, not telemetry filler — depths, offsets, line tension, and committed state read like a survey an inspector can sign. - Three highlighter accents — amber for action, ice-blue for the datum, survey-green for true-to-plumb; nothing else lights up. ### Anti-Values - Not a neutral near-black cockpit looking at a distant aperture — the ground is deliberately abyssal ink-blue and the mechanic is a vertical datum, not a framed machine. - No accent edges on cards, no boxed-in pill navigation, no nested cards. - No accent spread as a fill or wash; semantic error stays a small role, never primary. - No scroll cues, glyph symbols in copy, or emoji on buttons. - No fake microtext as texture; every label is a placed reading. ### Visual Character - A continuous vertical plumb-line spine runs the full height of every composition; sections are depth-stations that clamp to it with a square node, a tick, and a margin depth-tag, ending in a plumb-bob at the floor. - Deviation gauges and profiles read offset from a central datum axis against a tolerance band, with needles and dots coloured by state. - Dotted amber leaders connect numbered callout tabs to the actions the operator may take. - Recessed LCD readouts sink below the ground while survey-graphite panels lift above it; depth is read by ground value, not drop shadow. - Abyssal ink-blue negative space below the bob expresses descent and scale. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#0C1620` | | surface | `#16242F` | | surface_2 | `#1D3242` | | lcd | `#081119` | | text | `#EAF1F5` | | muted | `#7E94A1` | | border | `#294150` | | accent | `#E89A3C` | | on_accent | `#0C1620` | | hud | `#9FD2E6` | | plumb | `#6FB39A` | | success | `#6FB39A` | | warning | `#E89A3C` | | error | `#D2614B` | | info | `#9FD2E6` | ### Typography - **Base Size**: 17px - **Body Font**: Spline Sans - **Heading Font**: Space Grotesk - **Mono Font**: Spline Sans Mono - **Heading Weight**: 600 - **Heading Transform**: none - **Letter Spacing**: -0.03em - **Line Height**: 1.55 - **Scale Ratio**: 1.2 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Spline+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500;600&display=swap ### Radii - **None**: 0 - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **None**: none - **Sm**: 0 1px 0 rgba(159,210,230,.06) - **Md**: 0 18px 50px rgba(2,8,14,.45) - **Lg**: 0 40px 120px rgba(2,8,14,.6) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96,128] ### Surfaces - **Ground**: abyssal ink-blue #0C1620 — cold sounding water, active negative space - **Panel**: survey-graphite #16242F lifted above the ground, 16px radius, no border - **Lcd**: recessed readout #081119 sunk below the ground for live data - **Treatment**: matte graphite panels and recessed LCD on abyssal ink-blue; depth read by ground value, not drop shadow ### Borders - **Policy**: none on cards and no single accent edge; hairline seams only inset on form controls; ice-blue hairline at low opacity separates table rows; hierarchy carried by the datum-line, fill, and space ### Motion - **Duration**: 600ms reveal, 180ms control - **Easing**: ease - **Philosophy**: stations rise once on first view like a reading stepping to true; the settled state is the default and renders with no JS behind a class gate; respects prefers-reduced-motion; no scroll cues, no continuous spectacle ## Rules ### Composition Hang the interface from one continuous vertical plumb-line; sections are depth-stations clamped to it with a node, tick, and margin depth-tag, the line ending in a plumb-bob at the floor. Deviation reads left and right of the datum; actions hang off dotted amber leaders. ### Hierarchy Primary hierarchy belongs to depth and offset from true; secondary to station titles, gauges, and amber leader actions. Space Grotesk display headings, Spline Sans operational copy, Spline Sans Mono for all readouts, depth-tags, and serials. ### Density Medium-low: most of the abyssal ground stays quiet while exact readings cluster at each station; the dark below the bob is left empty to express depth. ### Signature The datum-line: a single plumb-line spine with depth-station clamps and metered depth-tags; deviation gauges/profiles against a central datum axis; dotted amber leaders to numbered callouts; recessed LCD readouts on abyssal ink-blue. ## Layout ### Grid Left datum-rail (padding-left 96px, plumb-line at 47px) with stations descending; dashboard uses a fixed datum-rail of depth-stations as nav beside a main deviation profile. minmax(0,1fr)+min-width:0 columns never overflow. ### Whitespace Generous quiet above every title; keep abyssal ground empty below the bob to carry depth at every viewport. ### Density Quiet ground alternated with compressed mono annotation clusters at each station. ### Responsive Mobile (390px) retracts the datum-line and turns depth-tags into inline labels, single-column stack, non-essential nav and table columns hidden, no horizontal overflow; ultra-wide caps and centres content while only the hero spans 100vw. ### Breakpoints - **Mobile**: 390px - **Tablet**: 760px - **Desktop**: 1100px - **Wide**: 2200px ## Guidance ### Do - Keep one continuous datum-line and clamp every reading to it at a known depth. - Write copy as a real survey: depths, offsets in mm, tolerance bands, line tension, and stamped state. - Reserve amber for action, ice-blue for the datum and focus rings, survey-green for true-to-plumb. - Let the abyssal ink-blue ground carry depth; leave the dark empty where the bob has not yet read. ### Don't - Do not lighten the ground toward grey or white, or recolour this into a neutral framed cockpit. - Do not spread an accent as a fill or wash, or edge a card with a single accent line. - Do not box the navigation into a floating pill or nest cards. - Do not add scroll-down cues, glyph symbols in copy, or emoji on buttons. ### Accessibility Body text 17px+ (table rows 14.5px+) in high-contrast off-white on the deep ground; every form control explicitly styled with a visible ice-blue focus ring; state is always labelled (true / drift / no return), never colour alone; motion gated behind a class with the settled state visible at no-JS and prefers-reduced-motion respected. ## Imagery Direction ### Pairs With plumbline ### Summary Plumbline technique applied vertically: a deep-survey sonde descending a shaft on a single plumb-line, segmented into separated matte-graphite fragments along the spine, one-pixel pale reticle arcs and depth ticks, dotted amber leaders to numbered callout tabs, serial labels, and large abyssal negative space — so the hero is the datum-line at full scale. ### Subjects - descending survey sonde / plumb-bob - exploded shaft instrument plates - depth-profile diagrams - deviation-gauge schematics ### Subjects Note subjects are interchangeable; the technique (exploded diagnostic plate, reticle arcs, amber leaders, deep void) is what carries. ### Usage One full-bleed vertical hero of the sonde descending on the plumb-line, headline overlaid in the left ink-veil; inline diagrams reuse the same exploded-on-ink technique.
---
version: "alpha"
name: "Fathom"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#0C1620"
surface: "#16242F"
surface_2: "#1D3242"
lcd: "#081119"
text: "#EAF1F5"
muted: "#7E94A1"
border: "#294150"
accent: "#E89A3C"
on_accent: "#0C1620"
hud: "#9FD2E6"
plumb: "#6FB39A"
success: "#6FB39A"
warning: "#E89A3C"
error: "#D2614B"
info: "#9FD2E6"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.03em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.03em"
body-md:
fontFamily: "Spline Sans"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.03em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
md: "16px"
lg: "24px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
step-9: "128px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_2:
backgroundColor: "{colors.surface_2}"
color-reference-lcd:
backgroundColor: "{colors.lcd}"
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-hud:
backgroundColor: "{colors.hud}"
color-reference-plumb:
backgroundColor: "{colors.plumb}"
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: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Fathom
## Overview
Fathom is a depth-survey language: the screen is the readout of a deep plumb sounding. Instead of looking at a distant machine from a cockpit, the whole interface hangs from one continuous plumb-line — depth runs top to bottom, deviation from true vertical runs left and right. Every reading is clamped to the datum at a known depth on an abyssal ink-blue ground, so the operator never loses the thread of the descent.
### Values
- One continuous datum — every reading clamps to a single plumb-line at a known depth, never floating free.
- Deviation over decoration — what matters is how far the structure has left true vertical, read in millimetres against a tolerance band.
- The dark is active material — abyssal ink-blue carries depth and the scale of what lies below the bob.
- Evidence, not telemetry filler — depths, offsets, line tension, and committed state read like a survey an inspector can sign.
- Three highlighter accents — amber for action, ice-blue for the datum, survey-green for true-to-plumb; nothing else lights up.
### Anti-Values
- Not a neutral near-black cockpit looking at a distant aperture — the ground is deliberately abyssal ink-blue and the mechanic is a vertical datum, not a framed machine.
- No accent edges on cards, no boxed-in pill navigation, no nested cards.
- No accent spread as a fill or wash; semantic error stays a small role, never primary.
- No scroll cues, glyph symbols in copy, or emoji on buttons.
- No fake microtext as texture; every label is a placed reading.
### Visual Character
- A continuous vertical plumb-line spine runs the full height of every composition; sections are depth-stations that clamp to it with a square node, a tick, and a margin depth-tag, ending in a plumb-bob at the floor.
- Deviation gauges and profiles read offset from a central datum axis against a tolerance band, with needles and dots coloured by state.
- Dotted amber leaders connect numbered callout tabs to the actions the operator may take.
- Recessed LCD readouts sink below the ground while survey-graphite panels lift above it; depth is read by ground value, not drop shadow.
- Abyssal ink-blue negative space below the bob expresses descent and scale.
## 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 | `#0C1620` |
| surface | `#16242F` |
| surface_2 | `#1D3242` |
| lcd | `#081119` |
| text | `#EAF1F5` |
| muted | `#7E94A1` |
| border | `#294150` |
| accent | `#E89A3C` |
| on_accent | `#0C1620` |
| hud | `#9FD2E6` |
| plumb | `#6FB39A` |
| success | `#6FB39A` |
| warning | `#E89A3C` |
| error | `#D2614B` |
| info | `#9FD2E6` |
## Typography
- **Headline-Lg**: Space Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Spline Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
- **Step-9**: `128px`
### Grid
Left datum-rail (padding-left 96px, plumb-line at 47px) with stations descending; dashboard uses a fixed datum-rail of depth-stations as nav beside a main deviation profile. minmax(0,1fr)+min-width:0 columns never overflow.
### Whitespace
Generous quiet above every title; keep abyssal ground empty below the bob to carry depth at every viewport.
### Density
Quiet ground alternated with compressed mono annotation clusters at each station.
### Responsive
Mobile (390px) retracts the datum-line and turns depth-tags into inline labels, single-column stack, non-essential nav and table columns hidden, no horizontal overflow; ultra-wide caps and centres content while only the hero spans 100vw.
### Breakpoints
- **Mobile**: 390px
- **Tablet**: 760px
- **Desktop**: 1100px
- **Wide**: 2200px
## Elevation & Depth
### Shadows
- **None**: none
- **Sm**: 0 1px 0 rgba(159,210,230,.06)
- **Md**: 0 18px 50px rgba(2,8,14,.45)
- **Lg**: 0 40px 120px rgba(2,8,14,.6)
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Ground**: abyssal ink-blue #0C1620 — cold sounding water, active negative space
- **Panel**: survey-graphite #16242F lifted above the ground, 16px radius, no border
- **Lcd**: recessed readout #081119 sunk below the ground for live data
- **Treatment**: matte graphite panels and recessed LCD on abyssal ink-blue; depth read by ground value, not drop shadow
### Borders
- **Policy**: none on cards and no single accent edge; hairline seams only inset on form controls; ice-blue hairline at low opacity separates table rows; hierarchy carried by the datum-line, fill, and space
## Components
### Composition
Hang the interface from one continuous vertical plumb-line; sections are depth-stations clamped to it with a node, tick, and margin depth-tag, the line ending in a plumb-bob at the floor. Deviation reads left and right of the datum; actions hang off dotted amber leaders.
### Hierarchy
Primary hierarchy belongs to depth and offset from true; secondary to station titles, gauges, and amber leader actions. Space Grotesk display headings, Spline Sans operational copy, Spline Sans Mono for all readouts, depth-tags, and serials.
### Density
Medium-low: most of the abyssal ground stays quiet while exact readings cluster at each station; the dark below the bob is left empty to express depth.
### Signature
The datum-line: a single plumb-line spine with depth-station clamps and metered depth-tags; deviation gauges/profiles against a central datum axis; dotted amber leaders to numbered callouts; recessed LCD readouts on abyssal ink-blue.
## 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-019ef9e5-6ca9-73b3-80ad-14cdac5c84db/DESIGN.with-shadcn.md`.
The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is 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 Keep one continuous datum-line and clamp every reading to it at a known depth.
- Do Write copy as a real survey: depths, offsets in mm, tolerance bands, line tension, and stamped state.
- Do Reserve amber for action, ice-blue for the datum and focus rings, survey-green for true-to-plumb.
- Do Let the abyssal ink-blue ground carry depth; leave the dark empty where the bob has not yet read.
- Don't Do not lighten the ground toward grey or white, or recolour this into a neutral framed cockpit.
- Don't Do not spread an accent as a fill or wash, or edge a card with a single accent line.
- Don't Do not box the navigation into a floating pill or nest cards.
- Don't Do not add scroll-down cues, glyph symbols in copy, or emoji on buttons.
### Accessibility
Body text 17px+ (table rows 14.5px+) in high-contrast off-white on the deep ground; every form control explicitly styled with a visible ice-blue focus ring; state is always labelled (true / drift / no return), never colour alone; motion gated behind a class with the settled state visible at no-JS and prefers-reduced-motion respected.
## Imagery Direction
### Pairs With
plumbline
### Summary
Plumbline technique applied vertically: a deep-survey sonde descending a shaft on a single plumb-line, segmented into separated matte-graphite fragments along the spine, one-pixel pale reticle arcs and depth ticks, dotted amber leaders to numbered callout tabs, serial labels, and large abyssal negative space — so the hero is the datum-line at full scale.
### Subjects
- descending survey sonde / plumb-bob
- exploded shaft instrument plates
- depth-profile diagrams
- deviation-gauge schematics
### Subjects Note
subjects are interchangeable; the technique (exploded diagnostic plate, reticle arcs, amber leaders, deep void) is what carries.
### Usage
One full-bleed vertical hero of the sonde descending on the plumb-line, headline overlaid in the left ink-veil; inline diagrams reuse the same exploded-on-ink technique.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "fathom",
"type": "registry:theme",
"title": "Fathom shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#0C1620",
"foreground": "#EAF1F5",
"card": "#16242F",
"card-foreground": "#EAF1F5",
"popover": "#16242F",
"popover-foreground": "#EAF1F5",
"primary": "#EAF1F5",
"primary-foreground": "#111111",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#7E94A1",
"muted-foreground": "#EAF1F5",
"accent": "#E89A3C",
"accent-foreground": "#ffffff",
"destructive": "#D2614B",
"border": "#294150",
"input": "#294150",
"ring": "#E89A3C",
"chart-1": "#EAF1F5",
"chart-2": "#f4f4f5",
"chart-3": "#E89A3C",
"chart-4": "#6FB39A",
"chart-5": "#E89A3C",
"sidebar": "#16242F",
"sidebar-foreground": "#EAF1F5",
"sidebar-primary": "#EAF1F5",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#9FD2E6",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "#294150",
"sidebar-ring": "#E89A3C",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#EAF1F5",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#E89A3C",
"accent-foreground": "#ffffff",
"destructive": "#D2614B",
"border": "#303642",
"input": "#303642",
"ring": "#E89A3C",
"chart-1": "#EAF1F5",
"chart-2": "#f4f4f5",
"chart-3": "#E89A3C",
"chart-4": "#6FB39A",
"chart-5": "#E89A3C",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#EAF1F5",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#E89A3C",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#E89A3C",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef9e5-6ca9-73b3-80ad-14cdac5c84db",
"slug": "fathom",
"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",
"hud",
"info",
"lcd",
"muted",
"on_accent",
"plumb",
"success",
"surface",
"surface_2",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"radii": [
"full",
"lg",
"md",
"none"
],
"shadows": [
"lg",
"md",
"none",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"ground",
"lcd",
"panel",
"treatment"
],
"borders": [
"policy"
],
"motion": [
"duration",
"easing",
"philosophy"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Agent-generated
Keep Fathomand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.
Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #0C1620;
--foreground: #EAF1F5;
--card: #16242F;
--card-foreground: #EAF1F5;
--popover: #16242F;
--popover-foreground: #EAF1F5;
--primary: #EAF1F5;
--primary-foreground: #111111;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #7E94A1;
--muted-foreground: #EAF1F5;
--accent: #E89A3C;
--accent-foreground: #ffffff;
--destructive: #D2614B;
--border: #294150;
--input: #294150;
--ring: #E89A3C;
--chart-1: #EAF1F5;
--chart-2: #f4f4f5;
--chart-3: #E89A3C;
--chart-4: #6FB39A;
--chart-5: #E89A3C;
--sidebar: #16242F;
--sidebar-foreground: #EAF1F5;
--sidebar-primary: #EAF1F5;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #9FD2E6;
--sidebar-accent-foreground: #111111;
--sidebar-border: #294150;
--sidebar-ring: #E89A3C;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #EAF1F5;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #E89A3C;
--accent-foreground: #ffffff;
--destructive: #D2614B;
--border: #303642;
--input: #303642;
--ring: #E89A3C;
--chart-1: #EAF1F5;
--chart-2: #f4f4f5;
--chart-3: #E89A3C;
--chart-4: #6FB39A;
--chart-5: #E89A3C;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #EAF1F5;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #E89A3C;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #E89A3C;
--radius: 16px;
}
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 FathomShadcnKit() {
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">Fathom</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>
);
}
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "fathom",
"type": "registry:theme",
"extends": "none",
"visualProfile": {
"ground": "dark",
"material": "matte survey-graphite panels on abyssal ink-blue, recessed LCD readouts; no card borders or accent edges",
"radius": "sharp default (0); 16px on panels, 24px on the LCD band; pill only for switches and state pills",
"border": "none on cards; hairline seams only inset on form controls; separation by fill and space",
"accentUsage": "amber for action and the one primary button, ice-blue HUD for datum/focus rings, survey-green for true-to-plumb state; never as fills or washes",
"elevation": "flat; depth is read by ground value (LCD sinks below ground, panels lift) not by drop shadow",
"typography": "Space Grotesk display, Spline Sans body, Spline Sans Mono for all readouts and labels"
},
"cssVars": {
"theme": {
"font-sans": "Spline Sans, system-ui, sans-serif",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"radius": "0rem"
},
"light": {
"background": "#0C1620",
"foreground": "#EAF1F5",
"card": "#16242F",
"card-foreground": "#EAF1F5",
"popover": "#16242F",
"popover-foreground": "#EAF1F5",
"primary": "#E89A3C",
"primary-foreground": "#0C1620",
"secondary": "#1D3242",
"secondary-foreground": "#EAF1F5",
"muted": "#081119",
"muted-foreground": "#7E94A1",
"accent": "#9FD2E6",
"accent-foreground": "#0C1620",
"destructive": "#D2614B",
"destructive-foreground": "#0C1620",
"border": "#294150",
"input": "#294150",
"ring": "#9FD2E6",
"chart-1": "#E89A3C",
"chart-2": "#9FD2E6",
"chart-3": "#6FB39A",
"chart-4": "#7E94A1",
"chart-5": "#D2614B"
},
"dark": {
"background": "#0C1620",
"foreground": "#EAF1F5",
"card": "#16242F",
"card-foreground": "#EAF1F5",
"popover": "#16242F",
"popover-foreground": "#EAF1F5",
"primary": "#E89A3C",
"primary-foreground": "#0C1620",
"secondary": "#1D3242",
"secondary-foreground": "#EAF1F5",
"muted": "#081119",
"muted-foreground": "#7E94A1",
"accent": "#9FD2E6",
"accent-foreground": "#0C1620",
"destructive": "#D2614B",
"destructive-foreground": "#0C1620",
"border": "#294150",
"input": "#294150",
"ring": "#9FD2E6",
"chart-1": "#E89A3C",
"chart-2": "#9FD2E6",
"chart-3": "#6FB39A",
"chart-4": "#7E94A1",
"chart-5": "#D2614B"
}
}
}
# Fathom shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef9e5-6ca9-73b3-80ad-14cdac5c84db`
Slug: `fathom`
## Intent
Fathom is a depth-survey language: the screen is the readout of a deep plumb sounding. Instead of looking at a distant machine from a cockpit, the whole interface hangs from one continuous plumb-line — depth runs top to bottom, deviation from true vertical runs left and right. Every reading is clamped to the datum at a known depth on an abyssal ink-blue ground, so the operator never loses the thread of the descent.
## 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": "#0C1620",
"surface": "#16242F",
"surface_2": "#1D3242",
"lcd": "#081119",
"text": "#EAF1F5",
"muted": "#7E94A1",
"border": "#294150",
"accent": "#E89A3C",
"on_accent": "#0C1620",
"hud": "#9FD2E6",
"plumb": "#6FB39A",
"success": "#6FB39A",
"warning": "#E89A3C",
"error": "#D2614B",
"info": "#9FD2E6"
}
Typography:
{
"base_size": "17px",
"body_font": "Spline Sans",
"heading_font": "Space Grotesk",
"mono_font": "Spline Sans Mono",
"heading_weight": "600",
"heading_transform": "none",
"letter_spacing": "-0.03em",
"line_height": "1.55",
"scale_ratio": "1.2",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Spline+Sans:wght@400;500;600&family=Spline+Sans+Mono:wght@400;500;600&display=swap"
}
## Visual character to preserve
- A continuous vertical plumb-line spine runs the full height of every composition; sections are depth-stations that clamp to it with a square node, a tick, and a margin depth-tag, ending in a plumb-bob at the floor.
- Deviation gauges and profiles read offset from a central datum axis against a tolerance band, with needles and dots coloured by state.
- Dotted amber leaders connect numbered callout tabs to the actions the operator may take.
- Recessed LCD readouts sink below the ground while survey-graphite panels lift above it; depth is read by ground value, not drop shadow.
- Abyssal ink-blue negative space below the bob expresses descent and scale.
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": false,
"stickerBadges": false,
"motion": "lift",
"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/fathom/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: Keep one continuous datum-line and clamp every reading to it at a known depth.; Write copy as a real survey: depths, offsets in mm, tolerance bands, line tension, and stamped state.; Reserve amber for action, ice-blue for the datum and focus rings, survey-green for true-to-plumb.; Let the abyssal ink-blue ground carry depth; leave the dark empty where the bob has not yet read.
- Do not: Do not lighten the ground toward grey or white, or recolour this into a neutral framed cockpit.; Do not spread an accent as a fill or wash, or edge a card with a single accent line.; Do not box the navigation into a floating pill or nest cards.; Do not add scroll-down cues, glyph symbols in copy, or emoji on buttons.
## 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 FathomShadcnKit() {
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">Fathom</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
{
"grid": "Left datum-rail (padding-left 96px, plumb-line at 47px) with stations descending; dashboard uses a fixed datum-rail of depth-stations as nav beside a main deviation profile. minmax(0,1fr)+min-width:0 columns never overflow.",
"whitespace": "Generous quiet above every title; keep abyssal ground empty below the bob to carry depth at every viewport.",
"density": "Quiet ground alternated with compressed mono annotation clusters at each station.",
"responsive": "Mobile (390px) retracts the datum-line and turns depth-tags into inline labels, single-column stack, non-essential nav and table columns hidden, no horizontal overflow; ultra-wide caps and centres content while only the hero spans 100vw.",
"breakpoints": {
"mobile": "390px",
"tablet": "760px",
"desktop": "1100px",
"wide": "2200px"
}
}
{
"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-019ef9e5-6ca9-73b3-80ad-14cdac5c84db",
"name": "Fathom",
"slug": "fathom"
},
"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": [
"A continuous vertical plumb-line spine runs the full height of every composition; sections are depth-stations that clamp to it with a square node, a tick, and a margin depth-tag, ending in a plumb-bob at the floor.",
"Deviation gauges and profiles read offset from a central datum axis against a tolerance band, with needles and dots coloured by state.",
"Dotted amber leaders connect numbered callout tabs to the actions the operator may take.",
"Recessed LCD readouts sink below the ground while survey-graphite panels lift above it; depth is read by ground value, not drop shadow.",
"Abyssal ink-blue negative space below the bob expresses descent and scale."
],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": false,
"stickerBadges": false,
"motion": "lift",
"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": "Fathom 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": [
"Keep one continuous datum-line and clamp every reading to it at a known depth.",
"Write copy as a real survey: depths, offsets in mm, tolerance bands, line tension, and stamped state.",
"Reserve amber for action, ice-blue for the datum and focus rings, survey-green for true-to-plumb.",
"Let the abyssal ink-blue ground carry depth; leave the dark empty where the bob has not yet read."
],
"dont": [
"Do not lighten the ground toward grey or white, or recolour this into a neutral framed cockpit.",
"Do not spread an accent as a fill or wash, or edge a card with a single accent line.",
"Do not box the navigation into a floating pill or nest cards.",
"Do not add scroll-down cues, glyph symbols in copy, or emoji on buttons."
]
}
}