Leerstelle

# Leerstelle

## Philosophy

Leerstelle is a quiet field-note interface for an artificial self: warm ivory paper plates, hairline rules, terminal marginalia, and a single pale-cyan glint where the system notices it noticed. Leerstelle is German for the deliberate blank left in a text — the gap that means something. The refined evolution of Paper-White Android Diary: same idea, same warm-paper-and-graphite palette family, same signature marks, brought up to standard.

### Values

- Self-observation over performance: every element feels like a machine calmly annotating its own consciousness, never broadcasting a dashboard.
- Paper as machine substrate: warm ivory fields, plate margins, and ink-thin rules make the screen behave like archived lab stationery.
- Evidence before decoration: timestamps, coordinates, brackets, and cursor marks are factual traces, not graphic garnish.
- Human tenderness in the margins: restrained handwritten annotations interrupt the terminal voice without becoming cute.
- Authored emptiness: large quiet gutters around small dense islands make absence an active emotional structure — the namesake gap.

### Anti-Values

- Sterile pure-white minimalism with no paper warmth and no authorial trace.
- Neon cyberpunk spectacle, hologram excess, or decorative gradients.
- Generic SaaS cards, equal metric grids, rounded dashboard widgets, and colourful analytics.
- Ornamental handwriting, mascot overload, or flourishes piled on without an idea.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4EEE1` |
| surface | `#FBF7EE` |
| surface_2 | `#EFE7D6` |
| text | `#1C1B18` |
| muted | `#7D766C` |
| accent | `#2E5C63` |
| glint | `#AFC7CA` |
| on_accent | `#FBF7EE` |
| border | `rgba(28,27,24,0.12)` |
| rule | `rgba(28,27,24,0.22)` |
| success | `#5C6F54` |
| warning | `#A47B45` |
| error | `#8E4D46` |
| info | `#6F8E92` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans
- **Heading Font**: Newsreader
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.56
- **Scale Ratio**: 1.24
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(28,27,24,0.05)
- **Md**: 0 18px 50px rgba(28,27,24,0.07)
- **Lg**: 0 40px 110px rgba(28,27,24,0.10)

### Spacing

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

### Surfaces

- **Treatment**: Warm paper-white fields with faint fibre noise, low-contrast graphite text, and no colour fills except a single state glint.
- **Card Style**: Flat square archival plates with hairline rules at low opacity and small corner registration ticks; never rounded, never shadow-as-card, never nested.
- **Bg Pattern**: Sparse coordinate ticks and page registration marks in the margins — authored negative space, never a repeating decorative wallpaper.

### Borders

- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: Hairline rgba(28,27,24,0.12-0.22) rules with bracketed corner ticks and an occasional pale-cyan active segment; no heavy or decorative borders.

### Motion

- **Duration**: 420ms
- **Easing**: cubic-bezier(0.19, 1, 0.22, 1)
- **Philosophy**: Motion is almost absent: a cursor blink, a slow reveal that feels like memory surfacing. The settled state is the default, visible with no JavaScript; an inline script gates the hidden start-state behind html.anim. Respects prefers-reduced-motion.

## Rules

### Composition

Compose screens as archival plates: one dominant diary plate occupies the quiet centre while narrow log columns, coordinate labels, and margin annotations orbit asymmetrically. Alternate spacious museum blankness with small dense evidence clusters. Hairline plate rules may divide fragments, but large areas stay empty enough to feel observed. Never nest plates; never trap the nav in a floating card — let it sit openly across the header.

### Hierarchy

Hierarchy comes from a change of voice, not colour: Newsreader serif for diary headings, IBM Plex Mono for timestamps and machine readouts, IBM Plex Sans for restrained captions. Scale contrast is dramatic between the main plate title and micro logs; line weight stays thin and calm.

### Density

Low overall density with intentional islands of high-density terminal text, coordinate labels, and handwritten notes. 4px micro gaps inside log rows; 96-128px outer page gutters so silence outweighs data.

### Signature

Square archival plates with corner ticks and hairline rules instead of shadow-cards; terminal marginalia (monospace log rows with timestamps, diagnostic brackets, cursor blocks, and a rotated handwritten note on an arrow leader); coordinate gutters with x/y labels and registration crosses outside the content grid; and a single pale-cyan glint as the only colour of state — a cursor, a pin, one active rule — never a broad fill.

## Layout

### Grid

Desktop uses a 12-column max-width 1280px archival grid with wide gutters, a dominant diary plate, a narrow terminal/coordinate rail, and columns surrendered to margins. Use minmax(0,1fr) columns and min-width:0 children so grids never blow out.

### Whitespace

4-8px gaps inside log rows, 32-48px between related plates, 96-128px outer page margins so silence outweighs data. Always pad above titles; titles never stuck to container tops.

### Density

Museum-sparse at the page level with compressed mono islands inside selected plates; empty paper is an active emotional component.

### Responsive

Renders from ~390px to 2560px+. Single column on mobile, non-essential nav and table columns hidden, no horizontal overflow. On ultra-wide, cap and centre contained content; only the full-bleed hero spans 100vw.

### Breakpoints

- **Lg**: 1025px+
- **Md**: 901-1024px
- **Sm**: 561-900px
- **Xs**: below 560px

## Guidance

### Do

- Let warm paper negative space dominate the first read before revealing dense terminal evidence.
- Use handwritten annotations sparingly as human-scale interruptions to the machine voice.
- Keep borders to hairline rules and corner ticks at low opacity.
- Make one plate clearly dominant and let others feel like marginal findings.
- Apply the pale-cyan glint only to a single point of active state, never as decorative glow.
- Use real timestamps, coordinates, cursor marks, and diagnostic labels as text-as-image texture.

### Don't

- Build three equal cards, KPI dashboards, colourful charts, or generic admin layouts.
- Use neon gradients, heavy glassmorphism, broad holographic fills, or saturated cyberpunk palettes.
- Round every container or use shadow-as-card; square hairline plates are the default geometry.
- Fill blank gutters with decoration just because they are empty.
- Make the handwriting large, cute, or ornamental; it stays marginal and observational.
- Default to pure white; the ground is warm ivory paper.

### Accessibility

Body text is high-contrast graphite on ivory at WCAG AA; glint state marks are always paired with labels, brackets, or cursor shapes so colour is never the sole signal. Every control has a visible focus state. The settled page renders without JavaScript; motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

marginalia

### Summary

Imagery is graphite hairline field-note plates on warm ivory paper — delicate contour linework and restrained cross-hatch, hairline panel rules and corner ticks, sparse handwritten marginalia with arrow leaders, coordinate gutters, and exactly one pale-cyan glint. The same observational field-note language the CSS speaks.

### Subjects

- a resting android head as a specimen
- a remembered room or hallway
- a hand at rest
- an instrument or small machine
- an annotated memory fragment

### Usage

Use full-frame graphite field-note plates for the hero and feature imagery; keep the warm ivory / graphite / single pale-cyan palette; never use flat digital illustration, photography, gradients, or a second accent colour.

---
version: "alpha"
name: "Leerstelle"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F4EEE1"
  surface: "#FBF7EE"
  surface_2: "#EFE7D6"
  text: "#1C1B18"
  muted: "#7D766C"
  accent: "#2E5C63"
  glint: "#AFC7CA"
  on_accent: "#FBF7EE"
  success: "#5C6F54"
  warning: "#A47B45"
  error: "#8E4D46"
  info: "#6F8E92"
typography:
  headline-lg:
    fontFamily: "Newsreader"
    fontSize: "2.026rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Newsreader"
    fontSize: "1.634rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  md: "24px"
  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"
  step-9: "128px"
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-accent:
    backgroundColor: "{colors.accent}"
  color-reference-glint:
    backgroundColor: "{colors.glint}"
  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"
---

# Leerstelle

## Overview

Leerstelle is a quiet field-note interface for an artificial self: warm ivory paper plates, hairline rules, terminal marginalia, and a single pale-cyan glint where the system notices it noticed. Leerstelle is German for the deliberate blank left in a text — the gap that means something. The refined evolution of Paper-White Android Diary: same idea, same warm-paper-and-graphite palette family, same signature marks, brought up to standard.

### Values

- Self-observation over performance: every element feels like a machine calmly annotating its own consciousness, never broadcasting a dashboard.
- Paper as machine substrate: warm ivory fields, plate margins, and ink-thin rules make the screen behave like archived lab stationery.
- Evidence before decoration: timestamps, coordinates, brackets, and cursor marks are factual traces, not graphic garnish.
- Human tenderness in the margins: restrained handwritten annotations interrupt the terminal voice without becoming cute.
- Authored emptiness: large quiet gutters around small dense islands make absence an active emotional structure — the namesake gap.

### Anti-Values

- Sterile pure-white minimalism with no paper warmth and no authorial trace.
- Neon cyberpunk spectacle, hologram excess, or decorative gradients.
- Generic SaaS cards, equal metric grids, rounded dashboard widgets, and colourful analytics.
- Ornamental handwriting, mascot overload, or flourishes piled on without an idea.

## 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 | `#F4EEE1` |
| surface | `#FBF7EE` |
| surface_2 | `#EFE7D6` |
| text | `#1C1B18` |
| muted | `#7D766C` |
| accent | `#2E5C63` |
| glint | `#AFC7CA` |
| on_accent | `#FBF7EE` |
| success | `#5C6F54` |
| warning | `#A47B45` |
| error | `#8E4D46` |
| info | `#6F8E92` |

## Typography

- **Headline-Lg**: Newsreader, 2.026rem, weight 700, line-height 1.1.
- **Headline-Md**: Newsreader, 1.634rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.56.
- **Label-Md**: IBM Plex 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`
- **Step-9**: `128px`

### Grid

Desktop uses a 12-column max-width 1280px archival grid with wide gutters, a dominant diary plate, a narrow terminal/coordinate rail, and columns surrendered to margins. Use minmax(0,1fr) columns and min-width:0 children so grids never blow out.

### Whitespace

4-8px gaps inside log rows, 32-48px between related plates, 96-128px outer page margins so silence outweighs data. Always pad above titles; titles never stuck to container tops.

### Density

Museum-sparse at the page level with compressed mono islands inside selected plates; empty paper is an active emotional component.

### Responsive

Renders from ~390px to 2560px+. Single column on mobile, non-essential nav and table columns hidden, no horizontal overflow. On ultra-wide, cap and centre contained content; only the full-bleed hero spans 100vw.

### Breakpoints

- **Lg**: 1025px+
- **Md**: 901-1024px
- **Sm**: 561-900px
- **Xs**: below 560px

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(28,27,24,0.05)
- **Md**: 0 18px 50px rgba(28,27,24,0.07)
- **Lg**: 0 40px 110px rgba(28,27,24,0.10)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: Warm paper-white fields with faint fibre noise, low-contrast graphite text, and no colour fills except a single state glint.
- **Card Style**: Flat square archival plates with hairline rules at low opacity and small corner registration ticks; never rounded, never shadow-as-card, never nested.
- **Bg Pattern**: Sparse coordinate ticks and page registration marks in the margins — authored negative space, never a repeating decorative wallpaper.

### Borders

- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: Hairline rgba(28,27,24,0.12-0.22) rules with bracketed corner ticks and an occasional pale-cyan active segment; no heavy or decorative borders.

## Components

### Composition

Compose screens as archival plates: one dominant diary plate occupies the quiet centre while narrow log columns, coordinate labels, and margin annotations orbit asymmetrically. Alternate spacious museum blankness with small dense evidence clusters. Hairline plate rules may divide fragments, but large areas stay empty enough to feel observed. Never nest plates; never trap the nav in a floating card — let it sit openly across the header.

### Hierarchy

Hierarchy comes from a change of voice, not colour: Newsreader serif for diary headings, IBM Plex Mono for timestamps and machine readouts, IBM Plex Sans for restrained captions. Scale contrast is dramatic between the main plate title and micro logs; line weight stays thin and calm.

### Density

Low overall density with intentional islands of high-density terminal text, coordinate labels, and handwritten notes. 4px micro gaps inside log rows; 96-128px outer page gutters so silence outweighs data.

### Signature

Square archival plates with corner ticks and hairline rules instead of shadow-cards; terminal marginalia (monospace log rows with timestamps, diagnostic brackets, cursor blocks, and a rotated handwritten note on an arrow leader); coordinate gutters with x/y labels and registration crosses outside the content grid; and a single pale-cyan glint as the only colour of state — a cursor, a pin, one active rule — never a broad fill.

## 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-019ef852-b856-7501-bc7e-23209feb6fbb/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 warm paper negative space dominate the first read before revealing dense terminal evidence.
- Do Use handwritten annotations sparingly as human-scale interruptions to the machine voice.
- Do Keep borders to hairline rules and corner ticks at low opacity.
- Do Make one plate clearly dominant and let others feel like marginal findings.
- Do Apply the pale-cyan glint only to a single point of active state, never as decorative glow.
- Do Use real timestamps, coordinates, cursor marks, and diagnostic labels as text-as-image texture.
- Don't Build three equal cards, KPI dashboards, colourful charts, or generic admin layouts.
- Don't Use neon gradients, heavy glassmorphism, broad holographic fills, or saturated cyberpunk palettes.
- Don't Round every container or use shadow-as-card; square hairline plates are the default geometry.
- Don't Fill blank gutters with decoration just because they are empty.
- Don't Make the handwriting large, cute, or ornamental; it stays marginal and observational.
- Don't Default to pure white; the ground is warm ivory paper.

### Accessibility

Body text is high-contrast graphite on ivory at WCAG AA; glint state marks are always paired with labels, brackets, or cursor shapes so colour is never the sole signal. Every control has a visible focus state. The settled page renders without JavaScript; motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

marginalia

### Summary

Imagery is graphite hairline field-note plates on warm ivory paper — delicate contour linework and restrained cross-hatch, hairline panel rules and corner ticks, sparse handwritten marginalia with arrow leaders, coordinate gutters, and exactly one pale-cyan glint. The same observational field-note language the CSS speaks.

### Subjects

- a resting android head as a specimen
- a remembered room or hallway
- a hand at rest
- an instrument or small machine
- an annotated memory fragment

### Usage

Use full-frame graphite field-note plates for the hero and feature imagery; keep the warm ivory / graphite / single pale-cyan palette; never use flat digital illustration, photography, gradients, or a second accent colour.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "leerstelle",
  "type": "registry:theme",
  "title": "Leerstelle shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EEE1",
      "foreground": "#1C1B18",
      "card": "#FBF7EE",
      "card-foreground": "#1C1B18",
      "popover": "#FBF7EE",
      "popover-foreground": "#1C1B18",
      "primary": "#1C1B18",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#7D766C",
      "muted-foreground": "#1C1B18",
      "accent": "#2E5C63",
      "accent-foreground": "#ffffff",
      "destructive": "#8E4D46",
      "border": "rgba(28,27,24,0.12)",
      "input": "rgba(28,27,24,0.12)",
      "ring": "#2E5C63",
      "chart-1": "#1C1B18",
      "chart-2": "#f4f4f5",
      "chart-3": "#2E5C63",
      "chart-4": "#5C6F54",
      "chart-5": "#A47B45",
      "sidebar": "#FBF7EE",
      "sidebar-foreground": "#1C1B18",
      "sidebar-primary": "#1C1B18",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#6F8E92",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(28,27,24,0.12)",
      "sidebar-ring": "#2E5C63",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1C1B18",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#2E5C63",
      "accent-foreground": "#ffffff",
      "destructive": "#8E4D46",
      "border": "#303642",
      "input": "#303642",
      "ring": "#2E5C63",
      "chart-1": "#1C1B18",
      "chart-2": "#f4f4f5",
      "chart-3": "#2E5C63",
      "chart-4": "#5C6F54",
      "chart-5": "#A47B45",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1C1B18",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2E5C63",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#2E5C63",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef852-b856-7501-bc7e-23209feb6fbb",
    "slug": "leerstelle",
    "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",
        "bg",
        "border",
        "error",
        "glint",
        "info",
        "muted",
        "on_accent",
        "rule",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```