Dialtone

# Dialtone

## Philosophy

Dialtone is a night console for the home network, drawn as the floor plan of a flat. Everyone is asleep and one screen is not. Every device sits where it lives, every cable runs where it runs, and the only light is the console's screen and the line it traces. Touch a device and the light runs the real route to it, taking as long as that device's round trip, slowed 250 times.

### Values

- One light: only the console's screen and the line it is tracing are ever lit; every other device and room stays dim.
- The world is a plan: the home drawn to scale is the page, with a ledger below it in the order you walk past things.
- Every mark is true: each device was really on the network at the stated minute, and each number is a real reading.
- Flat and square: powder grey ground, ink type, no shadows, gradients, cards or window chrome.
- Copy describes a house, not a design system.

### Anti-Values

- Dark vignette heroes with a CRT photo and a gradient veil behind a slogan.
- Window title bars with traffic-light dots that mean nothing.
- Stat tiles and decorative terminal panes.
- Numbered eyebrows and slogan section heads.
- Soft drop shadows and rounded rectangles.

### Visual Character

- Powder grey #C7C9D2 ground, pale wells #ECEDF2, ink #181A20, flat.
- A near-black #050508 night band holding the title and the plan.
- Mint #3FE3C2 as the one light: the single action and the guest.
- Cables drawn in 2px strokes, dashed inside walls and solid along the floor; squares for the network, filled rings awake, open rings asleep.
- Zen Kaku Gothic New for prose and the headline, BIZ UDGothic for the network's own words, at 15px or larger.
- Radius 0 on every rectangle; rings are round.

### Lineage

> Revised in place from Dialtone's first generation (powder-gray bedroom console with CRT windows) into the approved floor-plan take, dialtone-d, chosen in the range round 2 sorter.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#C7C9D2` |
| surface | `#ECEDF2` |
| text | `#181A20` |
| muted | `#4A4C58` |
| border | `#2C2E36` |
| accent | `#3FE3C2` |
| on_accent | `#0C1512` |
| success | `#2F5E52` |
| warning | `#6B5530` |
| error | `#7A3A4E` |
| info | `#4A5588` |
| night | `#050508` |
| bloom | `#F6F7FF` |
| dim | `#C3C4D2` |

### Typography

- **Heading Font**: Zen Kaku Gothic New
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: BIZ UDGothic
- **Heading Weight**: 700
- **Body Weight**: 400
- **Button Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on display; 0 on BIZ UDGothic
- **Base Size**: 17px
- **Line Height**: 1.6
- **Scale**: ["15px","17px","19px","28px","38px","70px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

### Radii

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

### Shadows

- **None**: flat everywhere; nothing is lifted. Light is the only depth: the console and the line it traces.

### Spacing

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

### Surfaces

- **Treatment**: one-lit-screen-in-a-dark-flat
- **Material**: A near-black night ground #050508 carries the plan and the console; the rest of the page is flat powder grey #C7C9D2 with pale wells #ECEDF2. Only the console screen and the route it is tracing are lit.
- **Card Style**: No cards. Rows sit on the ground, parted by space; the one filled surface per view is a pale well or the night band.
- **Bg Pattern**: none; the lease plan of the flat is the only image.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders. Walls and cables belong to the plan drawing, in 2px strokes; dashed inside walls, solid along the floor. Focus is a 2px outline at 3px offset, or a 2px ink line under a well.

### Controls

- **Height**: 50px (40 small, 58 large)
- **Radius**: 0px
- **Well Height**: 52px

### Motion

- **Duration**: 250ms
- **Easing**: cubic-bezier(0.16, 1, 0.3, 1)
- **Trace**: A device's round trip in milliseconds multiplied by 250, linear, as a stroke-dashoffset draw along its cable
- **Philosophy**: The one motion is the travelling light, at the speed of the network slowed 250 times. The settled plan renders with no JS and under prefers-reduced-motion.

## Rules

### Composition

- Make the page a place: the plan of the home is the hero, with the title above it and the ledger below.
- Light exactly one thing at a time: the console, and the route being traced.
- Place each device where it lives, on the plan, by percentage of the drawing.
- Under the plan, list every device in the order you pass them from the front door.

### Hierarchy

- One headline per view in Zen Kaku Gothic New 700 (40px on phones to 70px on desktop), 28 to 38px section heads.
- Prose at 17 to 18px in ink; asides and the network's labels in muted or BIZ UDGothic.
- Lit means live: bloom on the night ground, mint for the single action.
- State is a mark before it is a word: square, filled ring, open ring.

### Density

Calm: a plan with fifteen labelled devices, a ledger with one row per device and 7px row padding, 48 to 80px between sections.

### Signature Patterns

- The lit route: touch or focus a device and a light runs the real cable route from the console to it, taking the device's round trip times 250 (0.4 ms to hearth, 38 ms to Ren's phone).
- The floor plan as the page: rooms, devices and cables at lease-plan scale, dashed cables inside walls, solid along the floor.
- Marks: squares for the network, filled rings for awake, open rings for asleep, a mint ring for a guest.
- The ledger: every device in door-to-door order with link, now and round trip, the guest on a pale well.

## Layout

### Grid

- **Type**: night band, plan, ledger, setup
- **Max Width**: 1440px for the plan, 1200px for text, centred
- **Gutter**: clamp(20px, 4vw, 56px)
- **Column Behavior**: Two-column heads use minmax(0,1.4fr) minmax(0,1fr); ledger columns collapse to stacked rows on phones.

### Whitespace

- **Section Gap**: 48 to 80px
- **Card Gap**: no cards; 7px row padding in the ledger
- **Content Padding**: text sits on the ground aligned to the grid edge
- **Approach**: The plan is the picture; space and ink value do the separating.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"50px","input_height":"52px","row_height":"34 to 48px ledger rows"}

### Responsive

The plan keeps its 3:4 ratio at every width. Below 1200px the sublines and captions on the plan are hidden and the ledger drops its link column; at 600px device names are replaced by 28px touch targets over their marks, the ledger stacks to rows, and the headline column stacks. Above 1440px content caps and centres.

### Breakpoints

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

## Guidance

### Do

- Draw the real place: rooms, devices and cables where they live.
- Light only the console and the route being traced.
- Give every device a mark that says square, awake or asleep.
- State real readings: round trip, signal, time.
- Keep one mint action per view.
- Set the network's own words in BIZ UDGothic at 15px or larger.

### Don't

- Don't add window chrome, traffic-light dots or stat tiles.
- Don't veil a photo with a gradient behind a slogan.
- Don't use shadows, rounded rectangles or cards.
- Don't number sections or add eyebrows.
- Don't light anything decoratively; mint is the guest and the one action.
- Don't write copy that explains the design system.

### Accessibility

Ink #181A20 on #C7C9D2 is above 10:1; muted #4A4C58 is above 5:1 on the grey and above 6:1 on the pale well; bloom on the night ground is above 17:1; the mint button label #0C1512 is above 11:1. Status words use the semantic inks on the pale well (above 4.5:1). Every device is a link reachable by keyboard, focusing it runs the route, and the ledger repeats everything the plan shows. The plan renders complete with no JavaScript and with prefers-reduced-motion.

### Usage Context

Home and small-office network tools, quiet monitoring consoles, maps of places that are mostly asleep, and any product that should draw a real place and light only what is live.

## Imagery Direction

### Pairs With

cathode-hush

### Art Style Id

en-019ef843-df5f-78d3-b8ef-857c74a1ac96

### Summary

Cathode Hush plates held down to a dim hairline plan: near-grayscale, manga-ink linework on a night ground, scanlines and a few cyan-green sparks. The hero is the lease plan of the flat, a drawing rather than a photograph.

### Subjects

- the lease plan of a flat with rooms, walls and balcony
- a single dim console screen at night
- cables running along a skirting board
- a quiet room lit only by one monitor

### Usage

One plan image painted with var(--hero-image) at its own 3:4 ratio, capped at 1440px; no veil over it. Labels and marks are live text and SVG above it.

### Avoid

Gradient veils, window chrome, saturated neon, cyberpunk magenta, characters, text baked into the image.

---
version: "alpha"
name: "Dialtone"
description: "Dialtone is a night console for the home network, drawn as the floor plan of a flat. Everyone is asleep and one screen is not. Every device sits where it lives, every cable runs where it runs, and the only light is the console's screen a..."
colors:
  bg: "#C7C9D2"
  surface: "#ECEDF2"
  text: "#181A20"
  muted: "#4A4C58"
  border: "#2C2E36"
  accent: "#3FE3C2"
  on_accent: "#0C1512"
  success: "#2F5E52"
  warning: "#6B5530"
  error: "#7A3A4E"
  info: "#4A5588"
  night: "#050508"
  bloom: "#F6F7FF"
  dim: "#C3C4D2"
typography:
  headline-lg:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Zen Kaku Gothic New"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "BIZ UDGothic"
    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-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-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-night:
    backgroundColor: "{colors.night}"
  color-reference-bloom:
    backgroundColor: "{colors.bloom}"
  color-reference-dim:
    backgroundColor: "{colors.dim}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    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"
---

# Dialtone

## Overview

Dialtone is a night console for the home network, drawn as the floor plan of a flat. Everyone is asleep and one screen is not. Every device sits where it lives, every cable runs where it runs, and the only light is the console's screen and the line it traces. Touch a device and the light runs the real route to it, taking as long as that device's round trip, slowed 250 times.

### Values

- One light: only the console's screen and the line it is tracing are ever lit; every other device and room stays dim.
- The world is a plan: the home drawn to scale is the page, with a ledger below it in the order you walk past things.
- Every mark is true: each device was really on the network at the stated minute, and each number is a real reading.
- Flat and square: powder grey ground, ink type, no shadows, gradients, cards or window chrome.
- Copy describes a house, not a design system.

### Anti-Values

- Dark vignette heroes with a CRT photo and a gradient veil behind a slogan.
- Window title bars with traffic-light dots that mean nothing.
- Stat tiles and decorative terminal panes.
- Numbered eyebrows and slogan section heads.
- Soft drop shadows and rounded rectangles.

### Visual Character

- Powder grey #C7C9D2 ground, pale wells #ECEDF2, ink #181A20, flat.
- A near-black #050508 night band holding the title and the plan.
- Mint #3FE3C2 as the one light: the single action and the guest.
- Cables drawn in 2px strokes, dashed inside walls and solid along the floor; squares for the network, filled rings awake, open rings asleep.
- Zen Kaku Gothic New for prose and the headline, BIZ UDGothic for the network's own words, at 15px or larger.
- Radius 0 on every rectangle; rings are round.

### Lineage

> Revised in place from Dialtone's first generation (powder-gray bedroom console with CRT windows) into the approved floor-plan take, dialtone-d, chosen in the range round 2 sorter.

## 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 | `#C7C9D2` |
| surface | `#ECEDF2` |
| text | `#181A20` |
| muted | `#4A4C58` |
| border | `#2C2E36` |
| accent | `#3FE3C2` |
| on_accent | `#0C1512` |
| success | `#2F5E52` |
| warning | `#6B5530` |
| error | `#7A3A4E` |
| info | `#4A5588` |
| night | `#050508` |
| bloom | `#F6F7FF` |
| dim | `#C3C4D2` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

- **Headline-Lg**: Zen Kaku Gothic New, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Zen Kaku Gothic New, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Zen Kaku Gothic New, 17px, weight 400, line-height 1.5.
- **Label-Md**: BIZ UDGothic, 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

- **Type**: night band, plan, ledger, setup
- **Max Width**: 1440px for the plan, 1200px for text, centred
- **Gutter**: clamp(20px, 4vw, 56px)
- **Column Behavior**: Two-column heads use minmax(0,1.4fr) minmax(0,1fr); ledger columns collapse to stacked rows on phones.

### Whitespace

- **Section Gap**: 48 to 80px
- **Card Gap**: no cards; 7px row padding in the ledger
- **Content Padding**: text sits on the ground aligned to the grid edge
- **Approach**: The plan is the picture; space and ink value do the separating.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"50px","input_height":"52px","row_height":"34 to 48px ledger rows"}

### Responsive

The plan keeps its 3:4 ratio at every width. Below 1200px the sublines and captions on the plan are hidden and the ledger drops its link column; at 600px device names are replaced by 28px touch targets over their marks, the ledger stacks to rows, and the headline column stacks. Above 1440px content caps and centres.

### Breakpoints

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

## Elevation & Depth

### Shadows

- **None**: flat everywhere; nothing is lifted. Light is the only depth: the console and the line it traces.

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: one-lit-screen-in-a-dark-flat
- **Material**: A near-black night ground #050508 carries the plan and the console; the rest of the page is flat powder grey #C7C9D2 with pale wells #ECEDF2. Only the console screen and the route it is tracing are lit.
- **Card Style**: No cards. Rows sit on the ground, parted by space; the one filled surface per view is a pale well or the night band.
- **Bg Pattern**: none; the lease plan of the flat is the only image.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders. Walls and cables belong to the plan drawing, in 2px strokes; dashed inside walls, solid along the floor. Focus is a 2px outline at 3px offset, or a 2px ink line under a well.

## Components

### Composition

- Make the page a place: the plan of the home is the hero, with the title above it and the ledger below.
- Light exactly one thing at a time: the console, and the route being traced.
- Place each device where it lives, on the plan, by percentage of the drawing.
- Under the plan, list every device in the order you pass them from the front door.

### Hierarchy

- One headline per view in Zen Kaku Gothic New 700 (40px on phones to 70px on desktop), 28 to 38px section heads.
- Prose at 17 to 18px in ink; asides and the network's labels in muted or BIZ UDGothic.
- Lit means live: bloom on the night ground, mint for the single action.
- State is a mark before it is a word: square, filled ring, open ring.

### Density

Calm: a plan with fifteen labelled devices, a ledger with one row per device and 7px row padding, 48 to 80px between sections.

### Signature Patterns

- The lit route: touch or focus a device and a light runs the real cable route from the console to it, taking the device's round trip times 250 (0.4 ms to hearth, 38 ms to Ren's phone).
- The floor plan as the page: rooms, devices and cables at lease-plan scale, dashed cables inside walls, solid along the floor.
- Marks: squares for the network, filled rings for awake, open rings for asleep, a mint ring for a guest.
- The ledger: every device in door-to-door order with link, now and round trip, the guest on a pale well.

## 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-01a0fe73-ea45-7911-973a-138502da6846/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0fe73-ea45-7911-973a-138502da6846/shadcn.json` (registry theme), `/language/en-01a0fe73-ea45-7911-973a-138502da6846/shadcn-components.md` (component recipes) and `/language/en-01a0fe73-ea45-7911-973a-138502da6846/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 Draw the real place: rooms, devices and cables where they live.
- Do Light only the console and the route being traced.
- Do Give every device a mark that says square, awake or asleep.
- Do State real readings: round trip, signal, time.
- Do Keep one mint action per view.
- Do Set the network's own words in BIZ UDGothic at 15px or larger.
- Don't Don't add window chrome, traffic-light dots or stat tiles.
- Don't Don't veil a photo with a gradient behind a slogan.
- Don't Don't use shadows, rounded rectangles or cards.
- Don't Don't number sections or add eyebrows.
- Don't Don't light anything decoratively; mint is the guest and the one action.
- Don't Don't write copy that explains the design system.

### Accessibility

Ink #181A20 on #C7C9D2 is above 10:1; muted #4A4C58 is above 5:1 on the grey and above 6:1 on the pale well; bloom on the night ground is above 17:1; the mint button label #0C1512 is above 11:1. Status words use the semantic inks on the pale well (above 4.5:1). Every device is a link reachable by keyboard, focusing it runs the route, and the ledger repeats everything the plan shows. The plan renders complete with no JavaScript and with prefers-reduced-motion.

### Usage Context

Home and small-office network tools, quiet monitoring consoles, maps of places that are mostly asleep, and any product that should draw a real place and light only what is live.

## Imagery Direction

### Pairs With

cathode-hush

### Art Style Id

en-019ef843-df5f-78d3-b8ef-857c74a1ac96

### Summary

Cathode Hush plates held down to a dim hairline plan: near-grayscale, manga-ink linework on a night ground, scanlines and a few cyan-green sparks. The hero is the lease plan of the flat, a drawing rather than a photograph.

### Subjects

- the lease plan of a flat with rooms, walls and balcony
- a single dim console screen at night
- cables running along a skirting board
- a quiet room lit only by one monitor

### Usage

One plan image painted with var(--hero-image) at its own 3:4 ratio, capped at 1440px; no veil over it. Labels and marks are live text and SVG above it.

### Avoid

Gradient veils, window chrome, saturated neon, cyberpunk magenta, characters, text baked into the image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialtone",
  "type": "registry:theme",
  "title": "Dialtone shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#C7C9D2",
      "foreground": "#181A20",
      "card": "#ECEDF2",
      "card-foreground": "#181A20",
      "popover": "#ECEDF2",
      "popover-foreground": "#181A20",
      "primary": "#181A20",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#4A4C58",
      "muted-foreground": "#181A20",
      "accent": "#3FE3C2",
      "accent-foreground": "#111111",
      "destructive": "#7A3A4E",
      "border": "#2C2E36",
      "input": "#2C2E36",
      "ring": "#3FE3C2",
      "chart-1": "#181A20",
      "chart-2": "#f4f4f5",
      "chart-3": "#3FE3C2",
      "chart-4": "#2F5E52",
      "chart-5": "#6B5530",
      "sidebar": "#ECEDF2",
      "sidebar-foreground": "#181A20",
      "sidebar-primary": "#181A20",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4A5588",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2C2E36",
      "sidebar-ring": "#3FE3C2",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#181A20",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#3FE3C2",
      "accent-foreground": "#111111",
      "destructive": "#7A3A4E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#3FE3C2",
      "chart-1": "#181A20",
      "chart-2": "#f4f4f5",
      "chart-3": "#3FE3C2",
      "chart-4": "#2F5E52",
      "chart-5": "#6B5530",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#181A20",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3FE3C2",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#3FE3C2",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0fe73-ea45-7911-973a-138502da6846",
    "slug": "dialtone",
    "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",
        "bg",
        "bloom",
        "border",
        "dim",
        "error",
        "info",
        "muted",
        "night",
        "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",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "material",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "controls": [
        "height",
        "radius",
        "well_height"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy",
        "trace"
      ]
    }
  }
}
```