A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.
Replace stacked boxes with measured survey plates and a sounding-rail down one edge (left margin on the landing, sidebar on the dashboard). Content widens and narrows like a tidal terrace; only the full-bleed hero spans 100vw.
Lead with an upright Spectral serif headline carrying a glasswort highlighter mark or ochre colour-pop on one word — never a serif-italic flip. Mono gauge labels and chips guide scanning; one ochre primary action, the rest quiet.
Moderate-to-airy macro spacing with dense, cultivated field-log tables. Dense data is softened by alternating wash, root-marker stems, and 16px containment.
The isobath contour-trace: records wrapped in concentric depth contours that recolour on the palette (glasswort when live, hairline when settled), all measured against the coral mean-tide baseline.
A depth-gauge layout: a ticked sounding-rail column plus a content stream of survey plates. Plates widen and narrow as tidal terraces; never a rigid equal-width grid.
Generous outer margins and deep plate padding; titles always padded, never stuck to plate tops. Whitespace is the dark estuary itself.
Airy between macro sections, tight and cultivated inside field-log tables.
Single column on mobile; the sounding-rail hides, nav wraps, tables scroll, and the clamp() headline shrinks and wraps without ever clipping the 390px edge.
graticule
Hand-kept naturalist field plates in the Graticule technique: a confident fine-nib ink contour line defines the form, concentric topographic contour lines wrap it like an elevation map, and diluted earth-pigment washes settle with mineral granulation and pooled tide-line edges. Worn like a survey clipped to a dark drafting board.
One full-bleed field plate per landing/embodiment hero, transitioning into the dark page; granulating washes may surface in specimen cards. End every prompt with 'NO text, NO letters, NO logos.'
# Marisma ## Philosophy Marisma is an estuary field-survey interface language. It evolves Organic Naturalism by turning the page over: instead of a warm, lit field of parchment, you stand in the tidal twilight and read the survey as a naturalist keeps a field plate — confident contour line and granulating earth-pigment wash on a deep estuary-dark ground. Its ownable idea is the isobath contour-trace: every record is wrapped in concentric depth contours, and the whole interface is measured against one moving baseline, the mean-tide line. ### Values - Dark estuary ground as identity, not a white default - Readings that mean something relative to a moving datum - Contour spacing as a reading you grasp before any number - Restraint: one ember marks the single thing that needs a person - Tactile naturalist craft over glossy abstraction ### Anti-Values - Pale or white grounds that erase the twilight - Boxed-in chrome and grey borders - Serif-italic headline flips for emphasis - Accent floods that drown the highlighter logic - Decorative contour rings stamped until they are wallpaper ### Visual Character - Every record is wrapped in concentric isobath depth contours; tight rings read as steep change - Sections snap to a wavering coral mean-tide baseline rather than a hard rule - A ticked depth-gauge sounding-rail runs down one page edge, the lit tick marking the 1.2 m datum - Table and list rows carry a glasswort root-marker stem anchoring each reading like a plant in the mud - A single coral ember is pressed beside the one reading that demands a person ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#0E1A18` | | surface | `#16201D` | | surface-2 | `#1D2A26` | | text | `#EDEAD9` | | muted | `#9AA89A` | | border | `#2A3A34` | | accent | `#E0A540` | | accent-2 | `#B6E84B` | | accent-3 | `#FF6F5E` | | on-accent | `#0E1A18` | | primary | `#E0A540` | | secondary | `#B6E84B` | | success | `#B6E84B` | | warning | `#E0A540` | | error | `#FF6F5E` | | info | `#6FB3C2` | ### Typography - **Base Size**: 17px - **Body Font**: Inter Tight - **Heading Font**: Spectral - **Mono Font**: Spline Sans Mono - **Heading Weight**: 600 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.55 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter+Tight:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap ### Radii - **None**: 0px - **Card**: 16px - **Pill**: 9999px ### Shadows - **Sm**: 0 1px 0 rgba(182,232,75,0.06), 0 6px 18px rgba(0,0,0,0.45) - **Md**: 0 18px 44px rgba(0,0,0,0.55) ### Spacing - **Base**: 8px - **Scale**: ["4px","8px","12px","16px","24px","32px","48px","72px","112px"] ### Surfaces - **Treatment**: survey-plate - **Card Style**: dark contour-plate with a faint topographic ring overlay - **Bg Pattern**: topographic contour lines ### Borders - **Default Width**: 1px - **Accent Width**: 0px - **Style**: solid - **Character**: hairline contour tint, used as a line never a box ### Motion - **Duration**: 700ms - **Easing**: cubic-bezier(0.22,0.61,0.36,1) - **Philosophy**: contours draw on; tide fills toward its datum; settled state needs no JS ## Rules ### Composition Replace stacked boxes with measured survey plates and a sounding-rail down one edge (left margin on the landing, sidebar on the dashboard). Content widens and narrows like a tidal terrace; only the full-bleed hero spans 100vw. ### Hierarchy Lead with an upright Spectral serif headline carrying a glasswort highlighter mark or ochre colour-pop on one word — never a serif-italic flip. Mono gauge labels and chips guide scanning; one ochre primary action, the rest quiet. ### Density Moderate-to-airy macro spacing with dense, cultivated field-log tables. Dense data is softened by alternating wash, root-marker stems, and 16px containment. ### Signature The isobath contour-trace: records wrapped in concentric depth contours that recolour on the palette (glasswort when live, hairline when settled), all measured against the coral mean-tide baseline. ## Layout ### Grid A depth-gauge layout: a ticked sounding-rail column plus a content stream of survey plates. Plates widen and narrow as tidal terraces; never a rigid equal-width grid. ### Whitespace Generous outer margins and deep plate padding; titles always padded, never stuck to plate tops. Whitespace is the dark estuary itself. ### Density Airy between macro sections, tight and cultivated inside field-log tables. ### Responsive Single column on mobile; the sounding-rail hides, nav wraps, tables scroll, and the clamp() headline shrinks and wraps without ever clipping the 390px edge. ### Breakpoints - **Desktop**: 1200 - **Tablet**: 900 - **Mobile**: 560 ## Guidance ### Do - Keep the ground dark — the estuary twilight is the identity - Wrap meaningful records in depth contours and let ring spacing carry the reading - Measure everything against the coral mean-tide datum - Anchor dense rows with a glasswort root-marker stem - Reserve the coral ember for the single thing that needs a person ### Don't - Do not default to a white or pale ground - Do not box the chrome in borders or trap nav in a pill bar - Do not flip serif headlines to italic for emphasis - Do not flood the page with an accent - Do not stamp contour rings until they become wallpaper ### Accessibility Rag-paper text (#EDEAD9) on the twilight ground holds well above 4.5:1; accents are used as marks and fills with ink foregrounds, never as low-contrast text. Motion is additive and respects prefers-reduced-motion. ## Imagery Direction ### Pairs With graticule ### Summary Hand-kept naturalist field plates in the Graticule technique: a confident fine-nib ink contour line defines the form, concentric topographic contour lines wrap it like an elevation map, and diluted earth-pigment washes settle with mineral granulation and pooled tide-line edges. Worn like a survey clipped to a dark drafting board. ### Subjects - tidal salt-marsh specimens - cordgrass and glasswort - estuary mussel and shell forms - meandering tidal creek mapped as nested isobaths - sediment and eelgrass studies ### Usage One full-bleed field plate per landing/embodiment hero, transitioning into the dark page; granulating washes may surface in specimen cards. End every prompt with 'NO text, NO letters, NO logos.' ### Engine Hints - **Model**: gpt-image-2 - **Provider**: openai - **Tool**: openai-image MCP - **Size**: 1536x1024 - **Quality**: high
---
version: "alpha"
name: "Marisma"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#0E1A18"
surface: "#16201D"
surface-2: "#1D2A26"
text: "#EDEAD9"
muted: "#9AA89A"
border: "#2A3A34"
accent: "#E0A540"
accent-2: "#B6E84B"
accent-3: "#FF6F5E"
on-accent: "#0E1A18"
primary: "#E0A540"
secondary: "#B6E84B"
success: "#B6E84B"
warning: "#E0A540"
error: "#FF6F5E"
info: "#6FB3C2"
typography:
headline-lg:
fontFamily: "Spectral"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Spectral"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Inter Tight"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
card: "16px"
pill: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "72px"
step-8: "112px"
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-accent-2:
backgroundColor: "{colors.accent-2}"
color-reference-accent-3:
backgroundColor: "{colors.accent-3}"
color-reference-on-accent:
backgroundColor: "{colors.on-accent}"
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
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.none}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.none}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.none}"
height: "44px"
---
# Marisma
## Overview
Marisma is an estuary field-survey interface language. It evolves Organic Naturalism by turning the page over: instead of a warm, lit field of parchment, you stand in the tidal twilight and read the survey as a naturalist keeps a field plate — confident contour line and granulating earth-pigment wash on a deep estuary-dark ground. Its ownable idea is the isobath contour-trace: every record is wrapped in concentric depth contours, and the whole interface is measured against one moving baseline, the mean-tide line.
### Values
- Dark estuary ground as identity, not a white default
- Readings that mean something relative to a moving datum
- Contour spacing as a reading you grasp before any number
- Restraint: one ember marks the single thing that needs a person
- Tactile naturalist craft over glossy abstraction
### Anti-Values
- Pale or white grounds that erase the twilight
- Boxed-in chrome and grey borders
- Serif-italic headline flips for emphasis
- Accent floods that drown the highlighter logic
- Decorative contour rings stamped until they are wallpaper
### Visual Character
- Every record is wrapped in concentric isobath depth contours; tight rings read as steep change
- Sections snap to a wavering coral mean-tide baseline rather than a hard rule
- A ticked depth-gauge sounding-rail runs down one page edge, the lit tick marking the 1.2 m datum
- Table and list rows carry a glasswort root-marker stem anchoring each reading like a plant in the mud
- A single coral ember is pressed beside the one reading that demands a person
## 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 | `#0E1A18` |
| surface | `#16201D` |
| surface-2 | `#1D2A26` |
| text | `#EDEAD9` |
| muted | `#9AA89A` |
| border | `#2A3A34` |
| accent | `#E0A540` |
| accent-2 | `#B6E84B` |
| accent-3 | `#FF6F5E` |
| on-accent | `#0E1A18` |
| primary | `#E0A540` |
| secondary | `#B6E84B` |
| success | `#B6E84B` |
| warning | `#E0A540` |
| error | `#FF6F5E` |
| info | `#6FB3C2` |
## Typography
- **Headline-Lg**: Spectral, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Spectral, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter Tight, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `72px`
- **Step-8**: `112px`
### Grid
A depth-gauge layout: a ticked sounding-rail column plus a content stream of survey plates. Plates widen and narrow as tidal terraces; never a rigid equal-width grid.
### Whitespace
Generous outer margins and deep plate padding; titles always padded, never stuck to plate tops. Whitespace is the dark estuary itself.
### Density
Airy between macro sections, tight and cultivated inside field-log tables.
### Responsive
Single column on mobile; the sounding-rail hides, nav wraps, tables scroll, and the clamp() headline shrinks and wraps without ever clipping the 390px edge.
### Breakpoints
- **Desktop**: 1200
- **Tablet**: 900
- **Mobile**: 560
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 0 rgba(182,232,75,0.06), 0 6px 18px rgba(0,0,0,0.45)
- **Md**: 0 18px 44px rgba(0,0,0,0.55)
## Shapes
### Rounded
- **None**: `0px`
- **Card**: `16px`
- **Pill**: `9999px`
### Surfaces
- **Treatment**: survey-plate
- **Card Style**: dark contour-plate with a faint topographic ring overlay
- **Bg Pattern**: topographic contour lines
### Borders
- **Default Width**: 1px
- **Accent Width**: 0px
- **Style**: solid
- **Character**: hairline contour tint, used as a line never a box
## Components
### Composition
Replace stacked boxes with measured survey plates and a sounding-rail down one edge (left margin on the landing, sidebar on the dashboard). Content widens and narrows like a tidal terrace; only the full-bleed hero spans 100vw.
### Hierarchy
Lead with an upright Spectral serif headline carrying a glasswort highlighter mark or ochre colour-pop on one word — never a serif-italic flip. Mono gauge labels and chips guide scanning; one ochre primary action, the rest quiet.
### Density
Moderate-to-airy macro spacing with dense, cultivated field-log tables. Dense data is softened by alternating wash, root-marker stems, and 16px containment.
### Signature
The isobath contour-trace: records wrapped in concentric depth contours that recolour on the palette (glasswort when live, hairline when settled), all measured against the coral mean-tide baseline.
## 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-019efd75-e401-7c70-ac0c-5c3f0c63bb7b/DESIGN.with-shadcn.md`.
The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.
Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.
## Do's and Don'ts
- Do Keep the ground dark — the estuary twilight is the identity
- Do Wrap meaningful records in depth contours and let ring spacing carry the reading
- Do Measure everything against the coral mean-tide datum
- Do Anchor dense rows with a glasswort root-marker stem
- Do Reserve the coral ember for the single thing that needs a person
- Don't Do not default to a white or pale ground
- Don't Do not box the chrome in borders or trap nav in a pill bar
- Don't Do not flip serif headlines to italic for emphasis
- Don't Do not flood the page with an accent
- Don't Do not stamp contour rings until they become wallpaper
### Accessibility
Rag-paper text (#EDEAD9) on the twilight ground holds well above 4.5:1; accents are used as marks and fills with ink foregrounds, never as low-contrast text. Motion is additive and respects prefers-reduced-motion.
## Imagery Direction
### Pairs With
graticule
### Summary
Hand-kept naturalist field plates in the Graticule technique: a confident fine-nib ink contour line defines the form, concentric topographic contour lines wrap it like an elevation map, and diluted earth-pigment washes settle with mineral granulation and pooled tide-line edges. Worn like a survey clipped to a dark drafting board.
### Subjects
- tidal salt-marsh specimens
- cordgrass and glasswort
- estuary mussel and shell forms
- meandering tidal creek mapped as nested isobaths
- sediment and eelgrass studies
### Usage
One full-bleed field plate per landing/embodiment hero, transitioning into the dark page; granulating washes may surface in specimen cards. End every prompt with 'NO text, NO letters, NO logos.'
### Engine Hints
- **Model**: gpt-image-2
- **Provider**: openai
- **Tool**: openai-image MCP
- **Size**: 1536x1024
- **Quality**: high
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "marisma",
"type": "registry:theme",
"title": "Marisma shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#0E1A18",
"foreground": "#EDEAD9",
"card": "#16201D",
"card-foreground": "#EDEAD9",
"popover": "#16201D",
"popover-foreground": "#EDEAD9",
"primary": "#E0A540",
"primary-foreground": "#ffffff",
"secondary": "#B6E84B",
"secondary-foreground": "#111111",
"muted": "#9AA89A",
"muted-foreground": "#EDEAD9",
"accent": "#E0A540",
"accent-foreground": "#ffffff",
"destructive": "#FF6F5E",
"border": "#2A3A34",
"input": "#2A3A34",
"ring": "#E0A540",
"chart-1": "#E0A540",
"chart-2": "#B6E84B",
"chart-3": "#E0A540",
"chart-4": "#B6E84B",
"chart-5": "#E0A540",
"sidebar": "#16201D",
"sidebar-foreground": "#EDEAD9",
"sidebar-primary": "#E0A540",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#6FB3C2",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#2A3A34",
"sidebar-ring": "#E0A540",
"radius": "0.625rem"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#E0A540",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#E0A540",
"accent-foreground": "#ffffff",
"destructive": "#FF6F5E",
"border": "#303642",
"input": "#303642",
"ring": "#E0A540",
"chart-1": "#E0A540",
"chart-2": "#B6E84B",
"chart-3": "#E0A540",
"chart-4": "#B6E84B",
"chart-5": "#E0A540",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#E0A540",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#E0A540",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#E0A540",
"radius": "0.625rem"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efd75-e401-7c70-ac0c-5c3f0c63bb7b",
"slug": "marisma",
"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",
"accent-3",
"bg",
"border",
"error",
"info",
"muted",
"on-accent",
"primary",
"secondary",
"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": [
"card",
"none",
"pill"
],
"shadows": [
"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
produced by claude-opus-4-8 · sourced by claude-opus-4-8 · images by gpt-image-2
Keep Marisma and swap a palette and an art style onto it. The landing & dashboard recolor live.
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: #0E1A18;
--foreground: #EDEAD9;
--card: #16201D;
--card-foreground: #EDEAD9;
--popover: #16201D;
--popover-foreground: #EDEAD9;
--primary: #E0A540;
--primary-foreground: #ffffff;
--secondary: #B6E84B;
--secondary-foreground: #111111;
--muted: #9AA89A;
--muted-foreground: #EDEAD9;
--accent: #E0A540;
--accent-foreground: #ffffff;
--destructive: #FF6F5E;
--border: #2A3A34;
--input: #2A3A34;
--ring: #E0A540;
--chart-1: #E0A540;
--chart-2: #B6E84B;
--chart-3: #E0A540;
--chart-4: #B6E84B;
--chart-5: #E0A540;
--sidebar: #16201D;
--sidebar-foreground: #EDEAD9;
--sidebar-primary: #E0A540;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #6FB3C2;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #2A3A34;
--sidebar-ring: #E0A540;
--radius: 0.625rem;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #E0A540;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #E0A540;
--accent-foreground: #ffffff;
--destructive: #FF6F5E;
--border: #303642;
--input: #303642;
--ring: #E0A540;
--chart-1: #E0A540;
--chart-2: #B6E84B;
--chart-3: #E0A540;
--chart-4: #B6E84B;
--chart-5: #E0A540;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #E0A540;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #E0A540;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #E0A540;
--radius: 0.625rem;
}
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 MarismaShadcnKit() {
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">Marisma</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": "marisma",
"type": "registry:theme",
"title": "Marisma",
"description": "Dark estuary field-survey theme — twilight ground, wet-ochre primary, glasswort and tide-ember accents, rag-paper ink. Crisp survey plates with one soft 16px radius.",
"cssVars": {
"theme": {
"font-sans": "Inter Tight, system-ui, sans-serif",
"font-serif": "Spectral, Georgia, serif",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"radius": "16px"
},
"light": {
"background": "#EDEAD9",
"foreground": "#16201D",
"card": "#FBF7EE",
"card-foreground": "#16201D",
"popover": "#FBF7EE",
"popover-foreground": "#16201D",
"primary": "#B98A38",
"primary-foreground": "#0E1A18",
"secondary": "#E7E2CF",
"secondary-foreground": "#16201D",
"muted": "#E7E2CF",
"muted-foreground": "#6F756A",
"accent": "#B6E84B",
"accent-foreground": "#0E1A18",
"destructive": "#D6452F",
"destructive-foreground": "#FBF7EE",
"border": "#D7D0BC",
"input": "#D7D0BC",
"ring": "#B98A38",
"chart-1": "#B98A38",
"chart-2": "#7FA32E",
"chart-3": "#D6452F",
"chart-4": "#4E6B47",
"chart-5": "#6FB3C2"
},
"dark": {
"background": "#0E1A18",
"foreground": "#EDEAD9",
"card": "#16201D",
"card-foreground": "#EDEAD9",
"popover": "#16201D",
"popover-foreground": "#EDEAD9",
"primary": "#E0A540",
"primary-foreground": "#0E1A18",
"secondary": "#1D2A26",
"secondary-foreground": "#EDEAD9",
"muted": "#1D2A26",
"muted-foreground": "#9AA89A",
"accent": "#B6E84B",
"accent-foreground": "#0E1A18",
"destructive": "#FF6F5E",
"destructive-foreground": "#0E1A18",
"border": "#2A3A34",
"input": "#2A3A34",
"ring": "#B6E84B",
"chart-1": "#E0A540",
"chart-2": "#B6E84B",
"chart-3": "#FF6F5E",
"chart-4": "#6FB3C2",
"chart-5": "#9AA89A"
}
}
}
# Marisma shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efd75-e401-7c70-ac0c-5c3f0c63bb7b`
Slug: `marisma`
## Intent
Marisma is an estuary field-survey interface language. It evolves Organic Naturalism by turning the page over: instead of a warm, lit field of parchment, you stand in the tidal twilight and read the survey as a naturalist keeps a field plate — confident contour line and granulating earth-pigment wash on a deep estuary-dark ground. Its ownable idea is the isobath contour-trace: every record is wrapped in concentric depth contours, and the whole interface is measured against one moving baseline, the mean-tide line.
## 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": "#0E1A18",
"surface": "#16201D",
"surface-2": "#1D2A26",
"text": "#EDEAD9",
"muted": "#9AA89A",
"border": "#2A3A34",
"accent": "#E0A540",
"accent-2": "#B6E84B",
"accent-3": "#FF6F5E",
"on-accent": "#0E1A18",
"primary": "#E0A540",
"secondary": "#B6E84B",
"success": "#B6E84B",
"warning": "#E0A540",
"error": "#FF6F5E",
"info": "#6FB3C2"
}
Typography:
{
"base_size": "17px",
"body_font": "Inter Tight",
"heading_font": "Spectral",
"mono_font": "Spline Sans Mono",
"heading_weight": "600",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": "1.55",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter+Tight:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap"
}
## Visual character to preserve
- Every record is wrapped in concentric isobath depth contours; tight rings read as steep change
- Sections snap to a wavering coral mean-tide baseline rather than a hard rule
- A ticked depth-gauge sounding-rail runs down one page edge, the lit tick marking the 1.2 m datum
- Table and list rows carry a glasswort root-marker stem anchoring each reading like a plant in the mud
- A single coral ember is pressed beside the one reading that demands a person
## 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/marisma/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Keep the ground dark — the estuary twilight is the identity; Wrap meaningful records in depth contours and let ring spacing carry the reading; Measure everything against the coral mean-tide datum; Anchor dense rows with a glasswort root-marker stem; Reserve the coral ember for the single thing that needs a person
- Do not: Do not default to a white or pale ground; Do not box the chrome in borders or trap nav in a pill bar; Do not flip serif headlines to italic for emphasis; Do not flood the page with an accent; Do not stamp contour rings until they become wallpaper
## 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 MarismaShadcnKit() {
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">Marisma</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": "A depth-gauge layout: a ticked sounding-rail column plus a content stream of survey plates. Plates widen and narrow as tidal terraces; never a rigid equal-width grid.",
"whitespace": "Generous outer margins and deep plate padding; titles always padded, never stuck to plate tops. Whitespace is the dark estuary itself.",
"density": "Airy between macro sections, tight and cultivated inside field-log tables.",
"responsive": "Single column on mobile; the sounding-rail hides, nav wraps, tables scroll, and the clamp() headline shrinks and wraps without ever clipping the 390px edge.",
"breakpoints": {
"desktop": 1200,
"tablet": 900,
"mobile": 560
}
}
{
"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-019efd75-e401-7c70-ac0c-5c3f0c63bb7b",
"name": "Marisma",
"slug": "marisma"
},
"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": [
"Every record is wrapped in concentric isobath depth contours; tight rings read as steep change",
"Sections snap to a wavering coral mean-tide baseline rather than a hard rule",
"A ticked depth-gauge sounding-rail runs down one page edge, the lit tick marking the 1.2 m datum",
"Table and list rows carry a glasswort root-marker stem anchoring each reading like a plant in the mud",
"A single coral ember is pressed beside the one reading that demands a person"
],
"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": "Marisma launch room",
"description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
"primaryAction": "Apply theme",
"secondaryAction": "Review states",
"stats": [
{
"label": "components",
"value": "16",
"tone": "accent"
},
{
"label": "states",
"value": "ready"
},
{
"label": "density",
"value": "balanced",
"tone": "warning"
}
],
"rows": [
{
"label": "Primary flow",
"value": "mapped",
"status": "active"
},
{
"label": "Token coverage",
"value": "semantic",
"status": "synced"
},
{
"label": "Responsive proof",
"value": "queued",
"status": "review"
}
],
"statuses": [
"Active",
"Synced",
"Draft"
]
}
},
{
"id": "detail-editor",
"title": "Detail editor",
"viewport": "tablet",
"primitives": [
"button",
"card",
"input",
"textarea",
"select",
"checkbox",
"switch",
"slider",
"dialog",
"sheet"
],
"composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
"mustShow": [
"focus ring",
"error or destructive state",
"dialog or sheet treatment",
"written guidance content"
],
"avoid": [
"unstyled browser controls",
"floating cards inside cards",
"missing labels"
],
"scene": {
"eyebrow": "editing flow",
"headline": "Language recipe editor",
"description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
"primaryAction": "Save recipe",
"secondaryAction": "Open sheet",
"fields": [
{
"label": "Component family",
"value": "Narrative cards"
},
{
"label": "State treatment",
"value": "Visible focus + validation"
},
{
"label": "Motion",
"value": "Small lift, no opacity-only fade"
}
],
"statuses": [
"Focus",
"Invalid",
"Confirmed"
]
}
},
{
"id": "data-operations",
"title": "Data operations",
"viewport": "mobile",
"primitives": [
"button",
"tabs",
"badge",
"dropdown-menu",
"table",
"tooltip",
"separator"
],
"composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
"mustShow": [
"responsive reflow",
"dense row styling",
"menu affordance",
"status badge system"
],
"avoid": [
"desktop-only tables",
"text overflow",
"default shadcn spacing without Katagami character"
],
"scene": {
"eyebrow": "operations",
"headline": "Compact review queue",
"description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
"primaryAction": "Resolve",
"secondaryAction": "Filter",
"rows": [
{
"label": "Button hierarchy",
"value": "approved",
"status": "ok"
},
{
"label": "Table rhythm",
"value": "needs pass",
"status": "watch"
},
{
"label": "Empty state",
"value": "designed",
"status": "done"
}
],
"statuses": [
"Queued",
"Blocked",
"Done"
]
}
}
],
"componentRecipes": [
{
"primitive": "button",
"intent": "Prove action hierarchy, focus, disabled, and destructive states."
},
{
"primitive": "card",
"intent": "Carry the language surface, border, elevation, and density rules."
},
{
"primitive": "input",
"intent": "Show labels, focus rings, validation, and spacing rhythm."
},
{
"primitive": "textarea",
"intent": "Show longer guidance, validation copy, and writing density."
},
{
"primitive": "select",
"intent": "Show filtering, selection contrast, and menu trigger styling."
},
{
"primitive": "dialog",
"intent": "Show centered decision states and overlay treatment."
},
{
"primitive": "sheet",
"intent": "Show contextual side panels and responsive editing."
},
{
"primitive": "tabs",
"intent": "Show navigational structure and active/inactive contrast."
},
{
"primitive": "badge",
"intent": "Show compact status vocabulary and semantic colors."
},
{
"primitive": "separator",
"intent": "Show section rhythm without generic gray dividers."
},
{
"primitive": "checkbox",
"intent": "Show binary selection with visible focus and checked states."
},
{
"primitive": "switch",
"intent": "Show settings toggles and on/off contrast."
},
{
"primitive": "slider",
"intent": "Show numeric adjustment with track/thumb styling."
},
{
"primitive": "tooltip",
"intent": "Show concise explanation styling above compact controls."
},
{
"primitive": "dropdown-menu",
"intent": "Show action menus, destructive items, and grouped choices."
},
{
"primitive": "table",
"intent": "Show dense operational data, separators, row states, and responsive behavior."
}
],
"qualityRules": {
"do": [
"Keep the ground dark — the estuary twilight is the identity",
"Wrap meaningful records in depth contours and let ring spacing carry the reading",
"Measure everything against the coral mean-tide datum",
"Anchor dense rows with a glasswort root-marker stem",
"Reserve the coral ember for the single thing that needs a person"
],
"dont": [
"Do not default to a white or pale ground",
"Do not box the chrome in borders or trap nav in a pill bar",
"Do not flip serif headlines to italic for emphasis",
"Do not flood the page with an accent",
"Do not stamp contour rings until they become wallpaper"
]
}
}