Sumiha

# Sumiha

## Philosophy

A nocturnal herbarium design language: each interface record is studied like a botanical specimen painted by lamplight — a luminous pigment bloom glowing on deep ink-green ground, traced in pale herbarium ink and annotated like a midnight study sheet. It takes the essence of botanical watercolour (translucent washes, organic bloom, specimen annotation) and inverts the ground from ivory paper to night, so saturated colour sings against the dark rather than against white.

### Values

- saturated washes that glow against a dark ink-green ground
- specimen-sheet discipline: serif titles, mono codes, hairline annotation rules
- calm dark space with pigment blooms instead of flat chrome panels

### Anti-Values

- white or grey minimal defaults
- accent edges and borders as separators
- muddy desaturated washes or dense chrome machinery

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0E1512` |
| surface | `#16201B` |
| surface_2 | `#1E2C24` |
| text | `#ECF3EC` |
| muted | `#8FA596` |
| border | `#2A3A30` |
| on_accent | `#0E1512` |
| accent | `#5FD6A0` |
| accent_amber | `#E0A85A` |
| accent_rose | `#E08AA0` |
| success | `#5FD6A0` |
| warning | `#E0A85A` |
| error | `#E0727E` |
| info | `#6FB6C2` |

### Typography

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

### Radii

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

### Shadows

- **Sm**: 0 6px 18px rgba(0,0,0,0.35)
- **Md**: 0 18px 44px rgba(0,0,0,0.45)
- **Lg**: 0 34px 80px rgba(0,0,0,0.55)

### Spacing

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

### Surfaces

- **Treatment**: pigment-bloom
- **Card Style**: Deep leaf-shadow surfaces lifted off an ink-green ground, each carrying a translucent radial accent bloom behind content; optional leaf silhouette clipped into a corner. No borders, no accent edges.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders as separators; a single hairline deckle rule (#2A3A30) appears only as a catalogue annotation marker, never as a card edge.

### Motion

- **Duration**: 320ms
- **Easing**: cubic-bezier(0.22,1,0.36,1)
- **Philosophy**: deliberate; landing settles via an .anim enhancement and respects prefers-reduced-motion

## Rules

### Composition

Build screens around one dominant luminous specimen on the dark ground, with a secondary annotation rail and supporting bloom modules in airy bands; the landing opens on a full-viewport watercolour hero with copy on a left-weighted scrim.

### Hierarchy

High-contrast Fraunces serif titles for specimens and headlines, tiny uppercase Space Mono specimen codes with hairline rules, and pale Spectral body for notes and measurements.

### Density

Low to medium; modules breathe in quiet dark space with selective bursts where study data matters.

### Signature

Pigment bloom — a translucent radial accent pool painted behind every module, mapped to semantic roles so it recolours on palette swap; paired with serif+mono specimen annotation, capsule controls that saturate on hover, and corner leaf silhouettes.

## Layout

### Grid

12-column desktop with a wide reading gutter, collapsing to a single flowing column on mobile; minmax(0,1fr) columns and min-width:0 children so grids never overflow.

### Whitespace

Quiet dark space behaves like night around a lamplit study: broad margins, soft section breathing room, padding always above titles.

### Density

Generous; one dominant specimen panel instead of equal card rows.

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile, capped centred content on ultra-wide, only the hero spans 100vw.

### Breakpoints

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

## Guidance

### Do

- Let saturated jade, amber, and rose washes bloom on the dark ground; keep neutrals quiet and tuned cool-green.
- Frame every module like a herbarium plate: serif title, uppercase mono code, hairline rule extending into whitespace.
- Style every control as a capsule with a visible jade focus ring; keep one button clearly primary.
- Use the watercolour specimen as the dominant hero and let it carry the full-bleed.

### Don't

- Do not default to white or grey — the concept is nocturnal.
- Do not give any card an accent edge or border, and do not nest cards.
- Do not use emoji or symbol glyphs; use SVG primitives.
- Do not drown the dark ground in texture; preserve quiet space.

### Accessibility

Pale herbarium ink (#ECF3EC) on ink-green ground exceeds 4.5:1; accent washes carry full-strength text on tinted chips; all controls have visible focus rings; motion respects prefers-reduced-motion; status conveyed by label plus colour, never colour alone.

## Imagery Direction

### Pairs With

pigment-wash

### Summary

Bold confident watercolour specimens — saturated translucent pigment fields, fine ink linework, crisp feathered wet-edges — set against the language's own nocturnal ink-ground rather than white paper.

### Subjects

- botanical specimens (ferns, flowering stems, seed pods)
- pressed leaves and petals
- single dominant plant studies with dark negative space for overlays

### Usage

One full-bleed watercolour specimen per landing hero, composed off-center with dark atmospheric negative space for the legibility scrim; smaller plate crops as dashboard thumbnails.

---
version: "alpha"
name: "Sumiha"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0E1512"
  surface: "#16201B"
  surface_2: "#1E2C24"
  text: "#ECF3EC"
  muted: "#8FA596"
  border: "#2A3A30"
  on_accent: "#0E1512"
  accent: "#5FD6A0"
  accent_amber: "#E0A85A"
  accent_rose: "#E08AA0"
  success: "#5FD6A0"
  warning: "#E0A85A"
  error: "#E0727E"
  info: "#6FB6C2"
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: "Spectral"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space 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: "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-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_amber:
    backgroundColor: "{colors.accent_amber}"
  color-reference-accent_rose:
    backgroundColor: "{colors.accent_rose}"
  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"
---

# Sumiha

## Overview

A nocturnal herbarium design language: each interface record is studied like a botanical specimen painted by lamplight — a luminous pigment bloom glowing on deep ink-green ground, traced in pale herbarium ink and annotated like a midnight study sheet. It takes the essence of botanical watercolour (translucent washes, organic bloom, specimen annotation) and inverts the ground from ivory paper to night, so saturated colour sings against the dark rather than against white.

### Values

- saturated washes that glow against a dark ink-green ground
- specimen-sheet discipline: serif titles, mono codes, hairline annotation rules
- calm dark space with pigment blooms instead of flat chrome panels

### Anti-Values

- white or grey minimal defaults
- accent edges and borders as separators
- muddy desaturated washes or dense chrome machinery

## 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 | `#0E1512` |
| surface | `#16201B` |
| surface_2 | `#1E2C24` |
| text | `#ECF3EC` |
| muted | `#8FA596` |
| border | `#2A3A30` |
| on_accent | `#0E1512` |
| accent | `#5FD6A0` |
| accent_amber | `#E0A85A` |
| accent_rose | `#E08AA0` |
| success | `#5FD6A0` |
| warning | `#E0A85A` |
| error | `#E0727E` |
| info | `#6FB6C2` |

## 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**: Spectral, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space 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 desktop with a wide reading gutter, collapsing to a single flowing column on mobile; minmax(0,1fr) columns and min-width:0 children so grids never overflow.

### Whitespace

Quiet dark space behaves like night around a lamplit study: broad margins, soft section breathing room, padding always above titles.

### Density

Generous; one dominant specimen panel instead of equal card rows.

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile, capped centred content on ultra-wide, only the hero spans 100vw.

### Breakpoints

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

## Elevation & Depth

### Shadows

- **Sm**: 0 6px 18px rgba(0,0,0,0.35)
- **Md**: 0 18px 44px rgba(0,0,0,0.45)
- **Lg**: 0 34px 80px rgba(0,0,0,0.55)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: pigment-bloom
- **Card Style**: Deep leaf-shadow surfaces lifted off an ink-green ground, each carrying a translucent radial accent bloom behind content; optional leaf silhouette clipped into a corner. No borders, no accent edges.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders as separators; a single hairline deckle rule (#2A3A30) appears only as a catalogue annotation marker, never as a card edge.

## Components

### Composition

Build screens around one dominant luminous specimen on the dark ground, with a secondary annotation rail and supporting bloom modules in airy bands; the landing opens on a full-viewport watercolour hero with copy on a left-weighted scrim.

### Hierarchy

High-contrast Fraunces serif titles for specimens and headlines, tiny uppercase Space Mono specimen codes with hairline rules, and pale Spectral body for notes and measurements.

### Density

Low to medium; modules breathe in quiet dark space with selective bursts where study data matters.

### Signature

Pigment bloom — a translucent radial accent pool painted behind every module, mapped to semantic roles so it recolours on palette swap; paired with serif+mono specimen annotation, capsule controls that saturate on hover, and corner leaf silhouettes.

## 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-019ef678-8779-77f2-a890-2d715eb62f8b/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 Let saturated jade, amber, and rose washes bloom on the dark ground; keep neutrals quiet and tuned cool-green.
- Do Frame every module like a herbarium plate: serif title, uppercase mono code, hairline rule extending into whitespace.
- Do Style every control as a capsule with a visible jade focus ring; keep one button clearly primary.
- Do Use the watercolour specimen as the dominant hero and let it carry the full-bleed.
- Don't Do not default to white or grey — the concept is nocturnal.
- Don't Do not give any card an accent edge or border, and do not nest cards.
- Don't Do not use emoji or symbol glyphs; use SVG primitives.
- Don't Do not drown the dark ground in texture; preserve quiet space.

### Accessibility

Pale herbarium ink (#ECF3EC) on ink-green ground exceeds 4.5:1; accent washes carry full-strength text on tinted chips; all controls have visible focus rings; motion respects prefers-reduced-motion; status conveyed by label plus colour, never colour alone.

## Imagery Direction

### Pairs With

pigment-wash

### Summary

Bold confident watercolour specimens — saturated translucent pigment fields, fine ink linework, crisp feathered wet-edges — set against the language's own nocturnal ink-ground rather than white paper.

### Subjects

- botanical specimens (ferns, flowering stems, seed pods)
- pressed leaves and petals
- single dominant plant studies with dark negative space for overlays

### Usage

One full-bleed watercolour specimen per landing hero, composed off-center with dark atmospheric negative space for the legibility scrim; smaller plate crops as dashboard thumbnails.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sumiha",
  "type": "registry:theme",
  "title": "Sumiha shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0E1512",
      "foreground": "#ECF3EC",
      "card": "#16201B",
      "card-foreground": "#ECF3EC",
      "popover": "#16201B",
      "popover-foreground": "#ECF3EC",
      "primary": "#ECF3EC",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8FA596",
      "muted-foreground": "#ECF3EC",
      "accent": "#5FD6A0",
      "accent-foreground": "#ffffff",
      "destructive": "#E0727E",
      "border": "#2A3A30",
      "input": "#2A3A30",
      "ring": "#5FD6A0",
      "chart-1": "#ECF3EC",
      "chart-2": "#f4f4f5",
      "chart-3": "#5FD6A0",
      "chart-4": "#5FD6A0",
      "chart-5": "#E0A85A",
      "sidebar": "#16201B",
      "sidebar-foreground": "#ECF3EC",
      "sidebar-primary": "#ECF3EC",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#6FB6C2",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2A3A30",
      "sidebar-ring": "#5FD6A0",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#ECF3EC",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#5FD6A0",
      "accent-foreground": "#ffffff",
      "destructive": "#E0727E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#5FD6A0",
      "chart-1": "#ECF3EC",
      "chart-2": "#f4f4f5",
      "chart-3": "#5FD6A0",
      "chart-4": "#5FD6A0",
      "chart-5": "#E0A85A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#ECF3EC",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#5FD6A0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#5FD6A0",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef678-8779-77f2-a890-2d715eb62f8b",
    "slug": "sumiha",
    "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_amber",
        "accent_rose",
        "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": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```