Sediment

# Sediment

## Philosophy

A warm, granulated design language drawn from a cut riverbank. Earth pigments settle into paper tooth, soft organic blooms mark what matters, and unequal layered strata bands carry the structure of every screen. Built up in layers, never stamped from steel; read each layout like a core sample, top to bottom.

### Values

- Layered structure over rigid grids — unequal strata bands stacked by time, the way a riverbank reveals its history when it is cut
- Warm earth tones — terracotta, river sage, clay ochre, oat cream, umber ink; every neutral leans warm, never cold
- Granulated paper tooth on every surface so cream reads as pressed paper, not sterile white
- Accent as highlighter — soft organic pigment blooms behind key moments, never poured wall to wall
- Settled, deliberate motion, like pigment finding its level
- Separation by whitespace, surface shift, and warm umber-tinted shadow — never grey borders

### Anti-Values

- Rigid equal-column grids that snap everything to a machine rhythm
- Cold corporate blue-grey palettes and grey borders
- Pure black or pure white anywhere
- Accent colour flooded edge to edge across a panel
- Flat sterile surfaces with no paper grain
- Symbol glyphs (arrows, triangles) standing in for real icons

### Visual Character

- Strata band: a row of unequal-width horizontal earth-pigment layers (oat, ochre, terracotta, burnt clay, umber) used as the structural signature on hero, stat cards, KPIs, the palette ramp, progress meters, and the footer
- Pigment bloom: a soft blurred organic colour pool seated behind hero copy and key cards — accent used like a highlighter, never a full-bleed flood
- Granulated paper tooth: a faint radial-dot grain under every surface (radial-gradient at 5px intervals)
- Fraunces optical serif headings with letter-spacing -0.02em for ink-on-paper gravitas, over Source Sans 3 body
- Warm umber-tinted shadows (rgba(56,42,32,0.10)) like afternoon light, never cold grey
- Asymmetric flowing grids (1.3fr 0.85fr 1.05fr) over equal-width monotony

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#f0e6d4` |
| surface | `#faf4e8` |
| surface-2 | `#e7d9c2` |
| text | `#382a20` |
| muted | `#8a755e` |
| border | `#ddccb2` |
| accent | `#c25a32` |
| accent-2 | `#5f7e57` |
| accent-3 | `#bd8a2c` |
| on-accent | `#fbf3e6` |
| on-accent-2 | `#f3f6ee` |
| success | `#5f7e57` |
| warning | `#bd8a2c` |
| error | `#b23f2e` |
| info | `#5a7d8c` |

### 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
- **Line Height**: 1.65
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap

### Radii

- **Sm**: 16px
- **Md**: 24px
- **Pill**: 9999px
- **Blob**: 42% 58% 56% 44% / 56% 42% 58% 44%

### Shadows

- **Sm**: 0 2px 10px rgba(56,42,32,0.07)
- **Md**: 0 14px 40px rgba(56,42,32,0.10), 0 3px 10px rgba(56,42,32,0.06)
- **Lg**: 0 26px 70px rgba(56,42,32,0.16), 0 6px 18px rgba(56,42,32,0.08)

### Spacing

- **Base**: 8px
- **Scale**: ["8px","16px","24px","40px","64px","96px","128px"]

### Surfaces

- **Treatment**: granulated paper
- **Texture**: radial-gradient(circle at 1px 1px, rgba(56,42,32,0.035) 1px, transparent 0) 0 0 / 5px 5px

### Borders

- **Width**: 0
- **Style**: none
- **Character**: Separation through whitespace, surface shift, and warm shadow; the rare hairline is a faint warm tan #ddccb2, never grey
- **Focus Ring**: 0 0 0 3px rgba(194,90,50,0.18)

### Motion

- **Duration**: 460ms
- **Easing**: cubic-bezier(0.22, 0.61, 0.36, 1)
- **Character**: Deliberate and settled, like pigment finding its level; reveal motion is layered over a fully-rendered default and disabled under prefers-reduced-motion

### Strata Ramp

- **0**: #e7d9c2
- **1**: #d9c19c
- **2**: #cba66f
- **3**: #c08a4e
- **4**: #a96a3c
- **5**: #8a4f30

## Rules

### Composition

Asymmetric flowing grids (1.3fr 0.85fr 1.05fr) over equal-width columns; content groups separated by whitespace, surface shift, and warm shadow, never borders or lines; titles always padded from the top of their container.

### Hierarchy

Fraunces serif headings in umber ink anchor each section; Source Sans 3 body at 17px+ with 1.65 line-height for sustained reading; dusty tan #8a755e for secondary labels; terracotta #c25a32 for the one clearly-primary action, sage and ochre quieter.

### Density

Low to moderate — content breathes; minimum 16px between elements even in compact views; density tuned by section spacing, not by cramming.

### Signature

The strata band (unequal stacked earth layers) is the structural signature woven through progress, stats, cards, and section rhythm; the pigment bloom is the accent-as-highlighter motif; granulated paper tooth rides under every surface.

## Layout

### Grid

Asymmetric flowing grid with intentionally unequal column fractions (1.3fr 0.85fr 1.05fr desktop); reject the rigid equal-column grid.

### Whitespace

Generous — 96-128px between major sections; 24px card gaps; titles always padded above.

### Density

Content breathes like open ground; never packed.

### Responsive

Single column on mobile with hidden non-essential nav and table columns; capped centred content on ultra-wide; only the full-bleed hero spans 100vw; grids shrink children (minmax(0,1fr) + min-width:0) rather than overflow.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Ultrawide**: 2560px

## Guidance

### Do

- Use strata bands as the structural signature on progress, stats, and section rhythm
- Keep pigment blooms soft and seated behind content — accent as highlighter
- Ride the granulated paper tooth under every surface
- Stay warm: every neutral leans brown, tan, or cream
- Separate with whitespace and warm umber-tinted shadow, never grey borders
- Set the one primary action in terracotta; keep sage and ochre quieter
- Use Fraunces for headings to evoke ink pressed into paper
- Use asymmetric grid columns for flowing, hand-composed layouts

### Don't

- Never use a rigid equal-column grid
- Never use pure black, pure white, or cold blue-grey
- Never flood a panel edge to edge with an accent colour
- Never give a card a single accent edge or trap navigation in a floating pill
- Never use symbol glyphs (arrows, triangles) in copy — use SVG primitives
- Never ship a flat sterile surface with no paper grain
- Never use cold grey shadows — always warm umber-tinted

### Accessibility

Body text #382a20 on the oat ground #f0e6d4 clears WCAG AAA at 8.2:1; warm terracotta focus ring (0 0 0 3px rgba(194,90,50,0.18)) on all interactive elements; 44x44px minimum touch targets; never rely on colour alone — pair with SVG icons and text labels; full prefers-reduced-motion support disabling all transitions.

## Imagery Direction

### Pairs With

marl

### Summary

Granulating watercolour-and-gouache washes (the Marl technique) applied to riverbank and earth subjects — layered sediment strata, clay riverbends, mossy banks — pigment settling into warm paper tooth with soft blooms and feathered edges. Warm muted earth palette throughout.

### Subjects

- riverbank sediment strata
- clay riverbend
- layered earth and loam
- mossy bank
- core sample cross-section
- quiet field landscape

### Usage

Full-bleed landing hero in the Marl wash technique; feature and avatar imagery in the same granulating-watercolour treatment, always warm and earthy, never neon or cold.

---
version: "alpha"
name: "Sediment"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#f0e6d4"
  surface: "#faf4e8"
  surface-2: "#e7d9c2"
  text: "#382a20"
  muted: "#8a755e"
  border: "#ddccb2"
  accent: "#c25a32"
  accent-2: "#5f7e57"
  accent-3: "#bd8a2c"
  on-accent: "#fbf3e6"
  on-accent-2: "#f3f6ee"
  success: "#5f7e57"
  warning: "#bd8a2c"
  error: "#b23f2e"
  info: "#5a7d8c"
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"
  md: "24px"
  pill: "9999px"
  blob: "0px"
spacing:
  base: "8px"
  xs: "8px"
  sm: "16px"
  md: "24px"
  lg: "40px"
  xl: "64px"
  2xl: "96px"
  3xl: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface-2:
    backgroundColor: "{colors.surface-2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent-2:
    backgroundColor: "{colors.accent-2}"
  color-reference-accent-3:
    backgroundColor: "{colors.accent-3}"
  color-reference-on-accent:
    backgroundColor: "{colors.on-accent}"
  color-reference-on-accent-2:
    backgroundColor: "{colors.on-accent-2}"
  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"
---

# Sediment

## Overview

A warm, granulated design language drawn from a cut riverbank. Earth pigments settle into paper tooth, soft organic blooms mark what matters, and unequal layered strata bands carry the structure of every screen. Built up in layers, never stamped from steel; read each layout like a core sample, top to bottom.

### Values

- Layered structure over rigid grids — unequal strata bands stacked by time, the way a riverbank reveals its history when it is cut
- Warm earth tones — terracotta, river sage, clay ochre, oat cream, umber ink; every neutral leans warm, never cold
- Granulated paper tooth on every surface so cream reads as pressed paper, not sterile white
- Accent as highlighter — soft organic pigment blooms behind key moments, never poured wall to wall
- Settled, deliberate motion, like pigment finding its level
- Separation by whitespace, surface shift, and warm umber-tinted shadow — never grey borders

### Anti-Values

- Rigid equal-column grids that snap everything to a machine rhythm
- Cold corporate blue-grey palettes and grey borders
- Pure black or pure white anywhere
- Accent colour flooded edge to edge across a panel
- Flat sterile surfaces with no paper grain
- Symbol glyphs (arrows, triangles) standing in for real icons

### Visual Character

- Strata band: a row of unequal-width horizontal earth-pigment layers (oat, ochre, terracotta, burnt clay, umber) used as the structural signature on hero, stat cards, KPIs, the palette ramp, progress meters, and the footer
- Pigment bloom: a soft blurred organic colour pool seated behind hero copy and key cards — accent used like a highlighter, never a full-bleed flood
- Granulated paper tooth: a faint radial-dot grain under every surface (radial-gradient at 5px intervals)
- Fraunces optical serif headings with letter-spacing -0.02em for ink-on-paper gravitas, over Source Sans 3 body
- Warm umber-tinted shadows (rgba(56,42,32,0.10)) like afternoon light, never cold grey
- Asymmetric flowing grids (1.3fr 0.85fr 1.05fr) over equal-width monotony

## 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 | `#f0e6d4` |
| surface | `#faf4e8` |
| surface-2 | `#e7d9c2` |
| text | `#382a20` |
| muted | `#8a755e` |
| border | `#ddccb2` |
| accent | `#c25a32` |
| accent-2 | `#5f7e57` |
| accent-3 | `#bd8a2c` |
| on-accent | `#fbf3e6` |
| on-accent-2 | `#f3f6ee` |
| success | `#5f7e57` |
| warning | `#bd8a2c` |
| error | `#b23f2e` |
| info | `#5a7d8c` |

## 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**: `8px`
- **Sm**: `16px`
- **Md**: `24px`
- **Lg**: `40px`
- **Xl**: `64px`
- **2xl**: `96px`
- **3xl**: `128px`

### Grid

Asymmetric flowing grid with intentionally unequal column fractions (1.3fr 0.85fr 1.05fr desktop); reject the rigid equal-column grid.

### Whitespace

Generous — 96-128px between major sections; 24px card gaps; titles always padded above.

### Density

Content breathes like open ground; never packed.

### Responsive

Single column on mobile with hidden non-essential nav and table columns; capped centred content on ultra-wide; only the full-bleed hero spans 100vw; grids shrink children (minmax(0,1fr) + min-width:0) rather than overflow.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Sm**: 0 2px 10px rgba(56,42,32,0.07)
- **Md**: 0 14px 40px rgba(56,42,32,0.10), 0 3px 10px rgba(56,42,32,0.06)
- **Lg**: 0 26px 70px rgba(56,42,32,0.16), 0 6px 18px rgba(56,42,32,0.08)

## Shapes

### Rounded

- **Sm**: `16px`
- **Md**: `24px`
- **Pill**: `9999px`
- **Blob**: `0px`

### Surfaces

- **Treatment**: granulated paper
- **Texture**: radial-gradient(circle at 1px 1px, rgba(56,42,32,0.035) 1px, transparent 0) 0 0 / 5px 5px

### Borders

- **Width**: 0
- **Style**: none
- **Character**: Separation through whitespace, surface shift, and warm shadow; the rare hairline is a faint warm tan #ddccb2, never grey
- **Focus Ring**: 0 0 0 3px rgba(194,90,50,0.18)

## Components

### Composition

Asymmetric flowing grids (1.3fr 0.85fr 1.05fr) over equal-width columns; content groups separated by whitespace, surface shift, and warm shadow, never borders or lines; titles always padded from the top of their container.

### Hierarchy

Fraunces serif headings in umber ink anchor each section; Source Sans 3 body at 17px+ with 1.65 line-height for sustained reading; dusty tan #8a755e for secondary labels; terracotta #c25a32 for the one clearly-primary action, sage and ochre quieter.

### Density

Low to moderate — content breathes; minimum 16px between elements even in compact views; density tuned by section spacing, not by cramming.

### Signature

The strata band (unequal stacked earth layers) is the structural signature woven through progress, stats, cards, and section rhythm; the pigment bloom is the accent-as-highlighter motif; granulated paper tooth rides under every surface.

## 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-019efb5a-632b-7532-9c5e-7de938621b3e/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 Use strata bands as the structural signature on progress, stats, and section rhythm
- Do Keep pigment blooms soft and seated behind content — accent as highlighter
- Do Ride the granulated paper tooth under every surface
- Do Stay warm: every neutral leans brown, tan, or cream
- Do Separate with whitespace and warm umber-tinted shadow, never grey borders
- Do Set the one primary action in terracotta; keep sage and ochre quieter
- Do Use Fraunces for headings to evoke ink pressed into paper
- Do Use asymmetric grid columns for flowing, hand-composed layouts
- Don't Never use a rigid equal-column grid
- Don't Never use pure black, pure white, or cold blue-grey
- Don't Never flood a panel edge to edge with an accent colour
- Don't Never give a card a single accent edge or trap navigation in a floating pill
- Don't Never use symbol glyphs (arrows, triangles) in copy — use SVG primitives
- Don't Never ship a flat sterile surface with no paper grain
- Don't Never use cold grey shadows — always warm umber-tinted

### Accessibility

Body text #382a20 on the oat ground #f0e6d4 clears WCAG AAA at 8.2:1; warm terracotta focus ring (0 0 0 3px rgba(194,90,50,0.18)) on all interactive elements; 44x44px minimum touch targets; never rely on colour alone — pair with SVG icons and text labels; full prefers-reduced-motion support disabling all transitions.

## Imagery Direction

### Pairs With

marl

### Summary

Granulating watercolour-and-gouache washes (the Marl technique) applied to riverbank and earth subjects — layered sediment strata, clay riverbends, mossy banks — pigment settling into warm paper tooth with soft blooms and feathered edges. Warm muted earth palette throughout.

### Subjects

- riverbank sediment strata
- clay riverbend
- layered earth and loam
- mossy bank
- core sample cross-section
- quiet field landscape

### Usage

Full-bleed landing hero in the Marl wash technique; feature and avatar imagery in the same granulating-watercolour treatment, always warm and earthy, never neon or cold.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sediment",
  "type": "registry:theme",
  "title": "Sediment shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#f0e6d4",
      "foreground": "#382a20",
      "card": "#faf4e8",
      "card-foreground": "#382a20",
      "popover": "#faf4e8",
      "popover-foreground": "#382a20",
      "primary": "#382a20",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8a755e",
      "muted-foreground": "#382a20",
      "accent": "#c25a32",
      "accent-foreground": "#ffffff",
      "destructive": "#b23f2e",
      "border": "#ddccb2",
      "input": "#ddccb2",
      "ring": "#c25a32",
      "chart-1": "#382a20",
      "chart-2": "#f4f4f5",
      "chart-3": "#c25a32",
      "chart-4": "#5f7e57",
      "chart-5": "#bd8a2c",
      "sidebar": "#faf4e8",
      "sidebar-foreground": "#382a20",
      "sidebar-primary": "#382a20",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5a7d8c",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#ddccb2",
      "sidebar-ring": "#c25a32",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#382a20",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#c25a32",
      "accent-foreground": "#ffffff",
      "destructive": "#b23f2e",
      "border": "#303642",
      "input": "#303642",
      "ring": "#c25a32",
      "chart-1": "#382a20",
      "chart-2": "#f4f4f5",
      "chart-3": "#c25a32",
      "chart-4": "#5f7e57",
      "chart-5": "#bd8a2c",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#382a20",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#c25a32",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#c25a32",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efb5a-632b-7532-9c5e-7de938621b3e",
    "slug": "sediment",
    "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",
        "on-accent-2",
        "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": [
        "blob",
        "md",
        "pill",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "texture",
        "treatment"
      ],
      "borders": [
        "character",
        "focus_ring",
        "style",
        "width"
      ],
      "motion": [
        "character",
        "duration",
        "easing"
      ]
    }
  }
}
```