Ferrite

# Ferrite

## Philosophy

Ferrite is a warm forensic interface language for recovering analog memory: cream vellum, oxide tape masses, three typographic voices, and one phosphor accent reserved for the active point. Named for the magnetic oxide that carries the memory on cassette tape, it treats every screen like a recovery bench treats a fragile reel.

### Values

- Analog evidence first: every surface reads as paper, tape stock, photocopy toner, or a handled archive sleeve — structure comes from paper on paper, never from drawn boxes.
- One ownable mechanic: the tape path — two reels, an oxide band, a phosphor playhead — measures progress, marks position, and threads every composition together.
- Precision without coldness: registration brackets, calibration ticks, and mono catalog codes align surgically while the vellum stays warm.
- Restrained luminance: phosphor green appears only as the active point — playhead, cursor, current step, the one primary action.
- Ink economy: black toner and oxide brown carry recognition before any accent color arrives.
- Existential archive calm: compositions feel like recovered notes from a lab that treats memories as fragile evidence.

### Anti-Values

- Generic neon cyberpunk gradients, glassmorphism, chrome reflections, or synthetic glow as decoration.
- Rounded SaaS cards, boxed navigation, equal dashboard widgets, and anonymous analytics layouts.
- Grunge overload: distress so heavy that labels, diagrams, or registration overlays become illegible.
- Accent color spent on decoration where ink, cream, and oxide brown can solve the hierarchy.

### Visual Character

- Cream vellum ground with faint 36px ruled lines; deeper vellum folds and bright paper slips build all structure, lifted by hard photocopy-offset shadows.
- The tape path recurs everywhere: hero device, live-transfer readout, table progress cells, tab bands, separators.
- J-card anatomy for panels: a 44px labelled spine with rotated mono catalog code, serif body notes, an inset reel window.
- One dark toner mass per page — the annotation rail — with cream mono text and a blinking phosphor cursor.
- Registration brackets, calibration tick strips, and mono ·FE-nnn section codes form one page-wide ornament system.
- Three strict voices: Teko 600 uppercase title cards, IBM Plex Serif 17px+ testimony, Share Tech Mono 12–14.5px operational truth.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F5E9CA` |
| surface | `#EDDDB4` |
| surface_solid | `#FBF4E1` |
| text | `#241711` |
| muted | `#6E5848` |
| border | `#2A1711` |
| accent | `#0E6B54` |
| accent_2 | `#5A3826` |
| accent_soft | `#DCE8DB` |
| on_accent | `#F8F0DA` |
| success | `#4F6F58` |
| warning | `#8A5A1E` |
| error | `#9A3D24` |
| info | `#3D6E74` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Serif
- **Heading Font**: Teko
- **Mono Font**: Share Tech Mono
- **Heading Weight**: 600
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Line Height**: 1.6
- **Scale Ratio**: 1.27
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=Share+Tech+Mono&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(42,23,17,.14)
- **Md**: 0 6px 20px rgba(90,56,38,.12)
- **Lg**: 12px 14px 0 rgba(90,56,38,.13)

### Spacing

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

### Surfaces

- **Treatment**: Matte cream vellum with faint 36px ruled hairlines; structure built from paper-on-paper layers (vellum, fold tone, bright slip) lifted by hard photocopy-offset shadows.
- **Card Style**: Squared j-card slips: bright paper on vellum, a 44px fold-tone spine with rotated mono catalog code, optional inset reel window; no drawn borders.
- **Bg Pattern**: repeating-linear-gradient ruled lines at 13% ink alpha over the cream ground; sparse calibration tick strips as ornament.

### Borders

- **Default Width**: 0
- **Accent Width**: 2px
- **Style**: registration hairlines and dashed phosphor focus outlines only — never container boxes
- **Character**: Structure comes from paper surfaces and ink masses; 1px ink rules appear only as ruled paper, table hairlines, and fold lines; 2px dashed phosphor marks focus.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(.2,.7,.1,1)
- **Philosophy**: Motion behaves like a tape transport or a scanner advancing one calibrated step: linear sweeps, cursor blinks, playhead travel — settled state first, reveals gated behind JS, prefers-reduced-motion respected, never bouncy.

## Rules

### Composition

Build screens as asymmetric archival spreads: one dominant artifact (a tape-path console, a hero slip, a schematic) spanning ~7-8 of 12 columns, a narrow evidence rail of 3-4, taped fragments, and a large quiet vellum field. Include one deliberate grid break per screen — a rotated bench note, a rail hugging the dark edge — while labels, ticks, and codes stay surgically aligned.

### Density

Alternate packed instrument clusters (8px gaps inside readouts and rails) with broad 64-110px archive whitespace. Balance across the canvas: the one dark toner mass anchors each page; never a crowded cluster beside a starved void.

### Hierarchy

Reading order is ink first (Teko title cards), oxide mass second (bands, fills, buttons), phosphor last and smallest (the single active point). Serif carries testimony at 17px+, mono carries operational truth at 12-14.5px. Accent color never decorates; one clearly primary button per scene.

### Signature Patterns

- The tape path: two reel circles joined by an oxide band with a phosphor playhead — progress, position, and section threading in every composition.
- J-card fold anatomy: labelled 44px spines, fold tones, and inset reel windows instead of standard cards.
- The annotation rail: one toner-ink CLI mass per page with prompt symbols, checksums, and a blinking phosphor cursor.
- Taped semantics: alerts and statuses arrive as translucent tape strips across a slip's top edge plus a mono tag — never a colored side edge.
- Registration overlay: phosphor corner brackets, calibration tick strips, and mono ·FE-nnn catalog codes recurring page-wide as one ornament system.
- The splice link gesture: a phosphor band under link text that sweeps up into a highlight on hover.

## Layout

### Grid

Desktop uses a 12-column, max-width 1320px archival spread (1440px for bench dashboards) with 24-40px gutters; the dominant artifact spans 7-8 columns, the evidence rail 3-4.

### Breakpoints

Under 640px stacks to a single column with non-essential nav hidden and display type clamped; 640-1024px is its own considered band (2-up grids, the rail becoming a strip, j-cards reflowing); above 1024px restores the full asymmetric spread.

### Density

Medium-high inside instruments (readouts, ledgers, rails), offset by broad untouched vellum margins in an archive-notebook rhythm.

### Responsive

Grids never blow out (minmax(0,1fr) throughout); tables scroll within their slip; buttons and chips never wrap — rows stack instead; hero display type clamps between 44 and 96px and wraps cleanly at 390px.

### Whitespace

8px within instrument clusters, 24-48px inside panels, 64-110px between archival sections; titles always carry padding above them.

## Guidance

### Do

- Build all structure from paper on paper — vellum, fold tone, bright slip — lifted by the hard photocopy-offset shadow.
- Thread the tape path through every composition so progress and position always read as tape.
- Ration phosphor to the single active point per view: playhead, cursor, current step, one primary button.
- Keep the three voices strict: Teko titles, IBM Plex Serif testimony at 17px+, Share Tech Mono codes at 12-14.5px, all on one declared scale.
- Deliver semantic states as taped strips and badge tints with mono tags.
- Write copy as a real recovery bench: accession codes, azimuth trims, bake cycles, donor names, checksums.
- Keep one deliberate asymmetric break per screen — a rotated bench note or a schematic crossing the fold.

### Don't

- Do not use neon-purple cyberpunk gradients, glassmorphism, chrome, or club lighting.
- Do not box content in drawn borders or trap navigation in a floating pill bar.
- Do not give any card a single colored edge — not top, not side, not bottom.
- Do not arrange equal metric cards; every screen needs a dominant artifact and a scene.
- Do not let button, chip, or badge labels wrap; shrink or stack the layout instead.
- Do not spend accent color where ink, cream, and oxide can solve the hierarchy.
- Do not use default browser form styling or default AI fonts.

### Usage Context

Best for archive tools, analog media recovery services, cataloging and ledger software, restoration studio consoles, memory-preservation products, and narrative pages about recovered sound.

### Accessibility

Body contrast is #241711 on #F5E9CA (≈13:1); phosphor #0E6B54 on cream passes AA for the mono sizes it is used at; mono labels never go below 12px; status is never carried by color alone (every badge pairs a dot with a text tag); focus is a visible 2px dashed phosphor outline; motion respects prefers-reduced-motion with the settled state as default.

## Imagery Direction

### Technique

Hand-drawn archival schematics in oxide-brown ink on cream vellum: cassette mechanisms, tape-path geometry, reel cross-sections, photocopy contour linework, faint ruled paper, taped-in blank slips, and small phosphor-green registration crosses. Flat, matte, precise but warm.

### Avoid

Character illustration, neon cityscapes, glossy 3D renders, gradients, and any text, letters, or logos in the artwork.

### Pairs With

ferrite

---
version: "alpha"
name: "Ferrite"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F5E9CA"
  surface: "#EDDDB4"
  surface_solid: "#FBF4E1"
  text: "#241711"
  muted: "#6E5848"
  border: "#2A1711"
  accent: "#0E6B54"
  accent_2: "#5A3826"
  accent_soft: "#DCE8DB"
  on_accent: "#F8F0DA"
  success: "#4F6F58"
  warning: "#8A5A1E"
  error: "#9A3D24"
  info: "#3D6E74"
typography:
  headline-lg:
    fontFamily: "Teko"
    fontSize: "2.176rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Teko"
    fontSize: "1.714rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Share Tech Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  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_solid:
    backgroundColor: "{colors.surface_solid}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  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: "#ffffff"
    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"
---

# Ferrite

## Overview

Ferrite is a warm forensic interface language for recovering analog memory: cream vellum, oxide tape masses, three typographic voices, and one phosphor accent reserved for the active point. Named for the magnetic oxide that carries the memory on cassette tape, it treats every screen like a recovery bench treats a fragile reel.

### Values

- Analog evidence first: every surface reads as paper, tape stock, photocopy toner, or a handled archive sleeve — structure comes from paper on paper, never from drawn boxes.
- One ownable mechanic: the tape path — two reels, an oxide band, a phosphor playhead — measures progress, marks position, and threads every composition together.
- Precision without coldness: registration brackets, calibration ticks, and mono catalog codes align surgically while the vellum stays warm.
- Restrained luminance: phosphor green appears only as the active point — playhead, cursor, current step, the one primary action.
- Ink economy: black toner and oxide brown carry recognition before any accent color arrives.
- Existential archive calm: compositions feel like recovered notes from a lab that treats memories as fragile evidence.

### Anti-Values

- Generic neon cyberpunk gradients, glassmorphism, chrome reflections, or synthetic glow as decoration.
- Rounded SaaS cards, boxed navigation, equal dashboard widgets, and anonymous analytics layouts.
- Grunge overload: distress so heavy that labels, diagrams, or registration overlays become illegible.
- Accent color spent on decoration where ink, cream, and oxide brown can solve the hierarchy.

### Visual Character

- Cream vellum ground with faint 36px ruled lines; deeper vellum folds and bright paper slips build all structure, lifted by hard photocopy-offset shadows.
- The tape path recurs everywhere: hero device, live-transfer readout, table progress cells, tab bands, separators.
- J-card anatomy for panels: a 44px labelled spine with rotated mono catalog code, serif body notes, an inset reel window.
- One dark toner mass per page — the annotation rail — with cream mono text and a blinking phosphor cursor.
- Registration brackets, calibration tick strips, and mono ·FE-nnn section codes form one page-wide ornament system.
- Three strict voices: Teko 600 uppercase title cards, IBM Plex Serif 17px+ testimony, Share Tech Mono 12–14.5px operational truth.

## 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 | `#F5E9CA` |
| surface | `#EDDDB4` |
| surface_solid | `#FBF4E1` |
| text | `#241711` |
| muted | `#6E5848` |
| border | `#2A1711` |
| accent | `#0E6B54` |
| accent_2 | `#5A3826` |
| accent_soft | `#DCE8DB` |
| on_accent | `#F8F0DA` |
| success | `#4F6F58` |
| warning | `#8A5A1E` |
| error | `#9A3D24` |
| info | `#3D6E74` |

## Typography

- **Headline-Lg**: Teko, 2.176rem, weight 700, line-height 1.1.
- **Headline-Md**: Teko, 1.714rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Serif, 17px, weight 400, line-height 1.6.
- **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

Desktop uses a 12-column, max-width 1320px archival spread (1440px for bench dashboards) with 24-40px gutters; the dominant artifact spans 7-8 columns, the evidence rail 3-4.

### Breakpoints

Under 640px stacks to a single column with non-essential nav hidden and display type clamped; 640-1024px is its own considered band (2-up grids, the rail becoming a strip, j-cards reflowing); above 1024px restores the full asymmetric spread.

### Density

Medium-high inside instruments (readouts, ledgers, rails), offset by broad untouched vellum margins in an archive-notebook rhythm.

### Responsive

Grids never blow out (minmax(0,1fr) throughout); tables scroll within their slip; buttons and chips never wrap — rows stack instead; hero display type clamps between 44 and 96px and wraps cleanly at 390px.

### Whitespace

8px within instrument clusters, 24-48px inside panels, 64-110px between archival sections; titles always carry padding above them.

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(42,23,17,.14)
- **Md**: 0 6px 20px rgba(90,56,38,.12)
- **Lg**: 12px 14px 0 rgba(90,56,38,.13)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: Matte cream vellum with faint 36px ruled hairlines; structure built from paper-on-paper layers (vellum, fold tone, bright slip) lifted by hard photocopy-offset shadows.
- **Card Style**: Squared j-card slips: bright paper on vellum, a 44px fold-tone spine with rotated mono catalog code, optional inset reel window; no drawn borders.
- **Bg Pattern**: repeating-linear-gradient ruled lines at 13% ink alpha over the cream ground; sparse calibration tick strips as ornament.

### Borders

- **Default Width**: 0
- **Accent Width**: 2px
- **Style**: registration hairlines and dashed phosphor focus outlines only — never container boxes
- **Character**: Structure comes from paper surfaces and ink masses; 1px ink rules appear only as ruled paper, table hairlines, and fold lines; 2px dashed phosphor marks focus.

## Components

### Composition

Build screens as asymmetric archival spreads: one dominant artifact (a tape-path console, a hero slip, a schematic) spanning ~7-8 of 12 columns, a narrow evidence rail of 3-4, taped fragments, and a large quiet vellum field. Include one deliberate grid break per screen — a rotated bench note, a rail hugging the dark edge — while labels, ticks, and codes stay surgically aligned.

### Density

Alternate packed instrument clusters (8px gaps inside readouts and rails) with broad 64-110px archive whitespace. Balance across the canvas: the one dark toner mass anchors each page; never a crowded cluster beside a starved void.

### Hierarchy

Reading order is ink first (Teko title cards), oxide mass second (bands, fills, buttons), phosphor last and smallest (the single active point). Serif carries testimony at 17px+, mono carries operational truth at 12-14.5px. Accent color never decorates; one clearly primary button per scene.

### Signature Patterns

- The tape path: two reel circles joined by an oxide band with a phosphor playhead — progress, position, and section threading in every composition.
- J-card fold anatomy: labelled 44px spines, fold tones, and inset reel windows instead of standard cards.
- The annotation rail: one toner-ink CLI mass per page with prompt symbols, checksums, and a blinking phosphor cursor.
- Taped semantics: alerts and statuses arrive as translucent tape strips across a slip's top edge plus a mono tag — never a colored side edge.
- Registration overlay: phosphor corner brackets, calibration tick strips, and mono ·FE-nnn catalog codes recurring page-wide as one ornament system.
- The splice link gesture: a phosphor band under link text that sweeps up into a highlight on hover.

## 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-019f2e78-a19f-7c62-9aed-d62770afac6a/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 Build all structure from paper on paper — vellum, fold tone, bright slip — lifted by the hard photocopy-offset shadow.
- Do Thread the tape path through every composition so progress and position always read as tape.
- Do Ration phosphor to the single active point per view: playhead, cursor, current step, one primary button.
- Do Keep the three voices strict: Teko titles, IBM Plex Serif testimony at 17px+, Share Tech Mono codes at 12-14.5px, all on one declared scale.
- Do Deliver semantic states as taped strips and badge tints with mono tags.
- Do Write copy as a real recovery bench: accession codes, azimuth trims, bake cycles, donor names, checksums.
- Do Keep one deliberate asymmetric break per screen — a rotated bench note or a schematic crossing the fold.
- Don't Do not use neon-purple cyberpunk gradients, glassmorphism, chrome, or club lighting.
- Don't Do not box content in drawn borders or trap navigation in a floating pill bar.
- Don't Do not give any card a single colored edge — not top, not side, not bottom.
- Don't Do not arrange equal metric cards; every screen needs a dominant artifact and a scene.
- Don't Do not let button, chip, or badge labels wrap; shrink or stack the layout instead.
- Don't Do not spend accent color where ink, cream, and oxide can solve the hierarchy.
- Don't Do not use default browser form styling or default AI fonts.

### Usage Context

Best for archive tools, analog media recovery services, cataloging and ledger software, restoration studio consoles, memory-preservation products, and narrative pages about recovered sound.

### Accessibility

Body contrast is #241711 on #F5E9CA (≈13:1); phosphor #0E6B54 on cream passes AA for the mono sizes it is used at; mono labels never go below 12px; status is never carried by color alone (every badge pairs a dot with a text tag); focus is a visible 2px dashed phosphor outline; motion respects prefers-reduced-motion with the settled state as default.

## Imagery Direction

### Technique

Hand-drawn archival schematics in oxide-brown ink on cream vellum: cassette mechanisms, tape-path geometry, reel cross-sections, photocopy contour linework, faint ruled paper, taped-in blank slips, and small phosphor-green registration crosses. Flat, matte, precise but warm.

### Avoid

Character illustration, neon cityscapes, glossy 3D renders, gradients, and any text, letters, or logos in the artwork.

### Pairs With

ferrite

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ferrite",
  "type": "registry:theme",
  "title": "Ferrite shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F5E9CA",
      "foreground": "#241711",
      "card": "#EDDDB4",
      "card-foreground": "#241711",
      "popover": "#EDDDB4",
      "popover-foreground": "#241711",
      "primary": "#241711",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6E5848",
      "muted-foreground": "#241711",
      "accent": "#0E6B54",
      "accent-foreground": "#ffffff",
      "destructive": "#9A3D24",
      "border": "#2A1711",
      "input": "#2A1711",
      "ring": "#0E6B54",
      "chart-1": "#241711",
      "chart-2": "#f4f4f5",
      "chart-3": "#0E6B54",
      "chart-4": "#4F6F58",
      "chart-5": "#8A5A1E",
      "sidebar": "#EDDDB4",
      "sidebar-foreground": "#241711",
      "sidebar-primary": "#241711",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3D6E74",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2A1711",
      "sidebar-ring": "#0E6B54",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#241711",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#0E6B54",
      "accent-foreground": "#ffffff",
      "destructive": "#9A3D24",
      "border": "#303642",
      "input": "#303642",
      "ring": "#0E6B54",
      "chart-1": "#241711",
      "chart-2": "#f4f4f5",
      "chart-3": "#0E6B54",
      "chart-4": "#4F6F58",
      "chart-5": "#8A5A1E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#241711",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0E6B54",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#0E6B54",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f2e78-a19f-7c62-9aed-d62770afac6a",
    "slug": "ferrite",
    "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"
      ]
    }
  }
}
```