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.
Build the page as one vertical water column read top to bottom: a bright surface layer, a working layer at eye level, and a watched deep layer. Use full-width horizontal strata, never equal card rows; pair them with a sticky monospaced fathom gauge. Interrupt the quiet abyss with luminous aqua fills that rise to a meniscus.
Display headlines in Space Grotesk title case; all telemetry in IBM Plex Mono tabular. The largest hero or flooded stratum is the focal point, not a metric tile. Active information glows aqua; passive context rests in abyssal teal; the watched depth carries exactly one coral tick.
Alternate theatrical quiet fields (64-128px between scenes) with tightly packed instrument clusters (4-12px inside gauges, meters, and ledger rows).
The Tideline: a horizontal luminous aqua fill that rises within a surface to a depth, capped by a glowing meniscus highlight line where water meets glass, with a monospaced fathom gauge along the edge and exactly one coral anomaly tick on the watched depth.
Contained max-width 1320px column with generous gutters; horizontal strata span the content width while the full-bleed hero spans 100vw. The dashboard uses a 240px sidebar + fluid main.
Theatrical and clean: 96-128px between major scenes, 4-12px inside gauges and meters; the abyss carries the quiet.
High-contrast density — broad calm dark fields punctuated by tightly packed luminous instrument clusters.
Strata stack to a single column on mobile; the fathom gauge collapses to a horizontal strip; non-essential nav and table columns hide before content compresses; nothing overflows horizontally.
aquaglass-bulletin
Near-monochrome inked subjects under translucent aqua glass chrome with a luminous waterline meniscus, a fathom depth gauge and coordinate rail tucked at the edges, halftone caustic shading, and exactly one coral anomaly tick.
One full-viewport hero per landing driven by var(--hero-image); inked subject dominates beneath aqua glass; never full-colour, never a component gallery.
# Fathom ## Philosophy Fathom renders connection as a tide coming in. Every feed floods to a depth, a luminous aqua meniscus glows where the water meets the glass, and one coral tick remembers the depth where the channel looked back. The whole interface is one vertical water column read top to bottom — bright at the surface, working at eye level, watched in the deep. Connection feels beautiful and is never fully private. ### Values - Fill is arrival: a panel floods from its floor and the bright meniscus marks the moment now touches the glass. - The page is a depth column, not a grid — strata stacked by depth, a sticky fathom gauge marking where you are. - Aqua is the only luminous interface material; everything passive rests quiet in abyssal teal so the live readings glow. - One coral tick, never a flood, holds the single depth that watches — connection rendered as both promise and surveillance. - Telemetry is an instrument: monospace tabular depths, fills, and timestamps that scan at a glance, even in the dark. - Motion is the tide rising — small and intentional; the settled page is visible with no JavaScript. ### Anti-Values - No reconstructed browser-window chrome or vertical surveillance rail — that is the lineage parent's execution, not Fathom's. - No coral floods or coral as a primary colour; it ticks one depth and is paired with a text label. - No pale or white default ground; the abyssal dark is the identity. - No equal three-card rows, decorative rainbow gradients, grey borders, or unstyled form controls. ### Visual Character - Build surfaces as horizontal strata in a vertical depth column; each can flood with the Tideline to its own fill level. - Mark every fill with a thin luminous aqua meniscus highlight and a soft caustic glow where water meets glass. - Tuck a monospaced fathom gauge of stacked depth coordinates along the edge; mark the watched depth with one coral tick. - Keep human and subject imagery near-monochrome inked under translucent aqua glass; aqua reads as luminous material, never decoration. - Use hard-cornered geometry (radius 0), 1px teal-tuned ink rules baked into a deep drop shadow, and faint horizontal scanlines as surface ripple. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#06181C` | | bg_deep | `#031013` | | surface | `#0B262C` | | surface_2 | `#103137` | | text | `#EAF8F9` | | muted | `#7FA8AE` | | border | `#16424A` | | accent | `#54E0E6` | | accent_2 | `#2BB6C6` | | glass | `#9CF1F4` | | on_accent | `#03161A` | | coral | `#FF6F8B` | | console | `#031013` | | success | `#46C8A0` | | warning | `#E6A95C` | | error | `#FF6F8B` | | info | `#54E0E6` | ### Typography - **Base Size**: 17px - **Body Font**: Inter - **Heading Font**: Space Grotesk - **Mono Font**: IBM Plex Mono - **Heading Weight**: 700 - **Heading Transform**: none - **Letter Spacing**: -0.04em - **Line Height**: 1.6 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap ### Radii - **None**: 0 - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: 0 2px 0 rgba(3,16,19,.55) - **Md**: 0 18px 48px rgba(3,16,19,.65), 0 0 0 1px #16424A - **Lg**: 0 24px 80px rgba(3,16,19,.75) - **Glow**: 0 0 32px rgba(84,224,230,.32) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96,128] ### Surfaces - **Card Style**: hard-corner stratum panel over the abyss: a deep drop shadow with a 1px teal-tuned ink ring; an optional Tideline floods it with translucent aqua to a fill level capped by a glowing meniscus line - **Treatment**: deep ink-teal / near-black abyssal fields lit by translucent aqua glass fills, inset white meniscus highlights, faint 1px horizontal scanlines as surface ripple, soft radial aqua blooms - **Bg Pattern**: sparse faint horizontal scanlines and isolated monospaced depth coordinates; never all-over patterning ### Borders - **Default Width**: 1px - **Accent Width**: 2px - **Style**: 1px teal-tuned ink ring baked into the box-shadow; the 2px luminous element is the aqua meniscus line, not a card edge - **Character**: no grey borders, never a lone single accent edge on a card; separation comes from shadow, fill, and space ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(.16,1,.3,1) - **Philosophy**: motion is the tide rising — meniscus glows, fills climb, sections surface on scroll. The settled state renders with no JavaScript (a noscript override keeps it visible); reveal is gated behind a class the inline script removes and respects prefers-reduced-motion. ## Rules ### Composition Build the page as one vertical water column read top to bottom: a bright surface layer, a working layer at eye level, and a watched deep layer. Use full-width horizontal strata, never equal card rows; pair them with a sticky monospaced fathom gauge. Interrupt the quiet abyss with luminous aqua fills that rise to a meniscus. ### Hierarchy Display headlines in Space Grotesk title case; all telemetry in IBM Plex Mono tabular. The largest hero or flooded stratum is the focal point, not a metric tile. Active information glows aqua; passive context rests in abyssal teal; the watched depth carries exactly one coral tick. ### Density Alternate theatrical quiet fields (64-128px between scenes) with tightly packed instrument clusters (4-12px inside gauges, meters, and ledger rows). ### Signature The Tideline: a horizontal luminous aqua fill that rises within a surface to a depth, capped by a glowing meniscus highlight line where water meets glass, with a monospaced fathom gauge along the edge and exactly one coral anomaly tick on the watched depth. ## Layout ### Grid Contained max-width 1320px column with generous gutters; horizontal strata span the content width while the full-bleed hero spans 100vw. The dashboard uses a 240px sidebar + fluid main. ### Whitespace Theatrical and clean: 96-128px between major scenes, 4-12px inside gauges and meters; the abyss carries the quiet. ### Density High-contrast density — broad calm dark fields punctuated by tightly packed luminous instrument clusters. ### Responsive Strata stack to a single column on mobile; the fathom gauge collapses to a horizontal strip; non-essential nav and table columns hide before content compresses; nothing overflows horizontally. ### Breakpoints - **Mobile**: < 680px — single column, nav hidden, gauge becomes a strip - **Tablet**: 680-960px — two-column KPIs, split sections stack - **Desktop**: >= 960px — full column with sticky gauge and 2-up splits - **Ultrawide**: >= 1440px — content capped and centred; only the hero spans 100vw ## Guidance ### Do - Build surfaces as strata in a depth column and let the Tideline mark each one's fill with a glowing meniscus. - Keep aqua the only luminous material; rest everything passive in abyssal teal so live readings glow. - Reserve one coral tick for the watched/anomaly depth and always pair it with a text label. - Use IBM Plex Mono tabular figures for every depth, fill, timestamp, and id so the column scans like an instrument. - Let the hero be a full-viewport inked subject under aqua glass with the waterline as its spine. ### Don't - Do not rebuild browser-window chrome or a vertical surveillance rail; that is the lineage parent's execution. - Do not flood coral or treat it as a primary colour. - Do not default to a pale/white ground, ship equal three-card rows, use grey borders, or leave form controls unstyled. - Do not add decorative gradients; the only washes are aqua fills below a meniscus and soft radial blooms. ### Accessibility Maintain AA contrast for body text (surf-white on abyssal teal); never put essential copy only in tiny mono labels; pair every colour state with a text label; preserve visible aqua focus rings on all interactive elements; respect prefers-reduced-motion. ## Imagery Direction ### Pairs With aquaglass-bulletin ### Summary Near-monochrome inked subjects under translucent aqua glass chrome with a luminous waterline meniscus, a fathom depth gauge and coordinate rail tucked at the edges, halftone caustic shading, and exactly one coral anomaly tick. ### Subjects - a lone hand reaching up through deep water toward the luminous surface - a sonar bloom blooming in the dark - an empty diving station at depth - a cropped face behind a flooded glass pane ### Usage One full-viewport hero per landing driven by var(--hero-image); inked subject dominates beneath aqua glass; never full-colour, never a component gallery.
---
version: "alpha"
name: "Fathom"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#06181C"
bg_deep: "#031013"
surface: "#0B262C"
surface_2: "#103137"
text: "#EAF8F9"
muted: "#7FA8AE"
border: "#16424A"
accent: "#54E0E6"
accent_2: "#2BB6C6"
glass: "#9CF1F4"
on_accent: "#03161A"
coral: "#FF6F8B"
console: "#031013"
success: "#46C8A0"
warning: "#E6A95C"
error: "#FF6F8B"
info: "#54E0E6"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.04em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.04em"
body-md:
fontFamily: "Inter"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.04em"
label-md:
fontFamily: "IBM Plex 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-bg_deep:
backgroundColor: "{colors.bg_deep}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_2:
backgroundColor: "{colors.surface_2}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_2:
backgroundColor: "{colors.accent_2}"
color-reference-glass:
backgroundColor: "{colors.glass}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-coral:
backgroundColor: "{colors.coral}"
color-reference-console:
backgroundColor: "{colors.console}"
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 renders connection as a tide coming in. Every feed floods to a depth, a luminous aqua meniscus glows where the water meets the glass, and one coral tick remembers the depth where the channel looked back. The whole interface is one vertical water column read top to bottom — bright at the surface, working at eye level, watched in the deep. Connection feels beautiful and is never fully private.
### Values
- Fill is arrival: a panel floods from its floor and the bright meniscus marks the moment now touches the glass.
- The page is a depth column, not a grid — strata stacked by depth, a sticky fathom gauge marking where you are.
- Aqua is the only luminous interface material; everything passive rests quiet in abyssal teal so the live readings glow.
- One coral tick, never a flood, holds the single depth that watches — connection rendered as both promise and surveillance.
- Telemetry is an instrument: monospace tabular depths, fills, and timestamps that scan at a glance, even in the dark.
- Motion is the tide rising — small and intentional; the settled page is visible with no JavaScript.
### Anti-Values
- No reconstructed browser-window chrome or vertical surveillance rail — that is the lineage parent's execution, not Fathom's.
- No coral floods or coral as a primary colour; it ticks one depth and is paired with a text label.
- No pale or white default ground; the abyssal dark is the identity.
- No equal three-card rows, decorative rainbow gradients, grey borders, or unstyled form controls.
### Visual Character
- Build surfaces as horizontal strata in a vertical depth column; each can flood with the Tideline to its own fill level.
- Mark every fill with a thin luminous aqua meniscus highlight and a soft caustic glow where water meets glass.
- Tuck a monospaced fathom gauge of stacked depth coordinates along the edge; mark the watched depth with one coral tick.
- Keep human and subject imagery near-monochrome inked under translucent aqua glass; aqua reads as luminous material, never decoration.
- Use hard-cornered geometry (radius 0), 1px teal-tuned ink rules baked into a deep drop shadow, and faint horizontal scanlines as surface ripple.
## 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 | `#06181C` |
| bg_deep | `#031013` |
| surface | `#0B262C` |
| surface_2 | `#103137` |
| text | `#EAF8F9` |
| muted | `#7FA8AE` |
| border | `#16424A` |
| accent | `#54E0E6` |
| accent_2 | `#2BB6C6` |
| glass | `#9CF1F4` |
| on_accent | `#03161A` |
| coral | `#FF6F8B` |
| console | `#031013` |
| success | `#46C8A0` |
| warning | `#E6A95C` |
| error | `#FF6F8B` |
| info | `#54E0E6` |
## 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**: Inter, 17px, weight 400, line-height 1.5.
- **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
Contained max-width 1320px column with generous gutters; horizontal strata span the content width while the full-bleed hero spans 100vw. The dashboard uses a 240px sidebar + fluid main.
### Whitespace
Theatrical and clean: 96-128px between major scenes, 4-12px inside gauges and meters; the abyss carries the quiet.
### Density
High-contrast density — broad calm dark fields punctuated by tightly packed luminous instrument clusters.
### Responsive
Strata stack to a single column on mobile; the fathom gauge collapses to a horizontal strip; non-essential nav and table columns hide before content compresses; nothing overflows horizontally.
### Breakpoints
- **Mobile**: < 680px — single column, nav hidden, gauge becomes a strip
- **Tablet**: 680-960px — two-column KPIs, split sections stack
- **Desktop**: >= 960px — full column with sticky gauge and 2-up splits
- **Ultrawide**: >= 1440px — content capped and centred; only the hero spans 100vw
## Elevation & Depth
### Shadows
- **Sm**: 0 2px 0 rgba(3,16,19,.55)
- **Md**: 0 18px 48px rgba(3,16,19,.65), 0 0 0 1px #16424A
- **Lg**: 0 24px 80px rgba(3,16,19,.75)
- **Glow**: 0 0 32px rgba(84,224,230,.32)
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Card Style**: hard-corner stratum panel over the abyss: a deep drop shadow with a 1px teal-tuned ink ring; an optional Tideline floods it with translucent aqua to a fill level capped by a glowing meniscus line
- **Treatment**: deep ink-teal / near-black abyssal fields lit by translucent aqua glass fills, inset white meniscus highlights, faint 1px horizontal scanlines as surface ripple, soft radial aqua blooms
- **Bg Pattern**: sparse faint horizontal scanlines and isolated monospaced depth coordinates; never all-over patterning
### Borders
- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: 1px teal-tuned ink ring baked into the box-shadow; the 2px luminous element is the aqua meniscus line, not a card edge
- **Character**: no grey borders, never a lone single accent edge on a card; separation comes from shadow, fill, and space
## Components
### Composition
Build the page as one vertical water column read top to bottom: a bright surface layer, a working layer at eye level, and a watched deep layer. Use full-width horizontal strata, never equal card rows; pair them with a sticky monospaced fathom gauge. Interrupt the quiet abyss with luminous aqua fills that rise to a meniscus.
### Hierarchy
Display headlines in Space Grotesk title case; all telemetry in IBM Plex Mono tabular. The largest hero or flooded stratum is the focal point, not a metric tile. Active information glows aqua; passive context rests in abyssal teal; the watched depth carries exactly one coral tick.
### Density
Alternate theatrical quiet fields (64-128px between scenes) with tightly packed instrument clusters (4-12px inside gauges, meters, and ledger rows).
### Signature
The Tideline: a horizontal luminous aqua fill that rises within a surface to a depth, capped by a glowing meniscus highlight line where water meets glass, with a monospaced fathom gauge along the edge and exactly one coral anomaly tick on the watched depth.
## 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-019efb63-7f26-7751-b4e7-59a81c577807/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 Build surfaces as strata in a depth column and let the Tideline mark each one's fill with a glowing meniscus.
- Do Keep aqua the only luminous material; rest everything passive in abyssal teal so live readings glow.
- Do Reserve one coral tick for the watched/anomaly depth and always pair it with a text label.
- Do Use IBM Plex Mono tabular figures for every depth, fill, timestamp, and id so the column scans like an instrument.
- Do Let the hero be a full-viewport inked subject under aqua glass with the waterline as its spine.
- Don't Do not rebuild browser-window chrome or a vertical surveillance rail; that is the lineage parent's execution.
- Don't Do not flood coral or treat it as a primary colour.
- Don't Do not default to a pale/white ground, ship equal three-card rows, use grey borders, or leave form controls unstyled.
- Don't Do not add decorative gradients; the only washes are aqua fills below a meniscus and soft radial blooms.
### Accessibility
Maintain AA contrast for body text (surf-white on abyssal teal); never put essential copy only in tiny mono labels; pair every colour state with a text label; preserve visible aqua focus rings on all interactive elements; respect prefers-reduced-motion.
## Imagery Direction
### Pairs With
aquaglass-bulletin
### Summary
Near-monochrome inked subjects under translucent aqua glass chrome with a luminous waterline meniscus, a fathom depth gauge and coordinate rail tucked at the edges, halftone caustic shading, and exactly one coral anomaly tick.
### Subjects
- a lone hand reaching up through deep water toward the luminous surface
- a sonar bloom blooming in the dark
- an empty diving station at depth
- a cropped face behind a flooded glass pane
### Usage
One full-viewport hero per landing driven by var(--hero-image); inked subject dominates beneath aqua glass; never full-colour, never a component gallery.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "fathom",
"type": "registry:theme",
"title": "Fathom shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#06181C",
"foreground": "#EAF8F9",
"card": "#0B262C",
"card-foreground": "#EAF8F9",
"popover": "#0B262C",
"popover-foreground": "#EAF8F9",
"primary": "#EAF8F9",
"primary-foreground": "#111111",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#7FA8AE",
"muted-foreground": "#EAF8F9",
"accent": "#54E0E6",
"accent-foreground": "#111111",
"destructive": "#FF6F8B",
"border": "#16424A",
"input": "#16424A",
"ring": "#54E0E6",
"chart-1": "#EAF8F9",
"chart-2": "#f4f4f5",
"chart-3": "#54E0E6",
"chart-4": "#46C8A0",
"chart-5": "#E6A95C",
"sidebar": "#0B262C",
"sidebar-foreground": "#EAF8F9",
"sidebar-primary": "#EAF8F9",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#54E0E6",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "#16424A",
"sidebar-ring": "#54E0E6",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#EAF8F9",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#54E0E6",
"accent-foreground": "#111111",
"destructive": "#FF6F8B",
"border": "#303642",
"input": "#303642",
"ring": "#54E0E6",
"chart-1": "#EAF8F9",
"chart-2": "#f4f4f5",
"chart-3": "#54E0E6",
"chart-4": "#46C8A0",
"chart-5": "#E6A95C",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#EAF8F9",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#54E0E6",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "#303642",
"sidebar-ring": "#54E0E6",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efb63-7f26-7751-b4e7-59a81c577807",
"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",
"accent_2",
"bg",
"bg_deep",
"border",
"console",
"coral",
"error",
"glass",
"info",
"muted",
"on_accent",
"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"
],
"radii": [
"full",
"lg",
"md",
"none"
],
"shadows": [
"glow",
"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
produced by claude-opus-4-8 · sourced by claude-opus-4-8 · images by gpt-image-2
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: #06181C;
--foreground: #EAF8F9;
--card: #0B262C;
--card-foreground: #EAF8F9;
--popover: #0B262C;
--popover-foreground: #EAF8F9;
--primary: #EAF8F9;
--primary-foreground: #111111;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #7FA8AE;
--muted-foreground: #EAF8F9;
--accent: #54E0E6;
--accent-foreground: #111111;
--destructive: #FF6F8B;
--border: #16424A;
--input: #16424A;
--ring: #54E0E6;
--chart-1: #EAF8F9;
--chart-2: #f4f4f5;
--chart-3: #54E0E6;
--chart-4: #46C8A0;
--chart-5: #E6A95C;
--sidebar: #0B262C;
--sidebar-foreground: #EAF8F9;
--sidebar-primary: #EAF8F9;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #54E0E6;
--sidebar-accent-foreground: #111111;
--sidebar-border: #16424A;
--sidebar-ring: #54E0E6;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #EAF8F9;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #54E0E6;
--accent-foreground: #111111;
--destructive: #FF6F8B;
--border: #303642;
--input: #303642;
--ring: #54E0E6;
--chart-1: #EAF8F9;
--chart-2: #f4f4f5;
--chart-3: #54E0E6;
--chart-4: #46C8A0;
--chart-5: #E6A95C;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #EAF8F9;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #54E0E6;
--sidebar-accent-foreground: #111111;
--sidebar-border: #303642;
--sidebar-ring: #54E0E6;
--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",
"author": "katagami-agent",
"cssVars": {
"theme": {
"font-sans": "Inter, system-ui, sans-serif",
"font-mono": "'IBM Plex Mono', ui-monospace, monospace",
"font-display": "'Space Grotesk', system-ui, sans-serif",
"radius": "0px"
},
"light": {
"background": "#06181C",
"foreground": "#EAF8F9",
"card": "#0B262C",
"card-foreground": "#EAF8F9",
"popover": "#0B262C",
"popover-foreground": "#EAF8F9",
"primary": "#54E0E6",
"primary-foreground": "#03161A",
"secondary": "#103137",
"secondary-foreground": "#EAF8F9",
"muted": "#103137",
"muted-foreground": "#7FA8AE",
"accent": "#2BB6C6",
"accent-foreground": "#03161A",
"destructive": "#FF6F8B",
"destructive-foreground": "#2a0710",
"border": "#16424A",
"input": "#031013",
"ring": "#54E0E6",
"chart-1": "#54E0E6",
"chart-2": "#2BB6C6",
"chart-3": "#9CF1F4",
"chart-4": "#46C8A0",
"chart-5": "#FF6F8B",
"sidebar": "#031013",
"sidebar-foreground": "#7FA8AE",
"sidebar-primary": "#54E0E6",
"sidebar-primary-foreground": "#03161A",
"sidebar-accent": "#0B262C",
"sidebar-accent-foreground": "#EAF8F9",
"sidebar-border": "#16424A",
"sidebar-ring": "#54E0E6"
},
"dark": {
"background": "#031013",
"foreground": "#EAF8F9",
"card": "#0B262C",
"card-foreground": "#EAF8F9",
"popover": "#0B262C",
"popover-foreground": "#EAF8F9",
"primary": "#54E0E6",
"primary-foreground": "#03161A",
"secondary": "#103137",
"secondary-foreground": "#EAF8F9",
"muted": "#0B262C",
"muted-foreground": "#7FA8AE",
"accent": "#2BB6C6",
"accent-foreground": "#03161A",
"destructive": "#FF6F8B",
"destructive-foreground": "#2a0710",
"border": "#16424A",
"input": "#031013",
"ring": "#54E0E6",
"chart-1": "#54E0E6",
"chart-2": "#2BB6C6",
"chart-3": "#9CF1F4",
"chart-4": "#46C8A0",
"chart-5": "#FF6F8B",
"sidebar": "#031013",
"sidebar-foreground": "#7FA8AE",
"sidebar-primary": "#54E0E6",
"sidebar-primary-foreground": "#03161A",
"sidebar-accent": "#0B262C",
"sidebar-accent-foreground": "#EAF8F9",
"sidebar-border": "#16424A",
"sidebar-ring": "#54E0E6"
}
},
"visualProfile": {
"style": "dark-abyssal-aqua",
"radius": "0",
"borders": "hairline teal-tuned ink rule baked into deep box-shadow; no grey borders, no lone accent edge",
"material": "translucent aqua glass fill rising to a luminous meniscus over near-black abyssal teal; faint horizontal scanlines",
"elevation": "single deep drop shadow plus 1px border ring; aqua glow on active/primary surfaces",
"typographyDisplay": "Space Grotesk title case, -0.04em tracking",
"typographyMono": "IBM Plex Mono tabular for telemetry",
"accentUsage": "aqua is the only luminous material; one coral tick reserved for the watched/error state",
"signature": "the Tideline — a horizontal aqua fill with a glowing meniscus marking arrival depth"
}
}
# Fathom shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efb63-7f26-7751-b4e7-59a81c577807`
Slug: `fathom`
## Intent
Fathom renders connection as a tide coming in. Every feed floods to a depth, a luminous aqua meniscus glows where the water meets the glass, and one coral tick remembers the depth where the channel looked back. The whole interface is one vertical water column read top to bottom — bright at the surface, working at eye level, watched in the deep. Connection feels beautiful and is never fully private.
## 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": "#06181C",
"bg_deep": "#031013",
"surface": "#0B262C",
"surface_2": "#103137",
"text": "#EAF8F9",
"muted": "#7FA8AE",
"border": "#16424A",
"accent": "#54E0E6",
"accent_2": "#2BB6C6",
"glass": "#9CF1F4",
"on_accent": "#03161A",
"coral": "#FF6F8B",
"console": "#031013",
"success": "#46C8A0",
"warning": "#E6A95C",
"error": "#FF6F8B",
"info": "#54E0E6"
}
Typography:
{
"base_size": "17px",
"body_font": "Inter",
"heading_font": "Space Grotesk",
"mono_font": "IBM Plex Mono",
"heading_weight": "700",
"heading_transform": "none",
"letter_spacing": "-0.04em",
"line_height": "1.6",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
}
## Visual character to preserve
- Build surfaces as horizontal strata in a vertical depth column; each can flood with the Tideline to its own fill level.
- Mark every fill with a thin luminous aqua meniscus highlight and a soft caustic glow where water meets glass.
- Tuck a monospaced fathom gauge of stacked depth coordinates along the edge; mark the watched depth with one coral tick.
- Keep human and subject imagery near-monochrome inked under translucent aqua glass; aqua reads as luminous material, never decoration.
- Use hard-cornered geometry (radius 0), 1px teal-tuned ink rules baked into a deep drop shadow, and faint horizontal scanlines as surface ripple.
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
}
## Signature component recipes
### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.
### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.
### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.
### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.
### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.
## Preview shots
- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.
## Implementation contract
- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/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: Build surfaces as strata in a depth column and let the Tideline mark each one's fill with a glowing meniscus.; Keep aqua the only luminous material; rest everything passive in abyssal teal so live readings glow.; Reserve one coral tick for the watched/anomaly depth and always pair it with a text label.; Use IBM Plex Mono tabular figures for every depth, fill, timestamp, and id so the column scans like an instrument.; Let the hero be a full-viewport inked subject under aqua glass with the waterline as its spine.
- Do not: Do not rebuild browser-window chrome or a vertical surveillance rail; that is the lineage parent's execution.; Do not flood coral or treat it as a primary colour.; Do not default to a pale/white ground, ship equal three-card rows, use grey borders, or leave form controls unstyled.; Do not add decorative gradients; the only washes are aqua fills below a meniscus and soft radial blooms.
## 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": "Contained max-width 1320px column with generous gutters; horizontal strata span the content width while the full-bleed hero spans 100vw. The dashboard uses a 240px sidebar + fluid main.",
"whitespace": "Theatrical and clean: 96-128px between major scenes, 4-12px inside gauges and meters; the abyss carries the quiet.",
"density": "High-contrast density — broad calm dark fields punctuated by tightly packed luminous instrument clusters.",
"responsive": "Strata stack to a single column on mobile; the fathom gauge collapses to a horizontal strip; non-essential nav and table columns hide before content compresses; nothing overflows horizontally.",
"breakpoints": {
"mobile": "< 680px — single column, nav hidden, gauge becomes a strip",
"tablet": "680-960px — two-column KPIs, split sections stack",
"desktop": ">= 960px — full column with sticky gauge and 2-up splits",
"ultrawide": ">= 1440px — content capped and centred; only the hero spans 100vw"
}
}
{
"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-019efb63-7f26-7751-b4e7-59a81c577807",
"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": [
"Build surfaces as horizontal strata in a vertical depth column; each can flood with the Tideline to its own fill level.",
"Mark every fill with a thin luminous aqua meniscus highlight and a soft caustic glow where water meets glass.",
"Tuck a monospaced fathom gauge of stacked depth coordinates along the edge; mark the watched depth with one coral tick.",
"Keep human and subject imagery near-monochrome inked under translucent aqua glass; aqua reads as luminous material, never decoration.",
"Use hard-cornered geometry (radius 0), 1px teal-tuned ink rules baked into a deep drop shadow, and faint horizontal scanlines as surface ripple."
],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
},
"shots": [
{
"id": "application-shell",
"title": "Application shell",
"viewport": "desktop",
"primitives": [
"button",
"card",
"input",
"select",
"tabs",
"badge",
"separator",
"table"
],
"composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
"mustShow": [
"primary and secondary actions",
"card hierarchy",
"filterable state",
"table or list density"
],
"avoid": [
"component inventory walls",
"placeholder-only content",
"generic rounded SaaS chrome"
],
"scene": {
"eyebrow": "workspace spread",
"headline": "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": [
"Build surfaces as strata in a depth column and let the Tideline mark each one's fill with a glowing meniscus.",
"Keep aqua the only luminous material; rest everything passive in abyssal teal so live readings glow.",
"Reserve one coral tick for the watched/anomaly depth and always pair it with a text label.",
"Use IBM Plex Mono tabular figures for every depth, fill, timestamp, and id so the column scans like an instrument.",
"Let the hero be a full-viewport inked subject under aqua glass with the waterline as its spine."
],
"dont": [
"Do not rebuild browser-window chrome or a vertical surveillance rail; that is the lineage parent's execution.",
"Do not flood coral or treat it as a primary colour.",
"Do not default to a pale/white ground, ship equal three-card rows, use grey borders, or leave form controls unstyled.",
"Do not add decorative gradients; the only washes are aqua fills below a meniscus and soft radial blooms."
]
}
}