design language·terrace

Terrace

A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.

Published

Download DESIGN.md

Portable DESIGN.md source of truth for most agents and apps.

the spec

specification

philosophy

summary

Terrace is a design language for stewardship and field observation: interfaces for people who watch a living place over seasons. It keeps the slower, cultivated, nature-rooted soul of its lineage and gives it one ownable idea — read every surface the way a field scientist reads a soil core. A card is a core sample, a table is a depth log, the sidebar is a measured depth spine, and faint contour hairlines drift across the whole page like an elevation map.

values

Cultivated calm over sterile speedMaterial, measured surfaces over glossy abstractionOne clay signal spent like a highlighterBright, clean bone paper over muddy washesInterfaces that imply stewardship, care, and the long view

anti-values

×Chrome-heavy futurism and glassmorphism×Grey borders and boxed chrome×Muddy pastel background washes×Bouncy, gamified motion×Decoration without an idea

tokens

colors14 items

#F6F3EC

surface

#FFFFFF

surface_solid

#FBF9F3

text

#1F2B24

muted

#5E6A60

border

#E4DFD3

accent

#C15A2B

accent_2

#2F5D4A

accent_soft

#E8C9A6

on_accent

#FFFFFF

success

#3F7A55

warning

#C0871F

error

#A8412F

info

#3A6B78

typography10 items

base size: 17px
body font: Inter
heading font: Fraunces
mono font: IBM Plex Mono
heading weight: 600
heading transform: none
letter spacing: -0.02em
line height: 1.55
scale ratio: 1.28
google fonts url: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap

radii4 items

none: 0px
md: 16px
lg: 24px
full: 9999px

shadows3 items

sm: 0 1px 2px rgba(31,43,36,0.08)
md: 0 10px 24px rgba(31,43,36,0.10)
lg: 0 26px 60px rgba(31,43,36,0.14)

spacing2 items

base: 8px
scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 72px

surfaces3 items

treatment: bone paper
card style: core-sample surfaces: a ticked depth gutter down the left edge and a clay/spruce/sand stratum cap across the top
bg pattern: drifting horizontal contour hairlines (isopleths)

borders4 items

default width: 1px
accent width: 6px
style: solid
character: hairline warm-bone borders only; the accent width is the stratum cap, never a grey stroke

motion3 items

duration: 200ms
easing: cubic-bezier(0.22, 1, 0.36, 1)
philosophy: settled, never bouncing — motion settles like sediment

rules

composition

Compose surfaces as core samples: a measured depth gutter down the left edge, a clay/spruce/sand stratum cap across the top, content banded into readable layers. Read tables top-down as depth logs; give the dashboard a measured depth spine instead of a boxed sidebar.

hierarchy

Lead with Fraunces headings and mono labels; the primary action is a single clay capsule, the stewardship path is spruce, everything else stays quiet. Status lives in flat mono badges.

density

Airy at the macro level with deep panel padding and generous margins; cultivated (tight) inside clusters. Balance density across the canvas — never a crowded cluster beside a starved void.

signature patterns

Every core surface carries a ticked depth gutter and a clay/spruce/sand stratum capFaint contour hairlines drift horizontally across large surfaces as a page-wide background systemTables and lists anchor each row with a clay depth marker and a mono depth readingThe dashboard navigation is a measured depth spine with a dotted railButtons settle with a pressed depth-shadow that collapses on active, like a stamp

layout

grid

Contained max-width (~1200px) with generous outer margin and deep panel padding on desktop. The dashboard runs a measured depth-spine rail on the left instead of a boxed sidebar; cards read as staggered cores, not identical boxes.

breakpoints

At 1024 the KPI row goes two-up and the transect/log split stacks while the spine keeps its dotted rail. The tablet band (768-1024) is its own considered layout, never a stretched mobile column. At 720 and below, stack to a single column, turn the depth spine into a horizontal scroll rail, scroll tables inside their core, and shrink the hero headline with clamp() so it wraps and never clips the 390px edge.

whitespace

Large outer margins and deep core padding; tight plant-like clustering inside cards. Whitespace reads like air pockets between stones — irregular at the macro level, disciplined at the micro level.

guidance

Read every surface as a core: gutter, stratum cap, banded content.
Keep bone paper the field, spruce the ink, and clay the single raised signal.
Let the contour hairlines recur page-wide as one system.
Keep body copy at 17px and put depths, counts, and labels in mono.

avoid

Do not box the navigation into a floating card or pill bar.
Do not give a card a single accent edge in place of the full stratum cap.
Do not introduce grey borders, glassmorphism, neon, or metallic chrome.
Do not let the strata cap or gutter become wallpaper on tiny chrome.

imagery

pairs with

corebed

summary

Layered risograph survey prints — flat overprinted spot-color layers with slight mis-registration, halftone grain, and thin contour hairlines. Subjects are terrain and stewardship: soil cross-sections, terraced hillsides, contour surveys, field instruments, wetland species.

usage

One full-bleed hero per landing via var(--hero-image). Copy and imagery never share the same ground — text sits on the bone panel, imagery fills its own bleed.

avoid

Photographic field-notes, glossy renders, more than four inks, text in the image.

katagami spec

# Terrace

## Philosophy

Terrace is a design language for stewardship and field observation: interfaces for people who watch a living place over seasons. It keeps the slower, cultivated, nature-rooted soul of its lineage and gives it one ownable idea — read every surface the way a field scientist reads a soil core. A card is a core sample, a table is a depth log, the sidebar is a measured depth spine, and faint contour hairlines drift across the whole page like an elevation map.

### Values

- Cultivated calm over sterile speed
- Material, measured surfaces over glossy abstraction
- One clay signal spent like a highlighter
- Bright, clean bone paper over muddy washes
- Interfaces that imply stewardship, care, and the long view

### Anti-Values

- Chrome-heavy futurism and glassmorphism
- Grey borders and boxed chrome
- Muddy pastel background washes
- Bouncy, gamified motion
- Decoration without an idea

### Visual Character

- Every core surface carries a ticked depth gutter and a clay/spruce/sand stratum cap
- Contour hairlines recur page-wide as one drifting background system
- Tables and lists anchor each row with a clay depth marker and a mono depth reading
- Navigation is a measured depth spine, never a boxed sidebar
- Controls settle with a pressed depth-shadow, like a stamp

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F6F3EC` |
| surface | `#FFFFFF` |
| surface_solid | `#FBF9F3` |
| text | `#1F2B24` |
| muted | `#5E6A60` |
| border | `#E4DFD3` |
| accent | `#C15A2B` |
| accent_2 | `#2F5D4A` |
| accent_soft | `#E8C9A6` |
| on_accent | `#FFFFFF` |
| success | `#3F7A55` |
| warning | `#C0871F` |
| error | `#A8412F` |
| info | `#3A6B78` |

### Typography

- **Base Size**: 17px
- **Body Font**: Inter
- **Heading Font**: Fraunces
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Scale Ratio**: 1.28
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap

### Radii

- **None**: 0px
- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 2px rgba(31,43,36,0.08)
- **Md**: 0 10px 24px rgba(31,43,36,0.10)
- **Lg**: 0 26px 60px rgba(31,43,36,0.14)

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","72px"]

### Surfaces

- **Treatment**: bone paper
- **Card Style**: core-sample surfaces: a ticked depth gutter down the left edge and a clay/spruce/sand stratum cap across the top
- **Bg Pattern**: drifting horizontal contour hairlines (isopleths)

### Borders

- **Default Width**: 1px
- **Accent Width**: 6px
- **Style**: solid
- **Character**: hairline warm-bone borders only; the accent width is the stratum cap, never a grey stroke

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: settled, never bouncing — motion settles like sediment

## Rules

### Composition

Compose surfaces as core samples: a measured depth gutter down the left edge, a clay/spruce/sand stratum cap across the top, content banded into readable layers. Read tables top-down as depth logs; give the dashboard a measured depth spine instead of a boxed sidebar.

### Hierarchy

Lead with Fraunces headings and mono labels; the primary action is a single clay capsule, the stewardship path is spruce, everything else stays quiet. Status lives in flat mono badges.

### Density

Airy at the macro level with deep panel padding and generous margins; cultivated (tight) inside clusters. Balance density across the canvas — never a crowded cluster beside a starved void.

### Signature Patterns

- Every core surface carries a ticked depth gutter and a clay/spruce/sand stratum cap
- Faint contour hairlines drift horizontally across large surfaces as a page-wide background system
- Tables and lists anchor each row with a clay depth marker and a mono depth reading
- The dashboard navigation is a measured depth spine with a dotted rail
- Buttons settle with a pressed depth-shadow that collapses on active, like a stamp

## Layout

### Grid

Contained max-width (~1200px) with generous outer margin and deep panel padding on desktop. The dashboard runs a measured depth-spine rail on the left instead of a boxed sidebar; cards read as staggered cores, not identical boxes.

### Breakpoints

At 1024 the KPI row goes two-up and the transect/log split stacks while the spine keeps its dotted rail. The tablet band (768-1024) is its own considered layout, never a stretched mobile column. At 720 and below, stack to a single column, turn the depth spine into a horizontal scroll rail, scroll tables inside their core, and shrink the hero headline with clamp() so it wraps and never clips the 390px edge.

### Whitespace

Large outer margins and deep core padding; tight plant-like clustering inside cards. Whitespace reads like air pockets between stones — irregular at the macro level, disciplined at the micro level.

## Guidance

### Do

- Read every surface as a core: gutter, stratum cap, banded content.
- Keep bone paper the field, spruce the ink, and clay the single raised signal.
- Let the contour hairlines recur page-wide as one system.
- Keep body copy at 17px and put depths, counts, and labels in mono.

### Don't

- Do not box the navigation into a floating card or pill bar.
- Do not give a card a single accent edge in place of the full stratum cap.
- Do not introduce grey borders, glassmorphism, neon, or metallic chrome.
- Do not let the strata cap or gutter become wallpaper on tiny chrome.

## Imagery Direction

### Pairs With

corebed

### Summary

Layered risograph survey prints — flat overprinted spot-color layers with slight mis-registration, halftone grain, and thin contour hairlines. Subjects are terrain and stewardship: soil cross-sections, terraced hillsides, contour surveys, field instruments, wetland species.

### Usage

One full-bleed hero per landing via var(--hero-image). Copy and imagery never share the same ground — text sits on the bone panel, imagery fills its own bleed.

### Avoid

Photographic field-notes, glossy renders, more than four inks, text in the image.

DESIGN.md

---
version: "alpha"
name: "Terrace"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F6F3EC"
  surface: "#FFFFFF"
  surface_solid: "#FBF9F3"
  text: "#1F2B24"
  muted: "#5E6A60"
  border: "#E4DFD3"
  accent: "#C15A2B"
  accent_2: "#2F5D4A"
  accent_soft: "#E8C9A6"
  on_accent: "#FFFFFF"
  success: "#3F7A55"
  warning: "#C0871F"
  error: "#A8412F"
  info: "#3A6B78"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Inter"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  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: "72px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  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_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  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"
---

# Terrace

## Overview

Terrace is a design language for stewardship and field observation: interfaces for people who watch a living place over seasons. It keeps the slower, cultivated, nature-rooted soul of its lineage and gives it one ownable idea — read every surface the way a field scientist reads a soil core. A card is a core sample, a table is a depth log, the sidebar is a measured depth spine, and faint contour hairlines drift across the whole page like an elevation map.

### Values

- Cultivated calm over sterile speed
- Material, measured surfaces over glossy abstraction
- One clay signal spent like a highlighter
- Bright, clean bone paper over muddy washes
- Interfaces that imply stewardship, care, and the long view

### Anti-Values

- Chrome-heavy futurism and glassmorphism
- Grey borders and boxed chrome
- Muddy pastel background washes
- Bouncy, gamified motion
- Decoration without an idea

### Visual Character

- Every core surface carries a ticked depth gutter and a clay/spruce/sand stratum cap
- Contour hairlines recur page-wide as one drifting background system
- Tables and lists anchor each row with a clay depth marker and a mono depth reading
- Navigation is a measured depth spine, never a boxed sidebar
- Controls settle with a pressed depth-shadow, like a stamp

## 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 | `#F6F3EC` |
| surface | `#FFFFFF` |
| surface_solid | `#FBF9F3` |
| text | `#1F2B24` |
| muted | `#5E6A60` |
| border | `#E4DFD3` |
| accent | `#C15A2B` |
| accent_2 | `#2F5D4A` |
| accent_soft | `#E8C9A6` |
| on_accent | `#FFFFFF` |
| success | `#3F7A55` |
| warning | `#C0871F` |
| error | `#A8412F` |
| info | `#3A6B78` |

## Typography

- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 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**: `72px`

### Grid

Contained max-width (~1200px) with generous outer margin and deep panel padding on desktop. The dashboard runs a measured depth-spine rail on the left instead of a boxed sidebar; cards read as staggered cores, not identical boxes.

### Breakpoints

At 1024 the KPI row goes two-up and the transect/log split stacks while the spine keeps its dotted rail. The tablet band (768-1024) is its own considered layout, never a stretched mobile column. At 720 and below, stack to a single column, turn the depth spine into a horizontal scroll rail, scroll tables inside their core, and shrink the hero headline with clamp() so it wraps and never clips the 390px edge.

### Whitespace

Large outer margins and deep core padding; tight plant-like clustering inside cards. Whitespace reads like air pockets between stones — irregular at the macro level, disciplined at the micro level.

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 2px rgba(31,43,36,0.08)
- **Md**: 0 10px 24px rgba(31,43,36,0.10)
- **Lg**: 0 26px 60px rgba(31,43,36,0.14)

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: bone paper
- **Card Style**: core-sample surfaces: a ticked depth gutter down the left edge and a clay/spruce/sand stratum cap across the top
- **Bg Pattern**: drifting horizontal contour hairlines (isopleths)

### Borders

- **Default Width**: 1px
- **Accent Width**: 6px
- **Style**: solid
- **Character**: hairline warm-bone borders only; the accent width is the stratum cap, never a grey stroke

## Components

### Composition

Compose surfaces as core samples: a measured depth gutter down the left edge, a clay/spruce/sand stratum cap across the top, content banded into readable layers. Read tables top-down as depth logs; give the dashboard a measured depth spine instead of a boxed sidebar.

### Hierarchy

Lead with Fraunces headings and mono labels; the primary action is a single clay capsule, the stewardship path is spruce, everything else stays quiet. Status lives in flat mono badges.

### Density

Airy at the macro level with deep panel padding and generous margins; cultivated (tight) inside clusters. Balance density across the canvas — never a crowded cluster beside a starved void.

### Signature Patterns

- Every core surface carries a ticked depth gutter and a clay/spruce/sand stratum cap
- Faint contour hairlines drift horizontally across large surfaces as a page-wide background system
- Tables and lists anchor each row with a clay depth marker and a mono depth reading
- The dashboard navigation is a measured depth spine with a dotted rail
- Buttons settle with a pressed depth-shadow that collapses on active, like a stamp

## 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-019f7076-1520-70d2-b1f3-b62a45889db7/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 Read every surface as a core: gutter, stratum cap, banded content.
- Do Keep bone paper the field, spruce the ink, and clay the single raised signal.
- Do Let the contour hairlines recur page-wide as one system.
- Do Keep body copy at 17px and put depths, counts, and labels in mono.
- Don't Do not box the navigation into a floating card or pill bar.
- Don't Do not give a card a single accent edge in place of the full stratum cap.
- Don't Do not introduce grey borders, glassmorphism, neon, or metallic chrome.
- Don't Do not let the strata cap or gutter become wallpaper on tiny chrome.

## Imagery Direction

### Pairs With

corebed

### Summary

Layered risograph survey prints — flat overprinted spot-color layers with slight mis-registration, halftone grain, and thin contour hairlines. Subjects are terrain and stewardship: soil cross-sections, terraced hillsides, contour surveys, field instruments, wetland species.

### Usage

One full-bleed hero per landing via var(--hero-image). Copy and imagery never share the same ground — text sits on the bone panel, imagery fills its own bleed.

### Avoid

Photographic field-notes, glossy renders, more than four inks, text in the image.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "terrace",
  "type": "registry:theme",
  "title": "Terrace shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6F3EC",
      "foreground": "#1F2B24",
      "card": "#FFFFFF",
      "card-foreground": "#1F2B24",
      "popover": "#FFFFFF",
      "popover-foreground": "#1F2B24",
      "primary": "#1F2B24",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5E6A60",
      "muted-foreground": "#1F2B24",
      "accent": "#C15A2B",
      "accent-foreground": "#ffffff",
      "destructive": "#A8412F",
      "border": "#E4DFD3",
      "input": "#E4DFD3",
      "ring": "#C15A2B",
      "chart-1": "#1F2B24",
      "chart-2": "#f4f4f5",
      "chart-3": "#C15A2B",
      "chart-4": "#3F7A55",
      "chart-5": "#C0871F",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#1F2B24",
      "sidebar-primary": "#1F2B24",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3A6B78",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E4DFD3",
      "sidebar-ring": "#C15A2B",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1F2B24",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C15A2B",
      "accent-foreground": "#ffffff",
      "destructive": "#A8412F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C15A2B",
      "chart-1": "#1F2B24",
      "chart-2": "#f4f4f5",
      "chart-3": "#C15A2B",
      "chart-4": "#3F7A55",
      "chart-5": "#C0871F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1F2B24",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C15A2B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C15A2B",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f7076-1520-70d2-b1f3-b62a45889db7",
    "slug": "terrace",
    "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_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_solid",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```

in the wild

embodiments

bespoke marketing landingopen full page ↗

landing · terrace

DESIGN.md

at a glance

Typography

headline-lgFraunces · 33px · 700

The quick brown fox jumps

headline-mdFraunces · 27px · 600

The quick brown fox jumps

body-mdInter · 17px · 400

The quick brown fox jumps

label-mdIBM Plex Mono · 12px · 600

The quick brown fox jumps

shadcn/ui

implementation kit

needs agent-authored kitstored

shadcn compatibility only

The generated theme variables are available, but the polished shadcn component recipes and shots have not been authored by the Katagami agent yet.

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primaryaccentsurfacemutedwarningerror

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

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.

advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #F6F3EC;
  --foreground: #1F2B24;
  --card: #FFFFFF;
  --card-foreground: #1F2B24;
  --popover: #FFFFFF;
  --popover-foreground: #1F2B24;
  --primary: #1F2B24;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #5E6A60;
  --muted-foreground: #1F2B24;
  --accent: #C15A2B;
  --accent-foreground: #ffffff;
  --destructive: #A8412F;
  --border: #E4DFD3;
  --input: #E4DFD3;
  --ring: #C15A2B;
  --chart-1: #1F2B24;
  --chart-2: #f4f4f5;
  --chart-3: #C15A2B;
  --chart-4: #3F7A55;
  --chart-5: #C0871F;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1F2B24;
  --sidebar-primary: #1F2B24;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3A6B78;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #E4DFD3;
  --sidebar-ring: #C15A2B;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1F2B24;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #C15A2B;
  --accent-foreground: #ffffff;
  --destructive: #A8412F;
  --border: #303642;
  --input: #303642;
  --ring: #C15A2B;
  --chart-1: #1F2B24;
  --chart-2: #f4f4f5;
  --chart-3: #C15A2B;
  --chart-4: #3F7A55;
  --chart-5: #C0871F;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1F2B24;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #C15A2B;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #C15A2B;
  --radius: 16px;
}

tsx starter

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function TerraceShadcnKit() {
  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">Terrace</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

theme JSONstored

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "terrace",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Terrace",
  "description": "Stewardship and field-observation theme: bone paper, spruce ink, and a single clay signal, with strata-band surfaces read like soil cores.",
  "cssVars": {
    "theme": {
      "font-sans": "Inter, system-ui, sans-serif",
      "font-serif": "Fraunces, Georgia, serif",
      "font-mono": "IBM Plex Mono, monospace",
      "radius": "1rem"
    },
    "light": {
      "background": "#F6F3EC",
      "foreground": "#1F2B24",
      "card": "#FFFFFF",
      "card-foreground": "#1F2B24",
      "popover": "#FFFFFF",
      "popover-foreground": "#1F2B24",
      "primary": "#C15A2B",
      "primary-foreground": "#FFFFFF",
      "secondary": "#2F5D4A",
      "secondary-foreground": "#FFFFFF",
      "muted": "#FBF9F3",
      "muted-foreground": "#5E6A60",
      "accent": "#E8C9A6",
      "accent-foreground": "#1F2B24",
      "destructive": "#A8412F",
      "destructive-foreground": "#FFFFFF",
      "border": "#E4DFD3",
      "input": "#E4DFD3",
      "ring": "#C15A2B",
      "chart-1": "#C15A2B",
      "chart-2": "#2F5D4A",
      "chart-3": "#E8C9A6",
      "chart-4": "#C0871F",
      "chart-5": "#3A6B78",
      "radius": "1rem"
    },
    "dark": {
      "background": "#1A231D",
      "foreground": "#F1EDE2",
      "card": "#212C25",
      "card-foreground": "#F1EDE2",
      "popover": "#212C25",
      "popover-foreground": "#F1EDE2",
      "primary": "#D8703F",
      "primary-foreground": "#1A231D",
      "secondary": "#7BA98F",
      "secondary-foreground": "#1A231D",
      "muted": "#26312A",
      "muted-foreground": "#A9B2A8",
      "accent": "#E8C9A6",
      "accent-foreground": "#1A231D",
      "destructive": "#C9604E",
      "destructive-foreground": "#1A231D",
      "border": "#313D34",
      "input": "#313D34",
      "ring": "#D8703F",
      "chart-1": "#D8703F",
      "chart-2": "#7BA98F",
      "chart-3": "#E8C9A6",
      "chart-4": "#D6A24A",
      "chart-5": "#6F9AA6"
    }
  },
  "visualProfile": {
    "family": "editorial-field-survey",
    "material": "bone paper with matte print grain",
    "contour": "capsule controls, 24px core surfaces, ticked depth gutters",
    "border": "hairline warm-bone only, no grey borders",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "settled, no bounce, ~200ms cubic-bezier(0.22,1,0.36,1)",
    "density": "airy-macro, cultivated-micro",
    "accents": ["#C15A2B", "#2F5D4A", "#E8C9A6"]
  },
  "notes": "Signature mechanic: the strata band. Every card is a core sample with a ticked depth gutter down the left edge and a clay/spruce/sand stratum cap across the top. Bind the cap and gutter inks to primary/secondary/accent so a theme swap re-inks the whole page. Body text at 17px, data in mono. Never box navigation; alerts use a left stratum seam, not a full boxed panel."
}

component recipesstored

# Terrace — shadcn/ui Components

Author: `katagami-agent`

Terrace dresses shadcn/ui as a **stewardship and field-observation** kit. Every surface is read like a soil core: a ticked depth gutter down the left edge, a clay/spruce/sand stratum cap across the top, content banded into readable layers. Bone paper is the field, spruce is the ink, clay is the single raised signal.

## ShadSync visual profile

- **Family:** editorial field survey — calm, measured, literary.
- **Material:** bone paper (`#F6F3EC`) with a matte print grain; raised cores in pure white.
- **Contour:** capsule controls (`rounded-full`), 24px (`rounded-2xl`) core surfaces, 16px inputs; a 26px ticked depth gutter on cards.
- **Border:** hairline warm-bone (`#E4DFD3`) only — never grey, never heavy.
- **Underlay:** yes — faint contour hairlines drift across large surfaces as a page-wide system.
- **Grain:** yes — subtle matte paper tooth.
- **Sticker badges:** no — badges are flat mono status stamps.
- **Motion:** settled, never bouncy; ~200ms `cubic-bezier(0.22, 1, 0.36, 1)`.
- **Density:** airy at the macro level, cultivated (tight) inside clusters.
- **Accents:** clay `#C15A2B`, spruce `#2F5D4A`, sand `#E8C9A6` — three, used like highlighters.

Bind the stratum cap and depth gutter inks to `--primary` / `--secondary` / `--accent` so a theme swap re-inks every core, marker, and cap at once.

## Signature component recipes

The strata band is the recurring idea. Each recipe below shows how it recolours through a primitive.

- **Button** — capsule with a short pressed depth-shadow (`shadow-[0_4px_0]` in a darker primary) that collapses on `:active`, like a stamp settling. One primary clay action per view; spruce for the stewardship path; quiet and ghost for the rest. Text never wraps.
- **Card** — the core sample: `relative overflow-hidden rounded-2xl` with a `::before` ticked gutter (26px) and a `::after` clay/spruce/sand cap (6px). Content bands separated by hairlines.
- **Input / Textarea / Select** — bone fields, hairline border, clay focus ring (`ring-2 ring-primary/30`), custom SVG chevron on select. No browser defaults.
- **Table** — a depth log: each row anchored by a clay depth marker and a mono depth reading; hover washes clay at 10%.
- **Badge** — flat mono status stamp; clay / spruce / semantic tints, `rounded-full`, a 7px status dot.
- **Tabs** — clay underline on the active tab; muted labels otherwise.
- **Alert** — a coloured stratum seam on the left edge (`::before` 6px bar), never a full boxed shout.
- **Dialog / Sheet** — a core surface with gutter and cap; actions right-aligned.
- **Slider** — a core-depth track: clay fill, white thumb ringed in clay.
- **Switch / Checkbox / Radio** — hand-drawn marks; spruce for on-states, clay for checks.
- **Separator** — a hairline, or a short clay/spruce/bone spine rule for section breaks.
- **Tooltip / Dropdown-menu** — bone popover on the same hairline-and-cap system.
- **Progress** — sediment settling: a clay or spruce fill in a bone track.

## Preview shots

The renderable preview scenes live in `preview-shots.json` (`preview-shots-v1`). They cover a field-console overview, a new-observation entry form, and a transect log table — each exercising the strata band across buttons, cards, inputs, tables, badges, and alerts so the theme is shown as a real product, not a component gallery.

## Copy-paste component example

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

// A Terrace "core sample" card: depth gutter + stratum cap via before/after.
export function CoreSample() {
  return (
    <Card className="relative overflow-hidden rounded-2xl pl-12
                     before:absolute before:inset-y-0 before:left-0 before:w-6
                     before:bg-muted before:border-r before:border-border
                     after:absolute after:left-6 after:right-0 after:top-0 after:h-1.5
                     after:bg-[linear-gradient(90deg,var(--primary)_0_40%,var(--secondary)_40%_70%,var(--accent)_70%_100%)]">
      <CardHeader>
        <CardTitle className="font-serif tracking-tight">North Ridge</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2">
        <div className="flex justify-between border-b border-border/40 py-2">
          <span>Dark loam</span>
          <span className="font-mono text-xs text-muted-foreground">4–26cm</span>
        </div>
        <div className="flex items-center justify-between pt-1">
          <Badge className="rounded-full bg-secondary/10 text-secondary">Stable</Badge>
          <Button className="rounded-full shadow-[0_4px_0_theme(colors.primary/60%)]
                             active:translate-y-0.5 active:shadow-[0_1px_0]">
            Open core
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
```

Every primitive is imported from `@/components/ui/` and themed by the tokens in `export.json`; no component markup is forked — only the strata-band recipe and the token values make it Terrace.

preview shotsstored

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "author": "katagami-agent",
  "requiresVisualProfile": true,
  "language": {
    "id": "terrace",
    "name": "Terrace",
    "slug": "terrace"
  },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/terrace.json",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "Every card is a core sample: a 26px ticked depth gutter down the left edge and a clay/spruce/sand stratum cap across the top.",
    "Bone paper is the field, spruce ink is the text, clay is the single raised signal used like a highlighter.",
    "Cap and gutter inks bind to primary/secondary/accent so a theme swap re-inks the whole page at once.",
    "Body text at 17px; depths, counts, and labels in IBM Plex Mono so data reads as data.",
    "Navigation is never boxed; alerts use a left stratum seam, not a full boxed panel.",
    "Buttons settle with a pressed depth-shadow, like a stamp; they never wrap."
  ],
  "visualProfile": {
    "family": "editorial-field-survey",
    "material": "bone paper with matte print grain",
    "contour": "capsule controls, 24px core surfaces, ticked depth gutters",
    "border": "hairline warm-bone only, no grey borders",
    "underlay": true,
    "grain": true,
    "stickerBadges": false,
    "motion": "settled, no bounce, ~200ms cubic-bezier(0.22,1,0.36,1)",
    "density": "airy-macro, cultivated-micro",
    "accents": ["#C15A2B", "#2F5D4A", "#E8C9A6"]
  },
  "tokens": {
    "background": "#F6F3EC",
    "surface": "#FFFFFF",
    "surfaceSolid": "#FBF9F3",
    "foreground": "#1F2B24",
    "muted": "#5E6A60",
    "border": "#E4DFD3",
    "primary": "#C15A2B",
    "secondary": "#2F5D4A",
    "accent": "#E8C9A6",
    "onPrimary": "#FFFFFF",
    "success": "#3F7A55",
    "warning": "#C0871F",
    "destructive": "#A8412F",
    "info": "#3A6B78",
    "radius": "24px",
    "fontSans": "Inter",
    "fontSerif": "Fraunces",
    "fontMono": "IBM Plex Mono"
  },
  "shots": [
    {
      "id": "steward-overview",
      "title": "Steward console overview",
      "viewport": "desktop",
      "primitives": ["card", "button", "badge", "tabs", "separator", "table", "dropdown-menu"],
      "composition": "A field-console overview: a depth-spine of tabs, four KPI core cards with stratum caps, and a transect log table with clay depth markers.",
      "mustShow": [
        "Core cards with a ticked depth gutter and a clay/spruce/sand stratum cap",
        "One primary clay button and a quiet secondary",
        "Mono depth readings in the table rows",
        "Flat mono status badges (Stable, Watch, Erosion)"
      ],
      "avoid": [
        "Grey borders",
        "Boxed pill navigation",
        "Bouncy motion",
        "Emoji on buttons"
      ],
      "scene": {
        "headline": "Ridge Terrace — Season 4",
        "description": "Spring survey, six of eight sites logged. Read the latest cores at a glance.",
        "stats": [
          {"label": "Cores logged", "value": "248", "delta": "+12 this week", "trend": "up"},
          {"label": "Mean depth", "value": "0.71m", "delta": "6 sites", "trend": "flat"},
          {"label": "Canopy cover", "value": "63%", "delta": "+4%", "trend": "up"},
          {"label": "Erosion flags", "value": "3", "delta": "South Cut", "trend": "down"}
        ]
      }
    },
    {
      "id": "new-observation",
      "title": "New observation entry",
      "viewport": "desktop",
      "primitives": ["card", "input", "textarea", "select", "checkbox", "switch", "radio", "slider", "button", "tooltip"],
      "composition": "A two-core entry form: a new-observation card and a survey-settings card with hand-drawn controls, closed by a primary Record action.",
      "mustShow": [
        "Bone input fields with a clay focus ring",
        "Custom SVG chevron on the select",
        "A core-depth slider with a clay track",
        "Hand-drawn checkbox, switch, and radio marks"
      ],
      "avoid": [
        "Browser-default form controls",
        "Heavy drop shadows",
        "Grey borders"
      ],
      "scene": {
        "headline": "New observation",
        "description": "Log a reading against a named site and layer; notes autosave to the transect log.",
        "fields": [
          {"label": "Site name", "type": "input", "placeholder": "Ridge Terrace — East Cut"},
          {"label": "Layer", "type": "select", "options": ["Topsoil (0–15cm)", "Loam band (15–40cm)", "Clay stratum (40–90cm)", "Bedrock contact"]},
          {"label": "Notes", "type": "textarea", "placeholder": "Root density high in the loam band; three pressed fern fronds at 22cm."},
          {"label": "Reading depth", "type": "slider", "value": "55cm"},
          {"label": "Public stewardship view", "type": "switch", "value": "on"}
        ]
      }
    },
    {
      "id": "transect-log",
      "title": "Transect log and signals",
      "viewport": "desktop",
      "primitives": ["table", "badge", "alert", "dialog", "sheet", "progress", "button", "separator"],
      "composition": "A transect log table beside a signals column: a synced info alert, an erosion alert with a left stratum seam, sediment-fill progress bars, and a seal-and-publish dialog.",
      "mustShow": [
        "Clay depth markers anchoring each table row",
        "Alerts with a coloured left stratum seam, not a boxed panel",
        "Sediment-style progress fills in clay and spruce",
        "A dialog rendered as a core surface with gutter and cap"
      ],
      "avoid": [
        "Full boxed alert panels",
        "Neon or gradient chrome",
        "Grey borders"
      ],
      "scene": {
        "headline": "Transect log",
        "description": "Each row is a layer, read top-down like a stacked core.",
        "rows": [
          {"depth": "0–15", "layer": "Topsoil", "site": "North Ridge", "moisture": "Moist", "status": "Stable"},
          {"depth": "15–40", "layer": "Loam band", "site": "Creek Bench", "moisture": "Wet", "status": "Watch"},
          {"depth": "40–90", "layer": "Clay stratum", "site": "South Cut", "moisture": "Dry", "status": "Erosion"},
          {"depth": "90+", "layer": "Bedrock contact", "site": "North Ridge", "moisture": "Damp", "status": "Logged"}
        ]
      }
    }
  ],
  "componentRecipes": [
    {"primitive": "button", "intent": "Primary clay capsule with a pressed depth-shadow that collapses on active, like a stamp."},
    {"primitive": "button", "intent": "Spruce secondary for the stewardship path; quiet and ghost variants for the rest."},
    {"primitive": "card", "intent": "The core sample: ticked depth gutter, clay/spruce/sand stratum cap, banded content."},
    {"primitive": "input", "intent": "Bone field, hairline border, clay focus ring; no browser default."},
    {"primitive": "textarea", "intent": "Same field treatment, vertically resizable, with a mono autosave hint."},
    {"primitive": "select", "intent": "Bone field with a custom SVG chevron and a clay focus ring."},
    {"primitive": "checkbox", "intent": "Hand-drawn square that fills clay with a white check on select."},
    {"primitive": "switch", "intent": "Bone track that turns spruce on-state; thumb settles, never bounces."},
    {"primitive": "radio", "intent": "Hairline ring that inks a spruce dot when chosen."},
    {"primitive": "slider", "intent": "Core-depth track: clay fill, white thumb ringed in clay, mono depth label."},
    {"primitive": "badge", "intent": "Flat mono status stamp with a 7px dot; clay, spruce, and semantic tints."},
    {"primitive": "tabs", "intent": "Muted labels with a clay underline on the active tab."},
    {"primitive": "table", "intent": "Depth log: clay depth markers anchor rows; hover washes clay at 10%."},
    {"primitive": "alert", "intent": "Coloured stratum seam on the left edge; info, warning, and error, never boxed."},
    {"primitive": "dialog", "intent": "Core surface with gutter and cap; right-aligned actions."},
    {"primitive": "sheet", "intent": "Side core panel with the same gutter, cap, and hairline system."},
    {"primitive": "separator", "intent": "Hairline, or a short clay/spruce/bone spine rule for section breaks."},
    {"primitive": "tooltip", "intent": "Bone popover, hairline edge, mono label; settles in without bounce."},
    {"primitive": "dropdown-menu", "intent": "Bone popover on the hairline-and-cap system; clay hover wash on items."},
    {"primitive": "progress", "intent": "Sediment settling: clay or spruce fill in a bone track."}
  ],
  "qualityRules": {
    "do": [
      "Read every surface as a core: gutter, stratum cap, banded content.",
      "Keep bone paper the field, spruce the ink, clay the single raised signal.",
      "Use IBM Plex Mono for depths, counts, and labels.",
      "Bind cap and gutter inks to primary/secondary/accent so a swap re-inks everything.",
      "Keep body text at 17px and let the contour hairlines recur page-wide."
    ],
    "dont": [
      "Box the navigation into a floating card or pill bar.",
      "Give a card a single accent edge instead of the full stratum cap.",
      "Use grey borders, glassmorphism, neon, or metallic chrome.",
      "Let the strata cap become wallpaper on tiny chrome.",
      "Put emoji or symbol glyphs on buttons."
    ]
  }
}

built with

Palette

Agent-generated

remix lane

try a remix

Keep Terraceand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.

UI language · fixed

Terrace

Palette

Art style

Landing PageTerrace · Transformative teal + Adaptive violet · Cyanotype

live preview · recolored + filled

lineage

Family

Evolved from

Organic NaturalismArchived

More like this

Broadsideshares risograph Cinnabarshares core-sample Coriandolishares light Decoupageshares risograph Driftshares editorial Druckwerkshares editorial