Editorial Ink Atelier with Electric Accents

# Editorial Ink Atelier with Electric Accents

## Philosophy

Editorial Ink Atelier with Electric Accents is a design language for serious visual culture tools: magazine planning rooms, print archives, art direction boards, and contemporary works-on-paper catalogs. It treats the interface like a warm sheet on a studio table: mostly black ink, measured columns, visible ruled lines, and generous editorial white space, then one electric signal at a time to mark urgency, selection, or authorship. The language is not playful, decorative, or retro; it is disciplined, material, and alive with the tension between hand-drawn gesture and publication-grid precision.

### Values

- {"name":"Ink-first authority","description":"Use black as the primary drawing instrument: typography, rules, icons, frames, and data marks should feel printed or drawn, not filled with decorative color."}
- {"name":"Editorial sequencing","description":"Information should unfold like a magazine spread with decks, folios, captions, callouts, and asymmetric columns rather than generic dashboard boxes."}
- {"name":"Works-on-paper materiality","description":"Surfaces should suggest tooth, wash, and studio paper through subtle grain and soft ink-wash shadows while keeping the overall field close to white and gallery-neutral."}
- {"name":"Electric restraint","description":"Saturated vermilion, cobalt, acid chartreuse, or hot coral appear as small editorial signals: registration marks, active states, annotation flags, and one decisive call to action."}
- {"name":"Gesture under control","description":"Irregular linework, underlines, and scribble marks can interrupt the grid, but they must be placed deliberately and never make controls hard to read."}
- {"name":"Fine-art seriousness","description":"The tone is quiet, intelligent, and curatorial; it avoids cute illustration, bright fills, sticker-like badges, and trend-driven effects."}

### Anti-Values

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

### Visual Character

- Zero-radius rectangular panels use 1px and 2px black ink borders with occasional double rules, making every container feel like a printed page frame.
- Oversized serif editorial headlines sit beside condensed uppercase folio labels and tiny caption text, all with tight -0.02em letter spacing.
- Subtle paper grain and pale ink-wash smudges sit on a pure white base, giving the interface works-on-paper materiality without cream backgrounds.
- Sparse electric accent marks appear as narrow left rules, circled counters, focus rings, and annotation pins rather than broad filled surfaces.
- Hand-drawn gesture lines are simulated with slightly rotated underline strokes, rough dashed borders, and SVG scribble marks that cross the grid in controlled places.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#000000` |
| secondary | `#3A3732` |
| accent | `#F23B2E` |
| background | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#000000` |
| muted | `#6F6A63` |
| border | `#111111` |
| error | `#B00020` |
| success | `#177245` |
| warning | `#D97706` |
| info | `#1D4ED8` |
| paper_warm | `#F4F1EA` |
| gallery_neutral | `#E7E2DA` |
| cobalt | `#0057FF` |
| acid_chartreuse | `#C8FF00` |
| hot_coral | `#FF4F6D` |
| ink_wash | `#EDEBE6` |

### Typography

- **Heading Font**: Libre Baskerville
- **Body Font**: IBM Plex Sans
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.48
- **Letter Spacing**: -0.02em
- **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:wght@400;700&display=swap
- **Sizes**: {"caption":"11px","label":"12px","body":"16px","deck":"20px","h3":"24px","h2":"36px","h1":"64px"}
- **Weights**: {"regular":400,"medium":500,"semibold":600,"bold":700}

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.18)
- **Md**: 8px 8px 0 rgba(0,0,0,0.08)
- **Lg**: 14px 14px 0 rgba(0,0,0,0.10)

### Surfaces

- **Treatment**: paper
- **Card Style**: Flat white editorial panels with black ruled borders, faint paper grain, and occasional offset ink-wash blocks behind key spreads.
- **Bg Pattern**: noise
- **Paper Texture**: Subtle repeating radial grain at very low opacity over pure #FFFFFF, with warm neutral inset panels only for archive notes.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Printed black rules dominate the layout: thin frames for normal panels, double-rule headers for editorial emphasis, and rough dashed ink borders for annotations.

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0, 0, 1)
- **Philosophy**: snappy, editorial, and almost mechanical; state changes feel like a mark being placed on paper

## Rules

### Composition

- Build screens as editorial spreads: a large title/deck zone, a narrow folio rail, a main layout grid, and caption-like metadata blocks.
- Prefer asymmetric two- and three-column arrangements with one dominant artwork or brief and smaller annotation panels around it.
- Use black horizontal and vertical rules to divide space before using background fills; the line is the primary layout material.
- Keep accent color to one chosen signal per screen, covering less than five percent of visible area.
- Place fine-art material cues in margins, captions, contact sheets, and annotation overlays rather than as decorative backgrounds.
- Let occasional rotated scribble strokes cross a panel edge to create human gesture without breaking alignment.

### Hierarchy

- Headlines use Libre Baskerville at dramatic scale with tight tracking and compact line-height, creating an art-book editorial voice.
- Navigation, status labels, and folios use IBM Plex Mono uppercase in small sizes with visible rule separators.
- Body copy uses IBM Plex Sans with calm line height; avoid centered marketing copy and keep text aligned to the grid.
- Important actions receive a black outline plus a tiny electric accent mark, not a large colored fill.
- Data and counts are framed as circled edition marks or margin notes rather than conventional metric cards.

### Density

Medium editorial density: generous margins and large typographic moments are balanced by compact captions, small metadata, and tightly ruled annotation panels.

### Signature Patterns

- Panel headers use double black rules made with border-top and border-bottom, creating magazine-section dividers instead of generic card titles.
- Active or urgent items receive a 2px electric left border plus a small absolute-positioned accent pin, keeping color as a signal not a fill.
- Gesture underlines are rendered with rotated pseudo-elements and rough dashed SVG strokes that sit behind selected headings or annotations.
- Fine-art paper grain is implemented with layered radial-gradient noise at extremely low opacity over a pure white background.
- Edition counters and status chips use zero-radius rectangles or 9999px circled marks with mono type and black ink outlines.

## Layout

### Density

Medium-density editorial workspace with large title typography, compact mono metadata, and ruled panels that can hold dense publication planning information without feeling like a SaaS dashboard.

### Grid

Desktop uses a 12-column grid at max-width 1360px with 24px gutters, a 72px folio rail, and asymmetric spans of 5/4/3 columns; key panels align to a visible baseline rhythm.

### Breakpoints

- **Desktop**: 1200px and up: 12 columns with folio rail
- **Tablet**: 768px-1199px: 6 columns with rail collapsed into top bar
- **Mobile**: 480px and below: single column with stacked full-width controls

### Whitespace

Whitespace should feel like gallery wall space: mostly pure white, sharply bounded by ink rules, with warm neutral paper panels only where material notes or artwork context require them.

### Responsive

At 1024px reduce headline scale and collapse side annotations; at 768px use two-column card flow; at 480px stack all panels, make controls full width, and allow tables to scroll inside ruled wrappers.

## Guidance

### Do

- Use pure #FFFFFF as the main background and introduce paper warmth only inside small archival or material-note surfaces.
- Apply -0.02em letter spacing globally, including captions, buttons, metadata, and form controls.
- Use black ruled borders as the first hierarchy tool before adding color, shadow, or filled surfaces.
- Choose one saturated accent per composition and reserve it for selection, urgency, active navigation, or annotation pins.
- Make headings editorial and typographic; pair large serif display with compact mono folios and sans body copy.
- Style every input, select, checkbox, button, and table with the same ink-border system.
- Use rough gesture lines sparingly to emphasize curatorial judgment or hand annotation.
- Keep border radius at 0px for panels and 9999px only for small circled counters or pills.

### Don't

- Do not use gradient text, gradient buttons, pastel backgrounds, glassmorphism, or crypto-style glows.
- Do not fill large areas with vermilion, cobalt, chartreuse, or coral; accents must stay small and editorial.
- Do not use generic rounded SaaS cards or random radius values such as 8px, 12px, 20px, or 32px.
- Do not center 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, sliders, or focus states.
- Do not mix multiple display fonts or use rejected LLM-default fonts like Poppins, Montserrat, DM Sans, or Space Grotesk.

### Usage Context

Best for editorial design tools, magazine issue planning, art direction archives, print-publication dashboards, contemporary art catalogs, studio critique workspaces, and visual culture research systems.

### Accessibility

Maintain WCAG contrast by keeping text black on white or warm neutral surfaces, never placing small text on saturated accent fields, using visible 2px focus rings, keeping touch targets at least 44px, and providing text labels beside symbolic ink marks.

---
version: "alpha"
name: "Editorial Ink Atelier with Electric Accents"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#000000"
  secondary: "#3A3732"
  accent: "#F23B2E"
  background: "#FFFFFF"
  surface: "#FFFFFF"
  text: "#000000"
  muted: "#6F6A63"
  border: "#111111"
  error: "#B00020"
  success: "#177245"
  warning: "#D97706"
  info: "#1D4ED8"
  paper_warm: "#F4F1EA"
  gallery_neutral: "#E7E2DA"
  cobalt: "#0057FF"
  acid_chartreuse: "#C8FF00"
  hot_coral: "#FF4F6D"
  ink_wash: "#EDEBE6"
typography:
  headline-lg:
    fontFamily: "Libre Baskerville"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Libre Baskerville"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.48
    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"
  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-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-paper_warm:
    backgroundColor: "{colors.paper_warm}"
  color-reference-gallery_neutral:
    backgroundColor: "{colors.gallery_neutral}"
  color-reference-cobalt:
    backgroundColor: "{colors.cobalt}"
  color-reference-acid_chartreuse:
    backgroundColor: "{colors.acid_chartreuse}"
  color-reference-hot_coral:
    backgroundColor: "{colors.hot_coral}"
  color-reference-ink_wash:
    backgroundColor: "{colors.ink_wash}"
  button-primary:
    backgroundColor: "{colors.primary}"
    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"
---

# Editorial Ink Atelier with Electric Accents

## Overview

Editorial Ink Atelier with Electric Accents is a design language for serious visual culture tools: magazine planning rooms, print archives, art direction boards, and contemporary works-on-paper catalogs. It treats the interface like a warm sheet on a studio table: mostly black ink, measured columns, visible ruled lines, and generous editorial white space, then one electric signal at a time to mark urgency, selection, or authorship. The language is not playful, decorative, or retro; it is disciplined, material, and alive with the tension between hand-drawn gesture and publication-grid precision.

### Values

- {"name":"Ink-first authority","description":"Use black as the primary drawing instrument: typography, rules, icons, frames, and data marks should feel printed or drawn, not filled with decorative color."}
- {"name":"Editorial sequencing","description":"Information should unfold like a magazine spread with decks, folios, captions, callouts, and asymmetric columns rather than generic dashboard boxes."}
- {"name":"Works-on-paper materiality","description":"Surfaces should suggest tooth, wash, and studio paper through subtle grain and soft ink-wash shadows while keeping the overall field close to white and gallery-neutral."}
- {"name":"Electric restraint","description":"Saturated vermilion, cobalt, acid chartreuse, or hot coral appear as small editorial signals: registration marks, active states, annotation flags, and one decisive call to action."}
- {"name":"Gesture under control","description":"Irregular linework, underlines, and scribble marks can interrupt the grid, but they must be placed deliberately and never make controls hard to read."}
- {"name":"Fine-art seriousness","description":"The tone is quiet, intelligent, and curatorial; it avoids cute illustration, bright fills, sticker-like badges, and trend-driven effects."}

### Anti-Values

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

### Visual Character

- Zero-radius rectangular panels use 1px and 2px black ink borders with occasional double rules, making every container feel like a printed page frame.
- Oversized serif editorial headlines sit beside condensed uppercase folio labels and tiny caption text, all with tight -0.02em letter spacing.
- Subtle paper grain and pale ink-wash smudges sit on a pure white base, giving the interface works-on-paper materiality without cream backgrounds.
- Sparse electric accent marks appear as narrow left rules, circled counters, focus rings, and annotation pins rather than broad filled surfaces.
- Hand-drawn gesture lines are simulated with slightly rotated underline strokes, rough dashed borders, and SVG scribble marks that cross the grid in controlled places.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| primary | `#000000` |
| secondary | `#3A3732` |
| accent | `#F23B2E` |
| background | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#000000` |
| muted | `#6F6A63` |
| border | `#111111` |
| error | `#B00020` |
| success | `#177245` |
| warning | `#D97706` |
| info | `#1D4ED8` |
| paper_warm | `#F4F1EA` |
| gallery_neutral | `#E7E2DA` |
| cobalt | `#0057FF` |
| acid_chartreuse | `#C8FF00` |
| hot_coral | `#FF4F6D` |
| ink_wash | `#EDEBE6` |

## Typography

- **Headline-Lg**: Libre Baskerville, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Libre Baskerville, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 16px, weight 400, line-height 1.48.
- **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`

### Density

Medium-density editorial workspace with large title typography, compact mono metadata, and ruled panels that can hold dense publication planning information without feeling like a SaaS dashboard.

### Grid

Desktop uses a 12-column grid at max-width 1360px with 24px gutters, a 72px folio rail, and asymmetric spans of 5/4/3 columns; key panels align to a visible baseline rhythm.

### Breakpoints

- **Desktop**: 1200px and up: 12 columns with folio rail
- **Tablet**: 768px-1199px: 6 columns with rail collapsed into top bar
- **Mobile**: 480px and below: single column with stacked full-width controls

### Whitespace

Whitespace should feel like gallery wall space: mostly pure white, sharply bounded by ink rules, with warm neutral paper panels only where material notes or artwork context require them.

### Responsive

At 1024px reduce headline scale and collapse side annotations; at 768px use two-column card flow; at 480px stack all panels, make controls full width, and allow tables to scroll inside ruled wrappers.

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.18)
- **Md**: 8px 8px 0 rgba(0,0,0,0.08)
- **Lg**: 14px 14px 0 rgba(0,0,0,0.10)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Flat white editorial panels with black ruled borders, faint paper grain, and occasional offset ink-wash blocks behind key spreads.
- **Bg Pattern**: noise
- **Paper Texture**: Subtle repeating radial grain at very low opacity over pure #FFFFFF, with warm neutral inset panels only for archive notes.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Printed black rules dominate the layout: thin frames for normal panels, double-rule headers for editorial emphasis, and rough dashed ink borders for annotations.

## Components

### Composition

- Build screens as editorial spreads: a large title/deck zone, a narrow folio rail, a main layout grid, and caption-like metadata blocks.
- Prefer asymmetric two- and three-column arrangements with one dominant artwork or brief and smaller annotation panels around it.
- Use black horizontal and vertical rules to divide space before using background fills; the line is the primary layout material.
- Keep accent color to one chosen signal per screen, covering less than five percent of visible area.
- Place fine-art material cues in margins, captions, contact sheets, and annotation overlays rather than as decorative backgrounds.
- Let occasional rotated scribble strokes cross a panel edge to create human gesture without breaking alignment.

### Hierarchy

- Headlines use Libre Baskerville at dramatic scale with tight tracking and compact line-height, creating an art-book editorial voice.
- Navigation, status labels, and folios use IBM Plex Mono uppercase in small sizes with visible rule separators.
- Body copy uses IBM Plex Sans with calm line height; avoid centered marketing copy and keep text aligned to the grid.
- Important actions receive a black outline plus a tiny electric accent mark, not a large colored fill.
- Data and counts are framed as circled edition marks or margin notes rather than conventional metric cards.

### Density

Medium editorial density: generous margins and large typographic moments are balanced by compact captions, small metadata, and tightly ruled annotation panels.

### Signature Patterns

- Panel headers use double black rules made with border-top and border-bottom, creating magazine-section dividers instead of generic card titles.
- Active or urgent items receive a 2px electric left border plus a small absolute-positioned accent pin, keeping color as a signal not a fill.
- Gesture underlines are rendered with rotated pseudo-elements and rough dashed SVG strokes that sit behind selected headings or annotations.
- Fine-art paper grain is implemented with layered radial-gradient noise at extremely low opacity over a pure white background.
- Edition counters and status chips use zero-radius rectangles or 9999px circled marks with mono type and black ink outlines.

## 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/editorial-ink-atelier-electric-accents/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 pure #FFFFFF as the main background and introduce paper warmth only inside small archival or material-note surfaces.
- 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 color, shadow, or filled surfaces.
- Do Choose one saturated accent per composition and reserve it for selection, urgency, active navigation, or annotation pins.
- Do Make headings editorial and typographic; pair large serif display with compact mono folios and sans body copy.
- Do Style every input, select, checkbox, button, and table with the same ink-border system.
- Do Use rough gesture lines sparingly to emphasize curatorial judgment or hand annotation.
- Do Keep border radius at 0px for panels and 9999px only for small circled counters or pills.
- Don't Do not use gradient text, gradient buttons, pastel backgrounds, glassmorphism, or crypto-style glows.
- Don't Do not fill large areas with vermilion, cobalt, chartreuse, or coral; accents must stay small and editorial.
- Don't Do not use generic rounded SaaS cards or random radius values such as 8px, 12px, 20px, or 32px.
- Don't Do not center 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, 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.

### Usage Context

Best for editorial design tools, magazine issue planning, art direction archives, print-publication dashboards, contemporary art catalogs, studio critique workspaces, and visual culture research systems.

### Accessibility

Maintain WCAG contrast by keeping text black on white or warm neutral surfaces, never placing small text on saturated accent fields, using visible 2px focus rings, keeping touch targets at least 44px, and providing text labels beside symbolic ink marks.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "editorial-ink-atelier-electric-accents",
  "type": "registry:theme",
  "title": "Editorial Ink Atelier with Electric Accents shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#000000",
      "card": "#FFFFFF",
      "card-foreground": "#000000",
      "popover": "#FFFFFF",
      "popover-foreground": "#000000",
      "primary": "#000000",
      "primary-foreground": "#ffffff",
      "secondary": "#3A3732",
      "secondary-foreground": "#ffffff",
      "muted": "#6F6A63",
      "muted-foreground": "#000000",
      "accent": "#F23B2E",
      "accent-foreground": "#ffffff",
      "destructive": "#B00020",
      "border": "#111111",
      "input": "#111111",
      "ring": "#F23B2E",
      "chart-1": "#000000",
      "chart-2": "#3A3732",
      "chart-3": "#F23B2E",
      "chart-4": "#177245",
      "chart-5": "#D97706",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#000000",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1D4ED8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#111111",
      "sidebar-ring": "#F23B2E",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#000000",
      "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": "#000000",
      "chart-2": "#3A3732",
      "chart-3": "#F23B2E",
      "chart-4": "#177245",
      "chart-5": "#D97706",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F23B2E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F23B2E",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "editorial-ink-atelier-electric-accents",
    "slug": "editorial-ink-atelier-electric-accents",
    "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",
        "acid_chartreuse",
        "background",
        "border",
        "cobalt",
        "error",
        "gallery_neutral",
        "hot_coral",
        "info",
        "ink_wash",
        "muted",
        "paper_warm",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "sizes",
        "weights"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "paper_texture",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```