Tilth

# Tilth

## Philosophy

Cultivated-earth interface — read the screen like a soil core. A faithful refinement of Nature Distilled Organic: same earth-pigment direction and tactile material honesty, brought to standard with three highlighter accents, one coherent organic geometry, an open masthead, and a full-viewport strata hero. The ground is warm parchment, never white; text is warm bog-ink, never black.

### Values

- organic warmth
- material honesty
- geological colour depth
- unhurried rhythm
- tactile authenticity

### Anti-Values

- synthetic brightness
- cold white minimalism
- rigid uniform geometry
- borders and accent edges
- muddy washes

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#EFE6D4` |
| surface | `#F8F2E6` |
| surface_2 | `#E7DBC4` |
| text | `#2B1C12` |
| muted | `#7E6A4F` |
| border | `#D8C8A8` |
| accent | `#B5532A` |
| accent_2 | `#5C7444` |
| accent_3 | `#C99A4E` |
| on_accent | `#FBF6EC` |
| success | `#4E6B33` |
| warning | `#9A6B17` |
| error | `#A53521` |
| info | `#355E6E` |

### Typography

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

### Radii

- **Sm**: 16px
- **Lg**: 24px
- **Pill**: 9999px
- **Card**: 24px 16px 24px 16px

### Shadows

- **Sm**: 0 1px 2px rgba(43,28,18,0.06)
- **Md**: 0 12px 32px -16px rgba(43,28,18,0.22)
- **Lg**: 0 28px 60px -28px rgba(43,28,18,0.30)

### Spacing

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

### Surfaces

- **Ground**: #EFE6D4
- **Raised**: #F8F2E6
- **Recessed**: #E7DBC4
- **Grain**: fractalNoise SVG at ~4% opacity

### Borders

- **Style**: none
- **Affordance**: inset 0 0 0 1.5px #D8C8A8 on inputs only
- **Character**: soft warm loam edge, never a card outline or accent edge

### Motion

- **Duration**: 400ms
- **Easing**: cubic-bezier(0.2,0.7,0.2,1)
- **Philosophy**: settling into place; settled state default, motion gated behind a JS class; respects prefers-reduced-motion

## Rules

### Composition

Content settles into warm parchment beds; cards never nest; nav sits open across the masthead; only the hero is full-bleed.

### Hierarchy

One terracotta primary action per view; secondary actions quiet; Fraunces display carries the headline, mono labels carry eyebrows.

### Density

Airy — generous whitespace, padding above every title.

### Signature

The strata gauge — every metric renders as a stacked soil core (topsoil, clay, mineral, moss root-zone); recurs as the brand seam, the divider rule, and the dashboard chart.

## Layout

### Grid

12-column, container max 1200px, minmax(0,1fr) columns with min-width:0

### Whitespace

generous; beds breathe; padding above titles

### Density

airy

### Responsive

single column on mobile with nav hidden and sidebar folded to a rail; contained content capped and centred on ultra-wide; only the hero spans 100vw

### Breakpoints

- **Sm**: 640px
- **Md**: 768px
- **Lg**: 1024px
- **Xl**: 1280px

## Guidance

### Do

- Render metrics as the strata gauge; keep the four-band order even when heights vary
- Use the three accents like highlighters; keep semantic colours quiet
- Pad above every title; let beds breathe
- Keep the nav open across the masthead
- Use warm shadows and a recessed sediment surface to separate, not borders

### Don't

- Use white #FFF surfaces or pure-black text
- Draw a border, hairline, or single accent edge on a card
- Mix in arbitrary radii outside {16,24,9999}
- Stamp the strata band where no depth is read until it becomes wallpaper
- Put emoji or symbol glyphs in copy or on buttons

### Accessibility

Body 17px, table rows 14.5px; bog-ink on parchment clears AA; accent text uses darkened pigment ink on soft washes; ARIA roles/states on switches and checkboxes; hero image decorative (aria-hidden); motion respects prefers-reduced-motion; all marks are SVG primitives.

## Imagery Direction

### Pairs With

loam

### Summary

Hand-painted earth-pigment strata washes with a botanical contour line on handmade-paper grain; the hero is a soil cross-section with a seedling rooting through the layers.

### Subjects

- soil cross-sections and core samples
- seedlings and root systems
- geological strata and sediment
- cultivated beds and compost
- botanical-plate plants

### Usage

Full-bleed strata hero with airy parchment negative space at the top for overlay legibility; feature spots as single centred subjects in mineral washes.

---
version: "alpha"
name: "Tilth"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#EFE6D4"
  surface: "#F8F2E6"
  surface_2: "#E7DBC4"
  text: "#2B1C12"
  muted: "#7E6A4F"
  border: "#D8C8A8"
  accent: "#B5532A"
  accent_2: "#5C7444"
  accent_3: "#C99A4E"
  on_accent: "#FBF6EC"
  success: "#4E6B33"
  warning: "#9A6B17"
  error: "#A53521"
  info: "#355E6E"
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: "Source Sans 3"
    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:
  sm: "16px"
  lg: "24px"
  pill: "9999px"
  card: "0px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
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-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: "#ffffff"
    typography: "{typography.label-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    height: "44px"
---

# Tilth

## Overview

Cultivated-earth interface — read the screen like a soil core. A faithful refinement of Nature Distilled Organic: same earth-pigment direction and tactile material honesty, brought to standard with three highlighter accents, one coherent organic geometry, an open masthead, and a full-viewport strata hero. The ground is warm parchment, never white; text is warm bog-ink, never black.

### Values

- organic warmth
- material honesty
- geological colour depth
- unhurried rhythm
- tactile authenticity

### Anti-Values

- synthetic brightness
- cold white minimalism
- rigid uniform geometry
- borders and accent edges
- muddy washes

## 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 | `#EFE6D4` |
| surface | `#F8F2E6` |
| surface_2 | `#E7DBC4` |
| text | `#2B1C12` |
| muted | `#7E6A4F` |
| border | `#D8C8A8` |
| accent | `#B5532A` |
| accent_2 | `#5C7444` |
| accent_3 | `#C99A4E` |
| on_accent | `#FBF6EC` |
| success | `#4E6B33` |
| warning | `#9A6B17` |
| error | `#A53521` |
| info | `#355E6E` |

## 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**: Source Sans 3, 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`

### Grid

12-column, container max 1200px, minmax(0,1fr) columns with min-width:0

### Whitespace

generous; beds breathe; padding above titles

### Density

airy

### Responsive

single column on mobile with nav hidden and sidebar folded to a rail; contained content capped and centred on ultra-wide; only the hero spans 100vw

### Breakpoints

- **Sm**: 640px
- **Md**: 768px
- **Lg**: 1024px
- **Xl**: 1280px

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 2px rgba(43,28,18,0.06)
- **Md**: 0 12px 32px -16px rgba(43,28,18,0.22)
- **Lg**: 0 28px 60px -28px rgba(43,28,18,0.30)

## Shapes

### Rounded

- **Sm**: `16px`
- **Lg**: `24px`
- **Pill**: `9999px`
- **Card**: `0px`

### Surfaces

- **Ground**: #EFE6D4
- **Raised**: #F8F2E6
- **Recessed**: #E7DBC4
- **Grain**: fractalNoise SVG at ~4% opacity

### Borders

- **Style**: none
- **Affordance**: inset 0 0 0 1.5px #D8C8A8 on inputs only
- **Character**: soft warm loam edge, never a card outline or accent edge

## Components

### Composition

Content settles into warm parchment beds; cards never nest; nav sits open across the masthead; only the hero is full-bleed.

### Hierarchy

One terracotta primary action per view; secondary actions quiet; Fraunces display carries the headline, mono labels carry eyebrows.

### Density

Airy — generous whitespace, padding above every title.

### Signature

The strata gauge — every metric renders as a stacked soil core (topsoil, clay, mineral, moss root-zone); recurs as the brand seam, the divider rule, and the dashboard chart.

## 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-019ef912-8e64-73f0-8713-6535e949e63a/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 Render metrics as the strata gauge; keep the four-band order even when heights vary
- Do Use the three accents like highlighters; keep semantic colours quiet
- Do Pad above every title; let beds breathe
- Do Keep the nav open across the masthead
- Do Use warm shadows and a recessed sediment surface to separate, not borders
- Don't Use white #FFF surfaces or pure-black text
- Don't Draw a border, hairline, or single accent edge on a card
- Don't Mix in arbitrary radii outside {16,24,9999}
- Don't Stamp the strata band where no depth is read until it becomes wallpaper
- Don't Put emoji or symbol glyphs in copy or on buttons

### Accessibility

Body 17px, table rows 14.5px; bog-ink on parchment clears AA; accent text uses darkened pigment ink on soft washes; ARIA roles/states on switches and checkboxes; hero image decorative (aria-hidden); motion respects prefers-reduced-motion; all marks are SVG primitives.

## Imagery Direction

### Pairs With

loam

### Summary

Hand-painted earth-pigment strata washes with a botanical contour line on handmade-paper grain; the hero is a soil cross-section with a seedling rooting through the layers.

### Subjects

- soil cross-sections and core samples
- seedlings and root systems
- geological strata and sediment
- cultivated beds and compost
- botanical-plate plants

### Usage

Full-bleed strata hero with airy parchment negative space at the top for overlay legibility; feature spots as single centred subjects in mineral washes.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tilth",
  "type": "registry:theme",
  "title": "Tilth shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#EFE6D4",
      "foreground": "#2B1C12",
      "card": "#F8F2E6",
      "card-foreground": "#2B1C12",
      "popover": "#F8F2E6",
      "popover-foreground": "#2B1C12",
      "primary": "#2B1C12",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#7E6A4F",
      "muted-foreground": "#2B1C12",
      "accent": "#B5532A",
      "accent-foreground": "#ffffff",
      "destructive": "#A53521",
      "border": "#D8C8A8",
      "input": "#D8C8A8",
      "ring": "#B5532A",
      "chart-1": "#2B1C12",
      "chart-2": "#f4f4f5",
      "chart-3": "#B5532A",
      "chart-4": "#4E6B33",
      "chart-5": "#9A6B17",
      "sidebar": "#F8F2E6",
      "sidebar-foreground": "#2B1C12",
      "sidebar-primary": "#2B1C12",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#355E6E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8C8A8",
      "sidebar-ring": "#B5532A",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2B1C12",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B5532A",
      "accent-foreground": "#ffffff",
      "destructive": "#A53521",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B5532A",
      "chart-1": "#2B1C12",
      "chart-2": "#f4f4f5",
      "chart-3": "#B5532A",
      "chart-4": "#4E6B33",
      "chart-5": "#9A6B17",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2B1C12",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B5532A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B5532A",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef912-8e64-73f0-8713-6535e949e63a",
    "slug": "tilth",
    "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",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "card",
        "lg",
        "pill",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "grain",
        "ground",
        "raised",
        "recessed"
      ],
      "borders": [
        "affordance",
        "character",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```