Sounding

# Sounding

## Philosophy

Sounding is a dive-review surface for crewed bathyscaphe operations. It reads a deep-ocean descent the way a research vessel reviews one — a long-form sounding profile, not a wall of gauges. Every reading is set at the depth it was taken, and the whole dive (surface, descent, bottom survey, ascent) is plotted as one continuous line, so the shape of the dive is visible at a glance and a kink in the curve shows before an alarm does. Conceived independently from the mission-review brief — dense operational telemetry as an evidence-driven review surface — but taken DOWN into the water column: the page is reorganised by depth rather than by panel, on an abyssal teal-petrol ground that grades with depth.

### Values

- Depth is the layout: every reading set at the depth it was sampled
- The whole dive plotted as one continuous sounding profile
- Editorial hierarchy — conclusions in serif, readouts in mono
- Findings leader-connected to the evidence they explain, never floating
- High-contrast abyssal dark surfaces with accessibility-aware restraint
- Accent spent only as signal ink — cyan reads, orange marks thresholds, violet pings

### Anti-Values

- A wall of disconnected gauges with no profile to read them against
- White or charcoal-grid grounds, neon gradient washes, glow spectacle
- Clipped-notch plates or a left coordinate-tick rail (the sibling refinement's execution)
- Soft generic SaaS cards that erase the operational gravity
- Floating helper text divorced from the evidence it explains
- The oversized italic-serif AI-startup default headline

### Visual Character

- The page is a depth-strata sounding column: each section is a dive phase fixed at its depth, opening with a buoy-orange depth mark and a phase tag, so the reader descends the page as the bathyscaphe descends the column.
- A continuous plotted profile spine is pinned to the right edge — a solid cyan descent and a dashed violet ascent against a depth ruler, with station markers tying each stratum to its depth.
- Containers are bathymetric lozenges: one rounded leading edge and one squared trailing edge, with a faint sonar-ping arc bedded into the rounded side; cards alternate which edge leads.
- Conclusions are set in Fraunces serif and readouts in Spline Sans Mono, on an abyssal teal-petrol ground that grades from a lighter surface band to near-black abyss.
- Commentary is leader-connected by a coloured rule to the chart or sample it explains; the review reads as a document with the evidence kept beside it.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#04161A` |
| bg_top | `#0A2A30` |
| surface | `#0A2127` |
| surface_2 | `#0E2A31` |
| recess | `#02100F` |
| text | `#E8F6F2` |
| muted | `#7FA6A0` |
| border | `#163138` |
| rule | `#0F262C` |
| accent | `#3FE0D0` |
| accent_2 | `#FF8A4C` |
| accent_3 | `#A88BFF` |
| on_accent | `#02211D` |
| success | `#52D6A6` |
| warning | `#FF8A4C` |
| error | `#FF6E73` |
| info | `#5BC8E8` |

### Typography

- **Base Size**: 17px
- **Body Font**: Archivo
- **Heading Font**: Fraunces
- **Mono Font**: Spline Sans Mono
- **Heading Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap

### Radii

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

### Shadows

- **Sm**: none
- **Md**: 0 24px 60px rgba(0,0,0,0.42)
- **Lg**: 0 48px 120px rgba(0,0,0,0.55)

### Spacing

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

### Surfaces

- **Treatment**: flat bathymetric-lozenge cards (one rounded leading edge, one squared trailing edge) on an abyssal teal-petrol ground that grades with depth; no glass, no gradient washes
- **Card Style**: Lozenge cards: border-radius 24px on the leading corners and 0 on the trailing corners (mirrored on alternating cards), background #0A2127, no border, a faint cyan sonar-ping arc bedded into the rounded edge — echo-return shapes, never clipped-notch plates or rounded consumer cards.
- **Bg Pattern**: depth-graded vertical gradient — a lighter surface teal #0A2A30 at top falling to near-black #02100F abyss; the field itself encodes depth, not a blueprint grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 0
- **Style**: solid
- **Character**: Hairline #163138 for structure only; colour is carried by status dots, the profile curve, and depth marks, never by an accent edge on a card.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: Deliberate. The settled, fully-rendered page is the default and visible with no JavaScript; reveals are layered on top behind an .mtn class on <html> and respect prefers-reduced-motion.

## Rules

### Composition

Compose the page as a depth-strata sounding column: each section is a dive phase fixed at its depth, opening with a buoy-orange depth mark and a phase tag, with a continuous plotted profile spine pinned to the right edge tying strata to depths. Let the conclusion lead; readouts and the profile support the decision. Never box navigation into a pill or floating card.

### Hierarchy

Set story-level conclusions in Fraunces serif and metric-level readouts, depth marks, coordinates, and timestamps in Spline Sans Mono, so a controller distinguishes narrative from instrument at a glance. Cyan reads; orange marks thresholds and active depth; violet flags live/ping channels; red flags a real fault.

### Density

High density but heavily stratified: ledgers and tables can be tight as long as labels, separators, status dots, and contrast keep them scannable, and every dense cluster has a quieter band or leader-connected annotation nearby.

### Signature

A depth-strata sounding column with per-section depth marks; a right-edge plotted profile spine (solid cyan descent + dashed violet ascent against a depth ruler) with station markers; bathymetric-lozenge cards (rounded leading edge, squared trailing edge, faint sonar-ping arc); sonar ledgers of evenly spaced readout cells with status dots; and leader-connected logbook annotations inside the grid.

## Layout

### Grid

A content column plus a right-edge profile spine (minmax(0,1fr) 132px) on the embodiment; the dashboard uses a 240px sidebar nav plus a dominant content stack. Content caps and centres around 1320px and only the landing hero spans 100vw.

### Whitespace

Intentional and editorial: tight within sonar ledgers and depth ticks, generous around stratum transitions and above every title, used to separate evidence clusters from conclusions.

### Density

Light and spacious at the masthead and hero, denser through sonar ledgers, sample tables, and command forms, quieter again at the log footer.

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; below ~980px the right-edge profile spine drops away and strata stack into a single column; the dashboard sidebar becomes a top bar; mobile hides non-essential nav and table columns, makes controls full width, and never overflows horizontally; grids shrink with minmax(0,1fr) + min-width:0.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Reflow**: 1080px and 980px and 680px

## Guidance

### Do

- Set every reading at its depth; open each stratum with a buoy-orange depth mark and a phase tag, and pad above every title.
- Plot the dive as one continuous profile spine; let the curve's shape carry the conclusion and tie strata to it with station markers.
- Build containers as bathymetric lozenges with one rounded leading edge and one squared trailing edge; alternate which edge leads.
- Lead with the conclusion in Fraunces; set readouts, depth marks, and timestamps in Spline Sans Mono.
- Hold cyan as the read, orange for thresholds and active depth, violet for live/ping channels, red for a real fault — accents like highlighters.
- Group numbers into sonar ledgers of evenly spaced cells with status dots; carry status by colour AND label.
- Leader-connect every annotation to the chart or sample it explains; explicitly style every form control with a visible 2px cyan focus ring; render the settled state with no JavaScript.

### Don't

- Do not default to a white or charcoal-grid ground, or flood panels with neon gradients.
- Do not use clipped-notch plates or a left coordinate-tick rail — that is the sibling refinement's execution; Sounding owes it nothing.
- Do not give a card a lone accent edge, nest cards, or use in-between radii.
- Do not box navigation into a pill or floating rounded card.
- Do not spend accent on decoration, hide operational metadata behind minimalism, or use the oversized italic-serif AI-default headline.
- Do not use emoji on buttons or symbol glyphs in copy; use inline SVG primitives.

### Accessibility

High-contrast sea-foam text and signal ink on an abyssal ground, all clearing WCAG AA; status carried by colour AND label/shape; mono readouts stay 14.5px+, body 17px+; visible 2px cyan focus rings with offset; touch targets at least 44px; every form control explicitly styled with no browser defaults; the fully-rendered state is visible with no JavaScript and motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

datum

### Summary

Deep-ocean subjects rendered as dive-review plates in the Datum technique: a crewed bathyscaphe, water-column cross-section, or hadal seabed sits crisp and dominant on an abyssal teal-petrol field that grades with depth, dressed with hairline cyan dimension rules and calibration ticks, buoy-orange coordinate crosshairs, sparse monospace depth/sonar readouts and status dots in the margins, and a faint horizontal depth-band strata grid. One full-bleed landing hero composed with a calm top surface band for the overlay; elsewhere keep imagery to plate previews and feature studies with leader-line callouts. End every prompt with NO text, NO letters, NO logos.

### Subjects

- crewed deep-sea bathyscaphe / submersible
- vertical ocean water-column cross-section
- hadal seabed / abyssal plain survey
- sounding / depth-vs-time descent profile
- manipulator arm and sample carousel
- ballast and buoyancy-trim assembly

### Usage

One full-bleed landing hero in the Datum technique composed with a calm top surface band for the overlay; plate previews and calibrated feature studies elsewhere.

### Engine Hints

- **Tool**: nano-banana-pro MCP
- **Provider**: gemini
- **Model**: gemini-3-pro-image-preview
- **Aspect Ratio**: 16:9
- **Image Size**: 2K
- **Generated At**: 2026-06-24
- **Note**: Hero generated directly with nano-banana-pro (gemini); openai-image not used (billing-capped).

---
version: "alpha"
name: "Sounding"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#04161A"
  bg_top: "#0A2A30"
  surface: "#0A2127"
  surface_2: "#0E2A31"
  recess: "#02100F"
  text: "#E8F6F2"
  muted: "#7FA6A0"
  border: "#163138"
  rule: "#0F262C"
  accent: "#3FE0D0"
  accent_2: "#FF8A4C"
  accent_3: "#A88BFF"
  on_accent: "#02211D"
  success: "#52D6A6"
  warning: "#FF8A4C"
  error: "#FF6E73"
  info: "#5BC8E8"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Archivo"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Spline Sans Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "80px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-bg_top:
    backgroundColor: "{colors.bg_top}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-recess:
    backgroundColor: "{colors.recess}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-rule:
    backgroundColor: "{colors.rule}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  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}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Sounding

## Overview

Sounding is a dive-review surface for crewed bathyscaphe operations. It reads a deep-ocean descent the way a research vessel reviews one — a long-form sounding profile, not a wall of gauges. Every reading is set at the depth it was taken, and the whole dive (surface, descent, bottom survey, ascent) is plotted as one continuous line, so the shape of the dive is visible at a glance and a kink in the curve shows before an alarm does. Conceived independently from the mission-review brief — dense operational telemetry as an evidence-driven review surface — but taken DOWN into the water column: the page is reorganised by depth rather than by panel, on an abyssal teal-petrol ground that grades with depth.

### Values

- Depth is the layout: every reading set at the depth it was sampled
- The whole dive plotted as one continuous sounding profile
- Editorial hierarchy — conclusions in serif, readouts in mono
- Findings leader-connected to the evidence they explain, never floating
- High-contrast abyssal dark surfaces with accessibility-aware restraint
- Accent spent only as signal ink — cyan reads, orange marks thresholds, violet pings

### Anti-Values

- A wall of disconnected gauges with no profile to read them against
- White or charcoal-grid grounds, neon gradient washes, glow spectacle
- Clipped-notch plates or a left coordinate-tick rail (the sibling refinement's execution)
- Soft generic SaaS cards that erase the operational gravity
- Floating helper text divorced from the evidence it explains
- The oversized italic-serif AI-startup default headline

### Visual Character

- The page is a depth-strata sounding column: each section is a dive phase fixed at its depth, opening with a buoy-orange depth mark and a phase tag, so the reader descends the page as the bathyscaphe descends the column.
- A continuous plotted profile spine is pinned to the right edge — a solid cyan descent and a dashed violet ascent against a depth ruler, with station markers tying each stratum to its depth.
- Containers are bathymetric lozenges: one rounded leading edge and one squared trailing edge, with a faint sonar-ping arc bedded into the rounded side; cards alternate which edge leads.
- Conclusions are set in Fraunces serif and readouts in Spline Sans Mono, on an abyssal teal-petrol ground that grades from a lighter surface band to near-black abyss.
- Commentary is leader-connected by a coloured rule to the chart or sample it explains; the review reads as a document with the evidence kept beside it.

## 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 | `#04161A` |
| bg_top | `#0A2A30` |
| surface | `#0A2127` |
| surface_2 | `#0E2A31` |
| recess | `#02100F` |
| text | `#E8F6F2` |
| muted | `#7FA6A0` |
| border | `#163138` |
| rule | `#0F262C` |
| accent | `#3FE0D0` |
| accent_2 | `#FF8A4C` |
| accent_3 | `#A88BFF` |
| on_accent | `#02211D` |
| success | `#52D6A6` |
| warning | `#FF8A4C` |
| error | `#FF6E73` |
| info | `#5BC8E8` |

## Typography

- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans 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**: `80px`

### Grid

A content column plus a right-edge profile spine (minmax(0,1fr) 132px) on the embodiment; the dashboard uses a 240px sidebar nav plus a dominant content stack. Content caps and centres around 1320px and only the landing hero spans 100vw.

### Whitespace

Intentional and editorial: tight within sonar ledgers and depth ticks, generous around stratum transitions and above every title, used to separate evidence clusters from conclusions.

### Density

Light and spacious at the masthead and hero, denser through sonar ledgers, sample tables, and command forms, quieter again at the log footer.

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide; below ~980px the right-edge profile spine drops away and strata stack into a single column; the dashboard sidebar becomes a top bar; mobile hides non-essential nav and table columns, makes controls full width, and never overflows horizontally; grids shrink with minmax(0,1fr) + min-width:0.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Reflow**: 1080px and 980px and 680px

## Elevation & Depth

### Shadows

- **Sm**: none
- **Md**: 0 24px 60px rgba(0,0,0,0.42)
- **Lg**: 0 48px 120px rgba(0,0,0,0.55)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: flat bathymetric-lozenge cards (one rounded leading edge, one squared trailing edge) on an abyssal teal-petrol ground that grades with depth; no glass, no gradient washes
- **Card Style**: Lozenge cards: border-radius 24px on the leading corners and 0 on the trailing corners (mirrored on alternating cards), background #0A2127, no border, a faint cyan sonar-ping arc bedded into the rounded edge — echo-return shapes, never clipped-notch plates or rounded consumer cards.
- **Bg Pattern**: depth-graded vertical gradient — a lighter surface teal #0A2A30 at top falling to near-black #02100F abyss; the field itself encodes depth, not a blueprint grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 0
- **Style**: solid
- **Character**: Hairline #163138 for structure only; colour is carried by status dots, the profile curve, and depth marks, never by an accent edge on a card.

## Components

### Composition

Compose the page as a depth-strata sounding column: each section is a dive phase fixed at its depth, opening with a buoy-orange depth mark and a phase tag, with a continuous plotted profile spine pinned to the right edge tying strata to depths. Let the conclusion lead; readouts and the profile support the decision. Never box navigation into a pill or floating card.

### Hierarchy

Set story-level conclusions in Fraunces serif and metric-level readouts, depth marks, coordinates, and timestamps in Spline Sans Mono, so a controller distinguishes narrative from instrument at a glance. Cyan reads; orange marks thresholds and active depth; violet flags live/ping channels; red flags a real fault.

### Density

High density but heavily stratified: ledgers and tables can be tight as long as labels, separators, status dots, and contrast keep them scannable, and every dense cluster has a quieter band or leader-connected annotation nearby.

### Signature

A depth-strata sounding column with per-section depth marks; a right-edge plotted profile spine (solid cyan descent + dashed violet ascent against a depth ruler) with station markers; bathymetric-lozenge cards (rounded leading edge, squared trailing edge, faint sonar-ping arc); sonar ledgers of evenly spaced readout cells with status dots; and leader-connected logbook annotations inside the grid.

## 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-019ef9e9-46cd-73c3-b17b-d0b7e6b1e633/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 Set every reading at its depth; open each stratum with a buoy-orange depth mark and a phase tag, and pad above every title.
- Do Plot the dive as one continuous profile spine; let the curve's shape carry the conclusion and tie strata to it with station markers.
- Do Build containers as bathymetric lozenges with one rounded leading edge and one squared trailing edge; alternate which edge leads.
- Do Lead with the conclusion in Fraunces; set readouts, depth marks, and timestamps in Spline Sans Mono.
- Do Hold cyan as the read, orange for thresholds and active depth, violet for live/ping channels, red for a real fault — accents like highlighters.
- Do Group numbers into sonar ledgers of evenly spaced cells with status dots; carry status by colour AND label.
- Do Leader-connect every annotation to the chart or sample it explains; explicitly style every form control with a visible 2px cyan focus ring; render the settled state with no JavaScript.
- Don't Do not default to a white or charcoal-grid ground, or flood panels with neon gradients.
- Don't Do not use clipped-notch plates or a left coordinate-tick rail — that is the sibling refinement's execution; Sounding owes it nothing.
- Don't Do not give a card a lone accent edge, nest cards, or use in-between radii.
- Don't Do not box navigation into a pill or floating rounded card.
- Don't Do not spend accent on decoration, hide operational metadata behind minimalism, or use the oversized italic-serif AI-default headline.
- Don't Do not use emoji on buttons or symbol glyphs in copy; use inline SVG primitives.

### Accessibility

High-contrast sea-foam text and signal ink on an abyssal ground, all clearing WCAG AA; status carried by colour AND label/shape; mono readouts stay 14.5px+, body 17px+; visible 2px cyan focus rings with offset; touch targets at least 44px; every form control explicitly styled with no browser defaults; the fully-rendered state is visible with no JavaScript and motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

datum

### Summary

Deep-ocean subjects rendered as dive-review plates in the Datum technique: a crewed bathyscaphe, water-column cross-section, or hadal seabed sits crisp and dominant on an abyssal teal-petrol field that grades with depth, dressed with hairline cyan dimension rules and calibration ticks, buoy-orange coordinate crosshairs, sparse monospace depth/sonar readouts and status dots in the margins, and a faint horizontal depth-band strata grid. One full-bleed landing hero composed with a calm top surface band for the overlay; elsewhere keep imagery to plate previews and feature studies with leader-line callouts. End every prompt with NO text, NO letters, NO logos.

### Subjects

- crewed deep-sea bathyscaphe / submersible
- vertical ocean water-column cross-section
- hadal seabed / abyssal plain survey
- sounding / depth-vs-time descent profile
- manipulator arm and sample carousel
- ballast and buoyancy-trim assembly

### Usage

One full-bleed landing hero in the Datum technique composed with a calm top surface band for the overlay; plate previews and calibrated feature studies elsewhere.

### Engine Hints

- **Tool**: nano-banana-pro MCP
- **Provider**: gemini
- **Model**: gemini-3-pro-image-preview
- **Aspect Ratio**: 16:9
- **Image Size**: 2K
- **Generated At**: 2026-06-24
- **Note**: Hero generated directly with nano-banana-pro (gemini); openai-image not used (billing-capped).

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sounding",
  "type": "registry:theme",
  "title": "Sounding shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#04161A",
      "foreground": "#E8F6F2",
      "card": "#0A2127",
      "card-foreground": "#E8F6F2",
      "popover": "#0A2127",
      "popover-foreground": "#E8F6F2",
      "primary": "#E8F6F2",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#7FA6A0",
      "muted-foreground": "#E8F6F2",
      "accent": "#3FE0D0",
      "accent-foreground": "#111111",
      "destructive": "#FF6E73",
      "border": "#163138",
      "input": "#163138",
      "ring": "#3FE0D0",
      "chart-1": "#E8F6F2",
      "chart-2": "#f4f4f5",
      "chart-3": "#3FE0D0",
      "chart-4": "#52D6A6",
      "chart-5": "#FF8A4C",
      "sidebar": "#0A2127",
      "sidebar-foreground": "#E8F6F2",
      "sidebar-primary": "#E8F6F2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#5BC8E8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#163138",
      "sidebar-ring": "#3FE0D0",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#E8F6F2",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#3FE0D0",
      "accent-foreground": "#111111",
      "destructive": "#FF6E73",
      "border": "#303642",
      "input": "#303642",
      "ring": "#3FE0D0",
      "chart-1": "#E8F6F2",
      "chart-2": "#f4f4f5",
      "chart-3": "#3FE0D0",
      "chart-4": "#52D6A6",
      "chart-5": "#FF8A4C",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#E8F6F2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#3FE0D0",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#3FE0D0",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef9e9-46cd-73c3-b17b-d0b7e6b1e633",
    "slug": "sounding",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_2",
        "accent_3",
        "bg",
        "bg_top",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "recess",
        "rule",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```