Quadro

# Quadro

## Philosophy

Quadro is the modular-grid design language: it keeps the Swiss soul — objective clarity, hairline discipline, and one urgent signal in a monochrome field — and rebuilds that order as a viewport that cleaves into panels and recomposes. Every module is a frame; the whole page is one composable grid that partitions, swaps its modules, and re-tiles to signal.

### Values

- objective order over decoration
- one signal that means something
- modules that cleave, settle, and recompose
- warm paper authority over stark white
- hairline structure over boxes and shadows

### Anti-Values

- rounded friendly softness
- glass and glow
- a second accent used as fill
- boxed-in navigation widgets
- one-off type sizes

### Visual Character

- a composable grid of framed modules divided by hairline seams
- an oversized left index rail of section numbers
- hairline and 2px rules that partition and open modules
- warm paper ground with ink modules
- one vermilion signal module and one amber transit module

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#EFEBE2` |
| surface | `#FBF9F3` |
| surface_solid | `#FFFFFF` |
| text | `#14130F` |
| muted | `#6C665B` |
| border | `#16150F` |
| accent | `#E23A1E` |
| accent_2 | `#E39A12` |
| accent_soft | `#F3E6C7` |
| on_accent | `#FBF9F3` |
| success | `#1E6E43` |
| warning | `#B26A00` |
| error | `#B4231A` |
| info | `#17607F` |

### Typography

- **Base Size**: 17px
- **Body Font**: Archivo, system-ui, sans-serif
- **Heading Font**: Archivo, Arial Narrow, sans-serif
- **Mono Font**: IBM Plex Mono, ui-monospace, monospace
- **Heading Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.5
- **Scale Ratio**: 1.28
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(20,19,15,0.14)
- **Md**: 0 2px 0 rgba(20,19,15,0.18)
- **Lg**: 0 3px 0 rgba(20,19,15,0.22)

### Spacing

- **Base**: 8px
- **Scale**: ["6px","10px","16px","24px","36px","56px","84px","128px"]

### Surfaces

- **Treatment**: paper
- **Card Style**: ruled planes separated by hairline and 2px top rules; no elevation, no rounded cards
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: hairline rules divide modules and rows; a 2px top rule opens a panel; the flap seam is a 1px hairline through every mechanical cell

### Motion

- **Duration**: 150ms
- **Easing**: cubic-bezier(0.2,0,0,1)
- **Philosophy**: mechanical — values settle into place like a flap turning; snappy, purposeful, never decorative

## Rules

### Composition

Build on an asymmetric grid with an oversized left index rail; set important values in the primary value module; separate modules with hairline and 2px top rules, never nested cards.

### Hierarchy

Hierarchy comes from scale jumps in one strict type scale, the primary module's signal/amber cells, and position in the grid — not from colour fill or ornament.

### Density

Medium density, high legibility: generous margins, tight rows, tabular mono for numeric values; whitespace is structural and architectural.

### Signature Patterns

- every important value is set in split-flap mono cells, each with a 1px flap seam
- one vermilion signal cell marks the value that matters; one amber cell marks a value in transit
- a triangular position marker rides the active cell like a cursor on the module grid
- modules are opened by a 2px top rule and divided by 1px hairlines, never boxed on all sides
- the flap seam recurs page-wide as the ornament system — the primary value module, module clock, tile field, throughput bars

## Layout

### Grid

Desktop uses an asymmetric grid with a fixed left index rail (mono section numbers, detached from content) plus flexible content columns; the dashboard uses a fixed rail plus a flexible field of frames.

### Breakpoints

The tablet band (768-1024) is its own layout: the rail becomes a top row and panels reflow two-up. Phone collapses to a single column, index numbers become inline headers, tables scroll inside ruled wrappers, and the nav collapses rather than spilling.

### Whitespace

Structural: large outer margins, generous inter-section spacing, an 8px baseline; negative space frames typography like poster composition.

## Guidance

### Do

- Set values that matter in the primary value module so they read as the dominant frame.
- Keep vermilion positional and amber for motion.
- Separate modules with hairline and 2px rules instead of nested cards.
- Use tabular mono for times, codes, and totals.
- Let typography and the flap seam carry the identity before colour.

### Don't

- Fill the page with red or amber; they are lamps, not paint.
- Round the cells or soften them with glows.
- Box navigation into a floating pill.
- Add a second display face or stray one-off type sizes.
- Bury copy under busy imagery or let imagery starve information.

## Imagery Direction

### Pairs With

quadratura

### Summary

Subjects reconstructed as modular grids: matte paper frames divided by hairline seams, panels that cleave and re-tile, monochrome ink and warm white with a single vermilion signal module. Imagery sits behind a legible veil in the hero and never contests copy for the same ground.

### Hero

A full composable grid (or the subject rebuilt as one), head-on, its modules mid-recompose behind a legible dark veil.

### Usage

Use imagery sparingly; prefer the composable grid, framed modules, ruled tables, and typographic rhythm.

---
version: "alpha"
name: "Quadro"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#EFEBE2"
  surface: "#FBF9F3"
  surface_solid: "#FFFFFF"
  text: "#14130F"
  muted: "#6C665B"
  border: "#16150F"
  accent: "#E23A1E"
  accent_2: "#E39A12"
  accent_soft: "#F3E6C7"
  on_accent: "#FBF9F3"
  success: "#1E6E43"
  warning: "#B26A00"
  error: "#B4231A"
  info: "#17607F"
typography:
  headline-lg:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Archivo, system-ui, sans-serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "6px"
  sm: "10px"
  md: "16px"
  lg: "24px"
  xl: "36px"
  2xl: "56px"
  3xl: "84px"
  4xl: "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: "#000000"
    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"
---

# Quadro

## Overview

Quadro is the modular-grid design language: it keeps the Swiss soul — objective clarity, hairline discipline, and one urgent signal in a monochrome field — and rebuilds that order as a viewport that cleaves into panels and recomposes. Every module is a frame; the whole page is one composable grid that partitions, swaps its modules, and re-tiles to signal.

### Values

- objective order over decoration
- one signal that means something
- modules that cleave, settle, and recompose
- warm paper authority over stark white
- hairline structure over boxes and shadows

### Anti-Values

- rounded friendly softness
- glass and glow
- a second accent used as fill
- boxed-in navigation widgets
- one-off type sizes

### Visual Character

- a composable grid of framed modules divided by hairline seams
- an oversized left index rail of section numbers
- hairline and 2px rules that partition and open modules
- warm paper ground with ink modules
- one vermilion signal module and one amber transit module

## 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 | `#EFEBE2` |
| surface | `#FBF9F3` |
| surface_solid | `#FFFFFF` |
| text | `#14130F` |
| muted | `#6C665B` |
| border | `#16150F` |
| accent | `#E23A1E` |
| accent_2 | `#E39A12` |
| accent_soft | `#F3E6C7` |
| on_accent | `#FBF9F3` |
| success | `#1E6E43` |
| warning | `#B26A00` |
| error | `#B4231A` |
| info | `#17607F` |

## Typography

- **Headline-Lg**: Archivo, Arial Narrow, sans-serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo, Arial Narrow, sans-serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo, system-ui, sans-serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, ui-monospace, monospace, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `6px`
- **Sm**: `10px`
- **Md**: `16px`
- **Lg**: `24px`
- **Xl**: `36px`
- **2xl**: `56px`
- **3xl**: `84px`
- **4xl**: `128px`

### Grid

Desktop uses an asymmetric grid with a fixed left index rail (mono section numbers, detached from content) plus flexible content columns; the dashboard uses a fixed rail plus a flexible field of frames.

### Breakpoints

The tablet band (768-1024) is its own layout: the rail becomes a top row and panels reflow two-up. Phone collapses to a single column, index numbers become inline headers, tables scroll inside ruled wrappers, and the nav collapses rather than spilling.

### Whitespace

Structural: large outer margins, generous inter-section spacing, an 8px baseline; negative space frames typography like poster composition.

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(20,19,15,0.14)
- **Md**: 0 2px 0 rgba(20,19,15,0.18)
- **Lg**: 0 3px 0 rgba(20,19,15,0.22)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: ruled planes separated by hairline and 2px top rules; no elevation, no rounded cards
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: hairline rules divide modules and rows; a 2px top rule opens a panel; the flap seam is a 1px hairline through every mechanical cell

## Components

### Composition

Build on an asymmetric grid with an oversized left index rail; set important values in the primary value module; separate modules with hairline and 2px top rules, never nested cards.

### Hierarchy

Hierarchy comes from scale jumps in one strict type scale, the primary module's signal/amber cells, and position in the grid — not from colour fill or ornament.

### Density

Medium density, high legibility: generous margins, tight rows, tabular mono for numeric values; whitespace is structural and architectural.

### Signature Patterns

- every important value is set in split-flap mono cells, each with a 1px flap seam
- one vermilion signal cell marks the value that matters; one amber cell marks a value in transit
- a triangular position marker rides the active cell like a cursor on the module grid
- modules are opened by a 2px top rule and divided by 1px hairlines, never boxed on all sides
- the flap seam recurs page-wide as the ornament system — the primary value module, module clock, tile field, throughput bars

## 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-019f707a-483d-7733-974a-4617c7566e66/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 Set values that matter in the primary value module so they read as the dominant frame.
- Do Keep vermilion positional and amber for motion.
- Do Separate modules with hairline and 2px rules instead of nested cards.
- Do Use tabular mono for times, codes, and totals.
- Do Let typography and the flap seam carry the identity before colour.
- Don't Fill the page with red or amber; they are lamps, not paint.
- Don't Round the cells or soften them with glows.
- Don't Box navigation into a floating pill.
- Don't Add a second display face or stray one-off type sizes.
- Don't Bury copy under busy imagery or let imagery starve information.

## Imagery Direction

### Pairs With

quadratura

### Summary

Subjects reconstructed as modular grids: matte paper frames divided by hairline seams, panels that cleave and re-tile, monochrome ink and warm white with a single vermilion signal module. Imagery sits behind a legible veil in the hero and never contests copy for the same ground.

### Hero

A full composable grid (or the subject rebuilt as one), head-on, its modules mid-recompose behind a legible dark veil.

### Usage

Use imagery sparingly; prefer the composable grid, framed modules, ruled tables, and typographic rhythm.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quadro",
  "type": "registry:theme",
  "title": "Quadro shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#EFEBE2",
      "foreground": "#14130F",
      "card": "#FBF9F3",
      "card-foreground": "#14130F",
      "popover": "#FBF9F3",
      "popover-foreground": "#14130F",
      "primary": "#14130F",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6C665B",
      "muted-foreground": "#14130F",
      "accent": "#E23A1E",
      "accent-foreground": "#ffffff",
      "destructive": "#B4231A",
      "border": "#16150F",
      "input": "#16150F",
      "ring": "#E23A1E",
      "chart-1": "#14130F",
      "chart-2": "#f4f4f5",
      "chart-3": "#E23A1E",
      "chart-4": "#1E6E43",
      "chart-5": "#B26A00",
      "sidebar": "#FBF9F3",
      "sidebar-foreground": "#14130F",
      "sidebar-primary": "#14130F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#17607F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#16150F",
      "sidebar-ring": "#E23A1E",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#14130F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E23A1E",
      "accent-foreground": "#ffffff",
      "destructive": "#B4231A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E23A1E",
      "chart-1": "#14130F",
      "chart-2": "#f4f4f5",
      "chart-3": "#E23A1E",
      "chart-4": "#1E6E43",
      "chart-5": "#B26A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#14130F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E23A1E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E23A1E",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f707a-483d-7733-974a-4617c7566e66",
    "slug": "quadro",
    "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",
        "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"
      ]
    }
  }
}
```