Regolith

# Regolith

## Philosophy

A moonbase airlock-service language for maintenance before EVA: vacuum-black gutters, regolith-aluminum plates, DSKY verb/noun command grammar, barcode part-ID rails, and amber lockout tape spent only where a real life-support state has gone to hold. It treats existential cybernetics as procedure rather than spectacle — a small operator negotiating oxygen, pressure, thermal, and hatch systems through calm square forms bolted to a habitat wall.

### Values

- Operational calm under risk
- Human scale against habitat machinery
- Procedure before spectacle
- Material honesty: aluminum, ink, tape, glass
- Legible command grammar and checklist rhythm
- Sparse amber reserved for real consequence

### Anti-Values

- Green matrix rain, neon magenta/cyan cyberpunk, or nightclub glow
- Generic SaaS card grids and analytics dashboards
- Heroic anime character fan art or glossy spaceship-bridge fantasy
- Random kanji, fake hacking clutter, and alarm overload
- Decorative colour that does not map to oxygen, pressure, thermal, lockout, or EVA risk

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#050607` |
| surface | `#2A2B29` |
| surface_2 | `#1A1B19` |
| recess | `#020303` |
| text | `#ECE7DA` |
| bone | `#D7D2C6` |
| muted | `#9B988F` |
| border | `rgba(255,255,255,0.08)` |
| accent | `#C8872A` |
| on_accent | `#050607` |
| success | `#9CA66F` |
| warning | `#C8872A` |
| error | `#B65A3B` |
| info | `#A8B0AE` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans Condensed
- **Heading Font**: Saira Condensed
- **Mono Font**: Fragment Mono
- **Heading Weight**: 700
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=Saira+Condensed:wght@500;600;700&display=swap

### Radii

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

### Shadows

- **Sm**: inset 0 0 0 1px rgba(255,255,255,0.04)
- **Md**: 0 20px 60px rgba(0,0,0,0.36)
- **Lg**: 0 40px 120px rgba(0,0,0,0.48)

### Spacing

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

### Surfaces

- **Bg Pattern**: vacuum-black field with sparse registration ticks, barcode-like part IDs, and large bone-white negative-space incisions
- **Card Style**: square zero-radius service plates with 1px translucent-white hairlines, amber tape labels only on risk states, no glassmorphism and no accent edges
- **Treatment**: flat oxidized-aluminum plates on vacuum black with a subtle hairline grid; no glow, no gradients

### Borders

- **Default Width**: 1px
- **Accent Width**: 7px
- **Style**: solid
- **Character**: near-invisible translucent-white hairlines for structure; amber lockout bars are thick interruption plates that physically cut nearby borders at risk states

### Motion

- **Duration**: 140ms
- **Easing**: steps(2, end)
- **Philosophy**: motion behaves like a mechanical relay: instant state ticks, no cinematic easing, no glow pulses; the settled page is the default and renders with no JavaScript, motion is layered on top and respects prefers-reduced-motion

## Rules

### Composition

Use an asymmetric engineering-binder layout: a vacuum-black service spine, one dominant airlock-cycle plate, narrow telemetry rails, and a deliberately empty bone-white breach. Avoid equal cards; let dense procedural modules collide with one spacious void.

### Hierarchy

Priority is expressed by position, weight, and amber risk tape rather than colour variety. Chapter headers are large condensed bone-on-vacuum blocks; command prompts are monospaced; body annotations stay small and procedural.

### Density

High density is acceptable inside checklist and ledger modules, but every dense cluster needs a vacuum gutter or bone-white pause nearby so the page feels controlled rather than noisy.

### Signature

Amber lockout bars that interrupt borders at real risk states; DSKY verb/noun command capsules (mono label cell + bone segmented numeric cell); manga-negative breach voids cropping an EVA operator fragment; barcode part-ID rails and hatch-seal diagrams running along module edges as maintenance metadata.

## Layout

### Grid

12-column desktop engineering binder with 16px gutters, a left vacuum-black service spine, a dominant 7-column console plate, and a 3-column procedure rail; tablet collapses to 6 columns; mobile to a single scrollable binder.

### Whitespace

4-8px for checklist ticks, 16-24px inside plates, 64-96px for vacuum gutters and manga-white pauses.

### Density

Dense in operational ledgers and telemetry strips, sparse around the operator crop and chapter header to preserve human unease.

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; the service spine becomes a top index bar on small screens, diagram rails stack below the command module, amber lockout bars stay visible without horizontal scroll; contained content caps and centres at 1320px while only the hero spans 100vw.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Reflow**: 960px and 600px

## Guidance

### Do

- Reserve amber for oxygen, pressure, thermal, lockout, and EVA risk states only.
- Use square plates, hairline separators, segmented numerals, and verb/noun command grammar consistently.
- Place at least one cropped EVA fragment or tool silhouette at human scale.
- Let vacuum-black and bone-white negative space carry the existential tone.
- Keep data labels operational: hatch seal, O2 umbilical, thermal loop, part ID, cycle time.
- Use typography weight and spacing before adding colour.

### Don't

- Do not use green matrix rain, neon cyberpunk magenta/cyan, bloom, or glow.
- Do not build a generic dashboard of equal SaaS cards.
- Do not use anime fan-art characters or heroic portraits.
- Do not add random kanji, fake code spam, or decorative alarm overload.
- Do not round corners or use glossy spaceship glass panels.
- Do not spend amber on non-risk decorative highlights.

### Accessibility

Maintain high contrast between bone text and vacuum-black/regolith surfaces; pair amber warnings with a label and a shape, never colour alone; keep monospaced telemetry at 14.5px or larger; provide visible square amber focus outlines; the settled page renders with no JavaScript and motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

anodize

### Summary

Flat high-contrast monochrome inked service-plate imagery: cropped EVA gloves, helmets, hatch tools, umbilical lines, barcode part IDs, and diagrammatic airlock seals, with amber reserved for a single risk-tape accent. The landing hero is an EVA helmet and gloved hand at a circular airlock hatch seal, weighted left so the right stays quiet for the overlay.

### Subjects

- EVA helmet and gloved hand
- circular airlock hatch seal
- hatch tools and umbilical lines
- barcode part-ID rails
- diagrammatic airlock seals

### Usage

One full-bleed Anodize hero per landing, swapped via --hero-image; breach voids and barcode rails inside the UI reuse the inked-plate halftone + hairline-grid treatment as CSS.

---
version: "alpha"
name: "Regolith"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#050607"
  surface: "#2A2B29"
  surface_2: "#1A1B19"
  recess: "#020303"
  text: "#ECE7DA"
  bone: "#D7D2C6"
  muted: "#9B988F"
  accent: "#C8872A"
  on_accent: "#050607"
  success: "#9CA66F"
  warning: "#C8872A"
  error: "#B65A3B"
  info: "#A8B0AE"
typography:
  headline-lg:
    fontFamily: "Saira Condensed"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Saira Condensed"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans Condensed"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Fragment Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-recess:
    backgroundColor: "{colors.recess}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-bone:
    backgroundColor: "{colors.bone}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  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"
---

# Regolith

## Overview

A moonbase airlock-service language for maintenance before EVA: vacuum-black gutters, regolith-aluminum plates, DSKY verb/noun command grammar, barcode part-ID rails, and amber lockout tape spent only where a real life-support state has gone to hold. It treats existential cybernetics as procedure rather than spectacle — a small operator negotiating oxygen, pressure, thermal, and hatch systems through calm square forms bolted to a habitat wall.

### Values

- Operational calm under risk
- Human scale against habitat machinery
- Procedure before spectacle
- Material honesty: aluminum, ink, tape, glass
- Legible command grammar and checklist rhythm
- Sparse amber reserved for real consequence

### Anti-Values

- Green matrix rain, neon magenta/cyan cyberpunk, or nightclub glow
- Generic SaaS card grids and analytics dashboards
- Heroic anime character fan art or glossy spaceship-bridge fantasy
- Random kanji, fake hacking clutter, and alarm overload
- Decorative colour that does not map to oxygen, pressure, thermal, lockout, or EVA risk

## 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 | `#050607` |
| surface | `#2A2B29` |
| surface_2 | `#1A1B19` |
| recess | `#020303` |
| text | `#ECE7DA` |
| bone | `#D7D2C6` |
| muted | `#9B988F` |
| accent | `#C8872A` |
| on_accent | `#050607` |
| success | `#9CA66F` |
| warning | `#C8872A` |
| error | `#B65A3B` |
| info | `#A8B0AE` |

## Typography

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

### Grid

12-column desktop engineering binder with 16px gutters, a left vacuum-black service spine, a dominant 7-column console plate, and a 3-column procedure rail; tablet collapses to 6 columns; mobile to a single scrollable binder.

### Whitespace

4-8px for checklist ticks, 16-24px inside plates, 64-96px for vacuum gutters and manga-white pauses.

### Density

Dense in operational ledgers and telemetry strips, sparse around the operator crop and chapter header to preserve human unease.

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; the service spine becomes a top index bar on small screens, diagram rails stack below the command module, amber lockout bars stay visible without horizontal scroll; contained content caps and centres at 1320px while only the hero spans 100vw.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Reflow**: 960px and 600px

## Elevation & Depth

### Shadows

- **Sm**: inset 0 0 0 1px rgba(255,255,255,0.04)
- **Md**: 0 20px 60px rgba(0,0,0,0.36)
- **Lg**: 0 40px 120px rgba(0,0,0,0.48)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: vacuum-black field with sparse registration ticks, barcode-like part IDs, and large bone-white negative-space incisions
- **Card Style**: square zero-radius service plates with 1px translucent-white hairlines, amber tape labels only on risk states, no glassmorphism and no accent edges
- **Treatment**: flat oxidized-aluminum plates on vacuum black with a subtle hairline grid; no glow, no gradients

### Borders

- **Default Width**: 1px
- **Accent Width**: 7px
- **Style**: solid
- **Character**: near-invisible translucent-white hairlines for structure; amber lockout bars are thick interruption plates that physically cut nearby borders at risk states

## Components

### Composition

Use an asymmetric engineering-binder layout: a vacuum-black service spine, one dominant airlock-cycle plate, narrow telemetry rails, and a deliberately empty bone-white breach. Avoid equal cards; let dense procedural modules collide with one spacious void.

### Hierarchy

Priority is expressed by position, weight, and amber risk tape rather than colour variety. Chapter headers are large condensed bone-on-vacuum blocks; command prompts are monospaced; body annotations stay small and procedural.

### Density

High density is acceptable inside checklist and ledger modules, but every dense cluster needs a vacuum gutter or bone-white pause nearby so the page feels controlled rather than noisy.

### Signature

Amber lockout bars that interrupt borders at real risk states; DSKY verb/noun command capsules (mono label cell + bone segmented numeric cell); manga-negative breach voids cropping an EVA operator fragment; barcode part-ID rails and hatch-seal diagrams running along module edges as maintenance metadata.

## 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-019ef9ae-8186-7730-ab9c-122071ce54d4/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 Reserve amber for oxygen, pressure, thermal, lockout, and EVA risk states only.
- Do Use square plates, hairline separators, segmented numerals, and verb/noun command grammar consistently.
- Do Place at least one cropped EVA fragment or tool silhouette at human scale.
- Do Let vacuum-black and bone-white negative space carry the existential tone.
- Do Keep data labels operational: hatch seal, O2 umbilical, thermal loop, part ID, cycle time.
- Do Use typography weight and spacing before adding colour.
- Don't Do not use green matrix rain, neon cyberpunk magenta/cyan, bloom, or glow.
- Don't Do not build a generic dashboard of equal SaaS cards.
- Don't Do not use anime fan-art characters or heroic portraits.
- Don't Do not add random kanji, fake code spam, or decorative alarm overload.
- Don't Do not round corners or use glossy spaceship glass panels.
- Don't Do not spend amber on non-risk decorative highlights.

### Accessibility

Maintain high contrast between bone text and vacuum-black/regolith surfaces; pair amber warnings with a label and a shape, never colour alone; keep monospaced telemetry at 14.5px or larger; provide visible square amber focus outlines; the settled page renders with no JavaScript and motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

anodize

### Summary

Flat high-contrast monochrome inked service-plate imagery: cropped EVA gloves, helmets, hatch tools, umbilical lines, barcode part IDs, and diagrammatic airlock seals, with amber reserved for a single risk-tape accent. The landing hero is an EVA helmet and gloved hand at a circular airlock hatch seal, weighted left so the right stays quiet for the overlay.

### Subjects

- EVA helmet and gloved hand
- circular airlock hatch seal
- hatch tools and umbilical lines
- barcode part-ID rails
- diagrammatic airlock seals

### Usage

One full-bleed Anodize hero per landing, swapped via --hero-image; breach voids and barcode rails inside the UI reuse the inked-plate halftone + hairline-grid treatment as CSS.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "regolith",
  "type": "registry:theme",
  "title": "Regolith shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#050607",
      "foreground": "#ECE7DA",
      "card": "#2A2B29",
      "card-foreground": "#ECE7DA",
      "popover": "#2A2B29",
      "popover-foreground": "#ECE7DA",
      "primary": "#ECE7DA",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#9B988F",
      "muted-foreground": "#ECE7DA",
      "accent": "#C8872A",
      "accent-foreground": "#ffffff",
      "destructive": "#B65A3B",
      "border": "rgba(255,255,255,0.08)",
      "input": "rgba(255,255,255,0.08)",
      "ring": "#C8872A",
      "chart-1": "#ECE7DA",
      "chart-2": "#f4f4f5",
      "chart-3": "#C8872A",
      "chart-4": "#9CA66F",
      "chart-5": "#C8872A",
      "sidebar": "#2A2B29",
      "sidebar-foreground": "#ECE7DA",
      "sidebar-primary": "#ECE7DA",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#A8B0AE",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(255,255,255,0.08)",
      "sidebar-ring": "#C8872A",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#ECE7DA",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C8872A",
      "accent-foreground": "#ffffff",
      "destructive": "#B65A3B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C8872A",
      "chart-1": "#ECE7DA",
      "chart-2": "#f4f4f5",
      "chart-3": "#C8872A",
      "chart-4": "#9CA66F",
      "chart-5": "#C8872A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#ECE7DA",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#C8872A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C8872A",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef9ae-8186-7730-ab9c-122071ce54d4",
    "slug": "regolith",
    "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",
        "bone",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "recess",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "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"
      ]
    }
  }
}
```