Nature Distilled Organic

# Nature Distilled Organic

## Philosophy

Organic warmth and earthy muted palettes define this language. Flowing anti-grid layouts break rigid uniformity, embracing nature-inspired surfaces, hand-touched textures, and the quiet sophistication of natural materials. Every element breathes like a living form — rounded, warm, and grounded in the earth.

### Values

- Organic forms over geometric rigidity — curves, blobs, and natural silhouettes replace sharp rectangles
- Natural material textures — paper grain, linen weave, wood fiber, and stone surfaces inform every background
- Warmth through earth tones — umber, sage, terracotta, and cream create a palette drawn from soil and sky
- Breathing whitespace like open meadows — generous spacing gives content room to exist without crowding
- Asymmetric balance — compositions feel hand-arranged rather than machine-snapped to a grid
- Tactile depth — subtle shadows and surface textures suggest physicality, as if elements were pressed into clay
- Slow, deliberate motion — transitions unfold like leaves, never jarring or mechanical
- Imperfection as beauty — slightly irregular shapes and organic edges signal authenticity over sterile precision

### Anti-Values

- Rigid 12-column grids that impose mechanical uniformity on every layout
- Cold corporate blue-gray palettes that strip warmth and humanity from interfaces
- Sharp geometric precision — perfect circles, exact right angles, pixel-perfect symmetry
- Neon and electric colors that scream for attention rather than invite quiet engagement
- Dense information packing that leaves no room for content to breathe

### Visual Character

- border-radius: 40% 60% 55% 45% / 60% 40% 50% 50% for organic blob shapes on feature cards and containers, creating forms that feel grown rather than manufactured
- background-color: #f5ebe0 with subtle paper texture via repeating radial-gradient(circle, rgba(139,115,85,0.03) 1px, transparent 1px) at 4px intervals for tactile warmth
- box-shadow: 0 8px 32px rgba(61,48,41,0.08), 0 2px 8px rgba(139,115,85,0.06) for warm earth-toned depth that feels like afternoon sunlight casting soft shadows
- font-family: 'Libre Baskerville', serif for headings with letter-spacing: -0.02em and color: #3d3029, creating the feel of ink pressed into handmade paper
- CSS grid with grid-template-columns: 1.2fr 0.8fr 1fr for asymmetric flowing layouts that avoid equal-width monotony and feel hand-composed

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#8b7355` |
| secondary | `#6b8f71` |
| accent | `#c4704b` |
| background | `#f5ebe0` |
| surface | `#faf6f0` |
| text | `#3d3029` |
| muted | `#9c8b7a` |
| border | `#e0d5c7` |
| error | `#c0392b` |
| success | `#5a8c5e` |
| warning | `#d4a03c` |
| info | `#6b8da6` |

### Typography

- **Heading Font**: Libre Baskerville
- **Heading Weight**: 700
- **Heading Style**: serif with tight letter-spacing for an editorial, ink-on-paper quality
- **Body Font**: Source Sans 3
- **Body Weight**: 400
- **Body Style**: clean humanist sans-serif for comfortable long-form reading
- **Mono Font**: IBM Plex Mono
- **Mono Weight**: 400
- **Scale**: 1.25 major third
- **Base Size**: 17px
- **Line Height**: 1.65
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap

### Spacing

- **Unit**: 8px
- **Xs**: 4px
- **Sm**: 8px
- **Md**: 16px
- **Lg**: 32px
- **Xl**: 48px
- **Xxl**: 80px
- **Section**: 120px
- **Philosophy**: Generous spacing evokes open meadows — content should never feel crowded or compressed

### Radii

- **Sm**: 12px
- **Md**: 20px
- **Lg**: 32px
- **Xl**: 40% 60% 55% 45% / 60% 40% 50% 50%
- **Pill**: 999px
- **Philosophy**: Large organic radii create blob-like forms; small elements use generous rounding; feature cards use asymmetric blob radii

### Shadows

- **Sm**: 0 2px 8px rgba(139,115,85,0.06)
- **Md**: 0 8px 32px rgba(61,48,41,0.08), 0 2px 8px rgba(139,115,85,0.06)
- **Lg**: 0 16px 48px rgba(61,48,41,0.12), 0 4px 16px rgba(139,115,85,0.08)
- **Inner**: inset 0 2px 4px rgba(61,48,41,0.05)
- **Philosophy**: Warm brown-tinted shadows evoke afternoon sunlight rather than cold neutral gray

### Surfaces

- **Treatment**: paper
- **Texture**: repeating radial-gradient(circle, rgba(139,115,85,0.03) 1px, transparent 1px) 0 0 / 4px 4px
- **Philosophy**: Every surface carries a subtle paper-grain texture suggesting natural material and handcraft

### Borders

- **Width**: 1px
- **Style**: none
- **Character**: borders are rare — separation through whitespace and subtle background color shifts
- **Focus Ring**: 0 0 0 3px rgba(139,115,85,0.25)
- **Philosophy**: Avoid hard lines; use color contrast and spacing to define boundaries organically

### Motion

- **Philosophy**: deliberate
- **Duration**: 400ms
- **Easing**: cubic-bezier(0.25, 0.46, 0.45, 0.94)
- **Hover Duration**: 250ms
- **Character**: Movements unfold like natural processes — slow, smooth, never abrupt or mechanical

## Rules

### Composition

- **Primary**: Asymmetric flowing layouts with varied column widths — never equal-width columns across a row
- **Secondary**: Content groups are separated by generous whitespace and subtle background color shifts, not borders or lines
- **Tertiary**: Visual hierarchy emerges from scale contrast and earth-tone color weight, not from bold outlines or heavy dividers
- **Philosophy**: Compositions should feel like a curated arrangement on a wooden table — intentional but not rigid, balanced but not symmetric

### Hierarchy

- **Primary**: Large Libre Baskerville headings in dark earth (#3d3029) anchor each section with editorial gravitas
- **Secondary**: Source Sans 3 body text at comfortable size with generous line-height for sustained reading
- **Tertiary**: Muted dusty tan (#9c8b7a) for secondary information, timestamps, and supporting labels
- **Emphasis**: Terracotta accent (#c4704b) for calls to action and key interactive elements — warm but not aggressive

### Density

- **Default**: Low to moderate — content breathes in generous whitespace, resembling a well-typeset book page
- **Compact**: Even compact modes maintain minimum 16px spacing between elements to preserve the organic feel
- **Philosophy**: Density is controlled by section spacing, not by cramming elements together — each card or group gets its own breathing room

### Signature Patterns

- Organic blob border-radius (40% 60% 55% 45% / 60% 40% 50% 50%) on feature cards and hero sections, creating shapes that feel grown from nature rather than cut by machine
- Warm paper-textured backgrounds using repeating radial-gradient with rgba(139,115,85,0.03) dots at 4px intervals across all surfaces for tactile depth
- Botanical and organic divider elements — subtle leaf-shaped SVG separators or wavy line dividers between content sections instead of straight horizontal rules
- Soft warm shadows with brown tint (rgba(61,48,41,0.08)) replacing standard gray shadows, evoking the warmth of afternoon sunlight on natural surfaces
- Flowing asymmetric layout grid using CSS grid with unequal column fractions (1.2fr 0.8fr 1fr) that break the monotony of equal-width columns

## Layout

### Grid System

- **Type**: asymmetric flowing grid
- **Philosophy**: Reject the rigid 12-column grid. Use CSS Grid with intentionally unequal column fractions to create layouts that feel hand-composed and organic.
- **Desktop Columns**: 1.2fr 0.8fr 1fr — three unequal columns that create natural visual flow
- **Tablet Columns**: 1.1fr 0.9fr — two slightly asymmetric columns
- **Mobile Columns**: 1fr — single column with generous side padding
- **Gap**: 32px desktop, 24px tablet, 16px mobile

### Breakpoints

- **Desktop**: 1440px
- **Tablet**: 768px
- **Mobile**: 375px
- **Philosophy**: Breakpoints are transition zones, not hard walls — layouts should feel natural at any width between breakpoints

### Container

- **Max Width**: 1200px
- **Padding Desktop**: 48px
- **Padding Tablet**: 32px
- **Padding Mobile**: 20px
- **Alignment**: centered with generous outer margins

### Whitespace

- **Section Gap**: 120px desktop, 80px tablet, 60px mobile
- **Card Gap**: 32px
- **Content Gap**: 16px
- **Philosophy**: Whitespace is not empty — it is the meadow that gives each content element room to grow and be seen

### Flow

- **Reading Direction**: natural left-to-right with staggered vertical offsets for visual interest
- **Card Layout**: masonry-inspired with organic vertical rhythm rather than perfectly aligned rows
- **Feature Sections**: alternating asymmetric layouts — text-left/image-right then reversed — to create gentle visual movement down the page

## Guidance

### Do

- Use organic blob border-radius on cards and containers to create natural, grown-from-earth shapes
- Apply warm paper textures to all surfaces using subtle repeating radial-gradient patterns
- Rely on whitespace and background color shifts instead of borders to separate content regions
- Choose earth-toned shadows (brown-tinted rgba) instead of default gray shadows everywhere
- Use Libre Baskerville for headings to evoke the gravitas of ink on handmade paper
- Employ asymmetric grid columns (1.2fr 0.8fr 1fr) for flowing, non-uniform layouts
- Let content breathe with generous section spacing (80-120px between major sections)
- Use terracotta accent (#c4704b) sparingly for primary calls to action — it should feel warm, not loud
- Include subtle organic divider elements (wavy lines, leaf shapes) instead of straight horizontal rules
- Ensure all interactive states use smooth 400ms transitions with organic easing curves

### Don't

- Never use a rigid 12-column grid — it contradicts the organic, flowing character of this language
- Never apply cold blue-gray colors — every neutral should lean warm (brown, tan, cream)
- Never use sharp 0px or 2px border-radius — minimum radius is 12px, and feature elements should use blob radii
- Never separate content with hard 1px solid borders — use whitespace or background color contrast instead
- Never use neon, electric, or saturated primary colors — the palette is earthy and muted
- Never pack content densely — minimum 16px gap between any two elements, even in compact views
- Never use abrupt or fast animations under 200ms — all motion should feel deliberate and natural
- Never use pure black (#000) or pure white (#fff) — the darkest tone is #3d3029, the lightest is #faf6f0
- Never center-align body text in wide columns — left-align for readability, center only for short headings
- Never use drop shadows with blue or cool-gray tint — always warm brown-based shadow colors

### Usage Context

- **Ideal For**: ["Wellness and mindfulness applications","Recipe and cooking platforms","Sustainable and eco-conscious brand sites","Botanical journals and nature-themed tools","Artisan marketplace and handcraft storefronts","Personal blogs and editorial publications"]
- **Not Ideal For**: ["High-density data dashboards requiring tight grids","Gaming interfaces needing electric energy and sharp contrast","Enterprise B2B tools where corporate formality is expected","Real-time trading or monitoring screens demanding compact layouts"]

### Accessibility

- **Contrast Ratio**: Body text #3d3029 on #f5ebe0 background achieves 8.2:1 contrast, exceeding WCAG AAA (7:1)
- **Focus Indicators**: Warm umber focus ring (0 0 0 3px rgba(139,115,85,0.35)) visible on all interactive elements
- **Motion Preference**: Respect prefers-reduced-motion by disabling all transitions and animations when set
- **Font Sizing**: Base 17px body text with 1.65 line-height ensures comfortable reading for all users
- **Color Independence**: Never rely on color alone to convey meaning — pair with icons, text labels, or patterns
- **Touch Targets**: Minimum 44x44px touch targets on all interactive elements for mobile accessibility

---
version: "alpha"
name: "Nature Distilled Organic"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#8b7355"
  secondary: "#6b8f71"
  accent: "#c4704b"
  background: "#f5ebe0"
  surface: "#faf6f0"
  text: "#3d3029"
  muted: "#9c8b7a"
  border: "#e0d5c7"
  error: "#c0392b"
  success: "#5a8c5e"
  warning: "#d4a03c"
  info: "#6b8da6"
typography:
  headline-lg:
    fontFamily: "Libre Baskerville"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Libre Baskerville"
    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: "12px"
  md: "20px"
  lg: "32px"
  xl: "0px"
  pill: "999px"
  philosophy: "0px"
spacing:
  unit: "8px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "48px"
  xxl: "80px"
  section: "120px"
  philosophy: "Generous spacing evokes open meadows — content should never feel crowded or compressed"
components:
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.primary}"
    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"
---

# Nature Distilled Organic

## Overview

Organic warmth and earthy muted palettes define this language. Flowing anti-grid layouts break rigid uniformity, embracing nature-inspired surfaces, hand-touched textures, and the quiet sophistication of natural materials. Every element breathes like a living form — rounded, warm, and grounded in the earth.

### Values

- Organic forms over geometric rigidity — curves, blobs, and natural silhouettes replace sharp rectangles
- Natural material textures — paper grain, linen weave, wood fiber, and stone surfaces inform every background
- Warmth through earth tones — umber, sage, terracotta, and cream create a palette drawn from soil and sky
- Breathing whitespace like open meadows — generous spacing gives content room to exist without crowding
- Asymmetric balance — compositions feel hand-arranged rather than machine-snapped to a grid
- Tactile depth — subtle shadows and surface textures suggest physicality, as if elements were pressed into clay
- Slow, deliberate motion — transitions unfold like leaves, never jarring or mechanical
- Imperfection as beauty — slightly irregular shapes and organic edges signal authenticity over sterile precision

### Anti-Values

- Rigid 12-column grids that impose mechanical uniformity on every layout
- Cold corporate blue-gray palettes that strip warmth and humanity from interfaces
- Sharp geometric precision — perfect circles, exact right angles, pixel-perfect symmetry
- Neon and electric colors that scream for attention rather than invite quiet engagement
- Dense information packing that leaves no room for content to breathe

### Visual Character

- border-radius: 40% 60% 55% 45% / 60% 40% 50% 50% for organic blob shapes on feature cards and containers, creating forms that feel grown rather than manufactured
- background-color: #f5ebe0 with subtle paper texture via repeating radial-gradient(circle, rgba(139,115,85,0.03) 1px, transparent 1px) at 4px intervals for tactile warmth
- box-shadow: 0 8px 32px rgba(61,48,41,0.08), 0 2px 8px rgba(139,115,85,0.06) for warm earth-toned depth that feels like afternoon sunlight casting soft shadows
- font-family: 'Libre Baskerville', serif for headings with letter-spacing: -0.02em and color: #3d3029, creating the feel of ink pressed into handmade paper
- CSS grid with grid-template-columns: 1.2fr 0.8fr 1fr for asymmetric flowing layouts that avoid equal-width monotony and feel hand-composed

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| primary | `#8b7355` |
| secondary | `#6b8f71` |
| accent | `#c4704b` |
| background | `#f5ebe0` |
| surface | `#faf6f0` |
| text | `#3d3029` |
| muted | `#9c8b7a` |
| border | `#e0d5c7` |
| error | `#c0392b` |
| success | `#5a8c5e` |
| warning | `#d4a03c` |
| info | `#6b8da6` |

## Typography

- **Headline-Lg**: Libre Baskerville, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Libre Baskerville, 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

- **Unit**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `16px`
- **Lg**: `32px`
- **Xl**: `48px`
- **Xxl**: `80px`
- **Section**: `120px`
- **Philosophy**: `Generous spacing evokes open meadows — content should never feel crowded or compressed`

### Grid System

- **Type**: asymmetric flowing grid
- **Philosophy**: Reject the rigid 12-column grid. Use CSS Grid with intentionally unequal column fractions to create layouts that feel hand-composed and organic.
- **Desktop Columns**: 1.2fr 0.8fr 1fr — three unequal columns that create natural visual flow
- **Tablet Columns**: 1.1fr 0.9fr — two slightly asymmetric columns
- **Mobile Columns**: 1fr — single column with generous side padding
- **Gap**: 32px desktop, 24px tablet, 16px mobile

### Breakpoints

- **Desktop**: 1440px
- **Tablet**: 768px
- **Mobile**: 375px
- **Philosophy**: Breakpoints are transition zones, not hard walls — layouts should feel natural at any width between breakpoints

### Container

- **Max Width**: 1200px
- **Padding Desktop**: 48px
- **Padding Tablet**: 32px
- **Padding Mobile**: 20px
- **Alignment**: centered with generous outer margins

### Whitespace

- **Section Gap**: 120px desktop, 80px tablet, 60px mobile
- **Card Gap**: 32px
- **Content Gap**: 16px
- **Philosophy**: Whitespace is not empty — it is the meadow that gives each content element room to grow and be seen

### Flow

- **Reading Direction**: natural left-to-right with staggered vertical offsets for visual interest
- **Card Layout**: masonry-inspired with organic vertical rhythm rather than perfectly aligned rows
- **Feature Sections**: alternating asymmetric layouts — text-left/image-right then reversed — to create gentle visual movement down the page

## Elevation & Depth

### Shadows

- **Sm**: 0 2px 8px rgba(139,115,85,0.06)
- **Md**: 0 8px 32px rgba(61,48,41,0.08), 0 2px 8px rgba(139,115,85,0.06)
- **Lg**: 0 16px 48px rgba(61,48,41,0.12), 0 4px 16px rgba(139,115,85,0.08)
- **Inner**: inset 0 2px 4px rgba(61,48,41,0.05)
- **Philosophy**: Warm brown-tinted shadows evoke afternoon sunlight rather than cold neutral gray

## Shapes

### Rounded

- **Sm**: `12px`
- **Md**: `20px`
- **Lg**: `32px`
- **Xl**: `0px`
- **Pill**: `999px`
- **Philosophy**: `0px`

### Surfaces

- **Treatment**: paper
- **Texture**: repeating radial-gradient(circle, rgba(139,115,85,0.03) 1px, transparent 1px) 0 0 / 4px 4px
- **Philosophy**: Every surface carries a subtle paper-grain texture suggesting natural material and handcraft

### Borders

- **Width**: 1px
- **Style**: none
- **Character**: borders are rare — separation through whitespace and subtle background color shifts
- **Focus Ring**: 0 0 0 3px rgba(139,115,85,0.25)
- **Philosophy**: Avoid hard lines; use color contrast and spacing to define boundaries organically

## Components

### Composition

- **Primary**: Asymmetric flowing layouts with varied column widths — never equal-width columns across a row
- **Secondary**: Content groups are separated by generous whitespace and subtle background color shifts, not borders or lines
- **Tertiary**: Visual hierarchy emerges from scale contrast and earth-tone color weight, not from bold outlines or heavy dividers
- **Philosophy**: Compositions should feel like a curated arrangement on a wooden table — intentional but not rigid, balanced but not symmetric

### Hierarchy

- **Primary**: Large Libre Baskerville headings in dark earth (#3d3029) anchor each section with editorial gravitas
- **Secondary**: Source Sans 3 body text at comfortable size with generous line-height for sustained reading
- **Tertiary**: Muted dusty tan (#9c8b7a) for secondary information, timestamps, and supporting labels
- **Emphasis**: Terracotta accent (#c4704b) for calls to action and key interactive elements — warm but not aggressive

### Density

- **Default**: Low to moderate — content breathes in generous whitespace, resembling a well-typeset book page
- **Compact**: Even compact modes maintain minimum 16px spacing between elements to preserve the organic feel
- **Philosophy**: Density is controlled by section spacing, not by cramming elements together — each card or group gets its own breathing room

### Signature Patterns

- Organic blob border-radius (40% 60% 55% 45% / 60% 40% 50% 50%) on feature cards and hero sections, creating shapes that feel grown from nature rather than cut by machine
- Warm paper-textured backgrounds using repeating radial-gradient with rgba(139,115,85,0.03) dots at 4px intervals across all surfaces for tactile depth
- Botanical and organic divider elements — subtle leaf-shaped SVG separators or wavy line dividers between content sections instead of straight horizontal rules
- Soft warm shadows with brown tint (rgba(61,48,41,0.08)) replacing standard gray shadows, evoking the warmth of afternoon sunlight on natural surfaces
- Flowing asymmetric layout grid using CSS grid with unequal column fractions (1.2fr 0.8fr 1fr) that break the monotony of equal-width columns

## 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-019dacb3-13a1-70c2-896c-6bd0df3ae660/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 organic blob border-radius on cards and containers to create natural, grown-from-earth shapes
- Do Apply warm paper textures to all surfaces using subtle repeating radial-gradient patterns
- Do Rely on whitespace and background color shifts instead of borders to separate content regions
- Do Choose earth-toned shadows (brown-tinted rgba) instead of default gray shadows everywhere
- Do Use Libre Baskerville for headings to evoke the gravitas of ink on handmade paper
- Do Employ asymmetric grid columns (1.2fr 0.8fr 1fr) for flowing, non-uniform layouts
- Do Let content breathe with generous section spacing (80-120px between major sections)
- Do Use terracotta accent (#c4704b) sparingly for primary calls to action — it should feel warm, not loud
- Do Include subtle organic divider elements (wavy lines, leaf shapes) instead of straight horizontal rules
- Do Ensure all interactive states use smooth 400ms transitions with organic easing curves
- Don't Never use a rigid 12-column grid — it contradicts the organic, flowing character of this language
- Don't Never apply cold blue-gray colors — every neutral should lean warm (brown, tan, cream)
- Don't Never use sharp 0px or 2px border-radius — minimum radius is 12px, and feature elements should use blob radii
- Don't Never separate content with hard 1px solid borders — use whitespace or background color contrast instead
- Don't Never use neon, electric, or saturated primary colors — the palette is earthy and muted
- Don't Never pack content densely — minimum 16px gap between any two elements, even in compact views
- Don't Never use abrupt or fast animations under 200ms — all motion should feel deliberate and natural
- Don't Never use pure black (#000) or pure white (#fff) — the darkest tone is #3d3029, the lightest is #faf6f0
- Don't Never center-align body text in wide columns — left-align for readability, center only for short headings
- Don't Never use drop shadows with blue or cool-gray tint — always warm brown-based shadow colors

### Usage Context

- **Ideal For**: ["Wellness and mindfulness applications","Recipe and cooking platforms","Sustainable and eco-conscious brand sites","Botanical journals and nature-themed tools","Artisan marketplace and handcraft storefronts","Personal blogs and editorial publications"]
- **Not Ideal For**: ["High-density data dashboards requiring tight grids","Gaming interfaces needing electric energy and sharp contrast","Enterprise B2B tools where corporate formality is expected","Real-time trading or monitoring screens demanding compact layouts"]

### Accessibility

- **Contrast Ratio**: Body text #3d3029 on #f5ebe0 background achieves 8.2:1 contrast, exceeding WCAG AAA (7:1)
- **Focus Indicators**: Warm umber focus ring (0 0 0 3px rgba(139,115,85,0.35)) visible on all interactive elements
- **Motion Preference**: Respect prefers-reduced-motion by disabling all transitions and animations when set
- **Font Sizing**: Base 17px body text with 1.65 line-height ensures comfortable reading for all users
- **Color Independence**: Never rely on color alone to convey meaning — pair with icons, text labels, or patterns
- **Touch Targets**: Minimum 44x44px touch targets on all interactive elements for mobile accessibility

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "nature-distilled-organic-v2",
  "type": "registry:theme",
  "title": "Nature Distilled Organic shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#f5ebe0",
      "foreground": "#3d3029",
      "card": "#faf6f0",
      "card-foreground": "#3d3029",
      "popover": "#faf6f0",
      "popover-foreground": "#3d3029",
      "primary": "#8b7355",
      "primary-foreground": "#ffffff",
      "secondary": "#6b8f71",
      "secondary-foreground": "#ffffff",
      "muted": "#9c8b7a",
      "muted-foreground": "#3d3029",
      "accent": "#c4704b",
      "accent-foreground": "#ffffff",
      "destructive": "#c0392b",
      "border": "#e0d5c7",
      "input": "#e0d5c7",
      "ring": "#c4704b",
      "chart-1": "#8b7355",
      "chart-2": "#6b8f71",
      "chart-3": "#c4704b",
      "chart-4": "#5a8c5e",
      "chart-5": "#d4a03c",
      "sidebar": "#faf6f0",
      "sidebar-foreground": "#3d3029",
      "sidebar-primary": "#8b7355",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#6b8da6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#e0d5c7",
      "sidebar-ring": "#c4704b",
      "radius": "20px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#8b7355",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#c4704b",
      "accent-foreground": "#ffffff",
      "destructive": "#c0392b",
      "border": "#303642",
      "input": "#303642",
      "ring": "#c4704b",
      "chart-1": "#8b7355",
      "chart-2": "#6b8f71",
      "chart-3": "#c4704b",
      "chart-4": "#5a8c5e",
      "chart-5": "#d4a03c",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#8b7355",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#c4704b",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#c4704b",
      "radius": "20px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019dacb3-13a1-70c2-896c-6bd0df3ae660",
    "slug": "nature-distilled-organic-v2",
    "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",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_style",
        "body_weight",
        "google_fonts_url",
        "heading_font",
        "heading_style",
        "heading_weight",
        "line_height",
        "mono_font",
        "mono_weight",
        "scale"
      ],
      "spacing": [
        "lg",
        "md",
        "philosophy",
        "section",
        "sm",
        "unit",
        "xl",
        "xs",
        "xxl"
      ],
      "radii": [
        "lg",
        "md",
        "philosophy",
        "pill",
        "sm",
        "xl"
      ],
      "shadows": [
        "inner",
        "lg",
        "md",
        "philosophy",
        "sm"
      ],
      "surfaces": [
        "philosophy",
        "texture",
        "treatment"
      ],
      "borders": [
        "character",
        "focus_ring",
        "philosophy",
        "style",
        "width"
      ],
      "motion": [
        "character",
        "duration",
        "easing",
        "hover_duration",
        "philosophy"
      ]
    }
  }
}
```