Riveter

# Riveter

## Philosophy

Riveter answers the constructivist brief with the workshop, not the gallery. Where the poster tradition lays type flat on white, Riveter stands the structure up: content is assembled on a single rising diagonal axis, like a riveted steel gantry. Panels are not framed cards but steel plates bolted at the corners; the red wedge does the lifting, cobalt routes, yellow flags. The ground is a deliberate warm ink-black, an assembly bench under work-lights where the three primaries glow as torque marks against charcoal steel. Everything bears weight, nothing floats.

### Values

- {"name":"Built, not laid out","explanation":"Composition is assembled on a rising diagonal axis; plates bolt against one another and stagger, so the interface reads as a structure under load rather than a centred page."}
- {"name":"Structure as ornament","explanation":"The only decoration is structural — bolt-head corner markers and rows of rivets along plate edges. Nothing is added that does not also join something."}
- {"name":"Torque-mark colour","explanation":"Red is load, cobalt is routing, yellow is a flag. Three primaries on ink, applied exactly where force is, like a torque wrench — never as a surface wash."}
- {"name":"Weight in the type","explanation":"Heavy expanded display and oversized sheared figures carry the hierarchy; tabular mono lines up metadata like a torque chart."}
- {"name":"Flat steel depth","explanation":"Depth comes from a hard offset slab — a plate sitting proud of the one behind it — never glass, blur, or a soft shadow."}

### Anti-Values

- {"name":"White-poster default","explanation":"The ground is ink-black on purpose; reverting to white loses the assembly-bench identity entirely."}
- {"name":"Floating soft cards","explanation":"No rounded, plush, drop-shadowed cards. Panels are bolted steel plates with sharp corners."}
- {"name":"Colour as decoration","explanation":"A primary never fills a whole surface or solves hierarchy alone; it marks where force or routing is."}
- {"name":"Centred symmetry","explanation":"No hero-centred marketing composition; the hierarchy rises asymmetrically along the load axis."}

### Visual Character

- Content is assembled on a rising diagonal axis (approx -32 degrees); a skewed signal-red wedge marks the line of force in the hero and at section anchors.
- Every panel is a flat steel plate with a bolt-head marker at two opposite corners; rows of rivets run plate edges as the only, structural, ornament.
- Oversized Archivo Expanded numerals, slightly sheared with skewX, sit on solid red, cobalt, and ink blocks as the primary graphic device.
- Depth is a hard 6px offset black slab on hover and focus; the ground is warm ink-black with charcoal steel plates, sliced by one red diagonal.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#15151A` |
| bg_2 | `#101015` |
| surface | `#1E1E25` |
| surface_2 | `#262630` |
| text | `#F4F2EC` |
| muted | `#9A968C` |
| line | `#3A3A45` |
| border | `#0B0B0E` |
| accent | `#E11414` |
| accent_blue | `#1453E1` |
| accent_yellow | `#FFC400` |
| on_accent | `#FFFFFF` |
| success | `#1FA45E` |
| warning | `#FFC400` |
| error | `#E11414` |
| info | `#1453E1` |
| beam | `#0B0B0E` |
| rivet | `#5A5A66` |

### Typography

- **Base Size**: 17px
- **Body Font**: Archivo
- **Heading Font**: Archivo Expanded
- **Mono Font**: Space Mono
- **Heading Weight**: 900
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Expanded:wght@600;700;800;900&family=Space+Mono:wght@400;700&display=swap

### Radii

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

### Shadows

- **Sm**: none
- **Md**: none
- **Lg**: 6px 6px 0 #0B0B0E
- **Slab**: 6px 6px 0 #0B0B0E

### Spacing

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

### Surfaces

- **Treatment**: flat-steel
- **Card Style**: Flat rectangular steel plate on ink ground, no border edge, bolt-head markers at two opposite corners and rivet rows on plate edges; depth from a hard offset slab, never glass or soft shadow.
- **Bg Pattern**: ink

### Borders

- **Default Width**: 0px
- **Accent Width**: 8px
- **Style**: none
- **Character**: Plates carry no outline border; they are separated by deep seams and depth comes from a 6px offset black slab. The only coloured edge is an 8px left load-bar on alert plates, paired with a text condition.

### Motion

- **Duration**: 140ms
- **Easing**: cubic-bezier(0.2,0,0,1)
- **Philosophy**: Snappy, mechanical, no bounce. The fully-settled page is the default and renders with no JavaScript; an inline script adds a class to gate the hidden start-state and drives a short scroll-reveal. Primary buttons and active plates translate up-left into a 6px offset black slab on hover/focus. Respects prefers-reduced-motion.

## Rules

### Composition

Assemble content on a rising diagonal axis (about -32 degrees), not a centred poster grid. A dominant lead block rises from the lower-left while metadata sits in narrow rails or a left navigation rail. Render panels as flat steel plates (0px radius, no border) bolted with bolt-head markers at two opposite corners; stagger plates in a row so the composition reads as built. Mark the line of force with one skewed signal-red wedge.

### Hierarchy

Lead with a mono uppercase label and a skewed red wedge, then an oversized Archivo Expanded headline or sheared numeral, then concise Archivo body. Build hierarchy with scale, weight, case, position, and offset-slab depth before colour. Important metrics become poster-like sheared figures on solid red, cobalt, or ink blocks.

### Density

Operational medium-high density with disciplined negative space: compact interior modules on generous ink ground, plates separated by deep seams and empty axis space rather than crowding.

### Signature

Rising diagonal load axis with a skewed red wedge; flat steel plates bolted with bolt-head corner markers and rivet-row edges; three primaries (red load, cobalt routing, yellow flag) used only as torque marks and status chips; oversized sheared Archivo Expanded figures on red/cobalt/ink blocks; depth from a hard 6px offset black slab; mono uppercase metadata with leading square chips.

## Layout

### Grid

Desktop caps contained content at ~1440px with a left rail on the dashboard; only the full-bleed hero spans 100vw. Composition climbs a diagonal axis; plates use minmax(0,1fr) columns and min-width:0 children so grids never overflow. Tablet collapses rails to a top strip; mobile becomes a single stacked column with tables scrolling inside their plate.

### Whitespace

Negative space is structural — empty stretches of the diagonal axis and seams between plates are kept on purpose to read as an assembly bench rather than a packed page.

### Density

Compact steel plates with measured breathing room for legibility on the dark ground.

### Responsive

Every artifact renders cleanly from ~390px mobile to 2560px+ ultra-wide with no horizontal overflow. At 900-1024px rails become top strips and key panels move to two columns; at 768px modules stack to one column; at 560px buttons go full width, controls stack, the masthead trims to one or two links, and data tables scroll horizontally inside their plate.

### Breakpoints

- **Mobile**: 390-560
- **Tablet**: 561-900
- **Desktop**: 901-1440
- **Ultrawide**: 1441+

## Guidance

### Do

- Keep the warm ink-black ground; let the three primaries glow as sparse torque marks against charcoal steel.
- Assemble content on a rising diagonal axis and stagger plates so the layout reads as built, not centred.
- Bolt every plate with bolt-head markers at two opposite corners; run rivet rows along edges as the only ornament.
- Set heads and figures in heavy uppercase Archivo Expanded with a slight skew; run metadata and numerals in tabular Space Mono.
- Pair every status colour with a chip or dot and a text label; make exactly one button primary and keep the rest quiet.
- Express depth with a hard 6px offset black slab on hover and focus; explicitly style every form control on the dark field.

### Don't

- Do not default to a white ground or a centred hero composition.
- Do not frame plates as soft rounded cards, nest cards, or box the top nav in a pill bar.
- Do not let a primary fill a whole surface or solve hierarchy on its own.
- Do not rely on glow, blur, or soft drop shadows for depth; use the offset slab.
- Do not leave a single coloured accent edge as a panel's only marker, or ship browser-default controls.
- Do not use emoji or symbol glyphs in copy or on buttons; use SVG primitives and labels.

### Accessibility

Maintain high mill-white-on-ink contrast and never communicate state through colour alone — pair chips and dots with labels. Keep a visible focus ring (3px flag-yellow, 2-3px offset) on every control, touch targets at least 44px, and ensure tables stay readable when scrolled horizontally on small screens. Respect prefers-reduced-motion: the settled page renders with no JavaScript.

## Imagery Direction

### Pairs With

plakat

### Summary

Flat geometric Bauhaus-Swiss-constructivist reconstruction applied to engineering and industrial subjects on a dark ink ground: structures decomposed into pure primitives with a visible construction grid and one decisive red diagonal wedge, secondary cobalt and a single yellow square as signals.

### Subjects

- riveted steel gantry cranes and scaffolds
- industrial structures and machinery
- bridges, slipways and dry docks
- tools and fasteners (rivets, bolts, wrenches)
- assembly benches and control consoles

### Usage

Use as the full-bleed landing hero, composed on a rising diagonal with the lower-left kept darker and quieter so an overlay headline reads. Decompose the subject into flat primitives aligned to the construction grid; let one red diagonal wedge drive the eye. No text, letters, logos, gradients, or soft shading.

---
version: "alpha"
name: "Riveter"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#15151A"
  bg_2: "#101015"
  surface: "#1E1E25"
  surface_2: "#262630"
  text: "#F4F2EC"
  muted: "#9A968C"
  line: "#3A3A45"
  border: "#0B0B0E"
  accent: "#E11414"
  accent_blue: "#1453E1"
  accent_yellow: "#FFC400"
  on_accent: "#FFFFFF"
  success: "#1FA45E"
  warning: "#FFC400"
  error: "#E11414"
  info: "#1453E1"
  beam: "#0B0B0E"
  rivet: "#5A5A66"
typography:
  headline-lg:
    fontFamily: "Archivo Expanded"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo Expanded"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Archivo"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  rivet: "9999px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-bg_2:
    backgroundColor: "{colors.bg_2}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-line:
    backgroundColor: "{colors.line}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_blue:
    backgroundColor: "{colors.accent_blue}"
  color-reference-accent_yellow:
    backgroundColor: "{colors.accent_yellow}"
  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}"
  color-reference-beam:
    backgroundColor: "{colors.beam}"
  color-reference-rivet:
    backgroundColor: "{colors.rivet}"
  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"
---

# Riveter

## Overview

Riveter answers the constructivist brief with the workshop, not the gallery. Where the poster tradition lays type flat on white, Riveter stands the structure up: content is assembled on a single rising diagonal axis, like a riveted steel gantry. Panels are not framed cards but steel plates bolted at the corners; the red wedge does the lifting, cobalt routes, yellow flags. The ground is a deliberate warm ink-black, an assembly bench under work-lights where the three primaries glow as torque marks against charcoal steel. Everything bears weight, nothing floats.

### Values

- {"name":"Built, not laid out","explanation":"Composition is assembled on a rising diagonal axis; plates bolt against one another and stagger, so the interface reads as a structure under load rather than a centred page."}
- {"name":"Structure as ornament","explanation":"The only decoration is structural — bolt-head corner markers and rows of rivets along plate edges. Nothing is added that does not also join something."}
- {"name":"Torque-mark colour","explanation":"Red is load, cobalt is routing, yellow is a flag. Three primaries on ink, applied exactly where force is, like a torque wrench — never as a surface wash."}
- {"name":"Weight in the type","explanation":"Heavy expanded display and oversized sheared figures carry the hierarchy; tabular mono lines up metadata like a torque chart."}
- {"name":"Flat steel depth","explanation":"Depth comes from a hard offset slab — a plate sitting proud of the one behind it — never glass, blur, or a soft shadow."}

### Anti-Values

- {"name":"White-poster default","explanation":"The ground is ink-black on purpose; reverting to white loses the assembly-bench identity entirely."}
- {"name":"Floating soft cards","explanation":"No rounded, plush, drop-shadowed cards. Panels are bolted steel plates with sharp corners."}
- {"name":"Colour as decoration","explanation":"A primary never fills a whole surface or solves hierarchy alone; it marks where force or routing is."}
- {"name":"Centred symmetry","explanation":"No hero-centred marketing composition; the hierarchy rises asymmetrically along the load axis."}

### Visual Character

- Content is assembled on a rising diagonal axis (approx -32 degrees); a skewed signal-red wedge marks the line of force in the hero and at section anchors.
- Every panel is a flat steel plate with a bolt-head marker at two opposite corners; rows of rivets run plate edges as the only, structural, ornament.
- Oversized Archivo Expanded numerals, slightly sheared with skewX, sit on solid red, cobalt, and ink blocks as the primary graphic device.
- Depth is a hard 6px offset black slab on hover and focus; the ground is warm ink-black with charcoal steel plates, sliced by one red diagonal.

## 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 | `#15151A` |
| bg_2 | `#101015` |
| surface | `#1E1E25` |
| surface_2 | `#262630` |
| text | `#F4F2EC` |
| muted | `#9A968C` |
| line | `#3A3A45` |
| border | `#0B0B0E` |
| accent | `#E11414` |
| accent_blue | `#1453E1` |
| accent_yellow | `#FFC400` |
| on_accent | `#FFFFFF` |
| success | `#1FA45E` |
| warning | `#FFC400` |
| error | `#E11414` |
| info | `#1453E1` |
| beam | `#0B0B0E` |
| rivet | `#5A5A66` |

## Typography

- **Headline-Lg**: Archivo Expanded, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo Expanded, 1.66rem, 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`

### Grid

Desktop caps contained content at ~1440px with a left rail on the dashboard; only the full-bleed hero spans 100vw. Composition climbs a diagonal axis; plates use minmax(0,1fr) columns and min-width:0 children so grids never overflow. Tablet collapses rails to a top strip; mobile becomes a single stacked column with tables scrolling inside their plate.

### Whitespace

Negative space is structural — empty stretches of the diagonal axis and seams between plates are kept on purpose to read as an assembly bench rather than a packed page.

### Density

Compact steel plates with measured breathing room for legibility on the dark ground.

### Responsive

Every artifact renders cleanly from ~390px mobile to 2560px+ ultra-wide with no horizontal overflow. At 900-1024px rails become top strips and key panels move to two columns; at 768px modules stack to one column; at 560px buttons go full width, controls stack, the masthead trims to one or two links, and data tables scroll horizontally inside their plate.

### Breakpoints

- **Mobile**: 390-560
- **Tablet**: 561-900
- **Desktop**: 901-1440
- **Ultrawide**: 1441+

## Elevation & Depth

### Shadows

- **Sm**: none
- **Md**: none
- **Lg**: 6px 6px 0 #0B0B0E
- **Slab**: 6px 6px 0 #0B0B0E

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: flat-steel
- **Card Style**: Flat rectangular steel plate on ink ground, no border edge, bolt-head markers at two opposite corners and rivet rows on plate edges; depth from a hard offset slab, never glass or soft shadow.
- **Bg Pattern**: ink

### Borders

- **Default Width**: 0px
- **Accent Width**: 8px
- **Style**: none
- **Character**: Plates carry no outline border; they are separated by deep seams and depth comes from a 6px offset black slab. The only coloured edge is an 8px left load-bar on alert plates, paired with a text condition.

## Components

### Composition

Assemble content on a rising diagonal axis (about -32 degrees), not a centred poster grid. A dominant lead block rises from the lower-left while metadata sits in narrow rails or a left navigation rail. Render panels as flat steel plates (0px radius, no border) bolted with bolt-head markers at two opposite corners; stagger plates in a row so the composition reads as built. Mark the line of force with one skewed signal-red wedge.

### Hierarchy

Lead with a mono uppercase label and a skewed red wedge, then an oversized Archivo Expanded headline or sheared numeral, then concise Archivo body. Build hierarchy with scale, weight, case, position, and offset-slab depth before colour. Important metrics become poster-like sheared figures on solid red, cobalt, or ink blocks.

### Density

Operational medium-high density with disciplined negative space: compact interior modules on generous ink ground, plates separated by deep seams and empty axis space rather than crowding.

### Signature

Rising diagonal load axis with a skewed red wedge; flat steel plates bolted with bolt-head corner markers and rivet-row edges; three primaries (red load, cobalt routing, yellow flag) used only as torque marks and status chips; oversized sheared Archivo Expanded figures on red/cobalt/ink blocks; depth from a hard 6px offset black slab; mono uppercase metadata with leading square chips.

## 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-019ef897-08b1-7091-a1ba-e0341bc2747e/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 the warm ink-black ground; let the three primaries glow as sparse torque marks against charcoal steel.
- Do Assemble content on a rising diagonal axis and stagger plates so the layout reads as built, not centred.
- Do Bolt every plate with bolt-head markers at two opposite corners; run rivet rows along edges as the only ornament.
- Do Set heads and figures in heavy uppercase Archivo Expanded with a slight skew; run metadata and numerals in tabular Space Mono.
- Do Pair every status colour with a chip or dot and a text label; make exactly one button primary and keep the rest quiet.
- Do Express depth with a hard 6px offset black slab on hover and focus; explicitly style every form control on the dark field.
- Don't Do not default to a white ground or a centred hero composition.
- Don't Do not frame plates as soft rounded cards, nest cards, or box the top nav in a pill bar.
- Don't Do not let a primary fill a whole surface or solve hierarchy on its own.
- Don't Do not rely on glow, blur, or soft drop shadows for depth; use the offset slab.
- Don't Do not leave a single coloured accent edge as a panel's only marker, or ship browser-default controls.
- Don't Do not use emoji or symbol glyphs in copy or on buttons; use SVG primitives and labels.

### Accessibility

Maintain high mill-white-on-ink contrast and never communicate state through colour alone — pair chips and dots with labels. Keep a visible focus ring (3px flag-yellow, 2-3px offset) on every control, touch targets at least 44px, and ensure tables stay readable when scrolled horizontally on small screens. Respect prefers-reduced-motion: the settled page renders with no JavaScript.

## Imagery Direction

### Pairs With

plakat

### Summary

Flat geometric Bauhaus-Swiss-constructivist reconstruction applied to engineering and industrial subjects on a dark ink ground: structures decomposed into pure primitives with a visible construction grid and one decisive red diagonal wedge, secondary cobalt and a single yellow square as signals.

### Subjects

- riveted steel gantry cranes and scaffolds
- industrial structures and machinery
- bridges, slipways and dry docks
- tools and fasteners (rivets, bolts, wrenches)
- assembly benches and control consoles

### Usage

Use as the full-bleed landing hero, composed on a rising diagonal with the lower-left kept darker and quieter so an overlay headline reads. Decompose the subject into flat primitives aligned to the construction grid; let one red diagonal wedge drive the eye. No text, letters, logos, gradients, or soft shading.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "riveter",
  "type": "registry:theme",
  "title": "Riveter shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#15151A",
      "foreground": "#F4F2EC",
      "card": "#1E1E25",
      "card-foreground": "#F4F2EC",
      "popover": "#1E1E25",
      "popover-foreground": "#F4F2EC",
      "primary": "#F4F2EC",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#9A968C",
      "muted-foreground": "#F4F2EC",
      "accent": "#E11414",
      "accent-foreground": "#ffffff",
      "destructive": "#E11414",
      "border": "#0B0B0E",
      "input": "#0B0B0E",
      "ring": "#E11414",
      "chart-1": "#F4F2EC",
      "chart-2": "#f4f4f5",
      "chart-3": "#E11414",
      "chart-4": "#1FA45E",
      "chart-5": "#FFC400",
      "sidebar": "#1E1E25",
      "sidebar-foreground": "#F4F2EC",
      "sidebar-primary": "#F4F2EC",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#1453E1",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#0B0B0E",
      "sidebar-ring": "#E11414",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F4F2EC",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E11414",
      "accent-foreground": "#ffffff",
      "destructive": "#E11414",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E11414",
      "chart-1": "#F4F2EC",
      "chart-2": "#f4f4f5",
      "chart-3": "#E11414",
      "chart-4": "#1FA45E",
      "chart-5": "#FFC400",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F4F2EC",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#E11414",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E11414",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef897-08b1-7091-a1ba-e0341bc2747e",
    "slug": "riveter",
    "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_blue",
        "accent_yellow",
        "beam",
        "bg",
        "bg_2",
        "border",
        "error",
        "info",
        "line",
        "muted",
        "on_accent",
        "rivet",
        "success",
        "surface",
        "surface_2",
        "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",
        "rivet",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "slab",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```