Kardex

# Kardex

## Philosophy

Kardex is the records instrument: an archival interface language in which identity is a filed plate, permission is a countersigned grant, and verification is a one-bit fact. Carbon-ink rules, registration marks, and tick rails organize archive white; monospaced ledger microtype sits beside every control; one small desaturated cyan pixel carries the whole verdict of trust — lit for sealed, pale for pending, absent for unsealed.

### Values

- negative space as evidence, not decoration
- precise microtype and diagnostic labels over spectacle
- carbon ink rule systems that organize the page
- cyan as a one-bit seal — sparse signal state, never glow wash
- interfaces that feel authored, verified, and slightly philosophical
- human presence implied through traces — initials, keys, countersigns — never portraits

### Anti-Values

- no green matrix rain or neon cyberpunk gradients
- no generic analytics dashboard
- no rounded SaaS card grid as the core form
- no character illustration or fan-art posters
- no glow washes; cyan stays under ten percent of visible color
- no deleted history — records accrue, never thin

### Visual Character

- Pale archival fields interrupted by narrow instrument bands — evidence strips with tick rails, not decorative cards.
- One-pixel ink rules, registration corners, and indexed callouts give every panel manga-schematic structure.
- Small desaturated cyan pixels appear only for sealed records, active tabs, selected rows, focus, and live keys.
- Asymmetric document consoles keep large silent white fields beside dense monospaced instrument clusters.
- Schematic linework is the interface architecture: rules, leader ticks, and crop marks replace illustration.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F8FAF7` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#14181D` |
| muted | `#5B646C` |
| border | `#171A1F` |
| accent | `#147D96` |
| accent_2 | `#2E93A6` |
| accent_soft | `#EDF4F6` |
| on_accent | `#FFFFFF` |
| success | `#43705D` |
| warning | `#A8752E` |
| error | `#A84A52` |
| info | `#2E93A6` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans
- **Heading Font**: IBM Plex Sans Condensed
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.01em
- **Display Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Display Line Height**: 1.12
- **Scale Ratio**: 1.22
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap

### Radii

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

### Shadows

- **Sm**: 3px 3px 0 rgba(20,24,29,.18)
- **Md**: 4px 4px 0 rgba(20,24,29,.12)
- **Lg**: 0 24px 80px rgba(20,24,29,.10)

### Spacing

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

### Surfaces

- **Treatment**: cold archive white ground, pure white plates, carbon ink, one-bit cyan seal signals
- **Card Style**: hard-edged square plates with 1px ink rules, registration corners, and hard offset ink shadows
- **Bg Pattern**: faint dotted registration grid and sparse schematic contour fragments

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: carbon ink rules as considered structure — full-strength for plate perimeters and table heads, 8% ink hairlines for in-panel separation; registration corners and 12px tick rails as the page-wide ornament system

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(.16,1,.3,1)
- **Philosophy**: quiet one-bit ticks: state changes snap in 160ms, a blinking mono cursor, gentle 14px rise-ins gated behind a JS-set class so the settled page is the no-JS default; all motion respects prefers-reduced-motion

## Rules

### Composition

Resolve the 12-column grid asymmetrically: one dominant 7-8 column working field beside narrow utility rails, never equal card grids. Registration corners, index callouts (KX / 01 rails), and tick rules recur page-wide as the single ornament system. Keep cyan below ten percent of visible color and reserve it for seal state, focus, and selection.

### Density

Alternate quiet voids of 64-128px with micro-dense monospaced instrument clusters at 4-8px. Balance density across the canvas — never a crowded cluster beside a starved void.

### Hierarchy

Condensed 700 headings name the system; mono microtype carries record numbers, keys, dates, and countersigns beside every control. The hero is a filed document plate over schematic linework, never a dashboard metric.

### Signature Patterns

- The one-bit seal: an 8px cyan pixel — lit, pale, or absent — carries the verdict of verification on rows, tabs, records, and the primary button.
- Title plates with mono index rails, stacked coordinates, registration corners, and a closing tick rule.
- The ledger: verified rows wash cyan at 7% and carry their pixel in a leading seal column an auditor scans like a card drawer.
- Instrument strips: horizontal evidence bands of large condensed numerals over mono sublabels, split by hairlines.
- The shell: an ink-ground transcript strip where the archive answers in writing, prompt marked by the pale signal.

## Layout

### Breakpoints

mobile <700px, tablet 700-1099px, desktop >=1100px

### Grid

12-column desktop grid resolved as a dominant 7-8 column working field with narrow rails; the tablet band is its own considered layout (instrument strips fold 2x2, side rails join as a second column); mobile stacks to one column keeping the main plate first.

### Whitespace

Whitespace is the atmosphere and must remain visibly larger than the control clusters.

### Density

Sparse macro layout, dense mono micro labels.

### Responsive

Display headlines clamp and wrap, never clip; non-essential nav links and table columns hide on mobile; grids use minmax(0,1fr) so children shrink instead of overflowing; only the hero spans 100vw on ultra-wide.

## Guidance

### Do

- Use archive white and carbon ink as the dominant material
- Make every cyan mark communicate seal state, focus, or selection
- Use monospaced record numbers, keys, dates, and countersign labels beside controls
- Build asymmetric working fields with narrow rails, not equal cards
- Let schematic linework — rules, registration corners, tick rails — behave as the page's architecture
- Keep warnings tiny and semantically specific

### Don't

- Do not use neon cyberpunk, green code rain, or glow washes
- Do not round plates, buttons, or inputs — pills are for state chips only
- Do not use portraits or character art; people appear as initials and signatures
- Do not create generic analytics dashboards; every number belongs to a filed record
- Do not let button or chip labels wrap
- Do not delete history in the fiction of the interface — records accrue, never thin

### Accessibility

Maintain AA contrast; never encode seal state through cyan alone — pair the pixel with a mono state label; focus states are 2px cyan outlines offset 3px; body text stays at 17px or larger.

### Usage Context

Best for registries, archives, access and permission systems, provenance and audit tools, diagnostic fiction, and editorial interfaces that need cybernetic restraint with institutional gravity.

## Imagery Direction

### Summary

Exploded schematic linework as interface architecture: fine ink contour drawings of drawers, card indexes, and instruments on dotted or ruled archive paper, with leader lines, crop marks, registration corners, and two or three small cyan squares at meaningful intersections.

### Technique

archival schematic ink drawing, flat one-bit style, no shading gradients

### Negative

no character posters, no cyberpunk scenery, no photography, no text or logos in imagery

### Hero File Id

fl-019f2e36-41f1-7950-9727-189afbaef64e

---
version: "alpha"
name: "Kardex"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F8FAF7"
  surface: "#FFFFFF"
  surface_solid: "#FFFFFF"
  text: "#14181D"
  muted: "#5B646C"
  border: "#171A1F"
  accent: "#147D96"
  accent_2: "#2E93A6"
  accent_soft: "#EDF4F6"
  on_accent: "#FFFFFF"
  success: "#43705D"
  warning: "#A8752E"
  error: "#A84A52"
  info: "#2E93A6"
typography:
  headline-lg:
    fontFamily: "IBM Plex Sans Condensed"
    fontSize: "1.929rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "IBM Plex Sans Condensed"
    fontSize: "1.581rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  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-accent_2:
    backgroundColor: "{colors.accent_2}"
  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: "#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"
---

# Kardex

## Overview

Kardex is the records instrument: an archival interface language in which identity is a filed plate, permission is a countersigned grant, and verification is a one-bit fact. Carbon-ink rules, registration marks, and tick rails organize archive white; monospaced ledger microtype sits beside every control; one small desaturated cyan pixel carries the whole verdict of trust — lit for sealed, pale for pending, absent for unsealed.

### Values

- negative space as evidence, not decoration
- precise microtype and diagnostic labels over spectacle
- carbon ink rule systems that organize the page
- cyan as a one-bit seal — sparse signal state, never glow wash
- interfaces that feel authored, verified, and slightly philosophical
- human presence implied through traces — initials, keys, countersigns — never portraits

### Anti-Values

- no green matrix rain or neon cyberpunk gradients
- no generic analytics dashboard
- no rounded SaaS card grid as the core form
- no character illustration or fan-art posters
- no glow washes; cyan stays under ten percent of visible color
- no deleted history — records accrue, never thin

### Visual Character

- Pale archival fields interrupted by narrow instrument bands — evidence strips with tick rails, not decorative cards.
- One-pixel ink rules, registration corners, and indexed callouts give every panel manga-schematic structure.
- Small desaturated cyan pixels appear only for sealed records, active tabs, selected rows, focus, and live keys.
- Asymmetric document consoles keep large silent white fields beside dense monospaced instrument clusters.
- Schematic linework is the interface architecture: rules, leader ticks, and crop marks replace illustration.

## 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 | `#F8FAF7` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#14181D` |
| muted | `#5B646C` |
| border | `#171A1F` |
| accent | `#147D96` |
| accent_2 | `#2E93A6` |
| accent_soft | `#EDF4F6` |
| on_accent | `#FFFFFF` |
| success | `#43705D` |
| warning | `#A8752E` |
| error | `#A84A52` |
| info | `#2E93A6` |

## Typography

- **Headline-Lg**: IBM Plex Sans Condensed, 1.929rem, weight 700, line-height 1.1.
- **Headline-Md**: IBM Plex Sans Condensed, 1.581rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.55.
- **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`

### Breakpoints

mobile <700px, tablet 700-1099px, desktop >=1100px

### Grid

12-column desktop grid resolved as a dominant 7-8 column working field with narrow rails; the tablet band is its own considered layout (instrument strips fold 2x2, side rails join as a second column); mobile stacks to one column keeping the main plate first.

### Whitespace

Whitespace is the atmosphere and must remain visibly larger than the control clusters.

### Density

Sparse macro layout, dense mono micro labels.

### Responsive

Display headlines clamp and wrap, never clip; non-essential nav links and table columns hide on mobile; grids use minmax(0,1fr) so children shrink instead of overflowing; only the hero spans 100vw on ultra-wide.

## Elevation & Depth

### Shadows

- **Sm**: 3px 3px 0 rgba(20,24,29,.18)
- **Md**: 4px 4px 0 rgba(20,24,29,.12)
- **Lg**: 0 24px 80px rgba(20,24,29,.10)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: cold archive white ground, pure white plates, carbon ink, one-bit cyan seal signals
- **Card Style**: hard-edged square plates with 1px ink rules, registration corners, and hard offset ink shadows
- **Bg Pattern**: faint dotted registration grid and sparse schematic contour fragments

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: carbon ink rules as considered structure — full-strength for plate perimeters and table heads, 8% ink hairlines for in-panel separation; registration corners and 12px tick rails as the page-wide ornament system

## Components

### Composition

Resolve the 12-column grid asymmetrically: one dominant 7-8 column working field beside narrow utility rails, never equal card grids. Registration corners, index callouts (KX / 01 rails), and tick rules recur page-wide as the single ornament system. Keep cyan below ten percent of visible color and reserve it for seal state, focus, and selection.

### Density

Alternate quiet voids of 64-128px with micro-dense monospaced instrument clusters at 4-8px. Balance density across the canvas — never a crowded cluster beside a starved void.

### Hierarchy

Condensed 700 headings name the system; mono microtype carries record numbers, keys, dates, and countersigns beside every control. The hero is a filed document plate over schematic linework, never a dashboard metric.

### Signature Patterns

- The one-bit seal: an 8px cyan pixel — lit, pale, or absent — carries the verdict of verification on rows, tabs, records, and the primary button.
- Title plates with mono index rails, stacked coordinates, registration corners, and a closing tick rule.
- The ledger: verified rows wash cyan at 7% and carry their pixel in a leading seal column an auditor scans like a card drawer.
- Instrument strips: horizontal evidence bands of large condensed numerals over mono sublabels, split by hairlines.
- The shell: an ink-ground transcript strip where the archive answers in writing, prompt marked by the pale signal.

## 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-019f2e75-1dec-76e2-9380-2adde9fed568/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 archive white and carbon ink as the dominant material
- Do Make every cyan mark communicate seal state, focus, or selection
- Do Use monospaced record numbers, keys, dates, and countersign labels beside controls
- Do Build asymmetric working fields with narrow rails, not equal cards
- Do Let schematic linework — rules, registration corners, tick rails — behave as the page's architecture
- Do Keep warnings tiny and semantically specific
- Don't Do not use neon cyberpunk, green code rain, or glow washes
- Don't Do not round plates, buttons, or inputs — pills are for state chips only
- Don't Do not use portraits or character art; people appear as initials and signatures
- Don't Do not create generic analytics dashboards; every number belongs to a filed record
- Don't Do not let button or chip labels wrap
- Don't Do not delete history in the fiction of the interface — records accrue, never thin

### Accessibility

Maintain AA contrast; never encode seal state through cyan alone — pair the pixel with a mono state label; focus states are 2px cyan outlines offset 3px; body text stays at 17px or larger.

### Usage Context

Best for registries, archives, access and permission systems, provenance and audit tools, diagnostic fiction, and editorial interfaces that need cybernetic restraint with institutional gravity.

## Imagery Direction

### Summary

Exploded schematic linework as interface architecture: fine ink contour drawings of drawers, card indexes, and instruments on dotted or ruled archive paper, with leader lines, crop marks, registration corners, and two or three small cyan squares at meaningful intersections.

### Technique

archival schematic ink drawing, flat one-bit style, no shading gradients

### Negative

no character posters, no cyberpunk scenery, no photography, no text or logos in imagery

### Hero File Id

fl-019f2e36-41f1-7950-9727-189afbaef64e

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kardex",
  "type": "registry:theme",
  "title": "Kardex shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F8FAF7",
      "foreground": "#14181D",
      "card": "#FFFFFF",
      "card-foreground": "#14181D",
      "popover": "#FFFFFF",
      "popover-foreground": "#14181D",
      "primary": "#14181D",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5B646C",
      "muted-foreground": "#14181D",
      "accent": "#147D96",
      "accent-foreground": "#ffffff",
      "destructive": "#A84A52",
      "border": "#171A1F",
      "input": "#171A1F",
      "ring": "#147D96",
      "chart-1": "#14181D",
      "chart-2": "#f4f4f5",
      "chart-3": "#147D96",
      "chart-4": "#43705D",
      "chart-5": "#A8752E",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#14181D",
      "sidebar-primary": "#14181D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2E93A6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#171A1F",
      "sidebar-ring": "#147D96",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#14181D",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#147D96",
      "accent-foreground": "#ffffff",
      "destructive": "#A84A52",
      "border": "#303642",
      "input": "#303642",
      "ring": "#147D96",
      "chart-1": "#14181D",
      "chart-2": "#f4f4f5",
      "chart-3": "#147D96",
      "chart-4": "#43705D",
      "chart-5": "#A8752E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#14181D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#147D96",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#147D96",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f2e75-1dec-76e2-9380-2adde9fed568",
    "slug": "kardex",
    "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_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_solid",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_letter_spacing",
        "display_line_height",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "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"
      ]
    }
  }
}
```