Diskette Ledger

# Diskette Ledger

## Philosophy

Diskette Ledger turns shared computing into a warm clubroom diagram: cream paper, photocopied manga panels, floppy-disk label tabs, blue-ballpoint corrections, and tiny terminal jokes make the machine feel like a room object maintained together, not a dashboard.

### Values

- Treat the computer as a room object with dust, labels, seating habits, and a social memory rather than as an abstract dashboard.
- Make technical hierarchy legible through notebook diagrams, manga panel crops, and practical label typography instead of decorative spectacle.
- Keep existential cybernetic ideas small: questions in margins, boot messages, and handwritten corrections that invite reflection without ominous AI theater.
- Use restraint as warmth: mostly cream paper, black ink, one blue annotation channel, and red only for tiny correction marks.
- Favor low-stakes educational computing, shared-machine rituals, and after-school collaboration over lone-genius hacker mythology.
- Let analog ephemera structure the interface: taped floppy tabs, seating charts, printer-test strips, port labels, and DOS/V prompt fragments.

### Anti-Values

- No green matrix rain, neon cyberpunk, military HUDs, chrome overload, or synthetic hacker dashboards.
- No SaaS card grids, generic analytics views, or evenly repeated feature tiles masquerading as product structure.
- No fan-art anime character decoration; manga influence must live in panel rhythm, crop, ink hierarchy, and instructional composition.
- No vaporwave rainbow, black-green coding palette, or high-saturation futuristic glow.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F3EBD8` |
| surface | `#FFF9EA` |
| text | `#24231F` |
| muted | `#777064` |
| border | `#1E1D19` |
| accent | `#2F5F9A` |
| on_accent | `#FFF9EA` |
| accent_2 | `#5E7453` |
| accent_3 | `#A04438` |
| success | `#5E7453` |
| warning | `#B08A45` |
| error | `#A04438` |
| info | `#3B6792` |

### Typography

- **Base Size**: 17px
- **Body Font**: Zen Kaku Gothic New
- **Heading Font**: Zen Kaku Gothic Antique
- **Mono Font**: DotGothic16
- **Annotation Font**: Gaegu
- **Heading Weight**: 900
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Display Letter Spacing**: -0.04em
- **Line Height**: 1.55
- **Scale Ratio**: 1.22
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=DotGothic16&family=Gaegu:wght@400;700&family=Zen+Kaku+Gothic+Antique:wght@500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(30,29,25,0.18)
- **Md**: 4px 5px 0 rgba(30,29,25,0.10)
- **Lg**: 10px 12px 0 rgba(30,29,25,0.08)

### Spacing

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

### Surfaces

- **Bg Pattern**: Cream base with faint blue-gray notebook ruling at 24px intervals; off-white ABS panels carry a second inset photocopy hairline.
- **Card Style**: Flat off-white panels with a 1px black ink outline, a 2px inset photocopy hairline, zero radius, and a restrained flat offset paper shadow.
- **Treatment**: Warm off-white paper and beige ABS plastic with subtle grain, notebook ruling, gray adhesive label overlays, and light toner speckle.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid black-ink structural outlines; secondary separators are rgba(30,29,25,0.14) photocopy hairlines
- **Character**: Structural ink outlines at high contrast; never grey decorative borders; never a single coloured accent edge on a card.

### Motion

- **Duration**: 140ms
- **Easing**: steps(2, end)
- **Philosophy**: Motion feels like a cursor blink, a paper tab being selected, or a printer advancing one line; never glossy or cinematic. The settled state is the no-JS default; reveals layer on top and respect prefers-reduced-motion.

## Rules

### Composition

A clubroom diagram sheet, not a dashboard: a dominant 7-span manga panel anchors the page, a 5-span rail of dense notes sits beside it, a full-width printer-test strip crosses the grid, and half/third panels of varied scale follow. Floppy-label tabs sit openly across the header; never three equal cards.

### Hierarchy

Hierarchy comes from ink weight, panel scale, label placement, and type roles: heavy Gothic display for identity, neat Gothic for labels and body, DotGothic16 for prompts, and blue handwriting for meta-commentary. Red marks remain micro-alerts only.

### Density

Alternate dense annotated modules with broad cream pauses; cluster related controls at 4-12px while major page areas separate by 64-112px, like a studied club notebook.

### Signature

Floppy-disk label tabs (clipped corner + hole-punch dot + slight rotation); blue-ballpoint margin annotations with dashed arrows and circled indices; full-width perforated printer-test strips; notebook-grid underlays; DotGothic16 terminal phosphor chips, one short command each; a dominant manga panel crop with a seating chart.

## Layout

### Grid

Desktop is a 12-column max-width 1180px page with asymmetric 7/5 and 4/8 panel spans; tablet collapses to 6 columns; mobile becomes one column with preserved floppy tabs and annotation layering. Columns use minmax(0,1fr) and children min-width:0.

### Whitespace

Outer margins broad at 48-112px while internal label gaps stay tight at 4-12px, creating the rhythm of a notebook page with crowded notes around calm diagrams.

### Density

Medium-high informational density with deliberate quiet cream margins so annotations and terminal fragments feel found rather than crammed.

### Responsive

Keep the dominant clubroom panel first, then the rail, printer strip, archive queue, and notes; fold margin annotations inline on narrow screens; only the full-bleed hero spans 100vw on ultra-wide.

### Breakpoints

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

## Guidance

### Do

- Use cream paper, off-white ABS, black manga ink, faded label gray, and one restrained blue annotation channel.
- Name interface modules as plausible school computer-club artifacts: seating charts, disk ledgers, cable labels, boot logs, printer strips.
- Make manga influence structural: panel crops, gutter rhythm, restrained speed-lines, and instructional diagram hierarchy.
- Use terminal fragments as small punchlines or status whispers, no more than one short command per chip.
- Give one panel dominance and vary its neighbours by scale, density, and orientation.
- Use red only for tiny correction ticks, wrong-disk notes, or a single overdue warning.
- Explicitly style every form control with no visible browser defaults; keep body text 17px+ at high contrast.

### Don't

- Do not use green matrix rain, neon glows, vaporwave gradients, cyberpunk purple, or black-background hacker theatrics.
- Do not draw anime characters or fan-art mascots; the manga reference is page architecture, not illustration fandom.
- Do not create three equal cards in a row, generic analytics dashboards, CRM widgets, or SaaS pricing/feature grids.
- Do not box the top nav in a floating pill or nest cards; let the nav sit openly across the header.
- Do not add decorative colours beyond the blue annotation channel and tiny red correction marks.
- Do not let handwritten notes become illegible decoration; every note should clarify, question, or humanize a nearby system detail.

### Accessibility

Maintain WCAG AA contrast for all core text on cream, keep blue notes large enough to read, never rely on colour alone for warnings, and preserve visible ink-outline focus states on every control.

## Imagery Direction

### Pairs With

toner-press

### Summary

Photocopied annotated ink-and-screentone drawings on warm cream paper, with one blue-ballpoint annotation channel, applied to shared-machine and clubroom subjects.

### Subjects

- a 1990s school club desktop machine and a stack of labeled floppy diskettes
- a clubroom desk with a CRT and desk lamp
- a single labeled floppy disk in close panel crop
- a seating-chart notebook page

### Usage

Use the Toner Press technique for the landing hero (full-bleed) and feature vignettes; keep cream paper, halftone screentone, and a single blue annotation; never neon, never anime mascots.

---
version: "alpha"
name: "Diskette Ledger"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F3EBD8"
  surface: "#FFF9EA"
  text: "#24231F"
  muted: "#777064"
  border: "#1E1D19"
  accent: "#2F5F9A"
  on_accent: "#FFF9EA"
  accent_2: "#5E7453"
  accent_3: "#A04438"
  success: "#5E7453"
  warning: "#B08A45"
  error: "#A04438"
  info: "#3B6792"
typography:
  headline-lg:
    fontFamily: "Zen Kaku Gothic Antique"
    fontSize: "1.929rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Zen Kaku Gothic Antique"
    fontSize: "1.581rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "DotGothic16"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "88px"
  step-9: "112px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  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-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  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.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"
---

# Diskette Ledger

## Overview

Diskette Ledger turns shared computing into a warm clubroom diagram: cream paper, photocopied manga panels, floppy-disk label tabs, blue-ballpoint corrections, and tiny terminal jokes make the machine feel like a room object maintained together, not a dashboard.

### Values

- Treat the computer as a room object with dust, labels, seating habits, and a social memory rather than as an abstract dashboard.
- Make technical hierarchy legible through notebook diagrams, manga panel crops, and practical label typography instead of decorative spectacle.
- Keep existential cybernetic ideas small: questions in margins, boot messages, and handwritten corrections that invite reflection without ominous AI theater.
- Use restraint as warmth: mostly cream paper, black ink, one blue annotation channel, and red only for tiny correction marks.
- Favor low-stakes educational computing, shared-machine rituals, and after-school collaboration over lone-genius hacker mythology.
- Let analog ephemera structure the interface: taped floppy tabs, seating charts, printer-test strips, port labels, and DOS/V prompt fragments.

### Anti-Values

- No green matrix rain, neon cyberpunk, military HUDs, chrome overload, or synthetic hacker dashboards.
- No SaaS card grids, generic analytics views, or evenly repeated feature tiles masquerading as product structure.
- No fan-art anime character decoration; manga influence must live in panel rhythm, crop, ink hierarchy, and instructional composition.
- No vaporwave rainbow, black-green coding palette, or high-saturation futuristic glow.

## 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 | `#F3EBD8` |
| surface | `#FFF9EA` |
| text | `#24231F` |
| muted | `#777064` |
| border | `#1E1D19` |
| accent | `#2F5F9A` |
| on_accent | `#FFF9EA` |
| accent_2 | `#5E7453` |
| accent_3 | `#A04438` |
| success | `#5E7453` |
| warning | `#B08A45` |
| error | `#A04438` |
| info | `#3B6792` |

## Typography

- **Headline-Lg**: Zen Kaku Gothic Antique, 1.929rem, weight 700, line-height 1.1.
- **Headline-Md**: Zen Kaku Gothic Antique, 1.581rem, weight 600, line-height 1.15.
- **Body-Md**: Zen Kaku Gothic New, 17px, weight 400, line-height 1.55.
- **Label-Md**: DotGothic16, 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**: `88px`
- **Step-9**: `112px`

### Grid

Desktop is a 12-column max-width 1180px page with asymmetric 7/5 and 4/8 panel spans; tablet collapses to 6 columns; mobile becomes one column with preserved floppy tabs and annotation layering. Columns use minmax(0,1fr) and children min-width:0.

### Whitespace

Outer margins broad at 48-112px while internal label gaps stay tight at 4-12px, creating the rhythm of a notebook page with crowded notes around calm diagrams.

### Density

Medium-high informational density with deliberate quiet cream margins so annotations and terminal fragments feel found rather than crammed.

### Responsive

Keep the dominant clubroom panel first, then the rail, printer strip, archive queue, and notes; fold margin annotations inline on narrow screens; only the full-bleed hero spans 100vw on ultra-wide.

### Breakpoints

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

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(30,29,25,0.18)
- **Md**: 4px 5px 0 rgba(30,29,25,0.10)
- **Lg**: 10px 12px 0 rgba(30,29,25,0.08)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: Cream base with faint blue-gray notebook ruling at 24px intervals; off-white ABS panels carry a second inset photocopy hairline.
- **Card Style**: Flat off-white panels with a 1px black ink outline, a 2px inset photocopy hairline, zero radius, and a restrained flat offset paper shadow.
- **Treatment**: Warm off-white paper and beige ABS plastic with subtle grain, notebook ruling, gray adhesive label overlays, and light toner speckle.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid black-ink structural outlines; secondary separators are rgba(30,29,25,0.14) photocopy hairlines
- **Character**: Structural ink outlines at high contrast; never grey decorative borders; never a single coloured accent edge on a card.

## Components

### Composition

A clubroom diagram sheet, not a dashboard: a dominant 7-span manga panel anchors the page, a 5-span rail of dense notes sits beside it, a full-width printer-test strip crosses the grid, and half/third panels of varied scale follow. Floppy-label tabs sit openly across the header; never three equal cards.

### Hierarchy

Hierarchy comes from ink weight, panel scale, label placement, and type roles: heavy Gothic display for identity, neat Gothic for labels and body, DotGothic16 for prompts, and blue handwriting for meta-commentary. Red marks remain micro-alerts only.

### Density

Alternate dense annotated modules with broad cream pauses; cluster related controls at 4-12px while major page areas separate by 64-112px, like a studied club notebook.

### Signature

Floppy-disk label tabs (clipped corner + hole-punch dot + slight rotation); blue-ballpoint margin annotations with dashed arrows and circled indices; full-width perforated printer-test strips; notebook-grid underlays; DotGothic16 terminal phosphor chips, one short command each; a dominant manga panel crop with a seating chart.

## 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-019ef8b7-ac27-7fc1-b7d6-4f3ace9d3996/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 cream paper, off-white ABS, black manga ink, faded label gray, and one restrained blue annotation channel.
- Do Name interface modules as plausible school computer-club artifacts: seating charts, disk ledgers, cable labels, boot logs, printer strips.
- Do Make manga influence structural: panel crops, gutter rhythm, restrained speed-lines, and instructional diagram hierarchy.
- Do Use terminal fragments as small punchlines or status whispers, no more than one short command per chip.
- Do Give one panel dominance and vary its neighbours by scale, density, and orientation.
- Do Use red only for tiny correction ticks, wrong-disk notes, or a single overdue warning.
- Do Explicitly style every form control with no visible browser defaults; keep body text 17px+ at high contrast.
- Don't Do not use green matrix rain, neon glows, vaporwave gradients, cyberpunk purple, or black-background hacker theatrics.
- Don't Do not draw anime characters or fan-art mascots; the manga reference is page architecture, not illustration fandom.
- Don't Do not create three equal cards in a row, generic analytics dashboards, CRM widgets, or SaaS pricing/feature grids.
- Don't Do not box the top nav in a floating pill or nest cards; let the nav sit openly across the header.
- Don't Do not add decorative colours beyond the blue annotation channel and tiny red correction marks.
- Don't Do not let handwritten notes become illegible decoration; every note should clarify, question, or humanize a nearby system detail.

### Accessibility

Maintain WCAG AA contrast for all core text on cream, keep blue notes large enough to read, never rely on colour alone for warnings, and preserve visible ink-outline focus states on every control.

## Imagery Direction

### Pairs With

toner-press

### Summary

Photocopied annotated ink-and-screentone drawings on warm cream paper, with one blue-ballpoint annotation channel, applied to shared-machine and clubroom subjects.

### Subjects

- a 1990s school club desktop machine and a stack of labeled floppy diskettes
- a clubroom desk with a CRT and desk lamp
- a single labeled floppy disk in close panel crop
- a seating-chart notebook page

### Usage

Use the Toner Press technique for the landing hero (full-bleed) and feature vignettes; keep cream paper, halftone screentone, and a single blue annotation; never neon, never anime mascots.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "diskette-ledger",
  "type": "registry:theme",
  "title": "Diskette Ledger shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F3EBD8",
      "foreground": "#24231F",
      "card": "#FFF9EA",
      "card-foreground": "#24231F",
      "popover": "#FFF9EA",
      "popover-foreground": "#24231F",
      "primary": "#24231F",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#777064",
      "muted-foreground": "#24231F",
      "accent": "#2F5F9A",
      "accent-foreground": "#ffffff",
      "destructive": "#A04438",
      "border": "#1E1D19",
      "input": "#1E1D19",
      "ring": "#2F5F9A",
      "chart-1": "#24231F",
      "chart-2": "#f4f4f5",
      "chart-3": "#2F5F9A",
      "chart-4": "#5E7453",
      "chart-5": "#B08A45",
      "sidebar": "#FFF9EA",
      "sidebar-foreground": "#24231F",
      "sidebar-primary": "#24231F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3B6792",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1E1D19",
      "sidebar-ring": "#2F5F9A",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#24231F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#2F5F9A",
      "accent-foreground": "#ffffff",
      "destructive": "#A04438",
      "border": "#303642",
      "input": "#303642",
      "ring": "#2F5F9A",
      "chart-1": "#24231F",
      "chart-2": "#f4f4f5",
      "chart-3": "#2F5F9A",
      "chart-4": "#5E7453",
      "chart-5": "#B08A45",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#24231F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F5F9A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#2F5F9A",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef8b7-ac27-7fc1-b7d6-4f3ace9d3996",
    "slug": "diskette-ledger",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_2",
        "accent_3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "annotation_font",
        "base_size",
        "body_font",
        "display_letter_spacing",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```