Meridian

# Meridian

## Philosophy

Meridian is mission-grade systems journalism told from the tracking floor: a warm, information-forward publishing system that logs every pass, carrier, and drift correction as a printed bulletin from a deep-space relay station - instrument-precise, plainly written, built to be read on the night shift. Its ownable mechanic is the bearing dial: nothing lives in rows. Every station, story, and reading docks on a compass heading; the degree scale is the index and the dial is the masthead.

### Values

- Editorial legibility under data density
- Heading over hierarchy - the bearing is the index
- Cinematic futurism constrained by publishing discipline
- High contrast on a warm sodium-night ground

### Anti-Values

- Pure neon spectacle without a reading hierarchy
- Soft consumer-SaaS minimalism that erases narrative texture
- Cold graphite default or white-minimal blandness
- Boxed-in chrome and decorative accent edges with no idea behind them

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#1c1014` |
| surface | `#271a1f` |
| surface_2 | `#2f1f25` |
| well | `#150b0e` |
| text | `#fbeee6` |
| muted | `#c79b8f` |
| faint | `#8a655e` |
| border | `#46302f` |
| hair | `#3a2724` |
| accent | `#ffb347` |
| on_accent | `#1c1014` |
| cyan | `#5fe0e6` |
| rose | `#ff5c7a` |
| success | `#7fe0a6` |
| warning | `#ffcf6b` |
| error | `#ff6b6b` |
| info | `#5fe0e6` |

### Typography

- **Base Size**: 18px
- **Body Font**: Spectral
- **Heading Font**: Space Grotesk
- **Mono Font**: DM Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.015em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Mono:wght@400;500&display=swap

### Radii

- **None**: 0
- **Soft**: 16px
- **Card**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: inset 0 0 0 1px #3a2724, 0 14px 34px rgba(0,0,0,.34)
- **Md**: inset 0 0 0 1px #46302f, 0 20px 48px rgba(0,0,0,.42)
- **Lg**: inset 0 0 0 1px #46302f, 0 28px 76px rgba(0,0,0,.5)

### Spacing

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

### Surfaces

- **Treatment**: gradient
- **Card Style**: Matte warm-aubergine panels with a subtle top-to-bottom tonal gradient, a hairline inset perimeter, a monospace bearing overline (BRG nnn) and a corner index code (IDX nn-X), and an optional faint concentric arc ring nested into a corner. Emphasis comes from the bearing tag, never from a single accent edge or boxed chrome.
- **Bg Pattern**: thin vertical signal-grid lines with a warm radial bloom from the top

### Borders

- **Default Width**: 1px
- **Accent Width**: 0
- **Style**: solid
- **Character**: Thin warm hairline drafting rules used as inset perimeters and dividers; modules are indexed by a bearing tag and corner code, never edged with a coloured accent rail.

### Motion

- **Duration**: 240ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: deliberate; the settled state is the no-JS default, reveal motion layered on top behind a class an inline script sets, prefers-reduced-motion honoured

## Rules

### Composition

Compose pages as a center-spine radial broadcast: a full-viewport azimuth-dial hero, station readouts docked to a vertical degree spine that trade sides as you scan, telemetry tables, and a dossier of bearing-tagged panels - never a component inventory.

### Hierarchy

Mixed-case wide geometric display (Space Grotesk) for headlines and titles; humanist serif (Spectral) for summaries, notes, and long-form reading; monospace (DM Mono) for bearing tags, index codes, metadata overlines, and tabular readouts.

### Density

High density, never crowded: every zone layers information separated by hairline rules, mono bearing labels, spacing bands, and contrast shifts rather than empty whitespace.

### Signature

The bearing dial: nothing lives in rows. Every module carries a BRG nnn overline and an IDX nn-X corner code; readouts dock to a degree spine with 000/090/180/270 ticks; a compass-plate diagram docks three role-coloured stations on headings; colour is keyed to role - amber relay, cyan orbit, rose live.

## Layout

### Grid

A center-spine radial broadcast. Below the full-bleed hero, contained content caps at 1280px. Readouts sit in a two-track ledger docked to a vertical degree spine; feature and dashboard grids use minmax(0,1fr) columns of 2-4 across.

### Whitespace

Calibrated bands between sections and within panels - magazine pacing, not airy app minimalism; tight internal clusters balanced by strong outer margins; titles always padded above.

### Density

Information-forward; layered rather than spaced out.

### Responsive

Full-bleed hero spans 100vw x 100svh; contained content caps and centres on ultra-wide; grids use minmax(0,1fr) and min-width:0 children so they never overflow; on mobile the layout stacks to a single column, the degree spine and non-essential nav links hide, and table columns drop.

### Breakpoints

- **Mobile**: < 600px
- **Tablet**: 600-960px
- **Desktop**: >= 960px
- **Ultrawide**: >= 1700px

## Guidance

### Do

- Dock everything on a bearing and keep the degree scale as the index.
- Keep serif reading zones intact; reserve monospace for telemetry and codes.
- Reserve rose for the live and anomalous, spent sparingly so it always reads urgent.
- Build hierarchy with space, type, and surface; keep the nav open across the header.

### Don't

- Flood surfaces with neon wash or pastel background tints.
- Replace the serif reading voice with a generic UI sans everywhere.
- Box the nav into a floating pill, nest cards, or give a card a single accent edge.
- Use condensed-uppercase grotesk display or revert to a cold graphite or white ground.

### Accessibility

High contrast on the warm dark ground (text #fbeee6 on #1c1014); body 18px; every form control explicitly styled with a visible cyan focus ring; icons are SVG primitives - no emoji or symbol glyphs in copy or markup; reduced-motion honoured and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

azimuth

### Summary

Subjects rendered in the Azimuth mission-control plotting technique - luminous cyan-and-amber wireframe contours over a matte warm-graphite field, a thin plotting grid, concentric reticle rings and a crosshair - composed as a centered azimuth bearing dial so the subject reads as a target locked on a heading.

### Subjects

- deep-space tracking dish
- relay satellite
- orbital trajectory
- ground-station array
- antenna feed assembly

### Usage

One full-bleed hero per landing, composed as a centered radial dial filling the frame; the studio swaps the image via --hero-image. Keep cyan structural and amber the secondary highlight; no text in the image.

---
version: "alpha"
name: "Meridian"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#1c1014"
  surface: "#271a1f"
  surface_2: "#2f1f25"
  well: "#150b0e"
  text: "#fbeee6"
  muted: "#c79b8f"
  faint: "#8a655e"
  border: "#46302f"
  hair: "#3a2724"
  accent: "#ffb347"
  on_accent: "#1c1014"
  cyan: "#5fe0e6"
  rose: "#ff5c7a"
  success: "#7fe0a6"
  warning: "#ffcf6b"
  error: "#ff6b6b"
  info: "#5fe0e6"
typography:
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: "2.197rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: "1.758rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.015em"
  body-md:
    fontFamily: "Spectral"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.015em"
  label-md:
    fontFamily: "DM Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  soft: "16px"
  card: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-well:
    backgroundColor: "{colors.well}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-faint:
    backgroundColor: "{colors.faint}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-hair:
    backgroundColor: "{colors.hair}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-cyan:
    backgroundColor: "{colors.cyan}"
  color-reference-rose:
    backgroundColor: "{colors.rose}"
  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.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Meridian

## Overview

Meridian is mission-grade systems journalism told from the tracking floor: a warm, information-forward publishing system that logs every pass, carrier, and drift correction as a printed bulletin from a deep-space relay station - instrument-precise, plainly written, built to be read on the night shift. Its ownable mechanic is the bearing dial: nothing lives in rows. Every station, story, and reading docks on a compass heading; the degree scale is the index and the dial is the masthead.

### Values

- Editorial legibility under data density
- Heading over hierarchy - the bearing is the index
- Cinematic futurism constrained by publishing discipline
- High contrast on a warm sodium-night ground

### Anti-Values

- Pure neon spectacle without a reading hierarchy
- Soft consumer-SaaS minimalism that erases narrative texture
- Cold graphite default or white-minimal blandness
- Boxed-in chrome and decorative accent edges with no idea behind them

## 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 | `#1c1014` |
| surface | `#271a1f` |
| surface_2 | `#2f1f25` |
| well | `#150b0e` |
| text | `#fbeee6` |
| muted | `#c79b8f` |
| faint | `#8a655e` |
| border | `#46302f` |
| hair | `#3a2724` |
| accent | `#ffb347` |
| on_accent | `#1c1014` |
| cyan | `#5fe0e6` |
| rose | `#ff5c7a` |
| success | `#7fe0a6` |
| warning | `#ffcf6b` |
| error | `#ff6b6b` |
| info | `#5fe0e6` |

## Typography

- **Headline-Lg**: Space Grotesk, 2.197rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.758rem, weight 600, line-height 1.15.
- **Body-Md**: Spectral, 18px, weight 400, line-height 1.5.
- **Label-Md**: DM 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 center-spine radial broadcast. Below the full-bleed hero, contained content caps at 1280px. Readouts sit in a two-track ledger docked to a vertical degree spine; feature and dashboard grids use minmax(0,1fr) columns of 2-4 across.

### Whitespace

Calibrated bands between sections and within panels - magazine pacing, not airy app minimalism; tight internal clusters balanced by strong outer margins; titles always padded above.

### Density

Information-forward; layered rather than spaced out.

### Responsive

Full-bleed hero spans 100vw x 100svh; contained content caps and centres on ultra-wide; grids use minmax(0,1fr) and min-width:0 children so they never overflow; on mobile the layout stacks to a single column, the degree spine and non-essential nav links hide, and table columns drop.

### Breakpoints

- **Mobile**: < 600px
- **Tablet**: 600-960px
- **Desktop**: >= 960px
- **Ultrawide**: >= 1700px

## Elevation & Depth

### Shadows

- **Sm**: inset 0 0 0 1px #3a2724, 0 14px 34px rgba(0,0,0,.34)
- **Md**: inset 0 0 0 1px #46302f, 0 20px 48px rgba(0,0,0,.42)
- **Lg**: inset 0 0 0 1px #46302f, 0 28px 76px rgba(0,0,0,.5)

## Shapes

### Rounded

- **None**: `0px`
- **Soft**: `16px`
- **Card**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: gradient
- **Card Style**: Matte warm-aubergine panels with a subtle top-to-bottom tonal gradient, a hairline inset perimeter, a monospace bearing overline (BRG nnn) and a corner index code (IDX nn-X), and an optional faint concentric arc ring nested into a corner. Emphasis comes from the bearing tag, never from a single accent edge or boxed chrome.
- **Bg Pattern**: thin vertical signal-grid lines with a warm radial bloom from the top

### Borders

- **Default Width**: 1px
- **Accent Width**: 0
- **Style**: solid
- **Character**: Thin warm hairline drafting rules used as inset perimeters and dividers; modules are indexed by a bearing tag and corner code, never edged with a coloured accent rail.

## Components

### Composition

Compose pages as a center-spine radial broadcast: a full-viewport azimuth-dial hero, station readouts docked to a vertical degree spine that trade sides as you scan, telemetry tables, and a dossier of bearing-tagged panels - never a component inventory.

### Hierarchy

Mixed-case wide geometric display (Space Grotesk) for headlines and titles; humanist serif (Spectral) for summaries, notes, and long-form reading; monospace (DM Mono) for bearing tags, index codes, metadata overlines, and tabular readouts.

### Density

High density, never crowded: every zone layers information separated by hairline rules, mono bearing labels, spacing bands, and contrast shifts rather than empty whitespace.

### Signature

The bearing dial: nothing lives in rows. Every module carries a BRG nnn overline and an IDX nn-X corner code; readouts dock to a degree spine with 000/090/180/270 ticks; a compass-plate diagram docks three role-coloured stations on headings; colour is keyed to role - amber relay, cyan orbit, rose live.

## 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-019ef8ca-e180-7bb1-ae22-b5f8455272d9/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 Dock everything on a bearing and keep the degree scale as the index.
- Do Keep serif reading zones intact; reserve monospace for telemetry and codes.
- Do Reserve rose for the live and anomalous, spent sparingly so it always reads urgent.
- Do Build hierarchy with space, type, and surface; keep the nav open across the header.
- Don't Flood surfaces with neon wash or pastel background tints.
- Don't Replace the serif reading voice with a generic UI sans everywhere.
- Don't Box the nav into a floating pill, nest cards, or give a card a single accent edge.
- Don't Use condensed-uppercase grotesk display or revert to a cold graphite or white ground.

### Accessibility

High contrast on the warm dark ground (text #fbeee6 on #1c1014); body 18px; every form control explicitly styled with a visible cyan focus ring; icons are SVG primitives - no emoji or symbol glyphs in copy or markup; reduced-motion honoured and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

azimuth

### Summary

Subjects rendered in the Azimuth mission-control plotting technique - luminous cyan-and-amber wireframe contours over a matte warm-graphite field, a thin plotting grid, concentric reticle rings and a crosshair - composed as a centered azimuth bearing dial so the subject reads as a target locked on a heading.

### Subjects

- deep-space tracking dish
- relay satellite
- orbital trajectory
- ground-station array
- antenna feed assembly

### Usage

One full-bleed hero per landing, composed as a centered radial dial filling the frame; the studio swaps the image via --hero-image. Keep cyan structural and amber the secondary highlight; no text in the image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meridian",
  "type": "registry:theme",
  "title": "Meridian shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#1c1014",
      "foreground": "#fbeee6",
      "card": "#271a1f",
      "card-foreground": "#fbeee6",
      "popover": "#271a1f",
      "popover-foreground": "#fbeee6",
      "primary": "#fbeee6",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#c79b8f",
      "muted-foreground": "#fbeee6",
      "accent": "#ffb347",
      "accent-foreground": "#ffffff",
      "destructive": "#ff6b6b",
      "border": "#46302f",
      "input": "#46302f",
      "ring": "#ffb347",
      "chart-1": "#fbeee6",
      "chart-2": "#f4f4f5",
      "chart-3": "#ffb347",
      "chart-4": "#7fe0a6",
      "chart-5": "#ffcf6b",
      "sidebar": "#271a1f",
      "sidebar-foreground": "#fbeee6",
      "sidebar-primary": "#fbeee6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#5fe0e6",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#46302f",
      "sidebar-ring": "#ffb347",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#fbeee6",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#ffb347",
      "accent-foreground": "#ffffff",
      "destructive": "#ff6b6b",
      "border": "#303642",
      "input": "#303642",
      "ring": "#ffb347",
      "chart-1": "#fbeee6",
      "chart-2": "#f4f4f5",
      "chart-3": "#ffb347",
      "chart-4": "#7fe0a6",
      "chart-5": "#ffcf6b",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#fbeee6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#ffb347",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#ffb347",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef8ca-e180-7bb1-ae22-b5f8455272d9",
    "slug": "meridian",
    "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",
        "cyan",
        "error",
        "faint",
        "hair",
        "info",
        "muted",
        "on_accent",
        "rose",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning",
        "well"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "card",
        "full",
        "none",
        "soft"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```