Yoake

# Yoake

## Philosophy

Yoake is a console for a network kept on watch until sunrise. Its page is the log of one real night: a calm reading column on one side and, beside it, a single cluster of overlapping watch-panes, each pane one system with its last three checks as three square lights. The title is one solid ink press block on a quiet dawn sky drawn as a flat animation cel. The night ends when the sun is up, not at a clock time, so the language is white, cool and quiet, with lavender and cyan only as atmosphere and tone.

### Values

- Only what the watch logged is shown: every time, name and number comes from one night's log.
- One cluster, not a scatter: the panes of the night overlap in one group beside a calm column of reading.
- The three lights mean something: they are that system's last three checks, oldest first, green passed, magenta failed.
- The open item is the cyan band: the one row that is being worked on wears the selection colour.
- Nothing casts a shadow and nothing is blurred; depth is overlap order.

### Anti-Values

- Gradient veils, scan lines and blurred glow bands over the dawn.
- Decorative status LEDs, invented hex-code status strips and poetic boot logs.
- Eyebrow labels over every headline and copy that describes the design system.
- Glass washes and soft drop shadows on panes.
- Rounded friendly cards.

### Visual Character

- Pure white ground #FFFFFF, ink #0B0D12, pale lavender surface #F5F6FF and a solid lavender dawn band #DCD6FF.
- Cyan #BFF6FF as the selection band and the hover wash; magenta #C255E8 and green #2BCB84 only as 8px square lights.
- Archivo Narrow uppercase, tight, for titles; Noto Sans 18px for reading; Share Tech Mono for times and paths.
- A hero drawn as a flat animation cel: the lone operator at a high window, the rack at the right edge, a quiet three-band dawn sky on the left.
- Radius 0 on every rectangle.

### Lineage

> Revision in place of Yoake from the approved range-2 take yoake-i (2026-09-29). It keeps the name, the dawn palette, the three faces and the watch-pane, and replaces the floating panes, glass and boot logs with one cluster, a hand-over log and a seven-night table.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#F5F6FF` |
| text | `#0B0D12` |
| muted | `#535A6B` |
| border | `#0B0D12` |
| accent | `#BFF6FF` |
| on_accent | `#0B0D12` |
| accent_2 | `#DCD6FF` |
| glint_magenta | `#C255E8` |
| success | `#2BCB84` |
| warning | `#C7A64B` |
| error | `#C2556B` |
| info | `#7ABFE8` |
| band_row | `#E6E2FF` |
| ink_soft | `#2B303C` |

### Typography

- **Heading Font**: Archivo Narrow
- **Body Font**: Noto Sans
- **Mono Font**: Share Tech Mono
- **Heading Weight**: 700
- **Heading Transform**: uppercase
- **Body Weight**: 400
- **Button Weight**: 700
- **Mono Weight**: 400
- **Letter Spacing**: -0.02em on display; 0.05em on nav and buttons; 0 on body and mono
- **Base Size**: 18px
- **Line Height**: 1.6
- **Scale**: ["15px","16px","17px","18px","26px","34px","50px","92px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@600;700&family=Noto+Sans:wght@400;500&family=Share+Tech+Mono&display=swap

### Radii

- **None**: 0px
- **Pane**: 0px
- **Control**: 0px

### Shadows

- **None**: nothing casts a shadow; depth is overlap order only

### Spacing

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

### Surfaces

- **Treatment**: flat white dawn ground; one solid lavender band; panes are pale-lavender sheets with an ink title strip
- **Card Style**: watch-pane: 1px ink border, solid ink title strip with a mono path and state word, a pale lavender body, no shadow
- **Bg Pattern**: none

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders anywhere except the 1px ink hairline of the watch-pane, and only on panes in the one cluster. Rows, tables, forms and the press block use tone and space.

### Motion

- **Duration**: 500ms
- **Easing**: cubic-bezier(0.2, 0, 0, 1)
- **Philosophy**: One physical verb: the panes of the night are pasted in, one after another, and the hero image settles. The settled page renders with no JavaScript and prefers-reduced-motion skips all of it.

### Controls

- **Height**: 50px
- **Radius**: 0px
- **Well Height**: 52px

## Rules

### Composition

- Open with a full-bleed dawn cel and one solid ink press block that holds the title, one sentence and the one action.
- Below it, put a calm reading column (the log of one night) beside one cluster of overlapping watch-panes.
- Follow with one solid lavender band that holds a real table, then one short form that carries the single action again.
- Overlap panes by order only: later panes sit over earlier ones, with no shadow.

### Hierarchy

- Archivo Narrow 700 uppercase at 34 to 50px for section titles and up to 92px for the press title, tracking -0.02em.
- Noto Sans 18px, line-height 1.6, for reading; ink for the fact, muted #535A6B for the second tone.
- Share Tech Mono 15 to 17px for times, paths and table labels.
- The open item wears the cyan #BFF6FF band; nothing else takes it except hover.

### Density

Calm with compact data islands: 128px between sections on desktop, 80px on phones, 5px row padding inside panes, a table at 17px with 11px cell padding.

### Signature Patterns

- The watch-pane: a squared 1px ink border, a solid ink title strip with three square lights, a lowercase mono path and a state word at the right, over a pale lavender body.
- The three lights: the system's last three checks, oldest first, green passed, magenta failed; explained once in the note.
- The pane cluster: four overlapping panes in one group beside the reading column; on a phone they stack with small overlaps.
- The ink press block: the hero title on one solid ink rectangle on the quiet sky, with one cyan action.
- The paste-in: on first view the panes are pasted in one after another and the hero settles; the settled page is the default.

## Layout

### Grid

- **Type**: reading column beside one pane cluster
- **Max Width**: 1360px content, centred above 1440px; only the hero spans the viewport
- **Gutter**: 48px desktop, 32px tablet, 20px phone
- **Column Behavior**: Two-column sections use minmax(0,5fr) minmax(0,7fr) with a 64px gap; grid children carry min-width:0.

### Whitespace

- **Section Gap**: 128px desktop, 96px tablet, 80px phone
- **Card Gap**: panes overlap by design; rows inside panes sit 5px apart
- **Content Padding**: press block 24 to 40px; panes 14 to 16px
- **Approach**: White is the room. Space and the lavender band separate sections; the only lines are the pane hairlines.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"50px","input_height":"52px","row_height":"36 to 44px"}

### Responsive

Tablets (601 to 1199px) stack to one column, keep the cluster at full width and cap the reading column at 680px. Phones (390px) put the hero image above the press block, stack the panes with small overlaps, hide non-essential table columns and keep one nav link. From 1440px the content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Guidance

### Do

- Keep the ground pure white and the type ink; let lavender and cyan stay atmosphere and tone.
- Make every pane one real system, with its last three checks as the three lights.
- Put the open item on the cyan band and nowhere else.
- Write every row as a time and what happened; keep names and numbers consistent across the page.
- Hold one press block and one action in the hero, and repeat the same action in the form.
- Style every control explicitly, square, with a cyan or ink focus ring.

### Don't

- No gradients, blur, glow, scan lines or shadows.
- No borders outside the watch-pane hairline; no cards around content.
- No eyebrow labels over headlines or sections.
- No green or magenta as a fill larger than a light.
- No decorative lights, invented status strips or poetic boot logs.
- No rounded corners and no emoji on buttons.

### Accessibility

Ink #0B0D12 on white is 19.4:1; muted #535A6B is 7.4:1 on white; the press block carries #E3E1F4 on ink; button labels are ink on cyan #BFF6FF (16:1) or white on ink. Lights are never the only signal: each pane carries a state word and each light group an aria-label. Focus is a 2px info-blue outline at 3px offset. The settled page renders with no JavaScript and prefers-reduced-motion skips the paste-in and the settle.

### Usage Context

On-call and operations tools, status and hand-over pages, monitoring dashboards, and any product that keeps watch through the night and reports in plain log lines.

## Imagery Direction

### Pairs With

dawnvapor-cel

### Art Style Id

en-019ef841-8bbf-7b00-8c63-38019e9dc938

### Summary

Flat animation cels in Dawnvapor Cel: a lone night-shift operator seen from behind at a high window, a server rack with tiny green and magenta lights at the right edge, and a quiet dawn sky in three flat bands (lavender, cyan, a thin warm rim) over a low city in deep blue planes. Clean black contour lines, one flat fill per form, no gradients.

### Subjects

- the operator at the dawn window
- a server aisle at night with one magenta light
- the rack and its status lights
- the skyline at first light

### Usage

One full-bleed hero cel painted with var(--hero-image), subject on the right so the ink press block sits on open sky; one aisle cel inside the first pane. No other illustration.

### Avoid

Gradients, glow, soft shading, photographic texture, text or logos in the image, a figure crowding the headline, new characters.

---
version: "alpha"
name: "Yoake"
description: "Yoake is a console for a network kept on watch until sunrise. Its page is the log of one real night: a calm reading column on one side and, beside it, a single cluster of overlapping watch-panes, each pane one system with its last three..."
colors:
  bg: "#FFFFFF"
  surface: "#F5F6FF"
  text: "#0B0D12"
  muted: "#535A6B"
  border: "#0B0D12"
  accent: "#BFF6FF"
  on_accent: "#0B0D12"
  accent_2: "#DCD6FF"
  glint_magenta: "#C255E8"
  success: "#2BCB84"
  warning: "#C7A64B"
  error: "#C2556B"
  info: "#7ABFE8"
  band_row: "#E6E2FF"
  ink_soft: "#2B303C"
typography:
  headline-lg:
    fontFamily: "Archivo Narrow"
    fontSize: "2.197rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo Narrow"
    fontSize: "1.758rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Noto Sans"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Share Tech Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  pane: "0px"
  control: "0px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-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-glint_magenta:
    backgroundColor: "{colors.glint_magenta}"
  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-band_row:
    backgroundColor: "{colors.band_row}"
  color-reference-ink_soft:
    backgroundColor: "{colors.ink_soft}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.control}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.control}"
    height: "44px"
---

# Yoake

## Overview

Yoake is a console for a network kept on watch until sunrise. Its page is the log of one real night: a calm reading column on one side and, beside it, a single cluster of overlapping watch-panes, each pane one system with its last three checks as three square lights. The title is one solid ink press block on a quiet dawn sky drawn as a flat animation cel. The night ends when the sun is up, not at a clock time, so the language is white, cool and quiet, with lavender and cyan only as atmosphere and tone.

### Values

- Only what the watch logged is shown: every time, name and number comes from one night's log.
- One cluster, not a scatter: the panes of the night overlap in one group beside a calm column of reading.
- The three lights mean something: they are that system's last three checks, oldest first, green passed, magenta failed.
- The open item is the cyan band: the one row that is being worked on wears the selection colour.
- Nothing casts a shadow and nothing is blurred; depth is overlap order.

### Anti-Values

- Gradient veils, scan lines and blurred glow bands over the dawn.
- Decorative status LEDs, invented hex-code status strips and poetic boot logs.
- Eyebrow labels over every headline and copy that describes the design system.
- Glass washes and soft drop shadows on panes.
- Rounded friendly cards.

### Visual Character

- Pure white ground #FFFFFF, ink #0B0D12, pale lavender surface #F5F6FF and a solid lavender dawn band #DCD6FF.
- Cyan #BFF6FF as the selection band and the hover wash; magenta #C255E8 and green #2BCB84 only as 8px square lights.
- Archivo Narrow uppercase, tight, for titles; Noto Sans 18px for reading; Share Tech Mono for times and paths.
- A hero drawn as a flat animation cel: the lone operator at a high window, the rack at the right edge, a quiet three-band dawn sky on the left.
- Radius 0 on every rectangle.

### Lineage

> Revision in place of Yoake from the approved range-2 take yoake-i (2026-09-29). It keeps the name, the dawn palette, the three faces and the watch-pane, and replaces the floating panes, glass and boot logs with one cluster, a hand-over log and a seven-night table.

## 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 | `#FFFFFF` |
| surface | `#F5F6FF` |
| text | `#0B0D12` |
| muted | `#535A6B` |
| border | `#0B0D12` |
| accent | `#BFF6FF` |
| on_accent | `#0B0D12` |
| accent_2 | `#DCD6FF` |
| glint_magenta | `#C255E8` |
| success | `#2BCB84` |
| warning | `#C7A64B` |
| error | `#C2556B` |
| info | `#7ABFE8` |
| band_row | `#E6E2FF` |
| ink_soft | `#2B303C` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@600;700&family=Noto+Sans:wght@400;500&family=Share+Tech+Mono&display=swap

- **Headline-Lg**: Archivo Narrow, 2.197rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo Narrow, 1.758rem, weight 600, line-height 1.15.
- **Body-Md**: Noto Sans, 18px, weight 400, line-height 1.5.
- **Label-Md**: Share Tech Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
- **Step-9**: `128px`

### Grid

- **Type**: reading column beside one pane cluster
- **Max Width**: 1360px content, centred above 1440px; only the hero spans the viewport
- **Gutter**: 48px desktop, 32px tablet, 20px phone
- **Column Behavior**: Two-column sections use minmax(0,5fr) minmax(0,7fr) with a 64px gap; grid children carry min-width:0.

### Whitespace

- **Section Gap**: 128px desktop, 96px tablet, 80px phone
- **Card Gap**: panes overlap by design; rows inside panes sit 5px apart
- **Content Padding**: press block 24 to 40px; panes 14 to 16px
- **Approach**: White is the room. Space and the lavender band separate sections; the only lines are the pane hairlines.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"50px","input_height":"52px","row_height":"36 to 44px"}

### Responsive

Tablets (601 to 1199px) stack to one column, keep the cluster at full width and cap the reading column at 680px. Phones (390px) put the hero image above the press block, stack the panes with small overlaps, hide non-essential table columns and keep one nav link. From 1440px the content caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 601 to 1199px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **None**: nothing casts a shadow; depth is overlap order only

## Shapes

### Rounded

- **None**: `0px`
- **Pane**: `0px`
- **Control**: `0px`

### Surfaces

- **Treatment**: flat white dawn ground; one solid lavender band; panes are pale-lavender sheets with an ink title strip
- **Card Style**: watch-pane: 1px ink border, solid ink title strip with a mono path and state word, a pale lavender body, no shadow
- **Bg Pattern**: none

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders anywhere except the 1px ink hairline of the watch-pane, and only on panes in the one cluster. Rows, tables, forms and the press block use tone and space.

## Components

### Composition

- Open with a full-bleed dawn cel and one solid ink press block that holds the title, one sentence and the one action.
- Below it, put a calm reading column (the log of one night) beside one cluster of overlapping watch-panes.
- Follow with one solid lavender band that holds a real table, then one short form that carries the single action again.
- Overlap panes by order only: later panes sit over earlier ones, with no shadow.

### Hierarchy

- Archivo Narrow 700 uppercase at 34 to 50px for section titles and up to 92px for the press title, tracking -0.02em.
- Noto Sans 18px, line-height 1.6, for reading; ink for the fact, muted #535A6B for the second tone.
- Share Tech Mono 15 to 17px for times, paths and table labels.
- The open item wears the cyan #BFF6FF band; nothing else takes it except hover.

### Density

Calm with compact data islands: 128px between sections on desktop, 80px on phones, 5px row padding inside panes, a table at 17px with 11px cell padding.

### Signature Patterns

- The watch-pane: a squared 1px ink border, a solid ink title strip with three square lights, a lowercase mono path and a state word at the right, over a pale lavender body.
- The three lights: the system's last three checks, oldest first, green passed, magenta failed; explained once in the note.
- The pane cluster: four overlapping panes in one group beside the reading column; on a phone they stack with small overlaps.
- The ink press block: the hero title on one solid ink rectangle on the quiet sky, with one cyan action.
- The paste-in: on first view the panes are pasted in one after another and the hero settles; the settled page is the default.

## 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-01a0fe7d-a06f-7961-9a70-14c7e02c3d56/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0fe7d-a06f-7961-9a70-14c7e02c3d56/shadcn.json` (registry theme), `/language/en-01a0fe7d-a06f-7961-9a70-14c7e02c3d56/shadcn-components.md` (component recipes) and `/language/en-01a0fe7d-a06f-7961-9a70-14c7e02c3d56/shadcn-shots.json` (preview shots). The human-facing handoff is still 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 ground pure white and the type ink; let lavender and cyan stay atmosphere and tone.
- Do Make every pane one real system, with its last three checks as the three lights.
- Do Put the open item on the cyan band and nowhere else.
- Do Write every row as a time and what happened; keep names and numbers consistent across the page.
- Do Hold one press block and one action in the hero, and repeat the same action in the form.
- Do Style every control explicitly, square, with a cyan or ink focus ring.
- Don't No gradients, blur, glow, scan lines or shadows.
- Don't No borders outside the watch-pane hairline; no cards around content.
- Don't No eyebrow labels over headlines or sections.
- Don't No green or magenta as a fill larger than a light.
- Don't No decorative lights, invented status strips or poetic boot logs.
- Don't No rounded corners and no emoji on buttons.

### Accessibility

Ink #0B0D12 on white is 19.4:1; muted #535A6B is 7.4:1 on white; the press block carries #E3E1F4 on ink; button labels are ink on cyan #BFF6FF (16:1) or white on ink. Lights are never the only signal: each pane carries a state word and each light group an aria-label. Focus is a 2px info-blue outline at 3px offset. The settled page renders with no JavaScript and prefers-reduced-motion skips the paste-in and the settle.

### Usage Context

On-call and operations tools, status and hand-over pages, monitoring dashboards, and any product that keeps watch through the night and reports in plain log lines.

## Imagery Direction

### Pairs With

dawnvapor-cel

### Art Style Id

en-019ef841-8bbf-7b00-8c63-38019e9dc938

### Summary

Flat animation cels in Dawnvapor Cel: a lone night-shift operator seen from behind at a high window, a server rack with tiny green and magenta lights at the right edge, and a quiet dawn sky in three flat bands (lavender, cyan, a thin warm rim) over a low city in deep blue planes. Clean black contour lines, one flat fill per form, no gradients.

### Subjects

- the operator at the dawn window
- a server aisle at night with one magenta light
- the rack and its status lights
- the skyline at first light

### Usage

One full-bleed hero cel painted with var(--hero-image), subject on the right so the ink press block sits on open sky; one aisle cel inside the first pane. No other illustration.

### Avoid

Gradients, glow, soft shading, photographic texture, text or logos in the image, a figure crowding the headline, new characters.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "yoake",
  "type": "registry:theme",
  "title": "Yoake shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#0B0D12",
      "card": "#F5F6FF",
      "card-foreground": "#0B0D12",
      "popover": "#F5F6FF",
      "popover-foreground": "#0B0D12",
      "primary": "#0B0D12",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#535A6B",
      "muted-foreground": "#0B0D12",
      "accent": "#BFF6FF",
      "accent-foreground": "#111111",
      "destructive": "#C2556B",
      "border": "#0B0D12",
      "input": "#0B0D12",
      "ring": "#BFF6FF",
      "chart-1": "#0B0D12",
      "chart-2": "#f4f4f5",
      "chart-3": "#BFF6FF",
      "chart-4": "#2BCB84",
      "chart-5": "#C7A64B",
      "sidebar": "#F5F6FF",
      "sidebar-foreground": "#0B0D12",
      "sidebar-primary": "#0B0D12",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#7ABFE8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#0B0D12",
      "sidebar-ring": "#BFF6FF",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0B0D12",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#BFF6FF",
      "accent-foreground": "#111111",
      "destructive": "#C2556B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#BFF6FF",
      "chart-1": "#0B0D12",
      "chart-2": "#f4f4f5",
      "chart-3": "#BFF6FF",
      "chart-4": "#2BCB84",
      "chart-5": "#C7A64B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0B0D12",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#BFF6FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#BFF6FF",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0fe7d-a06f-7961-9a70-14c7e02c3d56",
    "slug": "yoake",
    "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",
        "band_row",
        "bg",
        "border",
        "error",
        "glint_magenta",
        "info",
        "ink_soft",
        "muted",
        "on_accent",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "mono_weight",
        "scale"
      ],
      "radii": [
        "control",
        "none",
        "pane"
      ],
      "shadows": [
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius",
        "well_height"
      ]
    }
  }
}
```