Tomoe

# Tomoe

## Philosophy

A planner you keep by hand. The interface is a daily techo spread — Tomoe-River cream paper, a fountain-pen line, dot-grid pages, and two markers used like real highlighters. Structure enough to find last Thursday; soft enough to invite you back.

### Values

- A page is a surface you return to, not a database you fill
- Emphasis you can feel — markers overshoot like real ones, never colour floods
- Generous margins; a page that breathes invites you back
- Warm cream paper, not white; one fountain-pen ink for every action
- The settled, hand-kept page is the default; motion is brief and meaningful

### Anti-Values

- Heavy drop shadows or floating chrome (planners sit flat on a desk)
- Bright saturated container fills or neon ink
- Perfectly straight mechanical underlines that break the analog feel
- Over-boxed navigation trapped in a pill bar or nested cards
- Cramming the page until it could not fit a real A5 spread

### Visual Character

- Tomoe-River cream paper spread with a visible center gutter, radial-gradient dot grid every 22px, hairline rules.
- Hand-kept artifacts: rotated monospace date stamps, dotted sticker badges, clip-path edge page tabs, margin notes on thin guide lines.
- Analog emphasis over digital chrome: translucent wisteria/ochre highlighter spans, wavy pen-stroke underlines, near-square corners, almost-flat shadows.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4EFE3` |
| surface | `#FBF8F0` |
| surface_2 | `#FFFEFA` |
| paper_edge | `#ECE4D2` |
| text | `#2A2620` |
| muted | `#7C7464` |
| border | `rgba(42,38,32,0.14)` |
| grid | `rgba(42,38,32,0.10)` |
| accent | `#3A4E8C` |
| accent_deep | `#28396B` |
| wisteria | `#9A7BB5` |
| ochre | `#C98A3E` |
| on_accent | `#FBF8F0` |
| success | `#5C7A52` |
| warning | `#C98A3E` |
| error | `#B14A3C` |
| info | `#3A4E8C` |

### Typography

- **Base Size**: 17px
- **Body Font**: Source Sans 3, system-ui, sans-serif
- **Heading Font**: Newsreader, Georgia, serif
- **Mono Font**: Fira Code, ui-monospace, monospace
- **Script Font**: Caveat, cursive
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.012em
- **Scale Ratio**: 1.25
- **Line Height Base**: 1.6
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Source+Sans+3:wght@400;500;600;700&family=Fira+Code:wght@400;500&family=Caveat:wght@500;600&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 2px rgba(42,38,32,0.06)
- **Md**: 0 2px 10px rgba(42,38,32,0.08)
- **Stamp**: 1px 1px 0 rgba(42,38,32,0.10)

### Spacing

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

### Surfaces

- **Page**: #FBF8F0 Tomoe-River paper over #F4EFE3 desk cream with a radial-gradient dot grid every 22px
- **Note**: #FFFEFA inset note panel, 16px radius, almost-flat shadow, no gradient
- **Highlight**: translucent wisteria (rgba(154,123,181,.22)) / ochre (rgba(201,138,62,.22)) marker spans with padding overshoot
- **Tab**: clip-path colored page tabs protruding from the right edge
- **Stamp**: monospace date in a hairline rect, rotated 1-2 degrees, with a 1px stamp shadow

### Borders

- **Color**: rgba(42,38,32,0.14)
- **Width**: 1px
- **Style**: solid; dashed reserved for sticker badges

### Motion

- **Duration**: 240ms
- **Easing**: cubic-bezier(.4,0,.2,1)
- **Philosophy**: brief and meaningful; settled state is the default, reveals layered behind a .pe class, respects prefers-reduced-motion

## Rules

### Composition

Content sits on a two-page techo spread with a visible center gutter (single column on mobile). The left page holds the structured day (timeline, tasks); the right page holds freeform notes and annotations. Generous margins; sections are defined by whitespace and hairline rules, never heavy boxes. Stacking order: dot-grid surface, content, margin annotations, then stamps and stickers.

### Hierarchy

Date stamps and Newsreader headings establish primary hierarchy through size and weight. Highlighter marks create secondary emphasis without changing font properties. Script margin annotations are tertiary. Fountain indigo marks every actionable element; muted grey carries secondary content; wisteria and ochre are emphasis markers only.

### Density

Medium — a well-organized planner page, structured but spacious (line-height 1.6). The hourly timeline is the densest element with a consistent vertical rhythm; note areas breathe more. Never pack tighter than a real A5 spread.

### Signature

A kept page: dot grid; rotated monospace date stamps; translucent overshooting highlighter marks; wavy pen-stroke underlines; clip-path edge page tabs; dotted sticker badges; margin notes on thin guide lines.

## Layout

### Grid

Two-page spread on a dot grid (22px); 12-col underlying, visible center gutter ~32-40px

### Whitespace

Whitespace is paper, not emptiness — generous page margins (32-48px), section gaps 24px+, room to write

### Density

medium

### Responsive

Single-column stacked spread on mobile, edge tabs become a row of pills, forms and grids collapse, no horizontal overflow; contained content caps and centres on ultra-wide while only the hero spans 100vw

### Breakpoints

- **Mobile**: 0-639px single column
- **Tablet**: 640-979px spread begins
- **Desktop**: 980px+ full two-page spread, max content ~1280px centered

## Guidance

### Do

- Put the dot grid on every page surface — it is the foundational identity
- Use translucent wisteria/ochre highlighter spans with padding overshoot for emphasis
- Stamp temporal markers as rotated monospace dates in hairline rectangles
- Keep the two-page spread metaphor on desktop with a visible center gutter
- Use Newsreader for headings and Caveat only for margin annotations
- Define sections with whitespace and hairline rules, not heavy boxes
- Use wavy pen-stroke underlines and dotted sticker badges for decoration that means something
- Make one button clearly primary in fountain indigo; keep the rest quieter
- Keep margins generous so the page breathes

### Don't

- Never use heavy drop shadows — planners sit flat on a desk
- Never flood a region with an accent; markers are translucent emphasis only
- Avoid in-between border-radii — corners are 0, 16, 24, or full
- Do not use bright saturated container fills or neon ink
- Never use perfectly straight mechanical underlines for the decorative role
- Do not box navigation into a floating pill bar or nest cards
- Do not overcrowd — if it would not fit a real A5 spread, it is too dense

### Accessibility

Graphite #2A2620 on cream #F4EFE3 passes WCAG AA comfortably (>10:1). Highlighter emphasis is always paired with font weight or a pen-stroke underline, never colour alone. Every control has an explicit fountain-indigo focus state; invalid states use rust plus a message. Dot grid stays subtle. Motion reduced to zero under prefers-reduced-motion; minimum 44px touch targets.

## Imagery Direction

### Pairs With

wisteria

### Summary

Layered fountain-pen ink linework over diluted watercolor washes blooming into warm cream paper, with translucent highlighter-marker passes and faint graphite under-sketch. Subjects are kept-by-hand objects treated in that technique.

### Subjects

- an open daily planner spread
- a fountain pen resting in a binding gutter
- pressed flowers and wisteria sprigs
- a dot-grid page with marker passes
- a cup of coffee beside a notebook

### Usage

Full-bleed hero of an open planner spread; feature and illustration slots use single kept-by-hand objects. Keep warm cream paper ground, soft wisteria/ochre accents, no text or logos in the imagery.

---
version: "alpha"
name: "Tomoe"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F4EFE3"
  surface: "#FBF8F0"
  surface_2: "#FFFEFA"
  paper_edge: "#ECE4D2"
  text: "#2A2620"
  muted: "#7C7464"
  accent: "#3A4E8C"
  accent_deep: "#28396B"
  wisteria: "#9A7BB5"
  ochre: "#C98A3E"
  on_accent: "#FBF8F0"
  success: "#5C7A52"
  warning: "#C98A3E"
  error: "#B14A3C"
  info: "#3A4E8C"
typography:
  headline-lg:
    fontFamily: "Newsreader, Georgia, serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.012em"
  headline-md:
    fontFamily: "Newsreader, Georgia, serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.012em"
  body-md:
    fontFamily: "Source Sans 3, system-ui, sans-serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.012em"
  label-md:
    fontFamily: "Fira Code, ui-monospace, monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  sm: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "4px"
  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-paper_edge:
    backgroundColor: "{colors.paper_edge}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_deep:
    backgroundColor: "{colors.accent_deep}"
  color-reference-wisteria:
    backgroundColor: "{colors.wisteria}"
  color-reference-ochre:
    backgroundColor: "{colors.ochre}"
  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.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"
---

# Tomoe

## Overview

A planner you keep by hand. The interface is a daily techo spread — Tomoe-River cream paper, a fountain-pen line, dot-grid pages, and two markers used like real highlighters. Structure enough to find last Thursday; soft enough to invite you back.

### Values

- A page is a surface you return to, not a database you fill
- Emphasis you can feel — markers overshoot like real ones, never colour floods
- Generous margins; a page that breathes invites you back
- Warm cream paper, not white; one fountain-pen ink for every action
- The settled, hand-kept page is the default; motion is brief and meaningful

### Anti-Values

- Heavy drop shadows or floating chrome (planners sit flat on a desk)
- Bright saturated container fills or neon ink
- Perfectly straight mechanical underlines that break the analog feel
- Over-boxed navigation trapped in a pill bar or nested cards
- Cramming the page until it could not fit a real A5 spread

### Visual Character

- Tomoe-River cream paper spread with a visible center gutter, radial-gradient dot grid every 22px, hairline rules.
- Hand-kept artifacts: rotated monospace date stamps, dotted sticker badges, clip-path edge page tabs, margin notes on thin guide lines.
- Analog emphasis over digital chrome: translucent wisteria/ochre highlighter spans, wavy pen-stroke underlines, near-square corners, almost-flat shadows.

## 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 | `#F4EFE3` |
| surface | `#FBF8F0` |
| surface_2 | `#FFFEFA` |
| paper_edge | `#ECE4D2` |
| text | `#2A2620` |
| muted | `#7C7464` |
| accent | `#3A4E8C` |
| accent_deep | `#28396B` |
| wisteria | `#9A7BB5` |
| ochre | `#C98A3E` |
| on_accent | `#FBF8F0` |
| success | `#5C7A52` |
| warning | `#C98A3E` |
| error | `#B14A3C` |
| info | `#3A4E8C` |

## Typography

- **Headline-Lg**: Newsreader, Georgia, serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Newsreader, Georgia, serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Source Sans 3, system-ui, sans-serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: Fira Code, ui-monospace, monospace, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `4px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`

### Grid

Two-page spread on a dot grid (22px); 12-col underlying, visible center gutter ~32-40px

### Whitespace

Whitespace is paper, not emptiness — generous page margins (32-48px), section gaps 24px+, room to write

### Density

medium

### Responsive

Single-column stacked spread on mobile, edge tabs become a row of pills, forms and grids collapse, no horizontal overflow; contained content caps and centres on ultra-wide while only the hero spans 100vw

### Breakpoints

- **Mobile**: 0-639px single column
- **Tablet**: 640-979px spread begins
- **Desktop**: 980px+ full two-page spread, max content ~1280px centered

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 2px rgba(42,38,32,0.06)
- **Md**: 0 2px 10px rgba(42,38,32,0.08)
- **Stamp**: 1px 1px 0 rgba(42,38,32,0.10)

## Shapes

### Rounded

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

### Surfaces

- **Page**: #FBF8F0 Tomoe-River paper over #F4EFE3 desk cream with a radial-gradient dot grid every 22px
- **Note**: #FFFEFA inset note panel, 16px radius, almost-flat shadow, no gradient
- **Highlight**: translucent wisteria (rgba(154,123,181,.22)) / ochre (rgba(201,138,62,.22)) marker spans with padding overshoot
- **Tab**: clip-path colored page tabs protruding from the right edge
- **Stamp**: monospace date in a hairline rect, rotated 1-2 degrees, with a 1px stamp shadow

### Borders

- **Color**: rgba(42,38,32,0.14)
- **Width**: 1px
- **Style**: solid; dashed reserved for sticker badges

## Components

### Composition

Content sits on a two-page techo spread with a visible center gutter (single column on mobile). The left page holds the structured day (timeline, tasks); the right page holds freeform notes and annotations. Generous margins; sections are defined by whitespace and hairline rules, never heavy boxes. Stacking order: dot-grid surface, content, margin annotations, then stamps and stickers.

### Hierarchy

Date stamps and Newsreader headings establish primary hierarchy through size and weight. Highlighter marks create secondary emphasis without changing font properties. Script margin annotations are tertiary. Fountain indigo marks every actionable element; muted grey carries secondary content; wisteria and ochre are emphasis markers only.

### Density

Medium — a well-organized planner page, structured but spacious (line-height 1.6). The hourly timeline is the densest element with a consistent vertical rhythm; note areas breathe more. Never pack tighter than a real A5 spread.

### Signature

A kept page: dot grid; rotated monospace date stamps; translucent overshooting highlighter marks; wavy pen-stroke underlines; clip-path edge page tabs; dotted sticker badges; margin notes on thin guide lines.

## 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-8016-75b3-b3ef-81fe500eb2d6/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 Put the dot grid on every page surface — it is the foundational identity
- Do Use translucent wisteria/ochre highlighter spans with padding overshoot for emphasis
- Do Stamp temporal markers as rotated monospace dates in hairline rectangles
- Do Keep the two-page spread metaphor on desktop with a visible center gutter
- Do Use Newsreader for headings and Caveat only for margin annotations
- Do Define sections with whitespace and hairline rules, not heavy boxes
- Do Use wavy pen-stroke underlines and dotted sticker badges for decoration that means something
- Do Make one button clearly primary in fountain indigo; keep the rest quieter
- Do Keep margins generous so the page breathes
- Don't Never use heavy drop shadows — planners sit flat on a desk
- Don't Never flood a region with an accent; markers are translucent emphasis only
- Don't Avoid in-between border-radii — corners are 0, 16, 24, or full
- Don't Do not use bright saturated container fills or neon ink
- Don't Never use perfectly straight mechanical underlines for the decorative role
- Don't Do not box navigation into a floating pill bar or nest cards
- Don't Do not overcrowd — if it would not fit a real A5 spread, it is too dense

### Accessibility

Graphite #2A2620 on cream #F4EFE3 passes WCAG AA comfortably (>10:1). Highlighter emphasis is always paired with font weight or a pen-stroke underline, never colour alone. Every control has an explicit fountain-indigo focus state; invalid states use rust plus a message. Dot grid stays subtle. Motion reduced to zero under prefers-reduced-motion; minimum 44px touch targets.

## Imagery Direction

### Pairs With

wisteria

### Summary

Layered fountain-pen ink linework over diluted watercolor washes blooming into warm cream paper, with translucent highlighter-marker passes and faint graphite under-sketch. Subjects are kept-by-hand objects treated in that technique.

### Subjects

- an open daily planner spread
- a fountain pen resting in a binding gutter
- pressed flowers and wisteria sprigs
- a dot-grid page with marker passes
- a cup of coffee beside a notebook

### Usage

Full-bleed hero of an open planner spread; feature and illustration slots use single kept-by-hand objects. Keep warm cream paper ground, soft wisteria/ochre accents, no text or logos in the imagery.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tomoe",
  "type": "registry:theme",
  "title": "Tomoe shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EFE3",
      "foreground": "#2A2620",
      "card": "#FBF8F0",
      "card-foreground": "#2A2620",
      "popover": "#FBF8F0",
      "popover-foreground": "#2A2620",
      "primary": "#2A2620",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#7C7464",
      "muted-foreground": "#2A2620",
      "accent": "#3A4E8C",
      "accent-foreground": "#ffffff",
      "destructive": "#B14A3C",
      "border": "rgba(42,38,32,0.14)",
      "input": "rgba(42,38,32,0.14)",
      "ring": "#3A4E8C",
      "chart-1": "#2A2620",
      "chart-2": "#f4f4f5",
      "chart-3": "#3A4E8C",
      "chart-4": "#5C7A52",
      "chart-5": "#C98A3E",
      "sidebar": "#FBF8F0",
      "sidebar-foreground": "#2A2620",
      "sidebar-primary": "#2A2620",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3A4E8C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(42,38,32,0.14)",
      "sidebar-ring": "#3A4E8C",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2A2620",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#3A4E8C",
      "accent-foreground": "#ffffff",
      "destructive": "#B14A3C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#3A4E8C",
      "chart-1": "#2A2620",
      "chart-2": "#f4f4f5",
      "chart-3": "#3A4E8C",
      "chart-4": "#5C7A52",
      "chart-5": "#C98A3E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2A2620",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3A4E8C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#3A4E8C",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efb5a-8016-75b3-b3ef-81fe500eb2d6",
    "slug": "tomoe",
    "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_deep",
        "bg",
        "border",
        "error",
        "grid",
        "info",
        "muted",
        "ochre",
        "on_accent",
        "paper_edge",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning",
        "wisteria"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height_base",
        "mono_font",
        "scale_ratio",
        "script_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "sm"
      ],
      "shadows": [
        "md",
        "sm",
        "stamp"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "highlight",
        "note",
        "page",
        "stamp",
        "tab"
      ],
      "borders": [
        "color",
        "style",
        "width"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```