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.
The interface is a descent, not a dashboard: a depth-spine rail with metre ticks plus a wide content column; sections are full-width strata stacked top to bottom, each pinned to its depth, and one ice-light plumb line descends through them.
Three voices: an oversized natural-case Space Grotesk display readout, calm 17px+ blue-gray IBM Plex Sans body, and tiny IBM Plex Mono depths, times, and station IDs. Hierarchy is position on the column and one dramatic scale jump from display to micro telemetry.
Open and loud up top, dense telemetry below; dense readings sit in strata islands separated by hairline grid gaps, never filling an empty field with equal tiles.
A continuous depth spine carries metre numerals and 1px ticks; one luminous ice-light plumb line drops through every stratum; full-width strata bands stack top to bottom, each marked to its depth; panes are dark and square with no border; ice-light is the line and the one action, a warm amber is the return ping.
A depth-spine rail (~64px) with metre ticks paired with a wide content column; sections are full-width strata stacked top to bottom, each pinned to its depth; telemetry islands use minmax(0,1fr) columns separated by hairline grid gaps.
Whitespace is the open column up top: generous padding above titles and around the hero, tightening into 4-12px telemetry stacks deeper down.
open-top-dense-below
Renders from ~390px mobile to 2560px+ ultra-wide; mobile stacks to one column, the spine collapses to a thin depth rail, and the least-essential table column drops; the full-bleed hero spans 100vw while contained content caps and centres.
glacis-ink
Subjects rendered in Glacis Ink: a cold technical line-drawing overprint with crisp 1px carbon contour and no fill, faint icy coordinate rings and calibration ticks, sparse blue-gray hatching, corner-bracket ticks. For Cairn the contour plate is inverted to glow as ice-light line against the abyssal dark column, composed strictly vertical as a stratified sounding profile with a plumb line and a suspended sonde.
Full-viewport landing hero driven by background-image: var(--hero-image); the plate is a vertical contour study of the ice/water column, inverted to glow on the dark, with a directional well keeping the overlaid headline legible — never a literal gauge or dashboard object.
# Cairn ## Philosophy Cairn is an under-ice sounding console for instruments that observe more than they speak. The interface is a descent, not a dashboard: full-width strata stacked top to bottom, every reading marked to its depth on a continuous spine, one luminous ice-light plumb line dropped through them. The surface speaks loudly, the deep speaks in pings, and the deepest reading is read last. An abyssal polar-dark ground, ice-light cyan as the sounding line and the one action, and a warm amber return ping. ### Values - the descent is the structure: importance is position on the column, the deepest reading read last - one continuous line: a depth spine and a plumb line tie every reading to its true depth - stacked strata: full-width registers, loud and open up top, dense with telemetry below - light in the dark: ice-light and one warm amber clarify state against an abyssal ground, never neon - mechanical precision: every reading is squared, labelled in mono, pinned to a measured depth ### Anti-Values - a grid of equal tiles spread across an empty field, or a generic SaaS dashboard - borders, top rules, divider hairlines, or single accent-edge panels - neon glow, vaporwave gradients, or decoration without an idea - a condensed all-caps masthead, or defaulting to a flat-white ground ### Visual Character - An abyssal polar-dark ground (#06121A) reads as the water under the ice and the polar winter, never a flat black and never white. - A continuous depth spine runs the left edge with metre numerals and 1px ticks; one ice-light plumb line descends through every stratum, glowing against the dark. - Sections are full-width horizontal strata stacked top to bottom — surface, firn, glacial ice, ice base, water column, bedrock — each pinned to its depth. - Panes are dark, square, lifted only by surface tone; separation is the strata grid (a hairline gap), the spine, and the lift — never a border or an accent edge. - Space Grotesk display in natural case pairs with IBM Plex Sans body and IBM Plex Mono depths, times, and station IDs, with one dramatic scale jump from display readout to micro telemetry. - The landing hero is an engraved ice-core sounding plate in Glacis Ink, inverted to glow as ice-light line on the abyssal column. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#06121A` | | surface | `#0C1E29` | | surface_2 | `#112A38` | | text | `#EAF4F4` | | muted | `#7C97A2` | | border | `#15303D` | | accent | `#7FE8E0` | | on_accent | `#04141A` | | signal | `#F0A24B` | | primary | `#7FE8E0` | | secondary | `#7C97A2` | | background | `#06121A` | | success | `#58C39A` | | warning | `#F0A24B` | | error | `#E0685E` | | info | `#7FE8E0` | ### Typography - **Base Size**: 17px - **Body Font**: IBM Plex Sans - **Heading Font**: Space Grotesk - **Mono Font**: IBM Plex Mono - **Heading Weight**: 700 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.55 - **Scale Ratio**: 1.25 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap ### Radii - **None**: 0 - **Sm**: 0 - **Md**: 0 - **Lg**: 0 - **Full**: 9999px ### Shadows - **Sm**: none - **Md**: 0 18px 40px rgba(0,0,0,.4) - **Lg**: 0 24px 60px rgba(0,0,0,.45) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96,128] ### Surfaces - **Treatment**: dark station panes on an abyssal column; panes lift only by surface tone, never tinted into heavy cards; separation is the strata grid, the depth spine, and lift - **Card Style**: Dark, square, zero-radius panes with no border and no top rule; a focal pane sits at its depth on the spine; status reads from a circular pip, never an accent edge - **Bg Pattern**: an abyssal vertical depth wash with very-low-opacity icy coordinate arcs; the depth spine and one ice-light plumb line descend the left edge through the strata ### Borders - **Default Width**: 1px - **Accent Width**: 0 - **Style**: solid - **Character**: Hairline grid gaps on #15303D do the dividing; identity comes from the depth spine and the plumb line, never from a heavy or single-accent edge ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(0.16, 1, 0.3, 1) - **Philosophy**: the fully-settled page is the no-JS default; reveals layer on top behind a .js class and a scroll observer, disabled under prefers-reduced-motion; motion reads as a slow descent and settle, never a bounce ## Rules ### Composition The interface is a descent, not a dashboard: a depth-spine rail with metre ticks plus a wide content column; sections are full-width strata stacked top to bottom, each pinned to its depth, and one ice-light plumb line descends through them. ### Hierarchy Three voices: an oversized natural-case Space Grotesk display readout, calm 17px+ blue-gray IBM Plex Sans body, and tiny IBM Plex Mono depths, times, and station IDs. Hierarchy is position on the column and one dramatic scale jump from display to micro telemetry. ### Density Open and loud up top, dense telemetry below; dense readings sit in strata islands separated by hairline grid gaps, never filling an empty field with equal tiles. ### Signature A continuous depth spine carries metre numerals and 1px ticks; one luminous ice-light plumb line drops through every stratum; full-width strata bands stack top to bottom, each marked to its depth; panes are dark and square with no border; ice-light is the line and the one action, a warm amber is the return ping. ## Layout ### Grid A depth-spine rail (~64px) with metre ticks paired with a wide content column; sections are full-width strata stacked top to bottom, each pinned to its depth; telemetry islands use minmax(0,1fr) columns separated by hairline grid gaps. ### Whitespace Whitespace is the open column up top: generous padding above titles and around the hero, tightening into 4-12px telemetry stacks deeper down. ### Density open-top-dense-below ### Responsive Renders from ~390px mobile to 2560px+ ultra-wide; mobile stacks to one column, the spine collapses to a thin depth rail, and the least-essential table column drops; the full-bleed hero spans 100vw while contained content caps and centres. ### Breakpoints - **Mobile**: 390px - **Tablet**: 768px - **Desktop**: 1440px - **Ultrawide**: 1700px ## Guidance ### Do - Stack readings on the line and mark each one to its true depth on the spine. - Keep the ground a deliberate abyssal polar dark; let the plumb line glow against it. - Reserve ice-light for the sounding line, focus, and the single primary action. - Use the warm amber only for a return ping — a flagged crossing or a weak return. - Set depths, times, coordinates, and station IDs in IBM Plex Mono. - Create one dramatic scale jump between the display readout and the micro telemetry. - Separate with the strata grid, the depth spine, and surface lift — never borders. ### Don't - Spread a grid of equal tiles across an empty field, or build a generic SaaS dashboard. - Add borders, top rules, divider hairlines, or a single accent edge to a pane. - Round the corners, or use neon glow and gradients as decoration. - Lead with a condensed all-caps masthead, or default to a flat-white ground. - Rely on colour alone for state; carry status with a label plus a circular pip. ### Accessibility Text holds AA contrast on the abyssal dark ground; body is 17px+, table rows 13-14.5px mono. Focus is a visible 2px ice-light inset, never colour-only; state is carried by a label plus a circular pip. Motion respects prefers-reduced-motion and the settled state needs no JavaScript. ## Imagery Direction ### Pairs With glacis-ink ### Summary Subjects rendered in Glacis Ink: a cold technical line-drawing overprint with crisp 1px carbon contour and no fill, faint icy coordinate rings and calibration ticks, sparse blue-gray hatching, corner-bracket ticks. For Cairn the contour plate is inverted to glow as ice-light line against the abyssal dark column, composed strictly vertical as a stratified sounding profile with a plumb line and a suspended sonde. ### Subjects - ice-core cross-section / sounding profile (vertical strata) - under-ice conductivity sonde on a plumb line - under-ice hydrophone listening array - drift buoy frozen into pack ice - sub-glacial lake bathymetric column ### Usage Full-viewport landing hero driven by background-image: var(--hero-image); the plate is a vertical contour study of the ice/water column, inverted to glow on the dark, with a directional well keeping the overlaid headline legible — never a literal gauge or dashboard object.
---
version: "alpha"
name: "Cairn"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#06121A"
surface: "#0C1E29"
surface_2: "#112A38"
text: "#EAF4F4"
muted: "#7C97A2"
border: "#15303D"
accent: "#7FE8E0"
on_accent: "#04141A"
signal: "#F0A24B"
primary: "#7FE8E0"
secondary: "#7C97A2"
background: "#06121A"
success: "#58C39A"
warning: "#F0A24B"
error: "#E0685E"
info: "#7FE8E0"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "IBM Plex Sans"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.55
letterSpacing: "-0.02em"
label-md:
fontFamily: "IBM Plex Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "0px"
md: "0px"
lg: "0px"
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-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-signal:
backgroundColor: "{colors.signal}"
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-background:
backgroundColor: "{colors.background}"
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.primary}"
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"
---
# Cairn
## Overview
Cairn is an under-ice sounding console for instruments that observe more than they speak. The interface is a descent, not a dashboard: full-width strata stacked top to bottom, every reading marked to its depth on a continuous spine, one luminous ice-light plumb line dropped through them. The surface speaks loudly, the deep speaks in pings, and the deepest reading is read last. An abyssal polar-dark ground, ice-light cyan as the sounding line and the one action, and a warm amber return ping.
### Values
- the descent is the structure: importance is position on the column, the deepest reading read last
- one continuous line: a depth spine and a plumb line tie every reading to its true depth
- stacked strata: full-width registers, loud and open up top, dense with telemetry below
- light in the dark: ice-light and one warm amber clarify state against an abyssal ground, never neon
- mechanical precision: every reading is squared, labelled in mono, pinned to a measured depth
### Anti-Values
- a grid of equal tiles spread across an empty field, or a generic SaaS dashboard
- borders, top rules, divider hairlines, or single accent-edge panels
- neon glow, vaporwave gradients, or decoration without an idea
- a condensed all-caps masthead, or defaulting to a flat-white ground
### Visual Character
- An abyssal polar-dark ground (#06121A) reads as the water under the ice and the polar winter, never a flat black and never white.
- A continuous depth spine runs the left edge with metre numerals and 1px ticks; one ice-light plumb line descends through every stratum, glowing against the dark.
- Sections are full-width horizontal strata stacked top to bottom — surface, firn, glacial ice, ice base, water column, bedrock — each pinned to its depth.
- Panes are dark, square, lifted only by surface tone; separation is the strata grid (a hairline gap), the spine, and the lift — never a border or an accent edge.
- Space Grotesk display in natural case pairs with IBM Plex Sans body and IBM Plex Mono depths, times, and station IDs, with one dramatic scale jump from display readout to micro telemetry.
- The landing hero is an engraved ice-core sounding plate in Glacis Ink, inverted to glow as ice-light line on the abyssal column.
## 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 | `#06121A` |
| surface | `#0C1E29` |
| surface_2 | `#112A38` |
| text | `#EAF4F4` |
| muted | `#7C97A2` |
| border | `#15303D` |
| accent | `#7FE8E0` |
| on_accent | `#04141A` |
| signal | `#F0A24B` |
| primary | `#7FE8E0` |
| secondary | `#7C97A2` |
| background | `#06121A` |
| success | `#58C39A` |
| warning | `#F0A24B` |
| error | `#E0685E` |
| info | `#7FE8E0` |
## 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**: IBM Plex Sans, 17px, weight 400, line-height 1.55.
- **Label-Md**: IBM Plex 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
A depth-spine rail (~64px) with metre ticks paired with a wide content column; sections are full-width strata stacked top to bottom, each pinned to its depth; telemetry islands use minmax(0,1fr) columns separated by hairline grid gaps.
### Whitespace
Whitespace is the open column up top: generous padding above titles and around the hero, tightening into 4-12px telemetry stacks deeper down.
### Density
open-top-dense-below
### Responsive
Renders from ~390px mobile to 2560px+ ultra-wide; mobile stacks to one column, the spine collapses to a thin depth rail, and the least-essential table column drops; the full-bleed hero spans 100vw while contained content caps and centres.
### Breakpoints
- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1440px
- **Ultrawide**: 1700px
## Elevation & Depth
### Shadows
- **Sm**: none
- **Md**: 0 18px 40px rgba(0,0,0,.4)
- **Lg**: 0 24px 60px rgba(0,0,0,.45)
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: dark station panes on an abyssal column; panes lift only by surface tone, never tinted into heavy cards; separation is the strata grid, the depth spine, and lift
- **Card Style**: Dark, square, zero-radius panes with no border and no top rule; a focal pane sits at its depth on the spine; status reads from a circular pip, never an accent edge
- **Bg Pattern**: an abyssal vertical depth wash with very-low-opacity icy coordinate arcs; the depth spine and one ice-light plumb line descend the left edge through the strata
### Borders
- **Default Width**: 1px
- **Accent Width**: 0
- **Style**: solid
- **Character**: Hairline grid gaps on #15303D do the dividing; identity comes from the depth spine and the plumb line, never from a heavy or single-accent edge
## Components
### Composition
The interface is a descent, not a dashboard: a depth-spine rail with metre ticks plus a wide content column; sections are full-width strata stacked top to bottom, each pinned to its depth, and one ice-light plumb line descends through them.
### Hierarchy
Three voices: an oversized natural-case Space Grotesk display readout, calm 17px+ blue-gray IBM Plex Sans body, and tiny IBM Plex Mono depths, times, and station IDs. Hierarchy is position on the column and one dramatic scale jump from display to micro telemetry.
### Density
Open and loud up top, dense telemetry below; dense readings sit in strata islands separated by hairline grid gaps, never filling an empty field with equal tiles.
### Signature
A continuous depth spine carries metre numerals and 1px ticks; one luminous ice-light plumb line drops through every stratum; full-width strata bands stack top to bottom, each marked to its depth; panes are dark and square with no border; ice-light is the line and the one action, a warm amber is the return ping.
## 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-019ef8cb-ddf8-7702-b2cb-560170b94b6a/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 Stack readings on the line and mark each one to its true depth on the spine.
- Do Keep the ground a deliberate abyssal polar dark; let the plumb line glow against it.
- Do Reserve ice-light for the sounding line, focus, and the single primary action.
- Do Use the warm amber only for a return ping — a flagged crossing or a weak return.
- Do Set depths, times, coordinates, and station IDs in IBM Plex Mono.
- Do Create one dramatic scale jump between the display readout and the micro telemetry.
- Do Separate with the strata grid, the depth spine, and surface lift — never borders.
- Don't Spread a grid of equal tiles across an empty field, or build a generic SaaS dashboard.
- Don't Add borders, top rules, divider hairlines, or a single accent edge to a pane.
- Don't Round the corners, or use neon glow and gradients as decoration.
- Don't Lead with a condensed all-caps masthead, or default to a flat-white ground.
- Don't Rely on colour alone for state; carry status with a label plus a circular pip.
### Accessibility
Text holds AA contrast on the abyssal dark ground; body is 17px+, table rows 13-14.5px mono. Focus is a visible 2px ice-light inset, never colour-only; state is carried by a label plus a circular pip. Motion respects prefers-reduced-motion and the settled state needs no JavaScript.
## Imagery Direction
### Pairs With
glacis-ink
### Summary
Subjects rendered in Glacis Ink: a cold technical line-drawing overprint with crisp 1px carbon contour and no fill, faint icy coordinate rings and calibration ticks, sparse blue-gray hatching, corner-bracket ticks. For Cairn the contour plate is inverted to glow as ice-light line against the abyssal dark column, composed strictly vertical as a stratified sounding profile with a plumb line and a suspended sonde.
### Subjects
- ice-core cross-section / sounding profile (vertical strata)
- under-ice conductivity sonde on a plumb line
- under-ice hydrophone listening array
- drift buoy frozen into pack ice
- sub-glacial lake bathymetric column
### Usage
Full-viewport landing hero driven by background-image: var(--hero-image); the plate is a vertical contour study of the ice/water column, inverted to glow on the dark, with a directional well keeping the overlaid headline legible — never a literal gauge or dashboard object.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "cairn",
"type": "registry:theme",
"title": "Cairn shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#06121A",
"foreground": "#EAF4F4",
"card": "#0C1E29",
"card-foreground": "#EAF4F4",
"popover": "#0C1E29",
"popover-foreground": "#EAF4F4",
"primary": "#7FE8E0",
"primary-foreground": "#111111",
"secondary": "#7C97A2",
"secondary-foreground": "#ffffff",
"muted": "#7C97A2",
"muted-foreground": "#EAF4F4",
"accent": "#7FE8E0",
"accent-foreground": "#111111",
"destructive": "#E0685E",
"border": "#15303D",
"input": "#15303D",
"ring": "#7FE8E0",
"chart-1": "#7FE8E0",
"chart-2": "#7C97A2",
"chart-3": "#7FE8E0",
"chart-4": "#58C39A",
"chart-5": "#F0A24B",
"sidebar": "#0C1E29",
"sidebar-foreground": "#EAF4F4",
"sidebar-primary": "#7FE8E0",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#7FE8E0",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "#15303D",
"sidebar-ring": "#7FE8E0",
"radius": "0"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#7FE8E0",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#7FE8E0",
"accent-foreground": "#111111",
"destructive": "#E0685E",
"border": "#303642",
"input": "#303642",
"ring": "#7FE8E0",
"chart-1": "#7FE8E0",
"chart-2": "#7C97A2",
"chart-3": "#7FE8E0",
"chart-4": "#58C39A",
"chart-5": "#F0A24B",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#7FE8E0",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#7FE8E0",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "#303642",
"sidebar-ring": "#7FE8E0",
"radius": "0"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef8cb-ddf8-7702-b2cb-560170b94b6a",
"slug": "cairn",
"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",
"background",
"bg",
"border",
"error",
"info",
"muted",
"on_accent",
"primary",
"secondary",
"signal",
"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",
"sm"
],
"shadows": [
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_width",
"style"
],
"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 Cairnand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.
Agent-authored scenes, component recipes, and visual profile rendered on local shadcn-style primitives.
An under-ice sounding console where every reading is stacked on the line and marked to its depth.
A cast form proving labels, an invalid cast-rate state, a log toggle, a gain slider, and an open-cast confirm.
A compact line with rows by depth, menus, tooltips, status pips, and a parked affordance.
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: #06121A;
--foreground: #EAF4F4;
--card: #0C1E29;
--card-foreground: #EAF4F4;
--popover: #0C1E29;
--popover-foreground: #EAF4F4;
--primary: #7FE8E0;
--primary-foreground: #111111;
--secondary: #7C97A2;
--secondary-foreground: #ffffff;
--muted: #7C97A2;
--muted-foreground: #EAF4F4;
--accent: #7FE8E0;
--accent-foreground: #111111;
--destructive: #E0685E;
--border: #15303D;
--input: #15303D;
--ring: #7FE8E0;
--chart-1: #7FE8E0;
--chart-2: #7C97A2;
--chart-3: #7FE8E0;
--chart-4: #58C39A;
--chart-5: #F0A24B;
--sidebar: #0C1E29;
--sidebar-foreground: #EAF4F4;
--sidebar-primary: #7FE8E0;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #7FE8E0;
--sidebar-accent-foreground: #111111;
--sidebar-border: #15303D;
--sidebar-ring: #7FE8E0;
--radius: 0;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #7FE8E0;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #7FE8E0;
--accent-foreground: #111111;
--destructive: #E0685E;
--border: #303642;
--input: #303642;
--ring: #7FE8E0;
--chart-1: #7FE8E0;
--chart-2: #7C97A2;
--chart-3: #7FE8E0;
--chart-4: #58C39A;
--chart-5: #F0A24B;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #7FE8E0;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #7FE8E0;
--sidebar-accent-foreground: #111111;
--sidebar-border: #303642;
--sidebar-ring: #7FE8E0;
--radius: 0;
}
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 CairnShadcnKit() {
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">Cairn</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": "cairn",
"type": "registry:theme",
"title": "Cairn",
"description": "An under-ice sounding console. The interface is a descent: full-width strata stacked top to bottom, every reading marked to its depth on a continuous spine, one luminous ice-light plumb line dropped through them. Abyssal polar-dark ground, ice-light cyan as the line + one action, a warm amber return ping. Space Grotesk display (natural case) + IBM Plex Sans/Mono; square corners; no borders or accent edges — separation is the strata grid and the spine.",
"cssVars": {
"theme": {
"font-sans": "IBM Plex Sans, system-ui, sans-serif",
"font-mono": "IBM Plex Mono, ui-monospace, monospace",
"font-display": "Space Grotesk, Helvetica Neue, Arial, sans-serif",
"font-heading": "Space Grotesk, Helvetica Neue, Arial, sans-serif",
"radius": "0px"
},
"dark": {
"background": "#06121A",
"foreground": "#EAF4F4",
"card": "#0C1E29",
"card-foreground": "#EAF4F4",
"popover": "#0C1E29",
"popover-foreground": "#EAF4F4",
"primary": "#7FE8E0",
"primary-foreground": "#04141A",
"secondary": "#112A38",
"secondary-foreground": "#EAF4F4",
"accent": "#7FE8E0",
"accent-foreground": "#04141A",
"muted": "#112A38",
"muted-foreground": "#7C97A2",
"destructive": "#E0685E",
"destructive-foreground": "#04141A",
"success": "#58C39A",
"warning": "#F0A24B",
"border": "transparent",
"input": "#112A38",
"ring": "#7FE8E0",
"radius": "0px"
}
}
}
# Cairn shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-agent`
Slug: `cairn`
## Intent
Cairn is an under-ice sounding-console language. Through shadcn/ui its one governing idea —
**the interface is a descent** — must survive: full-width strata stacked top to bottom, every
reading marked to its depth on a continuous spine, one ice-light plumb line dropped through them.
The ground is an **abyssal polar dark** (`#06121A`); type is grotesk (Space Grotesk display in
natural case, IBM Plex Sans body, IBM Plex Mono for depths/times/IDs). The only accents are
**ice-light cyan** (the line, focus, the one action) and a warm **amber return ping** (a flagged
or weak signal). No borders and no accent edges — separate by the **strata grid (hairline), the
depth spine, and surface lift**. Fields are flat; corners are square (never rounded). Dark mode
is the point.
## 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:
```json
{ "primary": "#7FE8E0", "accent": "#7FE8E0", "background": "#06121A", "surface": "#0C1E29", "surface2": "#112A38", "text": "#EAF4F4", "muted": "#7C97A2", "border": "#15303D", "signal": "#F0A24B", "success": "#58C39A", "warning": "#F0A24B", "error": "#E0685E", "info": "#7FE8E0" }
```
Typography:
```json
{ "heading_font": "Space Grotesk", "body_font": "IBM Plex Sans", "mono_font": "IBM Plex Mono", "letter_spacing": "-0.02em", "base_size": "17px" }
```
## Visual character to preserve
- **The descent**: importance is position on the column — a focal pane sits at its depth on the
spine; the deepest reading is read last. Never a grid of equal tiles in an empty field.
- **The depth spine + plumb line**: a continuous ice-light axis with metre ticks runs the layout;
one luminous line descends through the strata.
- **No borders, no accent edges.** Panes are dark, square, lifted only by surface tone; the strata
grid (a 1px gap on `--border`) and the spine do the dividing.
- **Square, not rounded** (radius 0); pills (9999px) only for status pips and switch knobs.
- Grotesk voice: Space Grotesk display, oversized + tightly tracked, natural case; IBM Plex Sans
body; IBM Plex Mono for depths, times, counts, station IDs.
## ShadSync visual profile
```json
{ "family": "console", "material": "flat", "contour": "default", "border": "none", "underlay": false, "grain": false, "stickerBadges": false, "motion": "subtle", "density": "balanced", "mode": "dark", "accents": ["accent", "warning", "success"] }
```
## Signature component recipes
### Button
Primary `Button` = `--primary` (ice-light) on the dark — the one emphasis; a secondary variant is
flat surface-2; a quiet variant is transparent with a hairline inset; square corners, no border,
mono uppercase label, one shared height. Disabled is a flat muted plaque.
### Card
`Card` is a dark, square pane lifted by surface tone — no border, no top rule. A focal pane is
placed at its depth on the spine; status reads from a pip, not an edge. Never nest panes.
### Input and Textarea
`Input` / `Textarea` sit on the surface-2 fill (no border); focus draws an ice-light inset; an
invalid field draws an error inset. Mono labels above, real sounding values inside.
### Select, Tabs, and Table
`Select` chooses a probe or window; `Tabs` switch Live / Casts / Probes / Archive; `Table` is the
listening log — mono header, mono depth rows, subtle dark zebra, a flat status `Badge` per row,
and a "no returns" empty state. No rule-lines between rows — separation is the zebra surface.
### Dialog and Sheet
`Dialog` is a formal notice ("Open this cast?") — centered, square, generous, on the dark;
`Sheet` is the probe / archive side rail. Both dark/ice-light, no border.
### Badge, Switch, Slider, Tooltip, Separator, Checkbox, Dropdown-menu
`Badge` is a flat status pip on a faint tint (ice-light / amber / pine). `Switch` "on" is
ice-light. `Slider` is an ice-light track with a square thumb. `Tooltip` is concise sans.
`Separator` is open strata space or a hairline grid line — never an accent rule across a pane.
`Checkbox` and `dropdown-menu` carry an ice-light focus and marker.
## Preview shots
- `application-shell`: sounding operations — the depth-spine rail, a KPI stratum band, a descent-
trace card, the probe roster, the listening-log table.
- `detail-editor`: set the next sounding — labelled fields, an invalid cast-rate state, a log
switch, a gain slider, an open-cast confirm.
- `data-operations`: the probe line — rows by depth, dropdown actions, status pips, a parked state.
- Each preview shot carries a renderable `scene` (headline, description, actions, rows/fields/stats).
## Implementation contract
- Start from the local `@/components/ui/*` shadcn primitives; do not create a second component system.
- Apply `/katagami/shadcn/cairn/registry-theme.json` variables first (dark mode), then compose with these recipes.
- Keep Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: stack readings on the line; mark each to its depth on the spine; keep the ground abyssal
dark; reserve ice-light for the line + the one action; separate by the strata grid, the spine,
and surface lift.
- Do not: add borders, top rules, divider hairlines, or accent edges; round the corners; use
gradients as decoration; nest panes; default to a light ground.
## Copy-paste component example
```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
// A probe pane: dark, square, lifted by surface tone, no border; placed at its depth on
// the spine. The mono caption carries the depth + state; the status reads from a pip.
export function ProbeCard() {
return (
<Card className="relative grid grid-cols-[8px_minmax(0,1fr)] overflow-hidden rounded-none border-0 bg-card text-card-foreground">
<div className="bg-[var(--primary)]" aria-hidden />
<div className="p-6">
<CardHeader className="p-0">
<Badge className="w-fit rounded-none bg-[rgba(127,232,224,.14)] text-[var(--primary)]">Casting</Badge>
<CardTitle className="mt-2 font-[var(--font-display)] text-2xl tracking-tight">
CT-09 sonde
</CardTitle>
<CardDescription className="font-mono text-xs uppercase tracking-wide text-muted-foreground">
−880 m · conductivity · battery 71%
</CardDescription>
</CardHeader>
<CardContent className="px-0 pt-3">
<p className="text-base text-muted-foreground">On the line and descending; logged at set depth.</p>
</CardContent>
<CardFooter className="justify-between px-0">
<span className="font-mono text-xs text-muted-foreground">Cast 4,128</span>
<Button className="rounded-none">Open the cast</Button>
</CardFooter>
</div>
</Card>
);
}
```
## Layout notes
```json
{ "grid": "a depth-spine rail (64px) + a wide content column; sections are full-width strata stacked top to bottom, each pinned to its depth", "density": "balanced; open and loud up top, dense telemetry below", "radii": "0 (square) / 9999 (pips)", "no_borders": true, "separators": "the strata grid (hairline gap), the depth spine, surface lift, an ice-light depth mark", "mode": "dark" }
```
{
"artifact": "katagami:shadcn-preview-shots",
"version": "preview-shots-v1",
"author": "katagami-agent",
"generatedBy": "katagami-agent",
"requiresVisualProfile": true,
"schema": "katagami:shadcn-preview-shots/renderable-v1",
"renderable": true,
"language": { "id": "", "name": "Cairn", "slug": "cairn" },
"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": [
"The interface is a descent: stack full-width strata top to bottom, mark every reading to its depth on a continuous spine, drop one ice-light plumb line through them.",
"Abyssal polar-dark ground; no borders and no accent edges — separation is the strata grid (hairline), the depth spine, and surface lift.",
"Space Grotesk display in natural case + IBM Plex Sans body + IBM Plex Mono for depths/times/IDs; ice-light cyan is the line and the one action; warm amber is a return ping; square corners, never rounded; dark mode is the point."
],
"visualProfile": {
"family": "console",
"material": "flat",
"contour": "default",
"border": "none",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "subtle",
"density": "balanced",
"mode": "dark",
"accents": ["accent", "warning", "success"]
},
"shots": [
{
"id": "application-shell",
"title": "Sounding operations",
"viewport": "desktop",
"primitives": ["button", "card", "input", "select", "tabs", "badge", "separator", "table"],
"composition": "An under-ice ops console on the abyssal dark: a depth-spine rail with metre ticks, a KPI stratum band (depth / temp / salinity / weak returns), a descent-trace card, the probe roster, and the listening-log table with status pips.",
"mustShow": ["ice-light primary action vs flat secondary on dark", "dark square cards separated by the hairline strata grid (no borders)", "ice-light + amber + pine status pips", "mono depths and times on a dark ledger with subtle zebra"],
"avoid": ["borders, divider hairlines, top rules, or accent edges", "rounded corners", "gradients as decoration", "a flat-white or light ground"],
"scene": {
"eyebrow": "station hollow-7",
"headline": "Cast 4,128 — live",
"description": "An under-ice sounding console where every reading is stacked on the line and marked to its depth.",
"primaryAction": "Drop a sounding",
"secondaryAction": "Replay last cast",
"stats": [
{ "label": "cast depth", "value": "880 m", "tone": "accent" },
{ "label": "water temp", "value": "−2.04 °C", "tone": "default" },
{ "label": "weak returns", "value": "3", "tone": "warning" }
],
"rows": [
{ "label": "CT-09 sonde", "value": "−880 m · conductivity", "status": "casting" },
{ "label": "HP-03 array", "value": "−420 m · hydrophone", "status": "weak" },
{ "label": "CM-01 camera", "value": "−95 m · under-ice", "status": "parked" },
{ "label": "CT-04 sonde", "value": "−210 m · conductivity", "status": "holding" }
],
"statuses": ["Casting", "Weak", "Parked", "Holding"]
}
},
{
"id": "detail-editor",
"title": "Set the next sounding",
"viewport": "tablet",
"primitives": ["button", "card", "input", "textarea", "select", "checkbox", "switch", "slider", "dialog", "sheet"],
"composition": "A cast-setup flow on the dark: mono-labelled fields, an invalid (amber/rust) cast-rate state, a log-every-ping switch, a hydrophone-gain slider, and an open-the-cast confirm dialog.",
"mustShow": ["ice-light focus inset on inputs", "an invalid (error) cast-rate state", "open-cast confirm dialog as a formal notice on dark", "real sounding values"],
"avoid": ["unstyled browser controls", "missing labels", "nested cards", "rounded inputs", "light ground"],
"scene": {
"eyebrow": "new cast",
"headline": "Set — cast 4,129",
"description": "A cast form proving labels, an invalid cast-rate state, a log toggle, a gain slider, and an open-cast confirm.",
"primaryAction": "Open the cast",
"secondaryAction": "Save as preset",
"fields": [
{ "label": "Probe", "value": "CT-09 — conductivity sonde", "type": "select" },
{ "label": "Target depth", "value": "−1 050 m", "type": "text" },
{ "label": "Cast rate", "value": "exceeds plumb safe rate (max 2.5 m/s)", "type": "invalid" },
{ "label": "Log every ping", "value": "on", "type": "switch" }
],
"statuses": ["Set", "Invalid", "Logging"]
}
},
{
"id": "data-operations",
"title": "Probe line",
"viewport": "mobile",
"primitives": ["button", "tabs", "badge", "dropdown-menu", "table", "tooltip", "separator"],
"composition": "A narrow probe line: stacked mono rows by depth, per-row dropdown actions, status pips, tooltips, and a parked state — the spine collapses to a thin depth rail.",
"mustShow": ["responsive reflow to one column", "mono depth rows", "row action menu with ice-light markers", "status pips", "a parked/idle state"],
"avoid": ["desktop-only tables", "text overflow", "generic shadcn spacing without Cairn character", "light ground"],
"scene": {
"eyebrow": "on the line",
"headline": "Probe line",
"description": "A compact line with rows by depth, menus, tooltips, status pips, and a parked affordance.",
"primaryAction": "Cast",
"secondaryAction": "Filter",
"rows": [
{ "label": "CT-09 sonde", "value": "−880 m", "status": "casting" },
{ "label": "HP-03 array", "value": "−420 m", "status": "weak" },
{ "label": "CM-01 camera", "value": "−95 m", "status": "parked" }
],
"statuses": ["Casting", "Weak", "Parked"]
}
}
],
"componentRecipes": [
{ "primitive": "button", "intent": "Hierarchy: ice-light primary = the one emphasis on dark; flat surface-2 = secondary; transparent + hairline inset = quiet; square, no border, mono uppercase label, one shared height." },
{ "primitive": "card", "intent": "A dark square station pane lifted only by surface tone, no border/top-rule; a focal pane sits at its depth on the spine; never nest panes." },
{ "primitive": "input", "intent": "Surface-2 fill, no border; ice-light inset on focus, error inset when invalid; square corners; mono label above; real sounding values inside." },
{ "primitive": "textarea", "intent": "Cast notes with the same focus + invalid rhythm; sans, generous, square." },
{ "primitive": "select", "intent": "Probe / window selection with a square trigger and clear selection contrast on dark." },
{ "primitive": "dialog", "intent": "A formal 'Open this cast?' notice — centered, square, generous, on the dark; no border." },
{ "primitive": "sheet", "intent": "The probe / archive side rail for contextual editing." },
{ "primitive": "tabs", "intent": "Switch Live / Casts / Probes / Archive; active carries an ice-light mark, not an underline rule." },
{ "primitive": "badge", "intent": "Flat status pip vocabulary on a faint tint: casting / weak / parked / holding (ice-light / amber / muted / pine)." },
{ "primitive": "separator", "intent": "Open strata space or a hairline grid line — never an accent rule across a pane." },
{ "primitive": "checkbox", "intent": "Opt-ins with an ice-light checked state and a clear focus on dark." },
{ "primitive": "switch", "intent": "Log / settings toggle; on is ice-light, off is a flat surface-2 track." },
{ "primitive": "slider", "intent": "Cast rate / gain with an ice-light track and a square thumb." },
{ "primitive": "tooltip", "intent": "Concise sans notes above compact controls." },
{ "primitive": "dropdown-menu", "intent": "Per-row probe actions with ice-light markers and a destructive 'abort cast' item." },
{ "primitive": "table", "intent": "The listening log: mono header, mono depth rows, subtle dark zebra, a status pip per row, a 'no returns' empty state, no rule-lines." }
],
"qualityRules": {
"do": [
"Stack readings on the line and mark each to its depth on the spine.",
"Keep the ground abyssal dark; reserve ice-light for the line + the one action and amber for a return ping.",
"Separate by the strata grid, the depth spine, and surface lift — never borders.",
"Set depths, times, and IDs in mono; everything else in grotesk/sans."
],
"dont": [
"Add borders, divider hairlines, top rules, or accent edges.",
"Round the corners or use gradients as decoration.",
"Nest panes or default to a light ground.",
"Solve hierarchy with many accent colours when the spine and the strata can do the work."
]
}
}