Chromatic Ink Marginalia

# Chromatic Ink Marginalia

## Philosophy

Chromatic Ink Marginalia is a fine-art editorial language for publication tools, artist archives, and culture desks where black ink drawing, magazine pacing, and sudden blocks of contemporary color share one surface. It treats the interface like a marked-up proof: white paper, off-black type, charcoal rules, loose wash fields, cropped artworks, caption scraps, and color punctuation that behaves like stickers or printer notes rather than decoration. The system is bright without becoming playful SaaS; most of the page stays disciplined and museum-legible while cyan, vermilion, and acid yellow arrive in square interruptions that steer attention through the composition.

### Values

- {"name":"Paper before chrome","explanation":"The default surface is pure white with muted paper panels and visible rule work; UI chrome should feel like an edited page, not an app shell."}
- {"name":"Ink as structure","explanation":"Black lines, wash textures, hand-drawn underlines, and brush-edge dividers define hierarchy and grouping rather than sitting on top as illustrations."}
- {"name":"Color as punctuation","explanation":"High-chroma accents appear as cropped rectangles, label chips, stickers, and side tabs that interrupt the monochrome base at decisive points."}
- {"name":"Editorial tension","explanation":"Layouts use asymmetry, oversized captions, pull-quote scale shifts, and image crops to create magazine-like pacing across the interface."}
- {"name":"Fine-art restraint","explanation":"The language preserves quiet margins, real typographic hierarchy, and material tactility so it feels gallery-adjacent rather than trendy."}
- {"name":"Annotated utility","explanation":"Controls, status, filters, and notes are styled like proof marks and curator annotations, keeping dense workflow elements expressive but usable."}

### Anti-Values

- {"name":"Generic dashboard cards","explanation":"Avoid rounded neutral cards that would look identical after a palette swap."}
- {"name":"Rainbow enthusiasm","explanation":"Never use many accents at equal weight; color must be rare, flat, and compositionally placed."}
- {"name":"Crypto gloss","explanation":"No gradient buttons, glass panels, neon glows, or inflated shadow stacks."}
- {"name":"Fake handwriting","explanation":"Do not use novelty script fonts; ink character comes from borders, masks, and texture, not gimmick typography."}

### Visual Character

- Pure white page with paper-tone inset panels separated by 1px charcoal rules and occasional thick 4px ink-black editorial dividers.
- Asymmetric twelve-column composition with an oversized left folio gutter containing vertical issue labels, crop marks, and curator notes.
- Flat high-chroma rectangular stickers and narrow side tabs in cyan, vermilion, and acid yellow used sparingly for calls to action and status.
- Ink-wash texture overlays built from radial noise and irregular SVG-like brush underlines behind selected headings and artwork captions.
- Sharp 0px radius containers with clipped image crops, oversized serif headlines, compact sans captions, and mono proof labels all letter-spaced tightly.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#000000` |
| secondary | `#2B2B2B` |
| accent | `#00AEEF` |
| background | `#FFFFFF` |
| surface | `#F3F0EA` |
| text | `#0A0A0A` |
| muted | `#6F6A61` |
| border | `#1A1A1A` |
| error | `#E23D28` |
| success | `#158A4A` |
| warning | `#F4D000` |
| info | `#00AEEF` |
| paper | `#E7E0D6` |
| charcoal | `#333333` |
| vermilion | `#FF3B1F` |
| acid_yellow | `#F6E800` |
| wash | `#D8D2C8` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: IBM Plex Sans
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.28
- **Line Height**: 1.48
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap
- **Sizes**: {"caption":"12px","body":"16px","lead":"20px","h3":"28px","h2":"44px","display":"72px"}
- **Weights**: {"regular":400,"medium":500,"semibold":600,"bold":700}

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.16)
- **Md**: 0 12px 28px rgba(0,0,0,0.08)
- **Lg**: 0 24px 60px rgba(0,0,0,0.10)

### Surfaces

- **Treatment**: paper
- **Card Style**: Flat paper panels on white with visible grain, square corners, tight captions, and black editorial rules.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Borders behave like print rules and ink strokes: mostly hairline charcoal with abrupt thick black dividers and colored sticker edges.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: snappy editorial proofing motion: small shifts, hard color swaps, and no theatrical easing.

## Rules

### Composition

- Use a 12-column editorial grid with a persistent left folio gutter spanning one to two columns on desktop.
- Reserve at least 55 percent of the screen as white or paper-negative space; dense information should arrive in blocks, not everywhere.
- Crop images aggressively inside square frames so artwork behaves as composition, not thumbnail decoration.
- Place color accents on edges, labels, and small blocks that punctuate reading order rather than filling whole backgrounds.
- Allow one oversized headline or pull quote to break the grid and create magazine rhythm.
- Separate content families with black horizontal or vertical rules instead of soft shadowed containers.

### Hierarchy

- Serif display headlines carry editorial importance and may overlap a rule or wash mark.
- Sans body copy is compact, sober, and tightly letter-spaced for contemporary publication tone.
- Mono labels act as proof marks: dates, issue numbers, status codes, filters, and measurements.
- High-chroma stickers outrank muted badges but must remain small enough to feel annotated.
- Primary actions are black ink blocks or cyan stickers; secondary actions remain outlined paper controls.

### Density

Medium-high editorial density: plenty of controls and metadata are allowed, but they are organized by rules, gutters, captions, and paper panels rather than rounded SaaS cards.

### Signature Patterns

- A fixed folio gutter uses vertical writing-mode mono labels, crop-mark corners, and a 4px black rule to frame the workspace.
- Section titles receive irregular ink-wash underlines made with pseudo-elements, radial noise, and slightly rotated black brush bars.
- Cards and table rows use square 0px corners with alternating paper tones and thick left-edge color tabs for status punctuation.
- Interactive controls use black-outline proof boxes that invert to flat cyan or vermilion rectangular stickers on hover and focus.
- Artwork and modal panels include offset caption scraps: small mono labels positioned partly outside the image frame with acid-yellow backgrounds.

## Layout

### Density

Editorial workbench density: desktop screens can show planning, preview, annotations, and issue metadata at once; mobile collapses to one annotated reading stream.

### Grid

Desktop uses a 12-column grid maxing at 1440px with 24px gutters, a 96px folio rail, and asymmetrical spans of 5/4/3 columns for lead art, notes, and controls.

### Breakpoints

- **Desktop**: 1200px and above: full 12-column grid with folio rail
- **Tablet**: 768px to 1199px: 6-column grid, folio rail becomes horizontal masthead
- **Mobile**: 480px and below: single column, sticky actions stack full-width, tables become scrollable proof strips

### Whitespace

Whitespace should feel like margins around works on paper: broad outer edges, tight caption relationships, and deliberate empty gutters that make color blocks feel placed.

### Responsive

At 1024px reduce to two main columns; at 768px stack preview and annotations; at 480px remove vertical writing mode, enlarge touch targets to 44px, and make buttons full width.

## Guidance

### Do

- Start every screen from a pure #FFFFFF ground and add paper panels only where grouping is necessary.
- Use Cormorant Garamond for editorial display moments and IBM Plex Sans for functional UI text.
- Apply -0.02em letter spacing globally, including captions, buttons, and form controls.
- Make rules, borders, and gutters do structural work before adding shadows.
- Use one dominant high-chroma accent per view, with secondary accents reserved for rare status conflicts.
- Style forms as proofing instruments: square boxes, mono labels, black focus outlines, and explicit hover states.
- Keep ink textures subtle and tied to headings, dividers, or selected artwork—not across every surface.
- Make artwork captions, source notes, and status scraps partially overlap frames to create collage depth.

### Don't

- Do not use cream or tinted page backgrounds; the main canvas must remain pure white.
- Do not introduce rounded cards except fully rounded pills for tiny tags or avatars.
- Do not use gradient text, gradient buttons, or glassmorphism panels.
- Do not scatter cyan, vermilion, and yellow equally across the screen; choose a hierarchy.
- Do not rely on drop shadows to separate every container; prefer printed rules and paper contrast.
- Do not use decorative handwriting fonts or faux-sketch icons.
- Do not center everything; asymmetry and margin logic are essential.
- Do not let image thumbnails float without captions, crop marks, or editorial context.

### Usage Context

Best for art-publication dashboards, exhibition editorial tools, artist archive interfaces, design criticism platforms, image-led research notebooks, and cultural-institution microsites that need seriousness with contemporary color energy.

### Accessibility

Maintain WCAG contrast for text against accent stickers, pair color status with text labels, keep focus outlines at least 2px black or cyan, preserve 44px touch targets on tablet and mobile, and avoid placing long text over ink textures.

---
version: "alpha"
name: "Chromatic Ink Marginalia"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#000000"
  secondary: "#2B2B2B"
  accent: "#00AEEF"
  background: "#FFFFFF"
  surface: "#F3F0EA"
  text: "#0A0A0A"
  muted: "#6F6A61"
  border: "#1A1A1A"
  error: "#E23D28"
  success: "#158A4A"
  warning: "#F4D000"
  info: "#00AEEF"
  paper: "#E7E0D6"
  charcoal: "#333333"
  vermilion: "#FF3B1F"
  acid_yellow: "#F6E800"
  wash: "#D8D2C8"
typography:
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "2.097rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.638rem"
    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"
  step-9: "128px"
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:
    backgroundColor: "{colors.paper}"
  color-reference-charcoal:
    backgroundColor: "{colors.charcoal}"
  color-reference-vermilion:
    backgroundColor: "{colors.vermilion}"
  color-reference-acid_yellow:
    backgroundColor: "{colors.acid_yellow}"
  color-reference-wash:
    backgroundColor: "{colors.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"
---

# Chromatic Ink Marginalia

## Overview

Chromatic Ink Marginalia is a fine-art editorial language for publication tools, artist archives, and culture desks where black ink drawing, magazine pacing, and sudden blocks of contemporary color share one surface. It treats the interface like a marked-up proof: white paper, off-black type, charcoal rules, loose wash fields, cropped artworks, caption scraps, and color punctuation that behaves like stickers or printer notes rather than decoration. The system is bright without becoming playful SaaS; most of the page stays disciplined and museum-legible while cyan, vermilion, and acid yellow arrive in square interruptions that steer attention through the composition.

### Values

- {"name":"Paper before chrome","explanation":"The default surface is pure white with muted paper panels and visible rule work; UI chrome should feel like an edited page, not an app shell."}
- {"name":"Ink as structure","explanation":"Black lines, wash textures, hand-drawn underlines, and brush-edge dividers define hierarchy and grouping rather than sitting on top as illustrations."}
- {"name":"Color as punctuation","explanation":"High-chroma accents appear as cropped rectangles, label chips, stickers, and side tabs that interrupt the monochrome base at decisive points."}
- {"name":"Editorial tension","explanation":"Layouts use asymmetry, oversized captions, pull-quote scale shifts, and image crops to create magazine-like pacing across the interface."}
- {"name":"Fine-art restraint","explanation":"The language preserves quiet margins, real typographic hierarchy, and material tactility so it feels gallery-adjacent rather than trendy."}
- {"name":"Annotated utility","explanation":"Controls, status, filters, and notes are styled like proof marks and curator annotations, keeping dense workflow elements expressive but usable."}

### Anti-Values

- {"name":"Generic dashboard cards","explanation":"Avoid rounded neutral cards that would look identical after a palette swap."}
- {"name":"Rainbow enthusiasm","explanation":"Never use many accents at equal weight; color must be rare, flat, and compositionally placed."}
- {"name":"Crypto gloss","explanation":"No gradient buttons, glass panels, neon glows, or inflated shadow stacks."}
- {"name":"Fake handwriting","explanation":"Do not use novelty script fonts; ink character comes from borders, masks, and texture, not gimmick typography."}

### Visual Character

- Pure white page with paper-tone inset panels separated by 1px charcoal rules and occasional thick 4px ink-black editorial dividers.
- Asymmetric twelve-column composition with an oversized left folio gutter containing vertical issue labels, crop marks, and curator notes.
- Flat high-chroma rectangular stickers and narrow side tabs in cyan, vermilion, and acid yellow used sparingly for calls to action and status.
- Ink-wash texture overlays built from radial noise and irregular SVG-like brush underlines behind selected headings and artwork captions.
- Sharp 0px radius containers with clipped image crops, oversized serif headlines, compact sans captions, and mono proof labels all letter-spaced tightly.

## 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 | `#2B2B2B` |
| accent | `#00AEEF` |
| background | `#FFFFFF` |
| surface | `#F3F0EA` |
| text | `#0A0A0A` |
| muted | `#6F6A61` |
| border | `#1A1A1A` |
| error | `#E23D28` |
| success | `#158A4A` |
| warning | `#F4D000` |
| info | `#00AEEF` |
| paper | `#E7E0D6` |
| charcoal | `#333333` |
| vermilion | `#FF3B1F` |
| acid_yellow | `#F6E800` |
| wash | `#D8D2C8` |

## Typography

- **Headline-Lg**: Cormorant Garamond, 2.097rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.638rem, 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`
- **Step-9**: `128px`

### Density

Editorial workbench density: desktop screens can show planning, preview, annotations, and issue metadata at once; mobile collapses to one annotated reading stream.

### Grid

Desktop uses a 12-column grid maxing at 1440px with 24px gutters, a 96px folio rail, and asymmetrical spans of 5/4/3 columns for lead art, notes, and controls.

### Breakpoints

- **Desktop**: 1200px and above: full 12-column grid with folio rail
- **Tablet**: 768px to 1199px: 6-column grid, folio rail becomes horizontal masthead
- **Mobile**: 480px and below: single column, sticky actions stack full-width, tables become scrollable proof strips

### Whitespace

Whitespace should feel like margins around works on paper: broad outer edges, tight caption relationships, and deliberate empty gutters that make color blocks feel placed.

### Responsive

At 1024px reduce to two main columns; at 768px stack preview and annotations; at 480px remove vertical writing mode, enlarge touch targets to 44px, and make buttons full width.

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.16)
- **Md**: 0 12px 28px rgba(0,0,0,0.08)
- **Lg**: 0 24px 60px rgba(0,0,0,0.10)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Flat paper panels on white with visible grain, square corners, tight captions, and black editorial rules.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Borders behave like print rules and ink strokes: mostly hairline charcoal with abrupt thick black dividers and colored sticker edges.

## Components

### Composition

- Use a 12-column editorial grid with a persistent left folio gutter spanning one to two columns on desktop.
- Reserve at least 55 percent of the screen as white or paper-negative space; dense information should arrive in blocks, not everywhere.
- Crop images aggressively inside square frames so artwork behaves as composition, not thumbnail decoration.
- Place color accents on edges, labels, and small blocks that punctuate reading order rather than filling whole backgrounds.
- Allow one oversized headline or pull quote to break the grid and create magazine rhythm.
- Separate content families with black horizontal or vertical rules instead of soft shadowed containers.

### Hierarchy

- Serif display headlines carry editorial importance and may overlap a rule or wash mark.
- Sans body copy is compact, sober, and tightly letter-spaced for contemporary publication tone.
- Mono labels act as proof marks: dates, issue numbers, status codes, filters, and measurements.
- High-chroma stickers outrank muted badges but must remain small enough to feel annotated.
- Primary actions are black ink blocks or cyan stickers; secondary actions remain outlined paper controls.

### Density

Medium-high editorial density: plenty of controls and metadata are allowed, but they are organized by rules, gutters, captions, and paper panels rather than rounded SaaS cards.

### Signature Patterns

- A fixed folio gutter uses vertical writing-mode mono labels, crop-mark corners, and a 4px black rule to frame the workspace.
- Section titles receive irregular ink-wash underlines made with pseudo-elements, radial noise, and slightly rotated black brush bars.
- Cards and table rows use square 0px corners with alternating paper tones and thick left-edge color tabs for status punctuation.
- Interactive controls use black-outline proof boxes that invert to flat cyan or vermilion rectangular stickers on hover and focus.
- Artwork and modal panels include offset caption scraps: small mono labels positioned partly outside the image frame with acid-yellow backgrounds.

## 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/chromatic-ink-marginalia/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 Start every screen from a pure #FFFFFF ground and add paper panels only where grouping is necessary.
- Do Use Cormorant Garamond for editorial display moments and IBM Plex Sans for functional UI text.
- Do Apply -0.02em letter spacing globally, including captions, buttons, and form controls.
- Do Make rules, borders, and gutters do structural work before adding shadows.
- Do Use one dominant high-chroma accent per view, with secondary accents reserved for rare status conflicts.
- Do Style forms as proofing instruments: square boxes, mono labels, black focus outlines, and explicit hover states.
- Do Keep ink textures subtle and tied to headings, dividers, or selected artwork—not across every surface.
- Do Make artwork captions, source notes, and status scraps partially overlap frames to create collage depth.
- Don't Do not use cream or tinted page backgrounds; the main canvas must remain pure white.
- Don't Do not introduce rounded cards except fully rounded pills for tiny tags or avatars.
- Don't Do not use gradient text, gradient buttons, or glassmorphism panels.
- Don't Do not scatter cyan, vermilion, and yellow equally across the screen; choose a hierarchy.
- Don't Do not rely on drop shadows to separate every container; prefer printed rules and paper contrast.
- Don't Do not use decorative handwriting fonts or faux-sketch icons.
- Don't Do not center everything; asymmetry and margin logic are essential.
- Don't Do not let image thumbnails float without captions, crop marks, or editorial context.

### Usage Context

Best for art-publication dashboards, exhibition editorial tools, artist archive interfaces, design criticism platforms, image-led research notebooks, and cultural-institution microsites that need seriousness with contemporary color energy.

### Accessibility

Maintain WCAG contrast for text against accent stickers, pair color status with text labels, keep focus outlines at least 2px black or cyan, preserve 44px touch targets on tablet and mobile, and avoid placing long text over ink textures.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chromatic-ink-marginalia",
  "type": "registry:theme",
  "title": "Chromatic Ink Marginalia shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#0A0A0A",
      "card": "#F3F0EA",
      "card-foreground": "#0A0A0A",
      "popover": "#F3F0EA",
      "popover-foreground": "#0A0A0A",
      "primary": "#000000",
      "primary-foreground": "#ffffff",
      "secondary": "#2B2B2B",
      "secondary-foreground": "#ffffff",
      "muted": "#6F6A61",
      "muted-foreground": "#0A0A0A",
      "accent": "#00AEEF",
      "accent-foreground": "#ffffff",
      "destructive": "#E23D28",
      "border": "#1A1A1A",
      "input": "#1A1A1A",
      "ring": "#00AEEF",
      "chart-1": "#000000",
      "chart-2": "#2B2B2B",
      "chart-3": "#00AEEF",
      "chart-4": "#158A4A",
      "chart-5": "#F4D000",
      "sidebar": "#F3F0EA",
      "sidebar-foreground": "#0A0A0A",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00AEEF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1A1A1A",
      "sidebar-ring": "#00AEEF",
      "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": "#00AEEF",
      "accent-foreground": "#ffffff",
      "destructive": "#E23D28",
      "border": "#303642",
      "input": "#303642",
      "ring": "#00AEEF",
      "chart-1": "#000000",
      "chart-2": "#2B2B2B",
      "chart-3": "#00AEEF",
      "chart-4": "#158A4A",
      "chart-5": "#F4D000",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00AEEF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#00AEEF",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "chromatic-ink-marginalia",
    "slug": "chromatic-ink-marginalia",
    "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_yellow",
        "background",
        "border",
        "charcoal",
        "error",
        "info",
        "muted",
        "paper",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "vermilion",
        "warning",
        "wash"
      ],
      "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",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```