Firn

# Firn

## Philosophy

Firn is a snow-field station operating system for instruments that observe more than they speak: hairline carbon contours thread through glacial telemetry grids, terminals stay quiet, and every reading sits in a small dense island measured against a vast calm field. Cold near-white ground, one cyan telemetry accent and a blue-gray ink, square station panes with diagnostic corner-bracket ticks.

### Values

- silence as structure: large near-white space is active polar atmosphere, not unused area
- mechanical precision: every line is one pixel, squared, labelled, aligned to a technical grid
- human trace: a carbon hairline contour crosses the interface like an operator between scan layers
- cold legibility: one cyan and a blue-gray ink clarify station state without becoming neon
- operational restraint: dense telemetry appears only in small islands surrounded by calm

### Anti-Values

- nightclub cyberpunk neon, rainbow chroma, vaporwave gradients, or glowing spectacle
- soft SaaS cards, rounded dashboards, accent-edge panels, or friendly productivity metaphors
- a generic component catalog or a flat default-white, muddy ground
- ornamental type, distressed textures, or illegible pseudo-futurist glyph walls

### Visual Character

- A cold near-white snow-field ground carries a faint 8px icy-blue micro-grid and a slow scanline calibration texture across the whole viewport at very low opacity.
- Every panel is a zero-radius station pane wearing diagnostic corner-bracket ticks at its top-left and bottom-right like calibration hardware, never a coloured border or a single accent edge.
- A polar coordinate ghost — large coordinate rings and radial calibration ticks — sits behind hero and header content at low opacity, offset so only partial arcs cross the field.
- A 1px carbon-black contour line crosses panes over and under with no filled illustration, the human trace through the interface.
- A huge condensed uppercase Teko station title pairs with calm 17px+ blue-gray body and tiny tabular Share Tech Mono shell-prompt labels, hierarchy from width, case, tracking, and isolation.
- Rails and labels read like an instrument: repeated 1px tick marks, station IDs, and shell-prompt fragments opening with a slash and a cyan status pip.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#2E8EA8` |
| secondary | `#5C7E91` |
| accent | `#2E8EA8` |
| background | `#FBFDFE` |
| surface | `#F2F7F9` |
| text | `#0A1418` |
| muted | `#56707B` |
| border | `#D2E2E8` |
| error | `#A6493F` |
| success | `#3F7D68` |
| warning | `#9A7B43` |
| info | `#2E8EA8` |

### Typography

- **Heading Font**: Teko
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: Share Tech Mono
- **Base Size**: 17px
- **Scale Ratio**: 1.25
- **Line Height**: 1.55
- **Letter Spacing**: -0.01em
- **Heading Weight**: 700
- **Heading Transform**: uppercase
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Teko:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(10,20,24,.02)
- **Md**: 0 18px 48px rgba(14,26,32,.045)
- **Lg**: 0 32px 90px rgba(14,26,32,.065)

### Surfaces

- **Treatment**: near-white translucent station panes over a snow field; data islands rely on linework and spacing, never tinted enough to become heavy cards
- **Card Style**: Zero-radius station panes with diagnostic corner-bracket ticks at top-left and bottom-right, faint atmospheric lift instead of drop shadows, never a coloured border or single accent edge
- **Bg Pattern**: snow-field polar grid: faint 8px icy-blue micro-grid plus a slow scanline calibration texture, with large partial coordinate rings behind hero and header content

### Borders

- **Default Width**: 1px
- **Accent Width**: 1.5px
- **Style**: solid
- **Character**: Hairline icy-blue separators and structural rules; identity comes from corner-bracket ticks and the carbon contour, never from a heavy or single-accent edge

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.16, 1, 0.3, 1)
- **Philosophy**: diagnostic and calm; the fully settled state is the no-JS default, reveals layered on top behind a .js class, fully disabled under prefers-reduced-motion; short cursor blinks, slow scanline drift, status-pip pulses, no playful bouncing

## Rules

### Composition

Use a cinematic title-card crop: a huge condensed station title and a small fact rail split by a vertical hairline, a vast calm field, and small dense telemetry islands plated into zero-radius station panes. Align modules to the grid; keep the centre quiet.

### Hierarchy

Three voices: a huge condensed uppercase Teko title, calm blue-gray body notes at 17px+, and tiny tabular mono shell labels and numerals. Hierarchy comes from width, case, tracking, and isolation, with at least one dramatic scale jump between display and micro telemetry.

### Density

Low overall density with very dense islands: tight 4px label stacks contrast with 96px+ silent intervals; dense data never fills more than a third of the screen.

### Signature

Every pane is a zero-radius station pane with diagnostic corner-bracket ticks; a polar coordinate ghost sits behind hero/header content; a carbon contour line crosses panes as the manga overprint; shell-prompt labels open with a slash and a cyan pip; calibration rails carry repeated ticks and station numerals.

## Layout

### Grid

A 16-column desktop grid with an 8px micro-grid underlay; a wide content column paired with a narrow fact rail split by a vertical hairline, telemetry islands pinned to grid intersections, the centre kept open.

### Whitespace

Whitespace is polar atmosphere: reserve 96-160px gaps around the central field and keep related telemetry in 4-12px stacks.

### Density

low-with-dense-islands

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; mobile stacks to one column, wraps the shell breadcrumb, and drops the least-essential table column; the full-bleed hero spans 100vw while contained content caps and centres.

### Breakpoints

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

## Guidance

### Do

- Treat large snow-white space as active atmosphere and make absence feel intentional.
- Keep all radii at zero except the tiny circular status pips.
- Use cyan only for active telemetry, focus, and the single primary action.
- Let the carbon contour line cross pane boundaries to create the manga overprint.
- Write labels like station IDs, scan coordinates, and shell prompts opening with a slash.
- Create at least one dramatic scale jump between display readouts and micro telemetry.
- Prefer 1px ticks, corner brackets, and hairlines to shadows or filled blocks.

### Don't

- Use saturated neon, purple cyberpunk glow, or multi-accent gradients.
- Round panels, make soft cards, or give a card a single accent edge.
- Fill the centre with equal cards; preserve a large silent field.
- Rely on cyan alone for critical state; carry status with a label plus a pip.
- Add icons unless they behave like technical marks or file-tree glyphs.
- Default to a flat white or muddy ground; the snow field is a deliberate cold near-white.

### Accessibility

Carbon and blue-gray text holds AA contrast on the snow ground; body is 17px+, table rows 14.5px+. Focus is a visible 3px cyan ring, never colour-only; state is carried by a label plus a circular pip. Motion respects prefers-reduced-motion and the settled state needs no JavaScript.

## Imagery Direction

### Pairs With

glacis-ink

### Summary

Subjects rendered in Glacis Ink: a cold technical line-drawing overprint with crisp 1px carbon contour and no fill, faint icy coordinate rings and calibration ticks, sparse blue-gray hatching, and corner-bracket ticks over a near-pure snow-white field. The landing hero is a lone polar observation station read in that technique with a vast quiet field for the headline.

### Subjects

- polar observation station (radar dome + met mast)
- ice-core drilling rig on a ridge
- deep-space antenna array over a snow field
- aurora spectrograph instrument
- drift buoy frozen into pack ice

### Usage

Full-viewport landing hero driven by background-image: var(--hero-image); imagery dresses a subject as a contour study with the polar instrumentation as a low-opacity overlay, composed with a quiet snow field where the overlaid headline sits — never a literal gauge or dashboard object.

---
version: "alpha"
name: "Firn"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#2E8EA8"
  secondary: "#5C7E91"
  accent: "#2E8EA8"
  background: "#FBFDFE"
  surface: "#F2F7F9"
  text: "#0A1418"
  muted: "#56707B"
  border: "#D2E2E8"
  error: "#A6493F"
  success: "#3F7D68"
  warning: "#9A7B43"
  info: "#2E8EA8"
typography:
  headline-lg:
    fontFamily: "Teko"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Teko"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "Share Tech 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"
  step-9: "128px"
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: "#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"
---

# Firn

## Overview

Firn is a snow-field station operating system for instruments that observe more than they speak: hairline carbon contours thread through glacial telemetry grids, terminals stay quiet, and every reading sits in a small dense island measured against a vast calm field. Cold near-white ground, one cyan telemetry accent and a blue-gray ink, square station panes with diagnostic corner-bracket ticks.

### Values

- silence as structure: large near-white space is active polar atmosphere, not unused area
- mechanical precision: every line is one pixel, squared, labelled, aligned to a technical grid
- human trace: a carbon hairline contour crosses the interface like an operator between scan layers
- cold legibility: one cyan and a blue-gray ink clarify station state without becoming neon
- operational restraint: dense telemetry appears only in small islands surrounded by calm

### Anti-Values

- nightclub cyberpunk neon, rainbow chroma, vaporwave gradients, or glowing spectacle
- soft SaaS cards, rounded dashboards, accent-edge panels, or friendly productivity metaphors
- a generic component catalog or a flat default-white, muddy ground
- ornamental type, distressed textures, or illegible pseudo-futurist glyph walls

### Visual Character

- A cold near-white snow-field ground carries a faint 8px icy-blue micro-grid and a slow scanline calibration texture across the whole viewport at very low opacity.
- Every panel is a zero-radius station pane wearing diagnostic corner-bracket ticks at its top-left and bottom-right like calibration hardware, never a coloured border or a single accent edge.
- A polar coordinate ghost — large coordinate rings and radial calibration ticks — sits behind hero and header content at low opacity, offset so only partial arcs cross the field.
- A 1px carbon-black contour line crosses panes over and under with no filled illustration, the human trace through the interface.
- A huge condensed uppercase Teko station title pairs with calm 17px+ blue-gray body and tiny tabular Share Tech Mono shell-prompt labels, hierarchy from width, case, tracking, and isolation.
- Rails and labels read like an instrument: repeated 1px tick marks, station IDs, and shell-prompt fragments opening with a slash and a cyan status pip.

## 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 | `#2E8EA8` |
| secondary | `#5C7E91` |
| accent | `#2E8EA8` |
| background | `#FBFDFE` |
| surface | `#F2F7F9` |
| text | `#0A1418` |
| muted | `#56707B` |
| border | `#D2E2E8` |
| error | `#A6493F` |
| success | `#3F7D68` |
| warning | `#9A7B43` |
| info | `#2E8EA8` |

## Typography

- **Headline-Lg**: Teko, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Teko, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Zen Kaku Gothic New, 17px, weight 400, line-height 1.55.
- **Label-Md**: Share Tech 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`

### Grid

A 16-column desktop grid with an 8px micro-grid underlay; a wide content column paired with a narrow fact rail split by a vertical hairline, telemetry islands pinned to grid intersections, the centre kept open.

### Whitespace

Whitespace is polar atmosphere: reserve 96-160px gaps around the central field and keep related telemetry in 4-12px stacks.

### Density

low-with-dense-islands

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; mobile stacks to one column, wraps the shell breadcrumb, and drops the least-essential table column; the full-bleed hero spans 100vw while contained content caps and centres.

### Breakpoints

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

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(10,20,24,.02)
- **Md**: 0 18px 48px rgba(14,26,32,.045)
- **Lg**: 0 32px 90px rgba(14,26,32,.065)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: near-white translucent station panes over a snow field; data islands rely on linework and spacing, never tinted enough to become heavy cards
- **Card Style**: Zero-radius station panes with diagnostic corner-bracket ticks at top-left and bottom-right, faint atmospheric lift instead of drop shadows, never a coloured border or single accent edge
- **Bg Pattern**: snow-field polar grid: faint 8px icy-blue micro-grid plus a slow scanline calibration texture, with large partial coordinate rings behind hero and header content

### Borders

- **Default Width**: 1px
- **Accent Width**: 1.5px
- **Style**: solid
- **Character**: Hairline icy-blue separators and structural rules; identity comes from corner-bracket ticks and the carbon contour, never from a heavy or single-accent edge

## Components

### Composition

Use a cinematic title-card crop: a huge condensed station title and a small fact rail split by a vertical hairline, a vast calm field, and small dense telemetry islands plated into zero-radius station panes. Align modules to the grid; keep the centre quiet.

### Hierarchy

Three voices: a huge condensed uppercase Teko title, calm blue-gray body notes at 17px+, and tiny tabular mono shell labels and numerals. Hierarchy comes from width, case, tracking, and isolation, with at least one dramatic scale jump between display and micro telemetry.

### Density

Low overall density with very dense islands: tight 4px label stacks contrast with 96px+ silent intervals; dense data never fills more than a third of the screen.

### Signature

Every pane is a zero-radius station pane with diagnostic corner-bracket ticks; a polar coordinate ghost sits behind hero/header content; a carbon contour line crosses panes as the manga overprint; shell-prompt labels open with a slash and a cyan pip; calibration rails carry repeated ticks and station numerals.

## 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-019ef8bc-2f4c-7a91-88d3-765433f42f80/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 Treat large snow-white space as active atmosphere and make absence feel intentional.
- Do Keep all radii at zero except the tiny circular status pips.
- Do Use cyan only for active telemetry, focus, and the single primary action.
- Do Let the carbon contour line cross pane boundaries to create the manga overprint.
- Do Write labels like station IDs, scan coordinates, and shell prompts opening with a slash.
- Do Create at least one dramatic scale jump between display readouts and micro telemetry.
- Do Prefer 1px ticks, corner brackets, and hairlines to shadows or filled blocks.
- Don't Use saturated neon, purple cyberpunk glow, or multi-accent gradients.
- Don't Round panels, make soft cards, or give a card a single accent edge.
- Don't Fill the centre with equal cards; preserve a large silent field.
- Don't Rely on cyan alone for critical state; carry status with a label plus a pip.
- Don't Add icons unless they behave like technical marks or file-tree glyphs.
- Don't Default to a flat white or muddy ground; the snow field is a deliberate cold near-white.

### Accessibility

Carbon and blue-gray text holds AA contrast on the snow ground; body is 17px+, table rows 14.5px+. Focus is a visible 3px cyan ring, never colour-only; state is carried by a label plus a circular pip. Motion respects prefers-reduced-motion and the settled state needs no JavaScript.

## Imagery Direction

### Pairs With

glacis-ink

### Summary

Subjects rendered in Glacis Ink: a cold technical line-drawing overprint with crisp 1px carbon contour and no fill, faint icy coordinate rings and calibration ticks, sparse blue-gray hatching, and corner-bracket ticks over a near-pure snow-white field. The landing hero is a lone polar observation station read in that technique with a vast quiet field for the headline.

### Subjects

- polar observation station (radar dome + met mast)
- ice-core drilling rig on a ridge
- deep-space antenna array over a snow field
- aurora spectrograph instrument
- drift buoy frozen into pack ice

### Usage

Full-viewport landing hero driven by background-image: var(--hero-image); imagery dresses a subject as a contour study with the polar instrumentation as a low-opacity overlay, composed with a quiet snow field where the overlaid headline sits — never a literal gauge or dashboard object.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "firn",
  "type": "registry:theme",
  "title": "Firn shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FBFDFE",
      "foreground": "#0A1418",
      "card": "#F2F7F9",
      "card-foreground": "#0A1418",
      "popover": "#F2F7F9",
      "popover-foreground": "#0A1418",
      "primary": "#2E8EA8",
      "primary-foreground": "#ffffff",
      "secondary": "#5C7E91",
      "secondary-foreground": "#ffffff",
      "muted": "#56707B",
      "muted-foreground": "#0A1418",
      "accent": "#2E8EA8",
      "accent-foreground": "#ffffff",
      "destructive": "#A6493F",
      "border": "#D2E2E8",
      "input": "#D2E2E8",
      "ring": "#2E8EA8",
      "chart-1": "#2E8EA8",
      "chart-2": "#5C7E91",
      "chart-3": "#2E8EA8",
      "chart-4": "#3F7D68",
      "chart-5": "#9A7B43",
      "sidebar": "#F2F7F9",
      "sidebar-foreground": "#0A1418",
      "sidebar-primary": "#2E8EA8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2E8EA8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D2E2E8",
      "sidebar-ring": "#2E8EA8",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2E8EA8",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#2E8EA8",
      "accent-foreground": "#ffffff",
      "destructive": "#A6493F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#2E8EA8",
      "chart-1": "#2E8EA8",
      "chart-2": "#5C7E91",
      "chart-3": "#2E8EA8",
      "chart-4": "#3F7D68",
      "chart-5": "#9A7B43",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2E8EA8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2E8EA8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#2E8EA8",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef8bc-2f4c-7a91-88d3-765433f42f80",
    "slug": "firn",
    "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"
      ]
    }
  }
}
```