Servo

# Servo

## Philosophy

A deep-space instrument deck. Mission data lives behind brushed-chrome bezels; a servo needle swings to read it, and three neon rim-lights — cyan for live, magenta for selected, one rationed amber glint for alert — cut through the void like cockpit indicators. Sci-fi optimism fused with arcade nostalgia, where every interface is a control panel from a future built by ambitious humans. A faithful glow-up of the Retrofuturism Chrome brief: same chrome-and-neon-on-dark idea and colour direction, brought to standard with a real signature mechanic, clean geometry, and self-contained tokens.

### Values

- {"name":"Chrome is the material","description":"Every surface is brushed steel with a vertical sheen and an inset highlight — the structure comes from real metal, never from a coloured edge."}
- {"name":"The needle reads the number","description":"Counts and rates render as servo gauges whose needle swings to the value and settles with an elastic spring — instruments, not flat text cards."}
- {"name":"Colour is a signal","description":"Cyan means live, magenta means selected, a rationed amber glint means it needs you — each accent stays a small fraction of the surface, used like a highlighter."}
- {"name":"Built for night flight","description":"Neon on a deep-space void reads with maximum contrast in low light; the ground is dark by concept, not by default."}
- {"name":"Arcade nostalgia, modern craft","description":"Cabinet glow, scanline depth, and physical toggles, rendered with resolution-independent precision and full accessibility."}
- {"name":"Typography as engineering","description":"Orbitron display, Rajdhani body, Share Tech Mono readouts — angular, technical, precise."}

### Anti-Values

- {"name":"Flat corporate minimalism","description":"Never strip away the material and personality into a generic white card."}
- {"name":"Warm organic palettes","description":"No wood grain, earth tones, or botanical softness — this is metal and neon on void."}
- {"name":"Bubbly toy shapes","description":"No oversized rounded blobs; edges are sharp and technical, soft only where a bezel needs it."}
- {"name":"Pastel washes","description":"High-contrast neon on deep dark, never gentle tints or muddy gradients across whole panels."}

### Visual Character

- Containers are full brushed-chrome bezels — a vertical sheen plus an inset highlight over a near-black console face — never a single neon accent edge.
- Counts and rates are servo gauges: a 270 degree arc in one accent with a steel needle swinging to the value, the hub a chrome dot.
- Sections open with a switch-plate header: a glowing LED, a chrome number chip, a tracked-caps label, and a dashed tick-rule to the margin.
- Three rim-lights — cyan live, magenta select, one amber glint — glow on needles, arcs, LEDs, and rims; semantic colours sit quietly in the same set.
- A faint CRT scanline runs over the deep-space void for retro depth; display headings carry a metallic gradient fill with a faint cyan glow.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0B0B14` |
| bg_2 | `#11111F` |
| surface | `#181826` |
| surface_2 | `#202032` |
| chrome_hi | `#C9CEDB` |
| chrome_lo | `#5B6072` |
| text | `#ECEDF4` |
| muted | `#8A8FA6` |
| border | `#2C2C42` |
| rule | `#232338` |
| accent | `#22D3EE` |
| accent_2 | `#FF5FC8` |
| accent_3 | `#FFC53D` |
| on_accent | `#06141A` |
| success | `#38E0A6` |
| warning | `#FFC53D` |
| error | `#FF5A6E` |
| info | `#22D3EE` |

### Typography

- **Base Size**: 17px
- **Body Font**: Rajdhani
- **Heading Font**: Orbitron
- **Mono Font**: Share Tech Mono
- **Heading Weight**: 800
- **Heading Transform**: uppercase
- **Letter Spacing**: 0.02em
- **Line Height**: 1.55
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

### Radii

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

### Shadows

- **Md**: 0 18px 40px rgba(0,0,0,0.55)
- **Chrome Inset**: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.40)
- **Glow Cyan**: 0 0 22px rgba(34,211,238,0.45)
- **Glow Pink**: 0 0 22px rgba(255,95,200,0.40)
- **Glow Amber**: 0 0 18px rgba(255,197,61,0.45)

### Spacing

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

### Surfaces

- **Treatment**: brushed-chrome
- **Card Style**: A full brushed-chrome bezel: near-black console face (#181826) with a vertical sheen overlay and an inset highlight, 1px #2C2C42 frame, 24px radius, cast shadow. Never a single coloured edge, never nested.
- **Bg Pattern**: scanline-void
- **Material**: Vertical chrome sheen (linear-gradient white->transparent->black) plus a fine brush texture; a faint CRT scanline runs over the deep-space ground.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: full-frame
- **Character**: Containers are framed by a full 1px metal border with sheen, not a lone accent edge. Inputs use a sunken inset-chrome well; focus turns the border cyan with a cyan glow ring.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.34,1.56,0.64,1)
- **Philosophy**: A servo spring: needles and controls overshoot then lock, like a mechanical instrument settling. The settled state is the default and renders with no JavaScript; the landing gates its reveal behind a class set by an inline script and respects prefers-reduced-motion.

## Rules

### Composition

- Frame every container in a full brushed-chrome bezel before any fill; the metal carries the structure, never a lone accent edge.
- Read values on servo gauges — a 270 degree accent arc and a steel needle swinging to the value — not flat numeric cards.
- Open each section with a switch-plate header: LED, chrome number chip, tracked-caps label, dashed tick-rule.
- Keep cyan, magenta, and amber each under a small fraction of the surface — signals on needles, arcs, LEDs, and rims.
- Run a faint CRT scanline over the deep-space void for retro depth without dimming the chrome.

### Hierarchy

- Display titles and the masthead use Orbitron caps with a metallic gradient fill and a faint cyan glow.
- Nav, section labels, counts, coordinates, and timestamps use Share Tech Mono tracked-caps.
- Body copy uses Rajdhani at 17px, read-light on the void or muted for secondary.
- The primary action is a single cyan instrument button with a cyan glow; the rest stay dark chrome.
- Status is a register-mark badge with a glowing dot (cyan live, amber alert, success), never a coloured field.

### Density

Comfortable mission-deck density: large Orbitron titles and servo gauges balanced by compact mono readouts and tightly ruled flight-log rows on brushed-chrome bezels.

### Signature

- Servo gauge dial: an accent arc plus a steel needle swinging to the value, hub a chrome dot.
- Brushed-chrome bezel framing every container with sheen and inset highlight — never a lone accent edge.
- Switch-plate section header: glowing LED, chrome number chip, tracked-caps label, dashed tick-rule.
- Three rim-lights used like highlighters — cyan live, magenta select, one rationed amber glint.
- CRT scanline over a deep-space void with metallic-gradient display headings and a faint cyan glow.

## Layout

### Grid

Desktop uses a 12-column board at max-width 1200-1240px with 24px gutters; the dashboard adds a 248px sidebar rail. Only the landing hero spans 100vw.

### Whitespace

The deep-space void is the negative space: a near-black ground crossed by a faint scanline, with brushed-chrome bezels and generous gaps so neon glow breathes.

### Density

Comfortable: large Orbitron titles and servo gauges, compact mono coordinates, ruled flight-log rows, and chrome bezels that hold dense telemetry without feeling like a flat SaaS table.

### Responsive

From ~390px mobile to 2560px+ ultra-wide. On mobile stack to a single column, collapse the sidebar to a top rail, hide non-essential nav and table columns, make controls full width, and never overflow horizontally; on ultra-wide cap and centre the content while only the hero spans 100vw.

### Breakpoints

- **Desktop**: 1025px and up: 12-column board, sidebar rail on the dashboard
- **Tablet**: 761px-1024px: 2-up cards, single content column
- **Mobile**: 760px and below: single column, sidebar becomes a top rail, hidden secondary columns
- **Ultrawide**: 2200px and up: content cap 1240px, only the hero spans 100vw

## Guidance

### Do

- Use the deep-space void (#0B0B14) as the ground; let brushed-chrome bezels and neon read with maximum contrast.
- Frame every container in a full chrome bezel with sheen and inset highlight before adding any fill.
- Read values on servo gauges and swing the needle; glow the arc in the role accent.
- Keep cyan, magenta, and amber each under a small fraction of the surface — highlighters, not fields.
- Open sections with a switch-plate header (LED + chrome number + caps label + tick-rule).
- Style every input, select, checkbox, radio, switch, slider, button, and table with the chrome + cyan-focus system.
- Pair Orbitron display caps with Rajdhani body at 17px and Share Tech Mono readouts.
- Keep radius at {0, 16, 24, 9999}; round only dials and LEDs fully.

### Don't

- Do not give a card a single lone accent edge, or wash a panel in a neon colour.
- Do not box the nav into a floating pill or rounded card, and never nest bezels inside bezels.
- Do not glow body text or place small text on a saturated accent field.
- Do not use in-between radii such as 8px, 12px, or 20px, or the AI-default oversized italic-serif headline.
- Do not pair pink and red in proximity, run more than one auto-pulse per viewport, or use pastel washes and muddy gradients.
- Do not use default browser styles for selects, checkboxes, switches, sliders, or focus states.
- Do not mix more than one display font or use rejected LLM-default fonts like Poppins, Montserrat, or Space Grotesk.

### Accessibility

Read-light text on the void and dark text on cyan both clear WCAG AA; never place small text on a saturated accent field. Every control carries a visible cyan focus ring with offset, touch targets are at least 44px, and status is paired with a text label and an icon, never colour alone. The fully-rendered state is visible with no JavaScript and motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

lustre

### Summary

Subjects sculpted from liquid chrome and mirror-finish metal in a deep space-black void, silhouette edges catching electric cyan and hot magenta rim light like cockpit indicators with one restrained amber-gold glint, faint CRT scanline texture. Imagery is the chrome instrument itself — full-frame, luminous, sci-fi optimistic — never a flat illustration.

### Subjects

- retrofuturist cockpit instrument console with chrome gauge dials and toggles
- liquid-chrome spacecraft hull and engine nacelle in a star void
- polished chrome arcade cabinet face and joystick under neon
- mirror-metal radar reticle and servo needle assemblies
- brushed-steel control panels catching cyan and magenta rim light

### Usage

One full-bleed landing hero in the Lustre technique — a chrome instrument console composed with a quiet darkened region for the headline overlay. Elsewhere keep imagery to gauge faces, panel details, and material studies. End every prompt with NO text, NO letters, NO logos.

---
version: "alpha"
name: "Servo"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0B0B14"
  bg_2: "#11111F"
  surface: "#181826"
  surface_2: "#202032"
  chrome_hi: "#C9CEDB"
  chrome_lo: "#5B6072"
  text: "#ECEDF4"
  muted: "#8A8FA6"
  border: "#2C2C42"
  rule: "#232338"
  accent: "#22D3EE"
  accent_2: "#FF5FC8"
  accent_3: "#FFC53D"
  on_accent: "#06141A"
  success: "#38E0A6"
  warning: "#FFC53D"
  error: "#FF5A6E"
  info: "#22D3EE"
typography:
  headline-lg:
    fontFamily: "Orbitron"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "0.02em"
  headline-md:
    fontFamily: "Orbitron"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "0.02em"
  body-md:
    fontFamily: "Rajdhani"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "0.02em"
  label-md:
    fontFamily: "Share Tech Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "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: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-bg_2:
    backgroundColor: "{colors.bg_2}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-chrome_hi:
    backgroundColor: "{colors.chrome_hi}"
  color-reference-chrome_lo:
    backgroundColor: "{colors.chrome_lo}"
  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"
---

# Servo

## Overview

A deep-space instrument deck. Mission data lives behind brushed-chrome bezels; a servo needle swings to read it, and three neon rim-lights — cyan for live, magenta for selected, one rationed amber glint for alert — cut through the void like cockpit indicators. Sci-fi optimism fused with arcade nostalgia, where every interface is a control panel from a future built by ambitious humans. A faithful glow-up of the Retrofuturism Chrome brief: same chrome-and-neon-on-dark idea and colour direction, brought to standard with a real signature mechanic, clean geometry, and self-contained tokens.

### Values

- {"name":"Chrome is the material","description":"Every surface is brushed steel with a vertical sheen and an inset highlight — the structure comes from real metal, never from a coloured edge."}
- {"name":"The needle reads the number","description":"Counts and rates render as servo gauges whose needle swings to the value and settles with an elastic spring — instruments, not flat text cards."}
- {"name":"Colour is a signal","description":"Cyan means live, magenta means selected, a rationed amber glint means it needs you — each accent stays a small fraction of the surface, used like a highlighter."}
- {"name":"Built for night flight","description":"Neon on a deep-space void reads with maximum contrast in low light; the ground is dark by concept, not by default."}
- {"name":"Arcade nostalgia, modern craft","description":"Cabinet glow, scanline depth, and physical toggles, rendered with resolution-independent precision and full accessibility."}
- {"name":"Typography as engineering","description":"Orbitron display, Rajdhani body, Share Tech Mono readouts — angular, technical, precise."}

### Anti-Values

- {"name":"Flat corporate minimalism","description":"Never strip away the material and personality into a generic white card."}
- {"name":"Warm organic palettes","description":"No wood grain, earth tones, or botanical softness — this is metal and neon on void."}
- {"name":"Bubbly toy shapes","description":"No oversized rounded blobs; edges are sharp and technical, soft only where a bezel needs it."}
- {"name":"Pastel washes","description":"High-contrast neon on deep dark, never gentle tints or muddy gradients across whole panels."}

### Visual Character

- Containers are full brushed-chrome bezels — a vertical sheen plus an inset highlight over a near-black console face — never a single neon accent edge.
- Counts and rates are servo gauges: a 270 degree arc in one accent with a steel needle swinging to the value, the hub a chrome dot.
- Sections open with a switch-plate header: a glowing LED, a chrome number chip, a tracked-caps label, and a dashed tick-rule to the margin.
- Three rim-lights — cyan live, magenta select, one amber glint — glow on needles, arcs, LEDs, and rims; semantic colours sit quietly in the same set.
- A faint CRT scanline runs over the deep-space void for retro depth; display headings carry a metallic gradient fill with a faint cyan glow.

## 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 | `#0B0B14` |
| bg_2 | `#11111F` |
| surface | `#181826` |
| surface_2 | `#202032` |
| chrome_hi | `#C9CEDB` |
| chrome_lo | `#5B6072` |
| text | `#ECEDF4` |
| muted | `#8A8FA6` |
| border | `#2C2C42` |
| rule | `#232338` |
| accent | `#22D3EE` |
| accent_2 | `#FF5FC8` |
| accent_3 | `#FFC53D` |
| on_accent | `#06141A` |
| success | `#38E0A6` |
| warning | `#FFC53D` |
| error | `#FF5A6E` |
| info | `#22D3EE` |

## Typography

- **Headline-Lg**: Orbitron, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Orbitron, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Rajdhani, 17px, weight 400, line-height 1.55.
- **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`

### Grid

Desktop uses a 12-column board at max-width 1200-1240px with 24px gutters; the dashboard adds a 248px sidebar rail. Only the landing hero spans 100vw.

### Whitespace

The deep-space void is the negative space: a near-black ground crossed by a faint scanline, with brushed-chrome bezels and generous gaps so neon glow breathes.

### Density

Comfortable: large Orbitron titles and servo gauges, compact mono coordinates, ruled flight-log rows, and chrome bezels that hold dense telemetry without feeling like a flat SaaS table.

### Responsive

From ~390px mobile to 2560px+ ultra-wide. On mobile stack to a single column, collapse the sidebar to a top rail, hide non-essential nav and table columns, make controls full width, and never overflow horizontally; on ultra-wide cap and centre the content while only the hero spans 100vw.

### Breakpoints

- **Desktop**: 1025px and up: 12-column board, sidebar rail on the dashboard
- **Tablet**: 761px-1024px: 2-up cards, single content column
- **Mobile**: 760px and below: single column, sidebar becomes a top rail, hidden secondary columns
- **Ultrawide**: 2200px and up: content cap 1240px, only the hero spans 100vw

## Elevation & Depth

### Shadows

- **Md**: 0 18px 40px rgba(0,0,0,0.55)
- **Chrome Inset**: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.40)
- **Glow Cyan**: 0 0 22px rgba(34,211,238,0.45)
- **Glow Pink**: 0 0 22px rgba(255,95,200,0.40)
- **Glow Amber**: 0 0 18px rgba(255,197,61,0.45)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: brushed-chrome
- **Card Style**: A full brushed-chrome bezel: near-black console face (#181826) with a vertical sheen overlay and an inset highlight, 1px #2C2C42 frame, 24px radius, cast shadow. Never a single coloured edge, never nested.
- **Bg Pattern**: scanline-void
- **Material**: Vertical chrome sheen (linear-gradient white->transparent->black) plus a fine brush texture; a faint CRT scanline runs over the deep-space ground.

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: full-frame
- **Character**: Containers are framed by a full 1px metal border with sheen, not a lone accent edge. Inputs use a sunken inset-chrome well; focus turns the border cyan with a cyan glow ring.

## Components

### Composition

- Frame every container in a full brushed-chrome bezel before any fill; the metal carries the structure, never a lone accent edge.
- Read values on servo gauges — a 270 degree accent arc and a steel needle swinging to the value — not flat numeric cards.
- Open each section with a switch-plate header: LED, chrome number chip, tracked-caps label, dashed tick-rule.
- Keep cyan, magenta, and amber each under a small fraction of the surface — signals on needles, arcs, LEDs, and rims.
- Run a faint CRT scanline over the deep-space void for retro depth without dimming the chrome.

### Hierarchy

- Display titles and the masthead use Orbitron caps with a metallic gradient fill and a faint cyan glow.
- Nav, section labels, counts, coordinates, and timestamps use Share Tech Mono tracked-caps.
- Body copy uses Rajdhani at 17px, read-light on the void or muted for secondary.
- The primary action is a single cyan instrument button with a cyan glow; the rest stay dark chrome.
- Status is a register-mark badge with a glowing dot (cyan live, amber alert, success), never a coloured field.

### Density

Comfortable mission-deck density: large Orbitron titles and servo gauges balanced by compact mono readouts and tightly ruled flight-log rows on brushed-chrome bezels.

### Signature

- Servo gauge dial: an accent arc plus a steel needle swinging to the value, hub a chrome dot.
- Brushed-chrome bezel framing every container with sheen and inset highlight — never a lone accent edge.
- Switch-plate section header: glowing LED, chrome number chip, tracked-caps label, dashed tick-rule.
- Three rim-lights used like highlighters — cyan live, magenta select, one rationed amber glint.
- CRT scanline over a deep-space void with metallic-gradient display headings and a faint cyan glow.

## 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-019ef9d9-46d0-7293-bcd0-de31640c70be/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Use the deep-space void (#0B0B14) as the ground; let brushed-chrome bezels and neon read with maximum contrast.
- Do Frame every container in a full chrome bezel with sheen and inset highlight before adding any fill.
- Do Read values on servo gauges and swing the needle; glow the arc in the role accent.
- Do Keep cyan, magenta, and amber each under a small fraction of the surface — highlighters, not fields.
- Do Open sections with a switch-plate header (LED + chrome number + caps label + tick-rule).
- Do Style every input, select, checkbox, radio, switch, slider, button, and table with the chrome + cyan-focus system.
- Do Pair Orbitron display caps with Rajdhani body at 17px and Share Tech Mono readouts.
- Do Keep radius at {0, 16, 24, 9999}; round only dials and LEDs fully.
- Don't Do not give a card a single lone accent edge, or wash a panel in a neon colour.
- Don't Do not box the nav into a floating pill or rounded card, and never nest bezels inside bezels.
- Don't Do not glow body text or place small text on a saturated accent field.
- Don't Do not use in-between radii such as 8px, 12px, or 20px, or the AI-default oversized italic-serif headline.
- Don't Do not pair pink and red in proximity, run more than one auto-pulse per viewport, or use pastel washes and muddy gradients.
- Don't Do not use default browser styles for selects, checkboxes, switches, sliders, or focus states.
- Don't Do not mix more than one display font or use rejected LLM-default fonts like Poppins, Montserrat, or Space Grotesk.

### Accessibility

Read-light text on the void and dark text on cyan both clear WCAG AA; never place small text on a saturated accent field. Every control carries a visible cyan focus ring with offset, touch targets are at least 44px, and status is paired with a text label and an icon, never colour alone. The fully-rendered state is visible with no JavaScript and motion respects prefers-reduced-motion.

## Imagery Direction

### Pairs With

lustre

### Summary

Subjects sculpted from liquid chrome and mirror-finish metal in a deep space-black void, silhouette edges catching electric cyan and hot magenta rim light like cockpit indicators with one restrained amber-gold glint, faint CRT scanline texture. Imagery is the chrome instrument itself — full-frame, luminous, sci-fi optimistic — never a flat illustration.

### Subjects

- retrofuturist cockpit instrument console with chrome gauge dials and toggles
- liquid-chrome spacecraft hull and engine nacelle in a star void
- polished chrome arcade cabinet face and joystick under neon
- mirror-metal radar reticle and servo needle assemblies
- brushed-steel control panels catching cyan and magenta rim light

### Usage

One full-bleed landing hero in the Lustre technique — a chrome instrument console composed with a quiet darkened region for the headline overlay. Elsewhere keep imagery to gauge faces, panel details, and material studies. End every prompt with NO text, NO letters, NO logos.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "servo",
  "type": "registry:theme",
  "title": "Servo shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0B0B14",
      "foreground": "#ECEDF4",
      "card": "#181826",
      "card-foreground": "#ECEDF4",
      "popover": "#181826",
      "popover-foreground": "#ECEDF4",
      "primary": "#ECEDF4",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8A8FA6",
      "muted-foreground": "#ECEDF4",
      "accent": "#22D3EE",
      "accent-foreground": "#ffffff",
      "destructive": "#FF5A6E",
      "border": "#2C2C42",
      "input": "#2C2C42",
      "ring": "#22D3EE",
      "chart-1": "#ECEDF4",
      "chart-2": "#f4f4f5",
      "chart-3": "#22D3EE",
      "chart-4": "#38E0A6",
      "chart-5": "#FFC53D",
      "sidebar": "#181826",
      "sidebar-foreground": "#ECEDF4",
      "sidebar-primary": "#ECEDF4",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#22D3EE",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2C2C42",
      "sidebar-ring": "#22D3EE",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#ECEDF4",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#22D3EE",
      "accent-foreground": "#ffffff",
      "destructive": "#FF5A6E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#22D3EE",
      "chart-1": "#ECEDF4",
      "chart-2": "#f4f4f5",
      "chart-3": "#22D3EE",
      "chart-4": "#38E0A6",
      "chart-5": "#FFC53D",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#ECEDF4",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#22D3EE",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#22D3EE",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef9d9-46d0-7293-bcd0-de31640c70be",
    "slug": "servo",
    "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_2",
        "border",
        "chrome_hi",
        "chrome_lo",
        "error",
        "info",
        "muted",
        "on_accent",
        "rule",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "chrome_inset",
        "glow_amber",
        "glow_cyan",
        "glow_pink",
        "md"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "material",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```