Quartz Credential Operating System

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

:root {
  --background: #F7F9F9;
  --foreground: #121820;
  --card: #FEFFFF;
  --card-foreground: #121820;
  --popover: #FEFFFF;
  --popover-foreground: #121820;
  --primary: #101820;
  --primary-foreground: #ffffff;
  --secondary: #536171;
  --secondary-foreground: #ffffff;
  --muted: #687583;
  --muted-foreground: #121820;
  --accent: #00A7C7;
  --accent-foreground: #ffffff;
  --destructive: #A3423B;
  --border: #CDD5DA;
  --input: #CDD5DA;
  --ring: #00A7C7;
  --chart-1: #101820;
  --chart-2: #536171;
  --chart-3: #00A7C7;
  --chart-4: #0E7C86;
  --chart-5: #9A6A18;
  --sidebar: #FEFFFF;
  --sidebar-foreground: #121820;
  --sidebar-primary: #101820;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2B6078;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #CDD5DA;
  --sidebar-ring: #00A7C7;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #101820;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #00A7C7;
  --accent-foreground: #ffffff;
  --destructive: #A3423B;
  --border: #303642;
  --input: #303642;
  --ring: #00A7C7;
  --chart-1: #101820;
  --chart-2: #536171;
  --chart-3: #00A7C7;
  --chart-4: #0E7C86;
  --chart-5: #9A6A18;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #101820;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00A7C7;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #00A7C7;
  --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 QuartzCredentialOperatingSystemShadcnKit() {
  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">Quartz Credential Operating System</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": "quartz-credential-operating-system",
  "type": "registry:theme",
  "title": "Quartz Credential Operating System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F9F9",
      "foreground": "#121820",
      "card": "#FEFFFF",
      "card-foreground": "#121820",
      "popover": "#FEFFFF",
      "popover-foreground": "#121820",
      "primary": "#101820",
      "primary-foreground": "#ffffff",
      "secondary": "#536171",
      "secondary-foreground": "#ffffff",
      "muted": "#687583",
      "muted-foreground": "#121820",
      "accent": "#00A7C7",
      "accent-foreground": "#ffffff",
      "destructive": "#A3423B",
      "border": "#CDD5DA",
      "input": "#CDD5DA",
      "ring": "#00A7C7",
      "chart-1": "#101820",
      "chart-2": "#536171",
      "chart-3": "#00A7C7",
      "chart-4": "#0E7C86",
      "chart-5": "#9A6A18",
      "sidebar": "#FEFFFF",
      "sidebar-foreground": "#121820",
      "sidebar-primary": "#101820",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2B6078",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CDD5DA",
      "sidebar-ring": "#00A7C7",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#101820",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#00A7C7",
      "accent-foreground": "#ffffff",
      "destructive": "#A3423B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#00A7C7",
      "chart-1": "#101820",
      "chart-2": "#536171",
      "chart-3": "#00A7C7",
      "chart-4": "#0E7C86",
      "chart-5": "#9A6A18",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#101820",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00A7C7",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#00A7C7",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "quartz-credential-operating-system",
    "slug": "quartz-credential-operating-system",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

# Quartz Credential Operating System shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `quartz-credential-operating-system`
Slug: `quartz-credential-operating-system`

## Intent

Quartz Credential Operating System is a clinical cybernetic design language for identity assurance, prosthetic calibration, and cold archival verification. It treats the interface as a white-room instrument rather than a dashboard: pale optical surfaces, carbon-ink typography, real hexadecimal credential tokens, and one-bit cyan authentication pulses appear only where trust changes state. The point of view is austere and procedural: every panel feels like a removable acetate sheet from a medical shell manual, with manga-structural linework used for measurement and alignment rather than decoration. It is Optical Shellcode-adjacent in restraint, but its signature is identity assurance through quartz WORM media, forensic memory glass, and precise human-machine calibration.

## 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:

{
  "accent": "#00A7C7",
  "background": "#F7F9F9",
  "border": "#CDD5DA",
  "error": "#A3423B",
  "info": "#2B6078",
  "muted": "#687583",
  "primary": "#101820",
  "secondary": "#536171",
  "success": "#0E7C86",
  "surface": "#FEFFFF",
  "text": "#121820",
  "warning": "#9A6A18"
}

Typography:

{
  "base_size": "16px",
  "body_font": "IBM Plex Sans",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Saira+Condensed:wght@500;600;700&display=swap",
  "heading_font": "Saira Condensed",
  "letter_spacing": "-0.02em",
  "line_height": 1.48,
  "mono_font": "Azeret Mono",
  "scale_ratio": 1.22
}

## Visual character to preserve

- A white optical shell uses 1px carbon and slate hairlines with square corners, clipped notch labels, and no conventional card shadows.
- Credential tokens render as real hexadecimal strings in narrow mono strips, separated by quartz-like vertical rule marks and small checksum boxes.
- Sparse cyan appears as 1-bit authentication pixels, thin underlines, and tiny lock-state bars rather than glowing neon fills.
- Manga-structural calibration linework creates diagonal leader lines, registration ticks, joint arcs, and measurement gutters around the main operating surface.
- The layout pairs one dominant asymmetric diagnostic plane with quiet marginal manuals, leaving at least forty percent of the viewport as cold archive whitespace.

## ShadSync visual profile

{
  "family": "system",
  "material": "flat",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": false,
  "stickerBadges": false,
  "motion": "still",
  "density": "balanced",
  "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/quartz-credential-operating-system/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 real hex credentials such as 0xA17C4E90 and 9F-20-D6-B1 in visible interface examples.; Keep cyan sparse and tied to authentication, verified state, current focus, or active calibration only.; Let hairlines, ruler ticks, and registration marks define structure instead of shadows or colorful cards.; Make one panel clearly dominant and surround it with smaller marginal diagnostic notes.; Use square corners for operating panes; reserve 16px or 24px radius only for rare glass vessels or biometric apertures.; Write labels like clinical manuals: assurance level, checksum, WORM seal, kinematic drift, credential lock.; Preserve white-room negative space even when a section feels empty.
- Do not: Do not use terminal green, matrix rain, skulls, hooded figures, or cyberpunk neon magenta/purple.; Do not create three equal cards in a row, generic SaaS metrics, friendly rounded dashboards, or marketing illustrations.; Do not fill every area with data; dense hacker dashboards violate the operating-room restraint.; Do not use cyan as a background wash, glow, or decorative gradient.; Do not use fake lorem ipsum where credential tokens, assurance states, or calibration values are required.; Do not soften the system with bubbly shadows, emoji, avatars, or playful microcopy.

## 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 QuartzCredentialOperatingSystemShadcnKit() {
  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">Quartz Credential Operating System</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

{
  "breakpoints": "mobile 375px single-column stacked shell; tablet 768px two-zone stack with rail below; desktop 1200px asymmetric 12-column composition.",
  "density": "Sparse clinical canvas with a single compact proof band; negative space is intentional so authentication state remains legible and calm.",
  "grid": "Desktop uses a 12-column grid max-width 1320px with 24px gutters; the main shell spans 8 columns and the manual rail spans 3 with a 1-column breathing gap.",
  "responsive": "At small widths, diagonal leaders collapse into orthogonal ticks, token bands wrap, and marginal manuals become horizontal verification strips.",
  "whitespace": "Minimum 32px exterior padding on desktop, large white intervals between diagnostic groups, and unoccupied optical fields preserved as part of the identity."
}

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "quartz-credential-operating-system",
    "name": "Quartz Credential Operating System",
    "slug": "quartz-credential-operating-system"
  },
  "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": [
    "A white optical shell uses 1px carbon and slate hairlines with square corners, clipped notch labels, and no conventional card shadows.",
    "Credential tokens render as real hexadecimal strings in narrow mono strips, separated by quartz-like vertical rule marks and small checksum boxes.",
    "Sparse cyan appears as 1-bit authentication pixels, thin underlines, and tiny lock-state bars rather than glowing neon fills.",
    "Manga-structural calibration linework creates diagonal leader lines, registration ticks, joint arcs, and measurement gutters around the main operating surface.",
    "The layout pairs one dominant asymmetric diagnostic plane with quiet marginal manuals, leaving at least forty percent of the viewport as cold archive whitespace."
  ],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Quartz Credential Operating System launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Use real hex credentials such as 0xA17C4E90 and 9F-20-D6-B1 in visible interface examples.",
      "Keep cyan sparse and tied to authentication, verified state, current focus, or active calibration only.",
      "Let hairlines, ruler ticks, and registration marks define structure instead of shadows or colorful cards.",
      "Make one panel clearly dominant and surround it with smaller marginal diagnostic notes.",
      "Use square corners for operating panes; reserve 16px or 24px radius only for rare glass vessels or biometric apertures.",
      "Write labels like clinical manuals: assurance level, checksum, WORM seal, kinematic drift, credential lock.",
      "Preserve white-room negative space even when a section feels empty."
    ],
    "dont": [
      "Do not use terminal green, matrix rain, skulls, hooded figures, or cyberpunk neon magenta/purple.",
      "Do not create three equal cards in a row, generic SaaS metrics, friendly rounded dashboards, or marketing illustrations.",
      "Do not fill every area with data; dense hacker dashboards violate the operating-room restraint.",
      "Do not use cyan as a background wash, glow, or decorative gradient.",
      "Do not use fake lorem ipsum where credential tokens, assurance states, or calibration values are required.",
      "Do not soften the system with bubbly shadows, emoji, avatars, or playful microcopy."
    ]
  }
}