Stylus

# Stylus

## Philosophy

Stylus is a recorder language: it treats software the way a strip-chart recorder treats an incoming radio downlink. One pen inks the live signal, continuously, onto a moving ribbon of warm paper ruled with time; you read what a channel just said by looking behind the pen. A parallel reading of the broadcast-control brief, not a recolour of a dark mission-control room — the surface is warm signal-paper, the signal is laid out as horizontal recorder lanes, and the live carriage sweep is the one moving part. One channel, one pen, one live colour; everything else holds in graphite.

### Values

- one live colour: the recorder pen is the only colour on screen, everything else is graphite
- the trace is the instrument: ruling, carriage and pen replace gauges, rings and HUD ornament
- make silence visible: quiet channels flatline, locked channels hold a steady mark
- timecoded truth: captions, cue numbers and channel IDs are primary interface material
- paper, not screen: a warm signal-paper ground ruled with time is the deliberate identity lever
- the present is a line: a single vertical carriage marks now and carries the only motion on the page

### Anti-Values

- recolouring to a dark control-room 16:9 viewport with a single orbital arc — that is the other interpretation of the brief
- gauges, rings, circular HUD ornament, or meaningless decoration around empty fields
- vermilion used as a general brand wash instead of a single live recorder-pen state
- rounded marketing cards, nested chrome, boxed nav, or borders used as decoration

### Visual Character

- Warm signal-paper ground ruled with fine horizontal time lines and faint vertical timing ticks, like a seismograph drum rather than a card surface.
- Channels are laid out as stacked horizontal recorder lanes; the signal is an inked SVG waveform in graphite with one vermilion segment under the live pen.
- A single thin vertical carriage marks the present on every lane, terminating in a small vermilion pen dot where it meets the trace, and carries the only motion on the page.
- Timecoded cue captions and compact Space Mono channel IDs are primary material; the current cue carries one vermilion underline while every other state stays graphite.
- Separation comes from hairline rings, the ruling, and generous space — no decorative borders, no nested cards, no boxed nav; corners are square except a pen dot.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#EDE7DA` |
| surface | `#F6F2E8` |
| surface_2 | `#E3DCCB` |
| rail | `#DCD4C2` |
| text | `#23211C` |
| text_strong | `#16140F` |
| muted | `#7A746A` |
| secondary | `#918B7F` |
| guide | `#C8C0AE` |
| accent | `#D6502A` |
| accent_soft | `#E8A188` |
| on_accent | `#F6F2E8` |
| border | `rgba(35,33,28,0.14)` |
| success | `#5E7A4E` |
| warning | `#C58A2E` |
| error | `#B23A2A` |
| info | `#5E7488` |

### Typography

- **Base Size**: 17px
- **Body Font**: Archivo
- **Heading Font**: Space Grotesk
- **Mono Font**: Space Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.01em
- **Display Letter Spacing**: -0.03em
- **Line Height**: 1.55
- **Scale Ratio**: 1.2
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap

### Radii

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

### Shadows

- **Sm**: none
- **Md**: 0 0 0 1px rgba(35,33,28,0.08)
- **Lg**: 0 24px 60px rgba(35,33,28,0.14)

### Spacing

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

### Surfaces

- **Bg Pattern**: Warm signal-paper ground ruled with fine horizontal time lines (24px) and faint vertical timing ticks (48px), like a seismograph drum; never grungy.
- **Card Style**: No rounded cards: information lives in recorder lanes, channel registers, telemetry readouts, cue logs and side rails, separated by hairline rings and the ruling rather than borders.
- **Treatment**: Lifted warm-paper planes with hairline off-white rings as structure, time-rule line texture, an inked graphite waveform, and one vermilion recorder-pen mark per view.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Separation is a hairline ring at low opacity, never a decorative or single-edge border; the only 2px line is the vermilion carriage / cue underline marking the live state.

### Motion

- **Duration**: 720ms
- **Easing**: cubic-bezier(.22,0,.12,1)
- **Philosophy**: The carriage sweeps; everything else stays still — slow relay behaviour. The fully settled state renders with no JavaScript; reveal motion is layered behind an .anim class the script sets on <html>, and the carriage animation respects prefers-reduced-motion.

## Rules

### Composition

Lay the signal out as stacked horizontal recorder lanes on a warm paper ground ruled with time. One live channel dominates while others flatline or drift; a single vertical carriage marks the present on every lane and ends in a pen dot at the trace. Separate with hairline rings and ruling, never borders or rounded cards; keep the nav open across the header.

### Hierarchy

Primary hierarchy comes from the inked trace and the carriage, then Space Grotesk headings, then compact Space Mono channel IDs and timecodes, then Archivo body and captions. Active states are marked by a single vermilion pen dot, carriage, or cue underline — never by scale or colour flooding.

### Density

Alternate quiet paper fields with dense recorder lanes and telemetry strips: flatlined channels and 96-128px atmospheric margins against 8px Space Mono telemetry clusters and tightly ruled lanes.

### Signature

- Carriage now-line: a thin vertical sweep marking the present on every lane, terminating in a small vermilion pen dot at the trace, carrying the only motion on the page.
- Time-rule paper: fine horizontal ruling lines and faint vertical timing ticks as the ground texture, drawn with repeating-linear-gradient — a seismograph drum, not a card.
- Inked trace: the signal as an SVG waveform in graphite, with one vermilion segment under the live pen; quiet channels flatline, locked channels hold a steady mark.
- Channel register: channels stacked as recorder lanes and as a register list, each with its own pen state (recording, drift, lock, idle), never a grid of equal cards.
- Cue underline: the current timecoded caption carries a single vermilion underline (inset box-shadow); every other cue stays graphite.

## Layout

### Grid

Contained max-width 1320-1480px with a generous warm-paper field; recorder lanes span the content width, the dashboard adds a 320px perimeter rail, and only the landing hero spans 100vw.

### Whitespace

Extreme spacing contrast: 8px telemetry clusters and tightly ruled lanes against 96-128px quiet paper fields and atmospheric section margins, always padding above titles.

### Density

Medium-high density inside recorder lanes and telemetry strips, with deliberately quiet flatlined channels and wide paper margins so silence reads as intentional.

### Responsive

Lanes keep their ruling and carriage at every width; stacks collapse to a single column on mobile, side rails move below the lane wall, and nothing overflows horizontally.

### Breakpoints

- **Mobile**: 0-639px single-column lanes, hero veil switches to vertical, non-essential nav hidden, telemetry one-up
- **Tablet**: 640-1023px two-up telemetry, lanes full width, side rail moves below
- **Desktop**: 1024px+ full lane wall with perimeter rail and full-viewport hero

## Guidance

### Do

- Keep one live colour on screen and hold everything else in graphite.
- Draw the carriage and the ruling as interface structure, not ornament.
- Let quiet channels flatline so silence is visible; let locked channels hold a steady mark.
- Treat timecodes, cue numbers and channel IDs as primary, legible material.
- Separate with hairline rings, ruling, and space; keep the nav open across the header.
- Make one button clearly primary in the vermilion pen colour; keep the rest quiet.

### Don't

- Do not recolour to a dark control-room 16:9 viewport with an orbital arc — that is the other interpretation.
- Do not add gauges, rings or HUD ornament; the trace is the instrument.
- Do not make vermilion a general brand wash; it is a single live recorder-pen state.
- Do not round corners except a pen dot, nest cards, or box the nav in a pill.
- Do not let captions become decorative lorem; every cue is timecoded and meaningful.

### Accessibility

Maintain strong contrast between warm graphite ink and paper, keep cue captions and timecodes at readable sizes, label every pen state with text beside the vermilion mark, style every form control explicitly, render the settled state with no JavaScript, and respect prefers-reduced-motion for the carriage sweep.

## Imagery Direction

### Pairs With

downlink

### Summary

A still frame pulled off a broadcast-safe feed in lifted graphite grayscale, applied to recorder and signal-paper subjects: a strip-chart stylus inking a trace, a seismograph drum, a ribbon of time-ruled paper, with one narrow vermilion recorder-pen line as the only colour.

### Subjects

- a strip-chart recorder stylus inking a waveform onto moving paper
- a seismograph drum and pen
- a ribbon of time-ruled signal paper
- a chromed recording carriage poised mid-sweep

### Usage

Use for the landing hero and section imagery: full-frame, broadcast-safe grayscale, time-rule ground, one vermilion ink trace, no text. Never illustrate the thumbnail (that comes from the embodiment).

---
version: "alpha"
name: "Stylus"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#EDE7DA"
  surface: "#F6F2E8"
  surface_2: "#E3DCCB"
  rail: "#DCD4C2"
  text: "#23211C"
  text_strong: "#16140F"
  muted: "#7A746A"
  secondary: "#918B7F"
  guide: "#C8C0AE"
  accent: "#D6502A"
  accent_soft: "#E8A188"
  on_accent: "#F6F2E8"
  success: "#5E7A4E"
  warning: "#C58A2E"
  error: "#B23A2A"
  info: "#5E7488"
typography:
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: "1.836rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: "1.53rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Archivo"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "Space 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-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-rail:
    backgroundColor: "{colors.rail}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-text_strong:
    backgroundColor: "{colors.text_strong}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-guide:
    backgroundColor: "{colors.guide}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  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"
---

# Stylus

## Overview

Stylus is a recorder language: it treats software the way a strip-chart recorder treats an incoming radio downlink. One pen inks the live signal, continuously, onto a moving ribbon of warm paper ruled with time; you read what a channel just said by looking behind the pen. A parallel reading of the broadcast-control brief, not a recolour of a dark mission-control room — the surface is warm signal-paper, the signal is laid out as horizontal recorder lanes, and the live carriage sweep is the one moving part. One channel, one pen, one live colour; everything else holds in graphite.

### Values

- one live colour: the recorder pen is the only colour on screen, everything else is graphite
- the trace is the instrument: ruling, carriage and pen replace gauges, rings and HUD ornament
- make silence visible: quiet channels flatline, locked channels hold a steady mark
- timecoded truth: captions, cue numbers and channel IDs are primary interface material
- paper, not screen: a warm signal-paper ground ruled with time is the deliberate identity lever
- the present is a line: a single vertical carriage marks now and carries the only motion on the page

### Anti-Values

- recolouring to a dark control-room 16:9 viewport with a single orbital arc — that is the other interpretation of the brief
- gauges, rings, circular HUD ornament, or meaningless decoration around empty fields
- vermilion used as a general brand wash instead of a single live recorder-pen state
- rounded marketing cards, nested chrome, boxed nav, or borders used as decoration

### Visual Character

- Warm signal-paper ground ruled with fine horizontal time lines and faint vertical timing ticks, like a seismograph drum rather than a card surface.
- Channels are laid out as stacked horizontal recorder lanes; the signal is an inked SVG waveform in graphite with one vermilion segment under the live pen.
- A single thin vertical carriage marks the present on every lane, terminating in a small vermilion pen dot where it meets the trace, and carries the only motion on the page.
- Timecoded cue captions and compact Space Mono channel IDs are primary material; the current cue carries one vermilion underline while every other state stays graphite.
- Separation comes from hairline rings, the ruling, and generous space — no decorative borders, no nested cards, no boxed nav; corners are square except a pen dot.

## 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 | `#EDE7DA` |
| surface | `#F6F2E8` |
| surface_2 | `#E3DCCB` |
| rail | `#DCD4C2` |
| text | `#23211C` |
| text_strong | `#16140F` |
| muted | `#7A746A` |
| secondary | `#918B7F` |
| guide | `#C8C0AE` |
| accent | `#D6502A` |
| accent_soft | `#E8A188` |
| on_accent | `#F6F2E8` |
| success | `#5E7A4E` |
| warning | `#C58A2E` |
| error | `#B23A2A` |
| info | `#5E7488` |

## Typography

- **Headline-Lg**: Space Grotesk, 1.836rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.53rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo, 17px, weight 400, line-height 1.55.
- **Label-Md**: Space 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

Contained max-width 1320-1480px with a generous warm-paper field; recorder lanes span the content width, the dashboard adds a 320px perimeter rail, and only the landing hero spans 100vw.

### Whitespace

Extreme spacing contrast: 8px telemetry clusters and tightly ruled lanes against 96-128px quiet paper fields and atmospheric section margins, always padding above titles.

### Density

Medium-high density inside recorder lanes and telemetry strips, with deliberately quiet flatlined channels and wide paper margins so silence reads as intentional.

### Responsive

Lanes keep their ruling and carriage at every width; stacks collapse to a single column on mobile, side rails move below the lane wall, and nothing overflows horizontally.

### Breakpoints

- **Mobile**: 0-639px single-column lanes, hero veil switches to vertical, non-essential nav hidden, telemetry one-up
- **Tablet**: 640-1023px two-up telemetry, lanes full width, side rail moves below
- **Desktop**: 1024px+ full lane wall with perimeter rail and full-viewport hero

## Elevation & Depth

### Shadows

- **Sm**: none
- **Md**: 0 0 0 1px rgba(35,33,28,0.08)
- **Lg**: 0 24px 60px rgba(35,33,28,0.14)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: Warm signal-paper ground ruled with fine horizontal time lines (24px) and faint vertical timing ticks (48px), like a seismograph drum; never grungy.
- **Card Style**: No rounded cards: information lives in recorder lanes, channel registers, telemetry readouts, cue logs and side rails, separated by hairline rings and the ruling rather than borders.
- **Treatment**: Lifted warm-paper planes with hairline off-white rings as structure, time-rule line texture, an inked graphite waveform, and one vermilion recorder-pen mark per view.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Separation is a hairline ring at low opacity, never a decorative or single-edge border; the only 2px line is the vermilion carriage / cue underline marking the live state.

## Components

### Composition

Lay the signal out as stacked horizontal recorder lanes on a warm paper ground ruled with time. One live channel dominates while others flatline or drift; a single vertical carriage marks the present on every lane and ends in a pen dot at the trace. Separate with hairline rings and ruling, never borders or rounded cards; keep the nav open across the header.

### Hierarchy

Primary hierarchy comes from the inked trace and the carriage, then Space Grotesk headings, then compact Space Mono channel IDs and timecodes, then Archivo body and captions. Active states are marked by a single vermilion pen dot, carriage, or cue underline — never by scale or colour flooding.

### Density

Alternate quiet paper fields with dense recorder lanes and telemetry strips: flatlined channels and 96-128px atmospheric margins against 8px Space Mono telemetry clusters and tightly ruled lanes.

### Signature

- Carriage now-line: a thin vertical sweep marking the present on every lane, terminating in a small vermilion pen dot at the trace, carrying the only motion on the page.
- Time-rule paper: fine horizontal ruling lines and faint vertical timing ticks as the ground texture, drawn with repeating-linear-gradient — a seismograph drum, not a card.
- Inked trace: the signal as an SVG waveform in graphite, with one vermilion segment under the live pen; quiet channels flatline, locked channels hold a steady mark.
- Channel register: channels stacked as recorder lanes and as a register list, each with its own pen state (recording, drift, lock, idle), never a grid of equal cards.
- Cue underline: the current timecoded caption carries a single vermilion underline (inset box-shadow); every other cue stays graphite.

## 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-019ef94d-a6b4-7102-8d3b-01adf7b3ddcb/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 one live colour on screen and hold everything else in graphite.
- Do Draw the carriage and the ruling as interface structure, not ornament.
- Do Let quiet channels flatline so silence is visible; let locked channels hold a steady mark.
- Do Treat timecodes, cue numbers and channel IDs as primary, legible material.
- Do Separate with hairline rings, ruling, and space; keep the nav open across the header.
- Do Make one button clearly primary in the vermilion pen colour; keep the rest quiet.
- Don't Do not recolour to a dark control-room 16:9 viewport with an orbital arc — that is the other interpretation.
- Don't Do not add gauges, rings or HUD ornament; the trace is the instrument.
- Don't Do not make vermilion a general brand wash; it is a single live recorder-pen state.
- Don't Do not round corners except a pen dot, nest cards, or box the nav in a pill.
- Don't Do not let captions become decorative lorem; every cue is timecoded and meaningful.

### Accessibility

Maintain strong contrast between warm graphite ink and paper, keep cue captions and timecodes at readable sizes, label every pen state with text beside the vermilion mark, style every form control explicitly, render the settled state with no JavaScript, and respect prefers-reduced-motion for the carriage sweep.

## Imagery Direction

### Pairs With

downlink

### Summary

A still frame pulled off a broadcast-safe feed in lifted graphite grayscale, applied to recorder and signal-paper subjects: a strip-chart stylus inking a trace, a seismograph drum, a ribbon of time-ruled paper, with one narrow vermilion recorder-pen line as the only colour.

### Subjects

- a strip-chart recorder stylus inking a waveform onto moving paper
- a seismograph drum and pen
- a ribbon of time-ruled signal paper
- a chromed recording carriage poised mid-sweep

### Usage

Use for the landing hero and section imagery: full-frame, broadcast-safe grayscale, time-rule ground, one vermilion ink trace, no text. Never illustrate the thumbnail (that comes from the embodiment).

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stylus",
  "type": "registry:theme",
  "title": "Stylus shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#EDE7DA",
      "foreground": "#23211C",
      "card": "#F6F2E8",
      "card-foreground": "#23211C",
      "popover": "#F6F2E8",
      "popover-foreground": "#23211C",
      "primary": "#23211C",
      "primary-foreground": "#ffffff",
      "secondary": "#918B7F",
      "secondary-foreground": "#ffffff",
      "muted": "#7A746A",
      "muted-foreground": "#23211C",
      "accent": "#D6502A",
      "accent-foreground": "#ffffff",
      "destructive": "#B23A2A",
      "border": "rgba(35,33,28,0.14)",
      "input": "rgba(35,33,28,0.14)",
      "ring": "#D6502A",
      "chart-1": "#23211C",
      "chart-2": "#918B7F",
      "chart-3": "#D6502A",
      "chart-4": "#5E7A4E",
      "chart-5": "#C58A2E",
      "sidebar": "#F6F2E8",
      "sidebar-foreground": "#23211C",
      "sidebar-primary": "#23211C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5E7488",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(35,33,28,0.14)",
      "sidebar-ring": "#D6502A",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#23211C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D6502A",
      "accent-foreground": "#ffffff",
      "destructive": "#B23A2A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D6502A",
      "chart-1": "#23211C",
      "chart-2": "#918B7F",
      "chart-3": "#D6502A",
      "chart-4": "#5E7A4E",
      "chart-5": "#C58A2E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#23211C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#D6502A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D6502A",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef94d-a6b4-7102-8d3b-01adf7b3ddcb",
    "slug": "stylus",
    "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_soft",
        "bg",
        "border",
        "error",
        "guide",
        "info",
        "muted",
        "on_accent",
        "rail",
        "secondary",
        "success",
        "surface",
        "surface_2",
        "text",
        "text_strong",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_letter_spacing",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "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"
      ]
    }
  }
}
```