Digital Watercolor Texture System

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: #111111;
  --card: #FFFFFF;
  --card-foreground: #111111;
  --popover: #FFFFFF;
  --popover-foreground: #111111;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #3B3B36;
  --secondary-foreground: #ffffff;
  --muted: #6E6A61;
  --muted-foreground: #111111;
  --accent: #276C8E;
  --accent-foreground: #ffffff;
  --destructive: #A33A32;
  --border: #C9C1B2;
  --input: #C9C1B2;
  --ring: #276C8E;
  --chart-1: #111111;
  --chart-2: #3B3B36;
  --chart-3: #276C8E;
  --chart-4: #3F7A52;
  --chart-5: #B87524;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #111111;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #276C8E;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #C9C1B2;
  --sidebar-ring: #276C8E;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #276C8E;
  --accent-foreground: #ffffff;
  --destructive: #A33A32;
  --border: #303642;
  --input: #303642;
  --ring: #276C8E;
  --chart-1: #111111;
  --chart-2: #3B3B36;
  --chart-3: #276C8E;
  --chart-4: #3F7A52;
  --chart-5: #B87524;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #276C8E;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #276C8E;
  --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 DigitalWatercolorTextureSystemShadcnKit() {
  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">Digital Watercolor Texture 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": "digital-watercolor-texture-system",
  "type": "registry:theme",
  "title": "Digital Watercolor Texture System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#111111",
      "card": "#FFFFFF",
      "card-foreground": "#111111",
      "popover": "#FFFFFF",
      "popover-foreground": "#111111",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#3B3B36",
      "secondary-foreground": "#ffffff",
      "muted": "#6E6A61",
      "muted-foreground": "#111111",
      "accent": "#276C8E",
      "accent-foreground": "#ffffff",
      "destructive": "#A33A32",
      "border": "#C9C1B2",
      "input": "#C9C1B2",
      "ring": "#276C8E",
      "chart-1": "#111111",
      "chart-2": "#3B3B36",
      "chart-3": "#276C8E",
      "chart-4": "#3F7A52",
      "chart-5": "#B87524",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#276C8E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#C9C1B2",
      "sidebar-ring": "#276C8E",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#276C8E",
      "accent-foreground": "#ffffff",
      "destructive": "#A33A32",
      "border": "#303642",
      "input": "#303642",
      "ring": "#276C8E",
      "chart-1": "#111111",
      "chart-2": "#3B3B36",
      "chart-3": "#276C8E",
      "chart-4": "#3F7A52",
      "chart-5": "#B87524",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#276C8E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#276C8E",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "digital-watercolor-texture-system",
    "slug": "digital-watercolor-texture-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": {
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "paper_fiber",
        "pigment_grain",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning",
        "wash_blue",
        "wash_ochre",
        "wash_rose"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "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"
      ]
    }
  }
}

# Digital Watercolor Texture System shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `digital-watercolor-texture-system`
Slug: `digital-watercolor-texture-system`

## Intent

Digital Watercolor Texture System translates the physical behavior of transparent pigment on paper into a controlled interface and brand-illustration language. It treats watercolor not as a pastel mood board, but as a material system: translucent washes reveal layers below, granulated pigment creates quiet data texture, paper fibers become the surface logic, and restrained splashes mark moments of emphasis. The language is built for product screens that need warmth without losing precision: editorial dashboards, creative workflow tools, illustration asset libraries, and brand storytelling interfaces where hand-made evidence should coexist with clear hierarchy.

## 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": "#111111",
  "secondary": "#3B3B36",
  "accent": "#276C8E",
  "background": "#FFFFFF",
  "surface": "#FFFFFF",
  "text": "#111111",
  "muted": "#6E6A61",
  "border": "#C9C1B2",
  "error": "#A33A32",
  "success": "#3F7A52",
  "warning": "#B87524",
  "info": "#276C8E",
  "paper_fiber": "#E8E1D4",
  "wash_blue": "#D9EEF5",
  "wash_ochre": "#F2E1C6",
  "wash_rose": "#E8C9C3",
  "pigment_grain": "#5A6D73"
}

Typography:

{
  "heading_font": "Fraunces",
  "body_font": "IBM Plex Sans",
  "mono_font": "IBM Plex Mono",
  "base_size": "16px",
  "scale_ratio": 1.25,
  "line_height": 1.5,
  "letter_spacing": "-0.02em",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650;9..144,750&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
}

## Visual character to preserve

- Pure white paper field with a CSS grain overlay made from radial noise dots and faint linear fibers on every major surface.
- Cards and dialogs use translucent wash fills with multiply-like layered pseudo-elements, showing soft uneven pigment density at edges.
- Section dividers and selected states use dry-brush 2px strokes built from dashed borders plus masked repeating-linear texture.
- Accent moments use small restrained splatter clusters and feathered bloom halos positioned near badges, alerts, and primary actions.
- Negative-space masks create irregular torn-wash corners on illustration panels while keeping UI containers on a disciplined 16px radius scale.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "blob",
  "border": "dashed",
  "underlay": true,
  "grain": true,
  "stickerBadges": true,
  "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/digital-watercolor-texture-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 pure #FFFFFF as the base paper and add texture through subtle overlays, not tinted backgrounds.; Build color through transparent wash layers with opacity between 0.08 and 0.22 so underlying typography remains crisp.; Reserve #276C8E accent for primary actions, active states, and a few splatter details; let black ink carry most hierarchy.; Apply -0.02em letter spacing globally and use Fraunces only for expressive headings or artwork titles.; Keep border radii on the strict 16px/24px/9999px scale and use 16px for most cards and controls.; Make texture functional: use dry-brush strokes for selected states, halos for emphasis, and paper grain for surface continuity.; Wrap dense tables on small screens in an overflow container while preserving ink rules and zebra wash rows.; Test contrast over every wash layer; text should sit on white or extremely low-opacity pigment.
- Do not: Do not use gradient buttons, rainbow washes, glossy glow cards, or colorful landing-page effects.; Do not use pastel panel backgrounds as the main identity; watercolor texture should be layered over white paper.; Do not scatter splatters everywhere; more than one cluster per panel makes the interface feel messy.; Do not use random radii such as 8px, 12px, 20px, 32px, or 48px.; Do not let texture reduce readability in forms, tables, modal content, or disabled states.; Do not create a component catalog layout; components must appear inside a believable illustration workflow scene.; Do not rely on default select, checkbox, radio, or button styling.; Do not use Poppins, Montserrat, DM Sans, Roboto, or Space Grotesk.

## 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 DigitalWatercolorTextureSystemShadcnKit() {
  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">Digital Watercolor Texture 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

{
  "density": "Medium editorial density: spacious presentation areas with compact but legible operational controls. The texture needs room to breathe, so avoid edge-to-edge packed cards.",
  "grid": "Desktop uses a 12-column max-width 1320px grid with 24px gutters; the workspace splits into a 280px palette sidebar, a central illustration review canvas, and a right inspection/data column. Tablet reduces to 8 columns and stacks the inspector below the canvas. Mobile uses one column with 16px page gutters and horizontal scroll only inside the data table.",
  "breakpoints": "Desktop >= 1200px, tablet at 1024px and 768px, phone at 480px. At <=1024px sidebars collapse into stacked panels; at <=480px all actions become full-width and dialogs fit within 92vw.",
  "whitespace": "Whitespace behaves like untouched paper. Important content is framed by open white margins, while washes sit behind content as translucent zones rather than filled blocks."
}

{
  "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": "digital-watercolor-texture-system",
    "name": "Digital Watercolor Texture System",
    "slug": "digital-watercolor-texture-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": [
    "Pure white paper field with a CSS grain overlay made from radial noise dots and faint linear fibers on every major surface.",
    "Cards and dialogs use translucent wash fills with multiply-like layered pseudo-elements, showing soft uneven pigment density at edges.",
    "Section dividers and selected states use dry-brush 2px strokes built from dashed borders plus masked repeating-linear texture.",
    "Accent moments use small restrained splatter clusters and feathered bloom halos positioned near badges, alerts, and primary actions.",
    "Negative-space masks create irregular torn-wash corners on illustration panels while keeping UI containers on a disciplined 16px radius scale."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "blob",
    "border": "dashed",
    "underlay": true,
    "grain": true,
    "stickerBadges": true,
    "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": "Digital Watercolor Texture 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 pure #FFFFFF as the base paper and add texture through subtle overlays, not tinted backgrounds.",
      "Build color through transparent wash layers with opacity between 0.08 and 0.22 so underlying typography remains crisp.",
      "Reserve #276C8E accent for primary actions, active states, and a few splatter details; let black ink carry most hierarchy.",
      "Apply -0.02em letter spacing globally and use Fraunces only for expressive headings or artwork titles.",
      "Keep border radii on the strict 16px/24px/9999px scale and use 16px for most cards and controls.",
      "Make texture functional: use dry-brush strokes for selected states, halos for emphasis, and paper grain for surface continuity.",
      "Wrap dense tables on small screens in an overflow container while preserving ink rules and zebra wash rows.",
      "Test contrast over every wash layer; text should sit on white or extremely low-opacity pigment."
    ],
    "dont": [
      "Do not use gradient buttons, rainbow washes, glossy glow cards, or colorful landing-page effects.",
      "Do not use pastel panel backgrounds as the main identity; watercolor texture should be layered over white paper.",
      "Do not scatter splatters everywhere; more than one cluster per panel makes the interface feel messy.",
      "Do not use random radii such as 8px, 12px, 20px, 32px, or 48px.",
      "Do not let texture reduce readability in forms, tables, modal content, or disabled states.",
      "Do not create a component catalog layout; components must appear inside a believable illustration workflow scene.",
      "Do not rely on default select, checkbox, radio, or button styling.",
      "Do not use Poppins, Montserrat, DM Sans, Roboto, or Space Grotesk."
    ]
  }
}