Bungu Press

# Bungu Press

## Philosophy

Bungu Press is a stationery-grade knowledge workspace: ruled lines stand in for gutters, a single copper index marks the open path, and every measure lands on a four-pixel grid so complex knowledge reads as carefully filed, never visually noisy.

### Values

- Every element earns its place through clear reading, filing, or decision support rather than decoration.
- Warmth comes from material cues: paper-white surfaces, washi neutrals, pencil-weight strokes, and soft brown ink.
- Hierarchy comes from type scale, ink weight, and exact alignment instead of colour saturation or heavy elevation.
- Spacing reads like a planner page: a strict 4px grid, generous margins, and compressed metadata only where it aids scanning.

### Anti-Values

- No glossy SaaS gradients, cold gray dashboards, glassmorphism, neon highlights, or heavy drop-shadow depth.
- No component-catalogue composition; the language must read as a real writing, planning, and filing workspace.
- No oversized radii, spring motion, filled icon blobs, or multiple scattered accent colours.

### Visual Character

- A warm cream paper canvas with faint 32px horizontal ruled lines behind the content and 1px ruled section dividers replacing decorative gaps.
- Active navigation and priority markers built from a restrained 2px copper left rule, a small copper focus ring, and a warm surface tint instead of filled buttons or loud badges.
- Document content rendered as paper-stack sheets on #FEFEFE surfaces with 16px corners and a single soft sheet shadow, never nested or edge-accented cards.
- Pencil-weight 1.5px stroke icons and form controls with square checkbox ticks, copper focus, and no browser-default chrome.
- The application arranged as a plausible stationery atelier: a binder index, a ruled editor ledger, and a receipt rail, divided by ruled lines.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4F1EB` |
| surface | `#FEFEFE` |
| surface_2 | `#FBF9F4` |
| washi | `#EFE9DD` |
| text | `#2E2A22` |
| muted | `#857E72` |
| border | `#E3DCCF` |
| rule | `#D9D1C2` |
| accent | `#C26536` |
| accent_strong | `#A8552B` |
| accent_soft | `#F3E2D6` |
| on_accent | `#FFFFFF` |
| success | `#5C7F52` |
| warning | `#B98A2E` |
| error | `#B0463A` |
| info | `#4F6E8C` |

### Typography

- **Base Size**: 17px
- **Body Font**: Inter
- **Heading Font**: Zen Kaku Gothic New
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.62
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

### Radii

- **None**: 0
- **Card**: 16px
- **Full**: 9999px

### Shadows

- **Sheet**: 0 1px 2px rgba(46,42,34,.05), 0 8px 24px -16px rgba(46,42,34,.18)
- **Hover**: 0 2px 4px rgba(46,42,34,.07), 0 14px 30px -18px rgba(46,42,34,.22)

### Spacing

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

### Surfaces

- **Treatment**: Warm cream paper canvas with faint 32px horizontal ruling; paper-white document sheets and washi-toned metadata bands.
- **Card Style**: Flat paper-stack document sheets on #FEFEFE with 16px corners, ruled headers, and a single soft sheet shadow.
- **Bg Pattern**: Subtle horizontal ruled lines every 32px behind the page content.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: 1px warm-gray ruled lines as the primary structural device; a 2px copper rule only for selected or focused states.

### Motion

- **Duration**: 170ms
- **Easing**: cubic-bezier(.2,0,.2,1)
- **Philosophy**: Functional and nearly invisible: rows tint, focus rings appear, panels settle without bounce. The settled state is the default and renders with no JavaScript.

## Rules

### Composition

Compose as a working stationery atelier with a binder index, a dominant ruled writing ledger, and a compact receipt rail, separated by 1px rules instead of floating gaps.

### Hierarchy

Large calm Zen Kaku Gothic New headings name the current binder, medium labels structure panels, mono metadata supplies dates and counts, and a single copper rule marks the active path without overpowering brown-ink body text.

### Density

Comfortable medium density with generous 16px card padding, 8px row rhythm, and 24-48px page pauses so information feels filed, not crammed.

### Signature

- Copper Active State applies a 2px left rule, a copper focus ring, and a warm surface tint to selected rows, priority notes, and the one primary control.
- Ruled Separator uses 1px lines that run through the layout like notebook ruling, replacing decorative dividers and card gutters.
- Paper-Stack Cards layer document sheets on #FEFEFE surfaces with 16px corners and a single soft sheet shadow.
- Pencil-Weight Controls style icons, checkboxes, toggles, inputs, and selects with 1.5px strokes, muted ink, copper focus, and no native chrome.
- Measured Rhythm locks all padding, gaps, labels, and icon sizes to a 4px base grid with section headers landing on ruled lines.

## Layout

### Grid

Desktop is a contained 1180-1240px page; the workspace is a three-pane shell of a ~260px binder index, a fluid ledger, and a ~300px receipt rail divided by 1px rules.

### Whitespace

24px page padding, 16px panel padding, 8px row gaps, and 48px major pauses; whitespace feels measured like margins on a planner page.

### Density

Comfortable medium — 8-12 visible records per pane with compressed mono metadata only where it aids scanning.

### Responsive

Renders from ~390px mobile to 2560px+; tablet collapses to two columns, mobile stacks to a single ruled column with non-essential nav and table columns hidden; only the landing hero spans 100vw.

### Breakpoints

- **Mobile**: <= 640px
- **Tablet**: 641px - 980px
- **Desktop**: >= 981px

## Guidance

### Do

- Use 1px ruled lines as the primary structural device across navigation, cards, forms, and sections.
- Keep every spacing decision on the 4px base grid with 16px minimum card padding and 8px row rhythm.
- Reserve copper for active state, priority action, and focus indication; one accent role per view.
- Style every control as a pencil-weight stationery object with copper focus and no browser default chrome.

### Don't

- Do not use gradients, glass panels, neon colours, cold gray backgrounds, or heavy permanent shadows.
- Do not present the embodiment as a component catalogue or generic analytics dashboard.
- Do not exceed the {0, 16px, 9999px} radius set, use filled icon blobs, or rely on browser-default form styling.
- Do not centre body content or scatter multiple accent colours through a page.

### Accessibility

Brown ink on warm paper holds high contrast for body text; copper is used as a marker alongside shape and position, never as the sole signal; focus rings are visible; motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

silverpoint

### Summary

Silverpoint draughtsman studies in graphite and ink on warm cream laid paper, with faint construction lines, layered tonal shading, and one muted copper accent. Apply the technique to filing and material subjects, never to the stationery apparatus itself.

### Subjects

- a traditional filing chest of many small drawers
- a folded stack of letters
- a quince or persimmon still-life
- an architectural detail study

### Usage

The landing hero is a wide silverpoint study placed left-of-centre with open warm-paper space on the right for a legible overlay; the studio swaps the hero via --hero-image.

---
version: "alpha"
name: "Bungu Press"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F4F1EB"
  surface: "#FEFEFE"
  surface_2: "#FBF9F4"
  washi: "#EFE9DD"
  text: "#2E2A22"
  muted: "#857E72"
  border: "#E3DCCF"
  rule: "#D9D1C2"
  accent: "#C26536"
  accent_strong: "#A8552B"
  accent_soft: "#F3E2D6"
  on_accent: "#FFFFFF"
  success: "#5C7F52"
  warning: "#B98A2E"
  error: "#B0463A"
  info: "#4F6E8C"
typography:
  headline-lg:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Inter"
    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:
  none: "0px"
  card: "16px"
  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-washi:
    backgroundColor: "{colors.washi}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-rule:
    backgroundColor: "{colors.rule}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_strong:
    backgroundColor: "{colors.accent_strong}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  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: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Bungu Press

## Overview

Bungu Press is a stationery-grade knowledge workspace: ruled lines stand in for gutters, a single copper index marks the open path, and every measure lands on a four-pixel grid so complex knowledge reads as carefully filed, never visually noisy.

### Values

- Every element earns its place through clear reading, filing, or decision support rather than decoration.
- Warmth comes from material cues: paper-white surfaces, washi neutrals, pencil-weight strokes, and soft brown ink.
- Hierarchy comes from type scale, ink weight, and exact alignment instead of colour saturation or heavy elevation.
- Spacing reads like a planner page: a strict 4px grid, generous margins, and compressed metadata only where it aids scanning.

### Anti-Values

- No glossy SaaS gradients, cold gray dashboards, glassmorphism, neon highlights, or heavy drop-shadow depth.
- No component-catalogue composition; the language must read as a real writing, planning, and filing workspace.
- No oversized radii, spring motion, filled icon blobs, or multiple scattered accent colours.

### Visual Character

- A warm cream paper canvas with faint 32px horizontal ruled lines behind the content and 1px ruled section dividers replacing decorative gaps.
- Active navigation and priority markers built from a restrained 2px copper left rule, a small copper focus ring, and a warm surface tint instead of filled buttons or loud badges.
- Document content rendered as paper-stack sheets on #FEFEFE surfaces with 16px corners and a single soft sheet shadow, never nested or edge-accented cards.
- Pencil-weight 1.5px stroke icons and form controls with square checkbox ticks, copper focus, and no browser-default chrome.
- The application arranged as a plausible stationery atelier: a binder index, a ruled editor ledger, and a receipt rail, divided by ruled lines.

## 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 | `#F4F1EB` |
| surface | `#FEFEFE` |
| surface_2 | `#FBF9F4` |
| washi | `#EFE9DD` |
| text | `#2E2A22` |
| muted | `#857E72` |
| border | `#E3DCCF` |
| rule | `#D9D1C2` |
| accent | `#C26536` |
| accent_strong | `#A8552B` |
| accent_soft | `#F3E2D6` |
| on_accent | `#FFFFFF` |
| success | `#5C7F52` |
| warning | `#B98A2E` |
| error | `#B0463A` |
| info | `#4F6E8C` |

## Typography

- **Headline-Lg**: Zen Kaku Gothic New, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Zen Kaku Gothic New, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 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

Desktop is a contained 1180-1240px page; the workspace is a three-pane shell of a ~260px binder index, a fluid ledger, and a ~300px receipt rail divided by 1px rules.

### Whitespace

24px page padding, 16px panel padding, 8px row gaps, and 48px major pauses; whitespace feels measured like margins on a planner page.

### Density

Comfortable medium — 8-12 visible records per pane with compressed mono metadata only where it aids scanning.

### Responsive

Renders from ~390px mobile to 2560px+; tablet collapses to two columns, mobile stacks to a single ruled column with non-essential nav and table columns hidden; only the landing hero spans 100vw.

### Breakpoints

- **Mobile**: <= 640px
- **Tablet**: 641px - 980px
- **Desktop**: >= 981px

## Elevation & Depth

### Shadows

- **Sheet**: 0 1px 2px rgba(46,42,34,.05), 0 8px 24px -16px rgba(46,42,34,.18)
- **Hover**: 0 2px 4px rgba(46,42,34,.07), 0 14px 30px -18px rgba(46,42,34,.22)

## Shapes

### Rounded

- **None**: `0px`
- **Card**: `16px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: Warm cream paper canvas with faint 32px horizontal ruling; paper-white document sheets and washi-toned metadata bands.
- **Card Style**: Flat paper-stack document sheets on #FEFEFE with 16px corners, ruled headers, and a single soft sheet shadow.
- **Bg Pattern**: Subtle horizontal ruled lines every 32px behind the page content.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: 1px warm-gray ruled lines as the primary structural device; a 2px copper rule only for selected or focused states.

## Components

### Composition

Compose as a working stationery atelier with a binder index, a dominant ruled writing ledger, and a compact receipt rail, separated by 1px rules instead of floating gaps.

### Hierarchy

Large calm Zen Kaku Gothic New headings name the current binder, medium labels structure panels, mono metadata supplies dates and counts, and a single copper rule marks the active path without overpowering brown-ink body text.

### Density

Comfortable medium density with generous 16px card padding, 8px row rhythm, and 24-48px page pauses so information feels filed, not crammed.

### Signature

- Copper Active State applies a 2px left rule, a copper focus ring, and a warm surface tint to selected rows, priority notes, and the one primary control.
- Ruled Separator uses 1px lines that run through the layout like notebook ruling, replacing decorative dividers and card gutters.
- Paper-Stack Cards layer document sheets on #FEFEFE surfaces with 16px corners and a single soft sheet shadow.
- Pencil-Weight Controls style icons, checkboxes, toggles, inputs, and selects with 1.5px strokes, muted ink, copper focus, and no native chrome.
- Measured Rhythm locks all padding, gaps, labels, and icon sizes to a 4px base grid with section headers landing on ruled 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-019efb54-3c04-7d63-b762-9a85fa0283c2/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 1px ruled lines as the primary structural device across navigation, cards, forms, and sections.
- Do Keep every spacing decision on the 4px base grid with 16px minimum card padding and 8px row rhythm.
- Do Reserve copper for active state, priority action, and focus indication; one accent role per view.
- Do Style every control as a pencil-weight stationery object with copper focus and no browser default chrome.
- Don't Do not use gradients, glass panels, neon colours, cold gray backgrounds, or heavy permanent shadows.
- Don't Do not present the embodiment as a component catalogue or generic analytics dashboard.
- Don't Do not exceed the {0, 16px, 9999px} radius set, use filled icon blobs, or rely on browser-default form styling.
- Don't Do not centre body content or scatter multiple accent colours through a page.

### Accessibility

Brown ink on warm paper holds high contrast for body text; copper is used as a marker alongside shape and position, never as the sole signal; focus rings are visible; motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

silverpoint

### Summary

Silverpoint draughtsman studies in graphite and ink on warm cream laid paper, with faint construction lines, layered tonal shading, and one muted copper accent. Apply the technique to filing and material subjects, never to the stationery apparatus itself.

### Subjects

- a traditional filing chest of many small drawers
- a folded stack of letters
- a quince or persimmon still-life
- an architectural detail study

### Usage

The landing hero is a wide silverpoint study placed left-of-centre with open warm-paper space on the right for a legible overlay; the studio swaps the hero via --hero-image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bungu-press",
  "type": "registry:theme",
  "title": "Bungu Press shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F1EB",
      "foreground": "#2E2A22",
      "card": "#FEFEFE",
      "card-foreground": "#2E2A22",
      "popover": "#FEFEFE",
      "popover-foreground": "#2E2A22",
      "primary": "#2E2A22",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#857E72",
      "muted-foreground": "#2E2A22",
      "accent": "#C26536",
      "accent-foreground": "#ffffff",
      "destructive": "#B0463A",
      "border": "#E3DCCF",
      "input": "#E3DCCF",
      "ring": "#C26536",
      "chart-1": "#2E2A22",
      "chart-2": "#f4f4f5",
      "chart-3": "#C26536",
      "chart-4": "#5C7F52",
      "chart-5": "#B98A2E",
      "sidebar": "#FEFEFE",
      "sidebar-foreground": "#2E2A22",
      "sidebar-primary": "#2E2A22",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4F6E8C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E3DCCF",
      "sidebar-ring": "#C26536",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2E2A22",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C26536",
      "accent-foreground": "#ffffff",
      "destructive": "#B0463A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C26536",
      "chart-1": "#2E2A22",
      "chart-2": "#f4f4f5",
      "chart-3": "#C26536",
      "chart-4": "#5C7F52",
      "chart-5": "#B98A2E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2E2A22",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C26536",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C26536",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efb54-3c04-7d63-b762-9a85fa0283c2",
    "slug": "bungu-press",
    "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_soft",
        "accent_strong",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "rule",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning",
        "washi"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "card",
        "full",
        "none"
      ],
      "shadows": [
        "hover",
        "sheet"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```