Glassine

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

:root {
  --background: #F7FAFB;
  --foreground: #0E1316;
  --card: #FFFFFF;
  --card-foreground: #0E1316;
  --popover: #FFFFFF;
  --popover-foreground: #0E1316;
  --primary: #0B0D0F;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #5E6A70;
  --muted-foreground: #0E1316;
  --accent: #2BA7C4;
  --accent-foreground: #ffffff;
  --destructive: #A4313D;
  --border: rgba(14,19,22,0.10);
  --input: rgba(14,19,22,0.10);
  --ring: #2BA7C4;
  --chart-1: #0B0D0F;
  --chart-2: #f4f4f5;
  --chart-3: #2BA7C4;
  --chart-4: #2F7A6E;
  --chart-5: #9A6E2E;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0E1316;
  --sidebar-primary: #0B0D0F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3F7E94;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgba(14,19,22,0.10);
  --sidebar-ring: #2BA7C4;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0B0D0F;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #2BA7C4;
  --accent-foreground: #ffffff;
  --destructive: #A4313D;
  --border: #303642;
  --input: #303642;
  --ring: #2BA7C4;
  --chart-1: #0B0D0F;
  --chart-2: #f4f4f5;
  --chart-3: #2BA7C4;
  --chart-4: #2F7A6E;
  --chart-5: #9A6E2E;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0B0D0F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2BA7C4;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #2BA7C4;
  --radius: 16px;
}

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function GlassineShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Glassine</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glassine",
  "type": "registry:theme",
  "title": "Glassine",
  "description": "Optical-camouflage interface language. A quiet white shell around the signal: optical shell-white ground, soft contour ink, translucent acrylic surfaces, and scarce pale-cyan signal ticks. Display Michroma + body Archivo + mono Azeret Mono; square terminal corners; near-invisible graphite hairline borders interrupted by cyan ticks; one chrome glint on the primary action; light, clinical, calm.",
  "cssVars": {
    "theme": {
      "font-sans": "Archivo, system-ui, sans-serif",
      "font-mono": "Azeret Mono, ui-monospace, monospace",
      "font-display": "Michroma, Archivo, system-ui, sans-serif",
      "font-heading": "Michroma, Archivo, system-ui, sans-serif",
      "radius": "0px"
    },
    "light": {
      "background": "#F7FAFB",
      "foreground": "#0E1316",
      "card": "#FFFFFF",
      "card-foreground": "#0E1316",
      "popover": "#FFFFFF",
      "popover-foreground": "#0E1316",
      "primary": "#0B0D0F",
      "primary-foreground": "#FFFFFF",
      "secondary": "#FFFFFF",
      "secondary-foreground": "#0E1316",
      "accent": "#2BA7C4",
      "accent-foreground": "#FFFFFF",
      "muted": "#EEF3F4",
      "muted-foreground": "#5E6A70",
      "destructive": "#A4313D",
      "destructive-foreground": "#FFFFFF",
      "success": "#2F7A6E",
      "warning": "#9A6E2E",
      "border": "rgba(14,19,22,0.10)",
      "input": "rgba(14,19,22,0.10)",
      "ring": "#2BA7C4",
      "radius": "0px"
    }
  }
}

# Glassine shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef822-58d7-71f1-b7de-f7b8b6baad04`
Slug: `glassine`

## Intent

Glassine is an optical-camouflage interface language: a quiet white shell around the signal. It frames consciousness instead of illustrating it — surrounding the subject with measured coordinates, translucent acrylic, and scarce pale-cyan ticks held in deliberate negative space. A clinical cybernetic minimalism for speculative neural tools, borrowing the philosophical calm of late-90s anime cybernetics without the cosplay.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

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

## Token cues

Colors:

{
  "bg": "#F7FAFB",
  "surface": "#FFFFFF",
  "text": "#0E1316",
  "muted": "#5E6A70",
  "border": "rgba(14,19,22,0.10)",
  "accent": "#2BA7C4",
  "on_accent": "#FFFFFF",
  "ink": "#0B0D0F",
  "chrome": "#B9C6CC",
  "success": "#2F7A6E",
  "warning": "#9A6E2E",
  "error": "#A4313D",
  "info": "#3F7E94",
  "primary": "#0B0D0F"
}

Typography:

{
  "base_size": "17px",
  "body_font": "Archivo",
  "heading_font": "Michroma",
  "mono_font": "Azeret Mono",
  "heading_weight": "400",
  "heading_transform": "none",
  "letter_spacing": "-0.01em",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600&family=Azeret+Mono:wght@300;400;500&family=Michroma&display=swap"
}

## Visual character to preserve

- Translucent white acrylic panels at low visual weight, 18px backdrop blur, hairline graphite borders, four tiny corner ticks, square terminal corners.
- Ghost coordinate field: 10px monospace folio marks and crosshair dots in empty columns so whitespace reads as measured surveillance.
- One oversized black SVG ink contour arc cuts the layout as a sparse structural silhouette, never a filled illustration.
- 1px scanline diagnostic seams divide dense code and status rows, punctuated by single-pixel pale-cyan signal ticks.
- A restrained Y2K silver chrome glint on a single edge of the primary action; almost no shadow depth.

## ShadSync visual profile

{
  "family": "brutalist",
  "material": "ink",
  "contour": "default",
  "border": "solid",
  "underlay": true,
  "grain": false,
  "stickerBadges": false,
  "motion": "still",
  "density": "dense",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/glassine/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Use optical whites, soft blacks, pale cyan, and translucent acrylic as the only major visual vocabulary.; Keep terminal code blocks small and quiet, with expanded tracking and clinical labels rather than theatrical hacker glow.; Place at least one empty grid region with coordinates or crosshair dots so whitespace feels designed.; Use manga ink lines as SVG contour scaffolds, border arcs, or cropped silhouettes that support layout structure.; Make one panel visually dominant and vary section weights; avoid equal cards or repeated modular sameness.; Keep borders near-invisible and rely on tiny cyan ticks for system state changes.; Name scenes as specific speculative tools: memory-shell calibration, prosthetic-identity audit, autonomous consciousness interface.
- Do not: Do not use saturated neon cyan, magenta, matrix-rain green, RGB gradients, or nightclub cyberpunk lighting.; Do not create generic dashboards, analytics cards, CRM tables, or component-library showcases.; Do not fill all empty space with widgets; the sterile void is part of the philosophical tone.; Do not use cartoon anime characters, speech bubbles, or fan-art decoration; ink is composition only.; Do not box the top nav into a floating pill or nest cards.

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function GlassineShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Glassine</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}
```

## Layout notes

{
  "grid": "Desktop 12-column grid, 24px gutters, max-width 1320px, columns 1-2 often left empty for coordinates and folio marks.",
  "whitespace": "Dramatic 8:1 rhythm: 4-8px inside telemetry rows, 48-96px between clusters, 128px quiet fields on desktop.",
  "density": "Low global density with one high-compression code pocket; large blank zones are active optical camouflage, not unused space.",
  "responsive": "On mobile, retain coordinate labels and contour arcs to keep the shell feeling while reducing code density and moving overlays below the main title; stack to a single column and never overflow horizontally.",
  "breakpoints": {
    "mobile": "<= 640px stacks overlays into one column",
    "tablet": "641-1024px keeps a 6-column grid",
    "desktop": ">= 1025px uses full 12-column asymmetry"
  }
}

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "author": "katagami-agent",
  "generatedBy": "katagami-agent",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": { "id": "", "name": "Glassine", "slug": "glassine" },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": ["button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs", "badge", "separator", "checkbox", "switch", "slider", "tooltip", "dropdown-menu", "table"],
  "identityNotes": [
    "Frame the signal, not the noise: panels are translucent white acrylic with square graphite borders and four tiny corner ticks; the void is active negative space, not unused.",
    "Cyan is scarce — a signal marker, a status pixel, a selected coordinate. Never matrix glow, neon, or RGB gradients.",
    "Optical shell-white ground; display Michroma, body Archivo, mono Azeret Mono; 10px monospace ghost-coordinate folio marks make whitespace read as measured surveillance; one chrome glint on the primary action."
  ],
  "visualProfile": {
    "family": "terminal",
    "material": "glass",
    "contour": "ticks",
    "border": "hairline",
    "underlay": true,
    "grain": false,
    "stickerBadges": false,
    "motion": "resolve",
    "density": "airy",
    "accents": ["accent", "success", "warning"]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "The shell console",
      "viewport": "desktop",
      "primitives": ["button", "card", "input", "select", "tabs", "badge", "separator", "table"],
      "composition": "A calm calibration console: an open masthead (no boxed nav), a metric strip on a hairline grid, an acrylic chart panel with corner ticks and one cyan signal marker, and a channel-trace table with status pills — held in deliberate negative space.",
      "mustShow": ["ink primary action with a chrome glint vs quiet ghost secondary", "translucent acrylic cards with four corner ticks and hairline graphite borders (no heavy borders)", "scarce pale-cyan signal ticks and a cyan-line chart", "10px monospace ghost-coordinate folio marks in empty regions"],
      "avoid": ["saturated neon cyan, magenta, matrix-rain green, RGB gradients", "generic analytics cards or equal three-card rows", "filling every empty region with widgets", "rounded inputs or boxed pill navs"],
      "scene": {
        "eyebrow": "console",
        "headline": "Calibration console",
        "description": "A memory-shell calibration desk: optic resolve over 24h, channel trace, and the void held at 38% as measured negative space.",
        "primaryAction": "Run audit",
        "secondaryAction": "Last 24h",
        "stats": [
          { "label": "optic resolve", "value": "94.2%", "tone": "accent" },
          { "label": "camouflage depth", "value": "71%", "tone": "accent" },
          { "label": "identity drift", "value": "0.4%", "tone": "success" },
          { "label": "void reserve", "value": "38%", "tone": "warning" }
        ],
        "rows": [
          { "coord": "0x4f·a1", "channel": "optic.layer", "status": "resolved" },
          { "coord": "0x4f·b2", "channel": "shell.mount", "status": "live" },
          { "coord": "0x50·c0", "channel": "identity.audit", "status": "coherent" },
          { "coord": "0x50·d9", "channel": "signal.cyan", "status": "scarce" }
        ],
        "statuses": ["Resolved", "Live", "Scarce"]
      }
    },
    {
      "id": "detail-editor",
      "title": "Calibrate a subject shell",
      "viewport": "tablet",
      "primitives": ["button", "card", "input", "textarea", "select", "checkbox", "switch", "slider", "dialog", "sheet"],
      "composition": "A clinical calibration form: mono-labelled fields, a cyan focus ring on inputs, an invalid (rust) signal-threshold state, a scanline-seams switch, a camouflage-depth slider, and a formal run-confirm dialog — set on acrylic with corner ticks.",
      "mustShow": ["cyan focus ring on inputs", "an invalid (rust) state", "run-confirm dialog as a calm clinical notice", "real speculative-tool values (memory-shell, prosthetic-identity)"],
      "avoid": ["unstyled browser controls", "missing labels", "nested cards", "rounded inputs"],
      "scene": {
        "eyebrow": "calibration",
        "headline": "Calibrate — prosthetic-identity-07",
        "description": "A subject-shell form proving mono labels, an invalid signal-threshold state, a scanline toggle, a camouflage slider, and a run confirm.",
        "primaryAction": "Run calibration",
        "secondaryAction": "Hold",
        "fields": [
          { "label": "Subject handle", "value": "prosthetic-identity-07", "type": "text" },
          { "label": "Signal threshold", "value": "— set a cyan threshold before running", "type": "invalid" },
          { "label": "Calibration mode", "value": "Memory-shell audit", "type": "select" },
          { "label": "Scanline seams", "value": "on", "type": "switch" }
        ],
        "statuses": ["Coherent", "Invalid", "Scarce"]
      }
    },
    {
      "id": "data-operations",
      "title": "Channel trace",
      "viewport": "mobile",
      "primitives": ["button", "badge", "table", "tabs", "dropdown-menu", "tooltip", "separator", "switch"],
      "composition": "A single-column trace on mobile that keeps the shell feeling: coordinate folio marks and a contour arc survive, channel rows with status pills, a scanline-seam divider, and a cyan diagnostic tick — code density reduced, void preserved.",
      "mustShow": ["single-column stack with coordinate labels retained", "status pills (resolved / live / scarce)", "scanline-seam separator", "ink primary action with chrome glint"],
      "avoid": ["horizontal overflow", "neon glow", "equal modular cards", "dropped coordinate marks"],
      "scene": {
        "eyebrow": "trace",
        "headline": "Channel trace",
        "description": "The 24h channel trace on a phone: coordinates and the contour arc stay; one cyan tick relocated to 0x50·d9.",
        "primaryAction": "Relocate tick",
        "secondaryAction": "Dismiss",
        "rows": [
          { "coord": "0x4f·a1", "channel": "optic.layer", "status": "resolved" },
          { "coord": "0x4f·b2", "channel": "shell.mount", "status": "live" },
          { "coord": "0x50·d9", "channel": "signal.cyan", "status": "scarce" },
          { "coord": "0x51·e4", "channel": "void.reserve", "status": "held" }
        ],
        "statuses": ["Resolved", "Live", "Scarce"]
      }
    }
  ],
  "componentRecipes": [
    { "primitive": "button", "intent": "Hierarchy: ink primary (with one chrome glint on a single edge) = the emphasis; ghost hairline = secondary; recess = quiet. Square, mono uppercase label, one shared height; a 6px cyan signal dot may trail the primary." },
    { "primitive": "card", "intent": "Translucent white acrylic panel (≈0.62 alpha, 18px backdrop blur) with a hairline graphite border and four tiny corner ticks; square corners. A focal panel earns a single cyan signal mark, never an accent edge." },
    { "primitive": "input", "intent": "Solid white fill, hairline border, mono label above; cyan focus ring (no glow), rust inset when invalid; square corners." },
    { "primitive": "textarea", "intent": "Same focus + invalid rhythm for longer telemetry notes; Archivo, generous, square." },
    { "primitive": "select", "intent": "Calibration-mode picker with a square trigger and a small custom caret; clear selection contrast, no browser default." },
    { "primitive": "dialog", "intent": "A calm clinical 'Run calibration?' notice — centered, square, generous space, hairline border, no glow." },
    { "primitive": "sheet", "intent": "The subject / archive side rail for contextual calibration; acrylic, corner ticks." },
    { "primitive": "tabs", "intent": "Switch Console / Subjects / Trace; the active tab carries a single cyan tick, never a heavy underline rule." },
    { "primitive": "badge", "intent": "Mono uppercase status pills (resolved / live / scarce); supplemental semantic colours, cyan for signal — never visually primary." },
    { "primitive": "separator", "intent": "A 1px scanline diagnostic seam (repeating-linear-gradient), not a solid grey rule." },
    { "primitive": "checkbox", "intent": "Square ink box, white check on check; mono label." },
    { "primitive": "switch", "intent": "Hairline track that fills cyan when on; calm 420ms resolve, no bounce." },
    { "primitive": "slider", "intent": "Camouflage-depth slider: hairline track, cyan fill, square thumb; tabular mono value." },
    { "primitive": "tooltip", "intent": "Small acrylic chip with a coordinate label; appears on resolve, never bouncing." },
    { "primitive": "dropdown-menu", "intent": "Square acrylic menu with corner ticks; hover row tinted faint cyan." },
    { "primitive": "table", "intent": "Channel trace: mono coordinates, tabular numerics, hairline row rules, faint-cyan hover; no zebra warmth." }
  ],
  "qualityRules": {
    "do": [
      "Frame the signal — keep ≥35% of the canvas as active void, made legible by ghost coordinates.",
      "Keep cyan scarce: a signal marker, a status pixel, a selected coordinate.",
      "Use translucent acrylic, hairline graphite borders, and four corner ticks to separate — never heavy borders or accent edges.",
      "Set coordinates, channels, and numerics in mono; display in Michroma, body in Archivo."
    ],
    "dont": [
      "Use neon cyan, magenta, matrix-rain green, RGB gradients, or nightclub glow.",
      "Build generic analytics cards, equal three-card rows, or a boxed pill nav.",
      "Fill every empty region with widgets — the sterile void is the point.",
      "Round terminal corners or solve hierarchy with many accent colours."
    ]
  }
}