Quiet Grid Minimalism

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

:root {
  --background: #FFFFFF;
  --foreground: #000000;
  --card: #FFFFFF;
  --card-foreground: #000000;
  --popover: #FFFFFF;
  --popover-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #ffffff;
  --secondary: #2B2B2B;
  --secondary-foreground: #ffffff;
  --muted: #6F6F6F;
  --muted-foreground: #000000;
  --accent: #0057FF;
  --accent-foreground: #ffffff;
  --destructive: #C1121F;
  --border: #D8D8D8;
  --input: #D8D8D8;
  --ring: #0057FF;
  --chart-1: #000000;
  --chart-2: #2B2B2B;
  --chart-3: #0057FF;
  --chart-4: #137333;
  --chart-5: #A05A00;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #000000;
  --sidebar-primary: #000000;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #0057FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D8D8D8;
  --sidebar-ring: #0057FF;
  --radius: 0px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #000000;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #0057FF;
  --accent-foreground: #ffffff;
  --destructive: #C1121F;
  --border: #303642;
  --input: #303642;
  --ring: #0057FF;
  --chart-1: #000000;
  --chart-2: #2B2B2B;
  --chart-3: #0057FF;
  --chart-4: #137333;
  --chart-5: #A05A00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #000000;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #0057FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #0057FF;
  --radius: 0px;
}

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 QuietGridMinimalismShadcnKit() {
  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">Quiet Grid Minimalism</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": "quiet-grid-minimalism",
  "type": "registry:theme",
  "title": "Quiet Grid Minimalism shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#000000",
      "card": "#FFFFFF",
      "card-foreground": "#000000",
      "popover": "#FFFFFF",
      "popover-foreground": "#000000",
      "primary": "#000000",
      "primary-foreground": "#ffffff",
      "secondary": "#2B2B2B",
      "secondary-foreground": "#ffffff",
      "muted": "#6F6F6F",
      "muted-foreground": "#000000",
      "accent": "#0057FF",
      "accent-foreground": "#ffffff",
      "destructive": "#C1121F",
      "border": "#D8D8D8",
      "input": "#D8D8D8",
      "ring": "#0057FF",
      "chart-1": "#000000",
      "chart-2": "#2B2B2B",
      "chart-3": "#0057FF",
      "chart-4": "#137333",
      "chart-5": "#A05A00",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#000000",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0057FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8D8D8",
      "sidebar-ring": "#0057FF",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#000000",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#0057FF",
      "accent-foreground": "#ffffff",
      "destructive": "#C1121F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#0057FF",
      "chart-1": "#000000",
      "chart-2": "#2B2B2B",
      "chart-3": "#0057FF",
      "chart-4": "#137333",
      "chart-5": "#A05A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0057FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#0057FF",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "quiet-grid-minimalism",
    "slug": "quiet-grid-minimalism",
    "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",
        "background",
        "border",
        "disabled",
        "error",
        "info",
        "muted",
        "primary",
        "rule_dark",
        "rule_light",
        "secondary",
        "subtle",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "sizes",
        "weights"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}

# Quiet Grid Minimalism shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `quiet-grid-minimalism`
Slug: `quiet-grid-minimalism`

## Intent

Quiet Grid Minimalism is an interface language for tools that want to feel deliberate, legible, and almost silent. It removes decorative persuasion so that structure, alignment, typography, and content order become the visual system. The language treats whitespace as a working material: not empty space, but a calibrated pause that separates decisions, clarifies hierarchy, and gives important content room to breathe. It is minimalist without becoming anonymous by relying on severe geometric alignment, visible grid discipline, rectangular material honesty, and restrained semantic color.

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

{
  "primary": "#000000",
  "secondary": "#2B2B2B",
  "accent": "#0057FF",
  "background": "#FFFFFF",
  "surface": "#FFFFFF",
  "text": "#000000",
  "muted": "#6F6F6F",
  "border": "#D8D8D8",
  "error": "#C1121F",
  "success": "#137333",
  "warning": "#A05A00",
  "info": "#0057FF",
  "rule_dark": "#000000",
  "rule_light": "#E8E8E8",
  "subtle": "#F7F7F7",
  "disabled": "#B8B8B8"
}

Typography:

{
  "heading_font": "IBM Plex Sans",
  "body_font": "IBM Plex Sans",
  "mono_font": "IBM Plex Mono",
  "base_size": "16px",
  "scale_ratio": 1.25,
  "line_height": 1.45,
  "letter_spacing": "-0.02em",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap",
  "sizes": {
    "xs": "12px",
    "sm": "14px",
    "base": "16px",
    "md": "20px",
    "lg": "25px",
    "xl": "31px",
    "xxl": "48px"
  },
  "weights": {
    "regular": 400,
    "medium": 500,
    "semibold": 600,
    "bold": 700
  }
}

## Visual character to preserve

- Pure white canvas with flat #FFFFFF panels separated by 1px black or grey rule lines, never by shadows or tinted cards.
- Large measured whitespace using 48px to 96px section gaps and sparse grid gutters so negative space becomes the main composition device.
- Square 0px-radius rectangular controls and panels with crisp aligned edges to express geometric reduction and material honesty.
- Tight typographic system with -0.02em letter spacing on all text, strong size contrast, and restrained weights rather than decorative styling.
- Semantic color appears only as thin state indicators, focus rings, selected rows, and compact status marks; default UI stays monochrome.

## ShadSync visual profile

{
  "family": "system",
  "material": "flat",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "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/quiet-grid-minimalism/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: Start every screen in black, white, and grey; add the blue accent only after assigning a semantic purpose.; Use 0px radius on all panels, inputs, cards, and buttons; reserve 9999px only for small status pills or avatars.; Apply -0.02em letter spacing globally and rely on IBM Plex Sans weight changes for hierarchy.; Separate groups with whitespace before adding borders; add a rule line only when the relationship needs precision.; Make focus states visibly accessible with 2px blue outlines or inset rules that do not disturb layout.; Keep labels short, tables sparse, and status language factual.; Right-align numeric data and use IBM Plex Mono for times, counts, IDs, and compact metadata.; Let one area of the desktop layout remain intentionally quiet to preserve the minimalist rhythm.
- Do not: Do not use gradients, pastel backgrounds, glassmorphism, decorative blobs, or textured surfaces.; Do not use shadows to create depth; use spacing, alignment, and rule lines instead.; Do not introduce rounded card radii such as 8px, 12px, 20px, 32px, or 48px.; Do not color buttons, badges, or charts unless the color communicates state or selection.; Do not center everything; disciplined left alignment is the default.; Do not create component-catalog screens with sample controls unrelated to a real workflow.; Do not pack actions into every corner; expose the next likely decision and hide secondary options.; Do not use playful icon sets, emoji, or illustration to soften the interface.

## 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 QuietGridMinimalismShadcnKit() {
  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">Quiet Grid Minimalism</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

{
  "density": "Quiet medium-low density chosen to make professional tools feel calm while preserving fast scanning in tables and status lists.",
  "grid": "Desktop uses a 12-column grid with 32px gutters and a max content width of 1280px. Main scenes reserve one empty or low-density column group as negative space. Panels align to 4-column and 8-column spans.",
  "whitespace": "Whitespace is the primary separator: 48px between modules, 64px to 96px between major sections, and 24px to 32px inside panels. Avoid cramped decorative minimalism.",
  "breakpoints": {
    "desktop": "1024px and above: 12 columns with deliberate empty gutter",
    "tablet": "768px to 1023px: 6 columns, panels reflow into two stacked regions",
    "mobile": "480px and below: single column, full-width controls, table scroll only where unavoidable"
  }
}

{
  "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": "quiet-grid-minimalism",
    "name": "Quiet Grid Minimalism",
    "slug": "quiet-grid-minimalism"
  },
  "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": [
    "Pure white canvas with flat #FFFFFF panels separated by 1px black or grey rule lines, never by shadows or tinted cards.",
    "Large measured whitespace using 48px to 96px section gaps and sparse grid gutters so negative space becomes the main composition device.",
    "Square 0px-radius rectangular controls and panels with crisp aligned edges to express geometric reduction and material honesty.",
    "Tight typographic system with -0.02em letter spacing on all text, strong size contrast, and restrained weights rather than decorative styling.",
    "Semantic color appears only as thin state indicators, focus rings, selected rows, and compact status marks; default UI stays monochrome."
  ],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "dense",
    "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": "Quiet Grid Minimalism 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": [
      "Start every screen in black, white, and grey; add the blue accent only after assigning a semantic purpose.",
      "Use 0px radius on all panels, inputs, cards, and buttons; reserve 9999px only for small status pills or avatars.",
      "Apply -0.02em letter spacing globally and rely on IBM Plex Sans weight changes for hierarchy.",
      "Separate groups with whitespace before adding borders; add a rule line only when the relationship needs precision.",
      "Make focus states visibly accessible with 2px blue outlines or inset rules that do not disturb layout.",
      "Keep labels short, tables sparse, and status language factual.",
      "Right-align numeric data and use IBM Plex Mono for times, counts, IDs, and compact metadata.",
      "Let one area of the desktop layout remain intentionally quiet to preserve the minimalist rhythm."
    ],
    "dont": [
      "Do not use gradients, pastel backgrounds, glassmorphism, decorative blobs, or textured surfaces.",
      "Do not use shadows to create depth; use spacing, alignment, and rule lines instead.",
      "Do not introduce rounded card radii such as 8px, 12px, 20px, 32px, or 48px.",
      "Do not color buttons, badges, or charts unless the color communicates state or selection.",
      "Do not center everything; disciplined left alignment is the default.",
      "Do not create component-catalog screens with sample controls unrelated to a real workflow.",
      "Do not pack actions into every corner; expose the next likely decision and hide secondary options.",
      "Do not use playful icon sets, emoji, or illustration to soften the interface."
    ]
  }
}