Quoin

# Quoin

## Philosophy

Quoin is the editorial ink atelier — a design language for serious visual-culture tools (magazine issue-planning rooms, print archives, art-direction boards, works-on-paper catalogs). It treats the interface like a locked-up forme on a studio table: warm paper, mostly black printing ink, measured columns, printed register rules, and generous editorial whitespace — then one electric signal at a time to call the lead. The ink rule is the layout material; colour is a register mark, never a fill. A quoin is the locking wedge that holds the forme square in the chase: the page is set, ruled, and locked before it goes to press.

### Values

- {"name":"Ink-first authority","description":"Black is the primary drawing instrument — type, rules, marks, and counts feel printed or drawn, not filled with decorative colour."}
- {"name":"The rule as structure","description":"Double-rule headers and faint baseline register lines build hierarchy before any fill or surface; the line is the first layout tool."}
- {"name":"Electric restraint","description":"One signal per view — vermilion calls the lead, cobalt carries focus and action, chartreuse marks a selection — each under about five percent of the surface."}
- {"name":"Works-on-paper materiality","description":"The ground is warm studio paper with a faint tooth, not glass or white; surfaces suggest a sheet on the desk."}
- {"name":"Gesture under control","description":"A rough hand-drawn stroke breaks a panel edge to keep the human hand visible under the grid, never reducing readability."}
- {"name":"Fine-art seriousness","description":"Editorial, disciplined, alive with the tension between hand-drawn gesture and publication-grid precision — never playful, retro, or decorative."}

### Anti-Values

- {"name":"Rainbow creativity","description":"Never use multiple saturated accents at once or turn the screen into an art-school palette sampler."}
- {"name":"Template minimalism","description":"Never rely on pure-white borderless cards with soft shadows; identity comes from ruled structure, ink marks, and editorial hierarchy."}
- {"name":"Crypto gloss","description":"No gradient buttons, glassy panels, neon haze, or inflated rounded cards."}
- {"name":"Decorative illustration","description":"Linework must function as rule, annotation, frame, or compositional tension — never cute ornament."}

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4F1EA` |
| surface | `#FBFAF6` |
| surface_2 | `#ECE7DC` |
| text | `#14110C` |
| muted | `#6B6357` |
| border | `#14110C` |
| accent | `#F23B2E` |
| on_accent | `#FBFAF6` |
| accent_2 | `#0057FF` |
| accent_3 | `#C8FF00` |
| success | `#177245` |
| warning | `#B36A00` |
| error | `#B00020` |
| info | `#0057FF` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans
- **Heading Font**: Libre Baskerville
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.5
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(20,17,12,0.20)
- **Md**: 7px 7px 0 rgba(20,17,12,0.10)

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Warm-paper panels with a 1px ink rule and a double-rule header (border-top 3px double + border-bottom 1px); a lead panel adds a 2px vermilion left edge and a small diamond pin. Offset block shadow, never a soft glow.
- **Bg Pattern**: grain
- **Paper Texture**: Layered radial-gradient noise at very low opacity over warm studio paper (#F4F1EA); a fresher sheet (#FBFAF6) lifts panels and a warm neutral (#ECE7DC) insets material notes.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: The ink rule is the layout material: thin frames for panels, 3px double-rules for section headers, faint baseline register lines crossing surfaces, and single hairlines between ledger rows.

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0, 0, 1)
- **Philosophy**: Snappy, editorial, almost mechanical — a state change feels like a mark placed on paper. The settled state is the default and renders with no JavaScript; motion is added on top and respects prefers-reduced-motion.

## Rules

### Composition

- Build screens as editorial spreads: a large title and deck zone, a folio rail, a main asymmetric grid, and caption-like metadata blocks.
- Use black horizontal and vertical rules to divide space before any background fill; the line is the primary layout material.
- Keep accent colour to one chosen signal per screen, covering under five percent of the visible area.
- Circle counts and folios in ink as margin marks rather than boxing them as metric cards.
- Let an occasional rough rotated gesture stroke cross a panel edge to keep the human hand visible without breaking alignment.

### Hierarchy

- Headlines use Libre Baskerville at dramatic scale with tight tracking and compact line-height for an art-book editorial voice.
- Navigation, status labels, folios, and counts use IBM Plex Mono uppercase in small sizes with rule separators.
- Body copy uses IBM Plex Sans aligned to the grid; avoid centred marketing copy.
- Important actions are ink-black with a tiny vermilion accent pin, not a large coloured fill.
- The active or lead item receives a 2px vermilion left edge plus a small diamond pin at its grid origin.

### Density

Medium editorial density: generous gallery-wall whitespace and large typographic moments balanced by compact mono captions, small metadata, and tightly ruled annotation panels.

### Signature

- Double-rule section headers (border-top 3px double + border-bottom 1px) act as magazine-section dividers, never generic card titles.
- Faint baseline register lines cross article panels so structure reads as printed paper.
- A lead item carries a 2px vermilion left edge and an absolute-positioned diamond pin — colour as signal, not fill.
- Gesture underlines are rough rotated inline-SVG strokes behind a chosen heading word.
- Edition counters and folios are circled in ink (9999px), the lead circled in vermilion.

## Layout

### Grid

Desktop uses a 12-column grid at max-width 1360px with 24px gutters, a folio rail, and asymmetric 5/4/3 spans aligned to a visible baseline rhythm.

### Whitespace

Whitespace reads like gallery wall space — warm studio paper sharply bounded by ink rules, with warm neutral inset panels only where material notes or archive context require them.

### Density

Medium-density editorial workspace: large serif display, compact mono metadata, ruled panels that hold dense publication-planning information without feeling like a SaaS dashboard.

### Responsive

From ~390px mobile to 2560px+ ultra-wide. At 1080px collapse the asymmetric grid to a single column and reduce headline scale; on mobile stack all panels, hide non-essential nav and table columns, make controls full width, and never overflow horizontally; on ultra-wide cap and centre the contained content while only the full-bleed hero spans 100vw.

### Breakpoints

- **Desktop**: 1081px and up: 12 columns with folio rail
- **Tablet**: 561px-1080px: single-column stacked panels, rail collapsed into a top bar
- **Mobile**: 560px and below: single column, stacked full-width controls, hidden secondary columns
- **Ultrawide**: 2200px and up: content cap 1600px, only the hero spans 100vw

## Guidance

### Do

- Use warm studio paper (#F4F1EA) as the ground and introduce a fresher sheet or warm neutral only inside panels and material notes.
- Apply -0.02em letter spacing globally, including captions, buttons, metadata, and form controls.
- Use black ruled borders as the first hierarchy tool before adding colour, shadow, or filled surfaces.
- Choose one saturated accent per composition: vermilion for the lead, cobalt for focus and action, chartreuse for a selection.
- Make headings editorial and typographic; pair large serif display with compact mono folios and sans body copy.
- Style every input, select, checkbox, switch, slider, button, and table with the same ink-rule system and a custom focus.
- Use rough gesture lines sparingly to emphasise curatorial judgement or hand annotation.
- Keep border radius at 0px for panels and 9999px only for circled edition marks and small pills.

### Don't

- Do not give a card a single lone accent edge, or fill a large area with vermilion, cobalt, or chartreuse; accents stay small register marks.
- Do not use gradient text or buttons, pastel washes, glassmorphism, or crypto-style glows.
- Do not use generic rounded SaaS cards or random radius values such as 8px, 12px, 20px, or 32px.
- Do not centre every element or build a component catalog; create a real editorial workspace scene.
- Do not let sketch marks reduce readability or make controls look unfinished.
- Do not use default browser styles for selects, checkboxes, switches, sliders, or focus states.
- Do not mix multiple display fonts or use rejected LLM-default fonts like Poppins, Montserrat, DM Sans, or Space Grotesk.

### Accessibility

Keep text near-black on warm paper or fresher-sheet surfaces; never place small text on a saturated accent field. Use a visible 2px cobalt focus ring on every control, keep touch targets at least 44px, and provide text labels beside symbolic ink marks. The fully-rendered state is visible with no JavaScript and motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

reglure

### Summary

Black pen-and-ink plates on warm studio paper, crossed by printed register lines, with one small electric register mark as the only colour. Imagery functions as annotation, frame, or compositional tension — never decorative illustration.

### Subjects

- letterpress chase and locked-up forme
- magazine layout sheet with measured columns
- compositor's setting rules and galley proofs
- contact sheets and works-on-paper plates
- studio desk and archive material

### Usage

One full-bleed landing hero in the Réglure technique; elsewhere keep imagery to margins, captions, contact sheets, and annotation overlays. End every prompt with NO text, NO letters, NO logos.

---
version: "alpha"
name: "Quoin"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F4F1EA"
  surface: "#FBFAF6"
  surface_2: "#ECE7DC"
  text: "#14110C"
  muted: "#6B6357"
  border: "#14110C"
  accent: "#F23B2E"
  on_accent: "#FBFAF6"
  accent_2: "#0057FF"
  accent_3: "#C8FF00"
  success: "#177245"
  warning: "#B36A00"
  error: "#B00020"
  info: "#0057FF"
typography:
  headline-lg:
    fontFamily: "Libre Baskerville"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Libre Baskerville"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  pill: "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-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-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  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"
---

# Quoin

## Overview

Quoin is the editorial ink atelier — a design language for serious visual-culture tools (magazine issue-planning rooms, print archives, art-direction boards, works-on-paper catalogs). It treats the interface like a locked-up forme on a studio table: warm paper, mostly black printing ink, measured columns, printed register rules, and generous editorial whitespace — then one electric signal at a time to call the lead. The ink rule is the layout material; colour is a register mark, never a fill. A quoin is the locking wedge that holds the forme square in the chase: the page is set, ruled, and locked before it goes to press.

### Values

- {"name":"Ink-first authority","description":"Black is the primary drawing instrument — type, rules, marks, and counts feel printed or drawn, not filled with decorative colour."}
- {"name":"The rule as structure","description":"Double-rule headers and faint baseline register lines build hierarchy before any fill or surface; the line is the first layout tool."}
- {"name":"Electric restraint","description":"One signal per view — vermilion calls the lead, cobalt carries focus and action, chartreuse marks a selection — each under about five percent of the surface."}
- {"name":"Works-on-paper materiality","description":"The ground is warm studio paper with a faint tooth, not glass or white; surfaces suggest a sheet on the desk."}
- {"name":"Gesture under control","description":"A rough hand-drawn stroke breaks a panel edge to keep the human hand visible under the grid, never reducing readability."}
- {"name":"Fine-art seriousness","description":"Editorial, disciplined, alive with the tension between hand-drawn gesture and publication-grid precision — never playful, retro, or decorative."}

### Anti-Values

- {"name":"Rainbow creativity","description":"Never use multiple saturated accents at once or turn the screen into an art-school palette sampler."}
- {"name":"Template minimalism","description":"Never rely on pure-white borderless cards with soft shadows; identity comes from ruled structure, ink marks, and editorial hierarchy."}
- {"name":"Crypto gloss","description":"No gradient buttons, glassy panels, neon haze, or inflated rounded cards."}
- {"name":"Decorative illustration","description":"Linework must function as rule, annotation, frame, or compositional tension — never cute ornament."}

## 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 | `#F4F1EA` |
| surface | `#FBFAF6` |
| surface_2 | `#ECE7DC` |
| text | `#14110C` |
| muted | `#6B6357` |
| border | `#14110C` |
| accent | `#F23B2E` |
| on_accent | `#FBFAF6` |
| accent_2 | `#0057FF` |
| accent_3 | `#C8FF00` |
| success | `#177245` |
| warning | `#B36A00` |
| error | `#B00020` |
| info | `#0057FF` |

## Typography

- **Headline-Lg**: Libre Baskerville, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Libre Baskerville, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex 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 uses a 12-column grid at max-width 1360px with 24px gutters, a folio rail, and asymmetric 5/4/3 spans aligned to a visible baseline rhythm.

### Whitespace

Whitespace reads like gallery wall space — warm studio paper sharply bounded by ink rules, with warm neutral inset panels only where material notes or archive context require them.

### Density

Medium-density editorial workspace: large serif display, compact mono metadata, ruled panels that hold dense publication-planning information without feeling like a SaaS dashboard.

### Responsive

From ~390px mobile to 2560px+ ultra-wide. At 1080px collapse the asymmetric grid to a single column and reduce headline scale; on mobile stack all panels, hide non-essential nav and table columns, make controls full width, and never overflow horizontally; on ultra-wide cap and centre the contained content while only the full-bleed hero spans 100vw.

### Breakpoints

- **Desktop**: 1081px and up: 12 columns with folio rail
- **Tablet**: 561px-1080px: single-column stacked panels, rail collapsed into a top bar
- **Mobile**: 560px and below: single column, stacked full-width controls, hidden secondary columns
- **Ultrawide**: 2200px and up: content cap 1600px, only the hero spans 100vw

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(20,17,12,0.20)
- **Md**: 7px 7px 0 rgba(20,17,12,0.10)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Warm-paper panels with a 1px ink rule and a double-rule header (border-top 3px double + border-bottom 1px); a lead panel adds a 2px vermilion left edge and a small diamond pin. Offset block shadow, never a soft glow.
- **Bg Pattern**: grain
- **Paper Texture**: Layered radial-gradient noise at very low opacity over warm studio paper (#F4F1EA); a fresher sheet (#FBFAF6) lifts panels and a warm neutral (#ECE7DC) insets material notes.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: The ink rule is the layout material: thin frames for panels, 3px double-rules for section headers, faint baseline register lines crossing surfaces, and single hairlines between ledger rows.

## Components

### Composition

- Build screens as editorial spreads: a large title and deck zone, a folio rail, a main asymmetric grid, and caption-like metadata blocks.
- Use black horizontal and vertical rules to divide space before any background fill; the line is the primary layout material.
- Keep accent colour to one chosen signal per screen, covering under five percent of the visible area.
- Circle counts and folios in ink as margin marks rather than boxing them as metric cards.
- Let an occasional rough rotated gesture stroke cross a panel edge to keep the human hand visible without breaking alignment.

### Hierarchy

- Headlines use Libre Baskerville at dramatic scale with tight tracking and compact line-height for an art-book editorial voice.
- Navigation, status labels, folios, and counts use IBM Plex Mono uppercase in small sizes with rule separators.
- Body copy uses IBM Plex Sans aligned to the grid; avoid centred marketing copy.
- Important actions are ink-black with a tiny vermilion accent pin, not a large coloured fill.
- The active or lead item receives a 2px vermilion left edge plus a small diamond pin at its grid origin.

### Density

Medium editorial density: generous gallery-wall whitespace and large typographic moments balanced by compact mono captions, small metadata, and tightly ruled annotation panels.

### Signature

- Double-rule section headers (border-top 3px double + border-bottom 1px) act as magazine-section dividers, never generic card titles.
- Faint baseline register lines cross article panels so structure reads as printed paper.
- A lead item carries a 2px vermilion left edge and an absolute-positioned diamond pin — colour as signal, not fill.
- Gesture underlines are rough rotated inline-SVG strokes behind a chosen heading word.
- Edition counters and folios are circled in ink (9999px), the lead circled in vermilion.

## 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-019ef8bb-aef6-7e13-8bd3-1dc2cadae95e/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 Use warm studio paper (#F4F1EA) as the ground and introduce a fresher sheet or warm neutral only inside panels and material notes.
- Do Apply -0.02em letter spacing globally, including captions, buttons, metadata, and form controls.
- Do Use black ruled borders as the first hierarchy tool before adding colour, shadow, or filled surfaces.
- Do Choose one saturated accent per composition: vermilion for the lead, cobalt for focus and action, chartreuse for a selection.
- Do Make headings editorial and typographic; pair large serif display with compact mono folios and sans body copy.
- Do Style every input, select, checkbox, switch, slider, button, and table with the same ink-rule system and a custom focus.
- Do Use rough gesture lines sparingly to emphasise curatorial judgement or hand annotation.
- Do Keep border radius at 0px for panels and 9999px only for circled edition marks and small pills.
- Don't Do not give a card a single lone accent edge, or fill a large area with vermilion, cobalt, or chartreuse; accents stay small register marks.
- Don't Do not use gradient text or buttons, pastel washes, glassmorphism, or crypto-style glows.
- Don't Do not use generic rounded SaaS cards or random radius values such as 8px, 12px, 20px, or 32px.
- Don't Do not centre every element or build a component catalog; create a real editorial workspace scene.
- Don't Do not let sketch marks reduce readability or make controls look unfinished.
- Don't Do not use default browser styles for selects, checkboxes, switches, sliders, or focus states.
- Don't Do not mix multiple display fonts or use rejected LLM-default fonts like Poppins, Montserrat, DM Sans, or Space Grotesk.

### Accessibility

Keep text near-black on warm paper or fresher-sheet surfaces; never place small text on a saturated accent field. Use a visible 2px cobalt focus ring on every control, keep touch targets at least 44px, and provide text labels beside symbolic ink marks. The fully-rendered state is visible with no JavaScript and motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

reglure

### Summary

Black pen-and-ink plates on warm studio paper, crossed by printed register lines, with one small electric register mark as the only colour. Imagery functions as annotation, frame, or compositional tension — never decorative illustration.

### Subjects

- letterpress chase and locked-up forme
- magazine layout sheet with measured columns
- compositor's setting rules and galley proofs
- contact sheets and works-on-paper plates
- studio desk and archive material

### Usage

One full-bleed landing hero in the Réglure technique; elsewhere keep imagery to margins, captions, contact sheets, and annotation overlays. End every prompt with NO text, NO letters, NO logos.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quoin",
  "type": "registry:theme",
  "title": "Quoin shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F1EA",
      "foreground": "#14110C",
      "card": "#FBFAF6",
      "card-foreground": "#14110C",
      "popover": "#FBFAF6",
      "popover-foreground": "#14110C",
      "primary": "#14110C",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6B6357",
      "muted-foreground": "#14110C",
      "accent": "#F23B2E",
      "accent-foreground": "#ffffff",
      "destructive": "#B00020",
      "border": "#14110C",
      "input": "#14110C",
      "ring": "#F23B2E",
      "chart-1": "#14110C",
      "chart-2": "#f4f4f5",
      "chart-3": "#F23B2E",
      "chart-4": "#177245",
      "chart-5": "#B36A00",
      "sidebar": "#FBFAF6",
      "sidebar-foreground": "#14110C",
      "sidebar-primary": "#14110C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0057FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#14110C",
      "sidebar-ring": "#F23B2E",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#14110C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F23B2E",
      "accent-foreground": "#ffffff",
      "destructive": "#B00020",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F23B2E",
      "chart-1": "#14110C",
      "chart-2": "#f4f4f5",
      "chart-3": "#F23B2E",
      "chart-4": "#177245",
      "chart-5": "#B36A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#14110C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F23B2E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F23B2E",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef8bb-aef6-7e13-8bd3-1dc2cadae95e",
    "slug": "quoin",
    "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_3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "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"
      ],
      "radii": [
        "lg",
        "md",
        "none",
        "pill",
        "sm"
      ],
      "shadows": [
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "paper_texture",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```