Graticule

# Graticule

## Philosophy

Graticule is a measurement workspace: it plates an operational control room onto a live ruled grid. Cool near-white drafting panels sit on a deep graphite table, each carrying a faint 24px measurement graticule and four corner registration ticks, while a single electric-blue datum line marks only the record that needs a decision. The faithful evolution of an enterprise mono-grid interface — same disciplined monochrome structure, same steel-and-graphite neutrals, same single electric-blue signal — brought to standard with a deliberate graphite ground, a full-viewport schematic hero, and a four-corner registration system in place of single-edge accents.

### Values

- operational clarity carried by typography and structure, never by colour
- dense information made legible by one shared ruling and tabular numerals
- interfaces that feel measured, dependable, and audit-ready
- state shown by a single signal, not by noise

### Anti-Values

- floating identical cards with a colour pasted on top
- rounded consumer-app softness, pastel washes, or decorative motion
- accent blue spread until it stops meaning anything

### Visual Character

- A live measurement graticule (a faint 24px ruling) shows through every panel, so columns, rows and readouts share one baseline across the whole workspace.
- Four corner registration ticks plate each cool near-white panel onto the deep graphite drafting table — structure without ever resorting to a single decorative edge.
- Oversized uppercase Space Grotesk headlines pair with IBM Plex Mono tabular metadata; hard typographic contrast establishes hierarchy so colour never has to.
- One electric-blue datum line, a left inset, and a tinted row mark only the active or anomalous record; cleared, awaiting and queued states stay monochrome.
- Charts sit over a faint gridline scaffold with exactly one anomaly node and its dashed datum line lifted in electric-blue, so data reads as instrumented without sci-fi chrome.
- Interactive controls reveal through a precise blue focus ring or underline, keeping the monochrome system intact while making state unmistakable.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#20242b` |
| secondary | `#5e6877` |
| accent | `#2f6fff` |
| background | `#171b22` |
| surface | `#f7f9fc` |
| text | `#14181e` |
| muted | `#6b7585` |
| border | `#c3ccd8` |
| error | `#c53b32` |
| success | `#1f7a55` |
| warning | `#a66a12` |
| info | `#2f6fff` |

### Typography

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

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 0
- **Md**: 2px
- **Lg**: 4px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 0 rgba(20,24,30,0.06)
- **Md**: 0 12px 30px rgba(20,24,30,0.10)
- **Lg**: 0 24px 60px rgba(20,24,30,0.14)

### Surfaces

- **Treatment**: flat-paper-on-graphite
- **Card Style**: Cool near-white drafting panels carrying a faint 24px measurement graticule, a steel header band, and four corner registration ticks, plated onto a deep graphite drafting-table ground.
- **Bg Pattern**: graticule-grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Infrastructural hairlines: crisp row rules, vertical separators, and four corner registration ticks per panel; never a single accent edge and never a heavy border.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.7, 0, 1)
- **Philosophy**: snappy and additive; the settled state is the no-JS default, reveals layered on top, fully disabled under prefers-reduced-motion

## Rules

### Composition

Compose screens as a command workspace with fixed graphite rails, a dominant cool-white analytical center, and a supporting inspection column, all plated onto the measurement graticule.

### Hierarchy

Use uppercase mono module labels, oversized grotesk headlines, and monospaced tabular metadata to separate strategic summary from transactional detail.

### Density

High-density but controlled — compact rows and disciplined spacing increments, every dense cluster paired with the ruling and mono labels so density reads as deliberate.

### Signature

Every panel is plated onto a faint 24px measurement graticule with four corner registration ticks; across tables, charts and inspectors exactly one element is lifted in electric-blue (the active record, the anomaly node, the focus ring), so the eye lands on the single thing in play.

## Layout

### Grid

A three-zone desktop command shell (graphite utility rail, wide cool-white workspace, graphite inspection sidebar); interior modules align to repeatable minmax(0,1fr) columns over the 24px graticule.

### Whitespace

Economical and rhythmic: small increments preserve density, larger gaps mark transitions between strategic modules.

### Density

dense

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; 1100 tablet drops the inspector below the workspace, 720 mobile stacks every region into one scrolling surface; the full-bleed hero spans 100vw while contained content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 720px
- **Desktop**: 1440px
- **Ultrawide**: 1700px

## Guidance

### Do

- Keep the ground deep graphite and the panels cool near-white paper on the ruling.
- Reserve electric-blue for the one active record, the focus ring, and the heat-scale high end.
- Pair grotesk headlines with monospaced tabular metadata for an audit-friendly tone.
- Keep row rules, column separators, and corner registration ticks visible so density feels organised.

### Don't

- Introduce soft rounded cards, pastel fills, or playful illustrations.
- Remove the ruling in the name of minimalism — the grid is the identity.
- Let accent blue become a decorative background or broad surface fill.
- Mark more than one element blue in a single view.

### Accessibility

Ink on paper and chrome text on graphite both hold AA contrast. Body is 17px+, table rows 14.5px+. Focus is a visible blue ring, not a colour-only cue; status is carried by a label plus a dot. Motion is additive over a settled no-JS default and respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

bluework

### Summary

Subjects rendered as precise orthographic engineering schematics in fine graphite hairline ink over a faint square measurement grid, with exactly one analytical element lifted in electric-blue signal. The landing hero is a surveyor's theodolite — the instrument that produces a graticule — read in that technique, weighted right with open drafting space at the left for the overlay.

### Subjects

- surveyor's theodolite transit
- optical reticle eyepiece
- precision measurement instrument
- graduated dial assembly
- exploded gauge assembly

### Usage

Full-viewport landing hero driven by background-image: var(--hero-image); the schematic fills the frame edge to edge with the measurement grid as substrate, the subject weighted to the right and a graphite wash carrying the left-side overlay.

---
version: "alpha"
name: "Graticule"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#20242b"
  secondary: "#5e6877"
  accent: "#2f6fff"
  background: "#171b22"
  surface: "#f7f9fc"
  text: "#14181e"
  muted: "#6b7585"
  border: "#c3ccd8"
  error: "#c53b32"
  success: "#1f7a55"
  warning: "#a66a12"
  info: "#2f6fff"
typography:
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "0.01em"
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "0.01em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "2px"
  lg: "4px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  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-error:
    backgroundColor: "{colors.error}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.primary}"
    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"
---

# Graticule

## Overview

Graticule is a measurement workspace: it plates an operational control room onto a live ruled grid. Cool near-white drafting panels sit on a deep graphite table, each carrying a faint 24px measurement graticule and four corner registration ticks, while a single electric-blue datum line marks only the record that needs a decision. The faithful evolution of an enterprise mono-grid interface — same disciplined monochrome structure, same steel-and-graphite neutrals, same single electric-blue signal — brought to standard with a deliberate graphite ground, a full-viewport schematic hero, and a four-corner registration system in place of single-edge accents.

### Values

- operational clarity carried by typography and structure, never by colour
- dense information made legible by one shared ruling and tabular numerals
- interfaces that feel measured, dependable, and audit-ready
- state shown by a single signal, not by noise

### Anti-Values

- floating identical cards with a colour pasted on top
- rounded consumer-app softness, pastel washes, or decorative motion
- accent blue spread until it stops meaning anything

### Visual Character

- A live measurement graticule (a faint 24px ruling) shows through every panel, so columns, rows and readouts share one baseline across the whole workspace.
- Four corner registration ticks plate each cool near-white panel onto the deep graphite drafting table — structure without ever resorting to a single decorative edge.
- Oversized uppercase Space Grotesk headlines pair with IBM Plex Mono tabular metadata; hard typographic contrast establishes hierarchy so colour never has to.
- One electric-blue datum line, a left inset, and a tinted row mark only the active or anomalous record; cleared, awaiting and queued states stay monochrome.
- Charts sit over a faint gridline scaffold with exactly one anomaly node and its dashed datum line lifted in electric-blue, so data reads as instrumented without sci-fi chrome.
- Interactive controls reveal through a precise blue focus ring or underline, keeping the monochrome system intact while making state unmistakable.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| primary | `#20242b` |
| secondary | `#5e6877` |
| accent | `#2f6fff` |
| background | `#171b22` |
| surface | `#f7f9fc` |
| text | `#14181e` |
| muted | `#6b7585` |
| border | `#c3ccd8` |
| error | `#c53b32` |
| success | `#1f7a55` |
| warning | `#a66a12` |
| info | `#2f6fff` |

## Typography

- **Headline-Lg**: Space Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.5.
- **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`

### Grid

A three-zone desktop command shell (graphite utility rail, wide cool-white workspace, graphite inspection sidebar); interior modules align to repeatable minmax(0,1fr) columns over the 24px graticule.

### Whitespace

Economical and rhythmic: small increments preserve density, larger gaps mark transitions between strategic modules.

### Density

dense

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; 1100 tablet drops the inspector below the workspace, 720 mobile stacks every region into one scrolling surface; the full-bleed hero spans 100vw while contained content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 720px
- **Desktop**: 1440px
- **Ultrawide**: 1700px

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(20,24,30,0.06)
- **Md**: 0 12px 30px rgba(20,24,30,0.10)
- **Lg**: 0 24px 60px rgba(20,24,30,0.14)

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `2px`
- **Lg**: `4px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: flat-paper-on-graphite
- **Card Style**: Cool near-white drafting panels carrying a faint 24px measurement graticule, a steel header band, and four corner registration ticks, plated onto a deep graphite drafting-table ground.
- **Bg Pattern**: graticule-grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Infrastructural hairlines: crisp row rules, vertical separators, and four corner registration ticks per panel; never a single accent edge and never a heavy border.

## Components

### Composition

Compose screens as a command workspace with fixed graphite rails, a dominant cool-white analytical center, and a supporting inspection column, all plated onto the measurement graticule.

### Hierarchy

Use uppercase mono module labels, oversized grotesk headlines, and monospaced tabular metadata to separate strategic summary from transactional detail.

### Density

High-density but controlled — compact rows and disciplined spacing increments, every dense cluster paired with the ruling and mono labels so density reads as deliberate.

### Signature

Every panel is plated onto a faint 24px measurement graticule with four corner registration ticks; across tables, charts and inspectors exactly one element is lifted in electric-blue (the active record, the anomaly node, the focus ring), so the eye lands on the single thing in play.

## 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-019efa7c-5133-7f82-a6af-bce556fd39fd/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 Keep the ground deep graphite and the panels cool near-white paper on the ruling.
- Do Reserve electric-blue for the one active record, the focus ring, and the heat-scale high end.
- Do Pair grotesk headlines with monospaced tabular metadata for an audit-friendly tone.
- Do Keep row rules, column separators, and corner registration ticks visible so density feels organised.
- Don't Introduce soft rounded cards, pastel fills, or playful illustrations.
- Don't Remove the ruling in the name of minimalism — the grid is the identity.
- Don't Let accent blue become a decorative background or broad surface fill.
- Don't Mark more than one element blue in a single view.

### Accessibility

Ink on paper and chrome text on graphite both hold AA contrast. Body is 17px+, table rows 14.5px+. Focus is a visible blue ring, not a colour-only cue; status is carried by a label plus a dot. Motion is additive over a settled no-JS default and respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

bluework

### Summary

Subjects rendered as precise orthographic engineering schematics in fine graphite hairline ink over a faint square measurement grid, with exactly one analytical element lifted in electric-blue signal. The landing hero is a surveyor's theodolite — the instrument that produces a graticule — read in that technique, weighted right with open drafting space at the left for the overlay.

### Subjects

- surveyor's theodolite transit
- optical reticle eyepiece
- precision measurement instrument
- graduated dial assembly
- exploded gauge assembly

### Usage

Full-viewport landing hero driven by background-image: var(--hero-image); the schematic fills the frame edge to edge with the measurement grid as substrate, the subject weighted to the right and a graphite wash carrying the left-side overlay.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "graticule",
  "type": "registry:theme",
  "title": "Graticule shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#171b22",
      "foreground": "#14181e",
      "card": "#f7f9fc",
      "card-foreground": "#14181e",
      "popover": "#f7f9fc",
      "popover-foreground": "#14181e",
      "primary": "#20242b",
      "primary-foreground": "#ffffff",
      "secondary": "#5e6877",
      "secondary-foreground": "#ffffff",
      "muted": "#6b7585",
      "muted-foreground": "#14181e",
      "accent": "#2f6fff",
      "accent-foreground": "#ffffff",
      "destructive": "#c53b32",
      "border": "#c3ccd8",
      "input": "#c3ccd8",
      "ring": "#2f6fff",
      "chart-1": "#20242b",
      "chart-2": "#5e6877",
      "chart-3": "#2f6fff",
      "chart-4": "#1f7a55",
      "chart-5": "#a66a12",
      "sidebar": "#f7f9fc",
      "sidebar-foreground": "#14181e",
      "sidebar-primary": "#20242b",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2f6fff",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#c3ccd8",
      "sidebar-ring": "#2f6fff",
      "radius": "2px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#20242b",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#2f6fff",
      "accent-foreground": "#ffffff",
      "destructive": "#c53b32",
      "border": "#303642",
      "input": "#303642",
      "ring": "#2f6fff",
      "chart-1": "#20242b",
      "chart-2": "#5e6877",
      "chart-3": "#2f6fff",
      "chart-4": "#1f7a55",
      "chart-5": "#a66a12",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#20242b",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2f6fff",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#2f6fff",
      "radius": "2px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efa7c-5133-7f82-a6af-bce556fd39fd",
    "slug": "graticule",
    "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",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```