Vane

# Vane

## Philosophy

Vane is split-flap kinetic typography: language set in mechanical character cells where meaning is never printed, it resolves. Cells riffle through the glyph set and lock, one by one, until the board tells the truth. Typography is the interface and motion is the reveal that confirms a value; the flip is the whole point. Vane keeps the soul of a kinetic, motion-first, editorial language — high-contrast monochrome with a single molten signal — and gives it one ownable machine: the split-flap board. Warm paper and charcoal slate carry the ground; flare fires only on the resolved, the live, the chosen. For boards that announce and confirm.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4F3EE` |
| surface | `#FFFFFF` |
| surface_solid | `#111318` |
| text | `#0B0B0D` |
| muted | `#6A6A66` |
| border | `rgba(11,11,13,0.10)` |
| accent | `#FF5B04` |
| accent_2 | `#111318` |
| accent_soft | `rgba(255,91,4,0.14)` |
| on_accent | `#16130E` |
| success | `#2E9E5B` |
| warning | `#E8A200` |
| error | `#D6402C` |
| info | `#3B6FE0` |

### Typography

- **Base Size**: 17px
- **Body Font**: Schibsted Grotesk
- **Heading Font**: Bricolage Grotesque
- **Mono Font**: Martian Mono
- **Heading Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Scale Ratio**: 1.28
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Schibsted+Grotesk:wght@400;500;600;700&family=Martian+Mono:wght@400;500;600;700&display=swap

### Radii

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

### Shadows

- **Sm**: 0 2px 8px rgba(11,11,13,0.06)
- **Md**: 0 12px 30px rgba(11,11,13,0.10)
- **Lg**: 0 26px 60px rgba(11,11,13,0.16)

### Spacing

- **Base**: 8px
- **Scale**: ["8px","14px","20px","28px","44px","64px","96px","132px"]

### Surfaces

- **Treatment**: split-flap board — matte paper ground with charcoal mechanical character-cells and a horizontal flap-seam hairline through each cell
- **Card Style**: borderless white cards on warm paper with a mono cell-strip header and foot; the flap-seam hairline recurs as the ornament system
- **Bg Pattern**: recurring horizontal flap-seam rule and tight vertical cell columns; chronophotograph motion imagery in Cadence

### Borders

- **Default Width**: 0px
- **Accent Width**: 2px
- **Style**: none
- **Character**: borderless; the only lines are the 1px flap-seam hairline through cells and the 2px flare underline links carry — never card borders or accent edges

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.9,0.1,1)
- **Philosophy**: mechanical flip resolution — scramble is loading, the flip is the transition, the lock is confirmation; snappy 120-220ms on interaction, watchable on the landing film; settled resolved board is the reduced-motion default

## Rules

### Composition

Compose as boards that resolve: a masthead cell-title, editorial body columns, and data set into departure-board rows. Content bands breathe; never box the chrome or trap nav in a pill bar.

### Hierarchy

Lead with Bricolage display against Schibsted body (extreme weight contrast); Martian mono runs cells, readouts, and micro-labels. Flare marks the one resolved/live/chosen element per view.

### Density

Airy editorial reading with tight mono readouts; generous padding above titles; one strict type scale, no one-off sizes.

### Signature Patterns

- Split-flap character cells (slate/lit/paper) that riffle through glyphs and lock; a word resolves in cascade
- The flap-seam hairline as the page-wide ornament system — through every cell, readout, and board row
- One molten flare fired only on the resolved/live/chosen; dark ink glyph on the flare cell
- Borderless white cards on warm paper with a mono cell-strip header/foot — never an accent edge
- Departure-board data rows: mono time column, resolving cells, uppercase gate status

## Layout

Editorial board layout on a max-1240px measure. Masthead cell-title, asymmetric content columns, and data as departure-board rows. Full-bleed hero image only; contained content centered on ultra-wide. Tablet keeps two-column layouts; mobile stacks to one column and compacts so no scene or card clips. Navigation breathes as type and space, never a boxed pill bar.

## Guidance

Use Vane where content should command attention and confirm itself as it arrives: departure and arrival boards, editorial front pages and reading rooms, launch pages, scoreboards, live-ops consoles. Ration flare to the resolved. Keep three type roles, radii from {0,16,24,9999}, body at 17px, and no borders except the flap-seam hairline. Respect prefers-reduced-motion: the resolved board reads with no JavaScript.

## Imagery Direction

### Summary

Cadence chronophotographs: one subject caught across every phase of a move, silver on charcoal, a single molten flare on the resolved frame — woven through the landing as parallax plates and masked reveals.

### Pairs With

cadence

### Technique

stroboscopic long-exposure chronophotography; overlapping motion phases; single warm accent streak; deep charcoal negative space

### Palette

silver and charcoal monochrome with one molten-orange flare on warm paper

### Reference Image File Ids

- fl-019f8b12-5e5b-7ed1-90fe-4e904b2ace5d
- fl-019f8b12-a812-7340-bdd3-2243a1fc08e9
- fl-019f8b12-f1b5-7fa1-866c-99afca461bfc
- fl-019f8b13-3b1a-7df2-b419-a9663e5dcdee
- fl-019f8b14-9e25-7c73-814c-95f95c00b6c8
- fl-019f8b14-ad96-7db1-b0f3-aa40b513f379

---
version: "alpha"
name: "Vane"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F4F3EE"
  surface: "#FFFFFF"
  surface_solid: "#111318"
  text: "#0B0B0D"
  muted: "#6A6A66"
  accent: "#FF5B04"
  accent_2: "#111318"
  on_accent: "#16130E"
  success: "#2E9E5B"
  warning: "#E8A200"
  error: "#D6402C"
  info: "#3B6FE0"
typography:
  headline-lg:
    fontFamily: "Bricolage Grotesque"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Bricolage Grotesque"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Schibsted Grotesk"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Martian Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "8px"
  sm: "14px"
  md: "20px"
  lg: "28px"
  xl: "44px"
  2xl: "64px"
  3xl: "96px"
  4xl: "132px"
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-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  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"
---

# Vane

## Overview

Vane is split-flap kinetic typography: language set in mechanical character cells where meaning is never printed, it resolves. Cells riffle through the glyph set and lock, one by one, until the board tells the truth. Typography is the interface and motion is the reveal that confirms a value; the flip is the whole point. Vane keeps the soul of a kinetic, motion-first, editorial language — high-contrast monochrome with a single molten signal — and gives it one ownable machine: the split-flap board. Warm paper and charcoal slate carry the ground; flare fires only on the resolved, the live, the chosen. For boards that announce and confirm.

## 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 | `#F4F3EE` |
| surface | `#FFFFFF` |
| surface_solid | `#111318` |
| text | `#0B0B0D` |
| muted | `#6A6A66` |
| accent | `#FF5B04` |
| accent_2 | `#111318` |
| on_accent | `#16130E` |
| success | `#2E9E5B` |
| warning | `#E8A200` |
| error | `#D6402C` |
| info | `#3B6FE0` |

## Typography

- **Headline-Lg**: Bricolage Grotesque, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Bricolage Grotesque, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Schibsted Grotesk, 17px, weight 400, line-height 1.5.
- **Label-Md**: Martian Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `8px`
- **Sm**: `14px`
- **Md**: `20px`
- **Lg**: `28px`
- **Xl**: `44px`
- **2xl**: `64px`
- **3xl**: `96px`
- **4xl**: `132px`

Editorial board layout on a max-1240px measure. Masthead cell-title, asymmetric content columns, and data as departure-board rows. Full-bleed hero image only; contained content centered on ultra-wide. Tablet keeps two-column layouts; mobile stacks to one column and compacts so no scene or card clips. Navigation breathes as type and space, never a boxed pill bar.

## Elevation & Depth

### Shadows

- **Sm**: 0 2px 8px rgba(11,11,13,0.06)
- **Md**: 0 12px 30px rgba(11,11,13,0.10)
- **Lg**: 0 26px 60px rgba(11,11,13,0.16)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: split-flap board — matte paper ground with charcoal mechanical character-cells and a horizontal flap-seam hairline through each cell
- **Card Style**: borderless white cards on warm paper with a mono cell-strip header and foot; the flap-seam hairline recurs as the ornament system
- **Bg Pattern**: recurring horizontal flap-seam rule and tight vertical cell columns; chronophotograph motion imagery in Cadence

### Borders

- **Default Width**: 0px
- **Accent Width**: 2px
- **Style**: none
- **Character**: borderless; the only lines are the 1px flap-seam hairline through cells and the 2px flare underline links carry — never card borders or accent edges

## Components

### Composition

Compose as boards that resolve: a masthead cell-title, editorial body columns, and data set into departure-board rows. Content bands breathe; never box the chrome or trap nav in a pill bar.

### Hierarchy

Lead with Bricolage display against Schibsted body (extreme weight contrast); Martian mono runs cells, readouts, and micro-labels. Flare marks the one resolved/live/chosen element per view.

### Density

Airy editorial reading with tight mono readouts; generous padding above titles; one strict type scale, no one-off sizes.

### Signature Patterns

- Split-flap character cells (slate/lit/paper) that riffle through glyphs and lock; a word resolves in cascade
- The flap-seam hairline as the page-wide ornament system — through every cell, readout, and board row
- One molten flare fired only on the resolved/live/chosen; dark ink glyph on the flare cell
- Borderless white cards on warm paper with a mono cell-strip header/foot — never an accent edge
- Departure-board data rows: mono time column, resolving cells, uppercase gate status

## 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-019f8b1b-dae8-7991-ae9b-9bf064aea581/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.

## Guidance

Use Vane where content should command attention and confirm itself as it arrives: departure and arrival boards, editorial front pages and reading rooms, launch pages, scoreboards, live-ops consoles. Ration flare to the resolved. Keep three type roles, radii from {0,16,24,9999}, body at 17px, and no borders except the flap-seam hairline. Respect prefers-reduced-motion: the resolved board reads with no JavaScript.

## Imagery Direction

### Summary

Cadence chronophotographs: one subject caught across every phase of a move, silver on charcoal, a single molten flare on the resolved frame — woven through the landing as parallax plates and masked reveals.

### Pairs With

cadence

### Technique

stroboscopic long-exposure chronophotography; overlapping motion phases; single warm accent streak; deep charcoal negative space

### Palette

silver and charcoal monochrome with one molten-orange flare on warm paper

### Reference Image File Ids

- fl-019f8b12-5e5b-7ed1-90fe-4e904b2ace5d
- fl-019f8b12-a812-7340-bdd3-2243a1fc08e9
- fl-019f8b12-f1b5-7fa1-866c-99afca461bfc
- fl-019f8b13-3b1a-7df2-b419-a9663e5dcdee
- fl-019f8b14-9e25-7c73-814c-95f95c00b6c8
- fl-019f8b14-ad96-7db1-b0f3-aa40b513f379

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vane",
  "type": "registry:theme",
  "title": "Vane shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F3EE",
      "foreground": "#0B0B0D",
      "card": "#FFFFFF",
      "card-foreground": "#0B0B0D",
      "popover": "#FFFFFF",
      "popover-foreground": "#0B0B0D",
      "primary": "#0B0B0D",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6A6A66",
      "muted-foreground": "#0B0B0D",
      "accent": "#FF5B04",
      "accent-foreground": "#ffffff",
      "destructive": "#D6402C",
      "border": "rgba(11,11,13,0.10)",
      "input": "rgba(11,11,13,0.10)",
      "ring": "#FF5B04",
      "chart-1": "#0B0B0D",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF5B04",
      "chart-4": "#2E9E5B",
      "chart-5": "#E8A200",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#0B0B0D",
      "sidebar-primary": "#0B0B0D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3B6FE0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(11,11,13,0.10)",
      "sidebar-ring": "#FF5B04",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0B0B0D",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF5B04",
      "accent-foreground": "#ffffff",
      "destructive": "#D6402C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF5B04",
      "chart-1": "#0B0B0D",
      "chart-2": "#f4f4f5",
      "chart-3": "#FF5B04",
      "chart-4": "#2E9E5B",
      "chart-5": "#E8A200",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0B0B0D",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#FF5B04",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF5B04",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f8b1b-dae8-7991-ae9b-9bf064aea581",
    "slug": "vane",
    "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"
      ]
    }
  }
}
```