Frosted Tints With Steel Structure

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

:root {
  --background: #F7FAFC;
  --foreground: #152231;
  --card: #FFFFFF;
  --card-foreground: #152231;
  --popover: #FFFFFF;
  --popover-foreground: #152231;
  --primary: #1F3142;
  --primary-foreground: #ffffff;
  --secondary: #D9ECF4;
  --secondary-foreground: #111111;
  --muted: #647284;
  --muted-foreground: #152231;
  --accent: #BDEFE4;
  --accent-foreground: #111111;
  --destructive: #9B2F46;
  --border: #A9B7C4;
  --input: #A9B7C4;
  --ring: #BDEFE4;
  --chart-1: #1F3142;
  --chart-2: #D9ECF4;
  --chart-3: #BDEFE4;
  --chart-4: #1F6F5B;
  --chart-5: #8A5B12;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #152231;
  --sidebar-primary: #1F3142;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #285C8F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #A9B7C4;
  --sidebar-ring: #BDEFE4;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #1F3142;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #BDEFE4;
  --accent-foreground: #111111;
  --destructive: #9B2F46;
  --border: #303642;
  --input: #303642;
  --ring: #BDEFE4;
  --chart-1: #1F3142;
  --chart-2: #D9ECF4;
  --chart-3: #BDEFE4;
  --chart-4: #1F6F5B;
  --chart-5: #8A5B12;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #1F3142;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #BDEFE4;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #BDEFE4;
  --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 FrostedTintsWithSteelStructureShadcnKit() {
  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">Frosted Tints With Steel Structure</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": "frosted-tints-steel-structure",
  "type": "registry:theme",
  "title": "Frosted Tints With Steel Structure shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7FAFC",
      "foreground": "#152231",
      "card": "#FFFFFF",
      "card-foreground": "#152231",
      "popover": "#FFFFFF",
      "popover-foreground": "#152231",
      "primary": "#1F3142",
      "primary-foreground": "#ffffff",
      "secondary": "#D9ECF4",
      "secondary-foreground": "#111111",
      "muted": "#647284",
      "muted-foreground": "#152231",
      "accent": "#BDEFE4",
      "accent-foreground": "#111111",
      "destructive": "#9B2F46",
      "border": "#A9B7C4",
      "input": "#A9B7C4",
      "ring": "#BDEFE4",
      "chart-1": "#1F3142",
      "chart-2": "#D9ECF4",
      "chart-3": "#BDEFE4",
      "chart-4": "#1F6F5B",
      "chart-5": "#8A5B12",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#152231",
      "sidebar-primary": "#1F3142",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#285C8F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#A9B7C4",
      "sidebar-ring": "#BDEFE4",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1F3142",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#BDEFE4",
      "accent-foreground": "#111111",
      "destructive": "#9B2F46",
      "border": "#303642",
      "input": "#303642",
      "ring": "#BDEFE4",
      "chart-1": "#1F3142",
      "chart-2": "#D9ECF4",
      "chart-3": "#BDEFE4",
      "chart-4": "#1F6F5B",
      "chart-5": "#8A5B12",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1F3142",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#BDEFE4",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#BDEFE4",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9b4-b606-7bf2-9590-1cd4671f5e36",
    "slug": "frosted-tints-steel-structure",
    "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"
      ]
    }
  }
}

# Frosted Tints With Steel Structure shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate frosted blue, mint, lilac, blush, and pearl into production UI surfaces while steel and ink carry hierarchy, text, and action states.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table from `@/components/ui/*`.

## Token cues
Use dark steel for `primary`, ink for text, pearl for background, white for content wells, steel hairlines for borders, and pale tints only as surface glazes, chips, rails, or focus accents.

## Visual character to preserve
Layer translucent pearl-to-blue panels over steel hairlines; use dark ink capsules for primary actions; divide complex work with fine ledger rules; reserve blush/lilac/mint for small semantic accents.

## ShadSync visual profile
Family: frosted-enterprise. Material: pearl glass over steel. Contour: rounded-rect. Border: cool hairline plus inset glint. Underlay: true. Grain: subtle grid. StickerBadges: restrained. Motion: clarify-lift. Density: medium. Accents: frost blue, mint focus, lilac/blush chips.

## Signature component recipes
- button: primary is deep steel with white label, rounded-full, inset highlight, 3px mint focus ring; secondary is white with steel border.
- card: white or pearl card with border, large radius, offset frosted underlay, and optional 4px mint-blue rail.
- input: white field, steel border, 14px radius, ink text, visible mint focus; placeholders muted steel only.
- textarea: same as input with no tint behind text; use helper text in muted steel.
- select: white field with steel border and dark chevron; selected content never pastel text.
- dialog: white content well over blurred pearl overlay, steel border, dark primary footer action.
- sheet: pearl side panel with steel separators and one frost rail for active section.
- tabs: active tab uses ink text plus mint underline; inactive tabs remain neutral.
- badge: tiny tint backgrounds with ink labels and icons; do not encode status by hue alone.
- separator: 1px steel hairline or 3px accent rail for selected modules.
- checkbox: steel border, deep steel checked fill, mint focus outline.
- switch: off is pearl with steel thumb; on is deep steel track with mint glint.
- slider: steel track, mint active segment, round steel thumb with focus ring.
- tooltip: ink surface with white text and small frost-blue pointer accent.
- dropdown-menu: white well with steel border, selected item uses pale blue background and ink text.
- table: compact steel ledger dividers, mono headers, dark selected row, tint badges only in cells.

## Preview shots
Render application-shell, detail-editor, and data-operations scenes with realistic product content, visible focus states, cards, tables, forms, and chart-safe swatches.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a second component system. Keep all body text on white, pearl, or dark steel surfaces with accessible contrast.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"

export function FrostedTokenCard() {
  return (
    <Card className="relative overflow-hidden rounded-[26px] border border-slate-300 bg-white shadow-lg before:absolute before:inset-y-auto before:-right-2 before:-bottom-2 before:h-24 before:w-1/2 before:rounded-3xl before:bg-gradient-to-br before:from-sky-100 before:to-emerald-100">
      <CardHeader className="border-l-4 border-cyan-300 pl-4">
        <Badge className="w-fit bg-sky-100 text-slate-900 hover:bg-sky-100">WCAG ready</Badge>
        <CardTitle className="text-slate-950">Frost Blue Surface</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <Input placeholder="Semantic token name" className="rounded-2xl border-slate-300 focus-visible:ring-4 focus-visible:ring-cyan-200" />
        <Button className="rounded-full bg-slate-800 text-white shadow-inner hover:bg-slate-700 focus-visible:ring-4 focus-visible:ring-cyan-200">Save role</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to button."
    },
    {
      "component": "card",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to card."
    },
    {
      "component": "input",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to input."
    },
    {
      "component": "textarea",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to textarea."
    },
    {
      "component": "select",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to select."
    },
    {
      "component": "dialog",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to dialog."
    },
    {
      "component": "sheet",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to sheet."
    },
    {
      "component": "tabs",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to tabs."
    },
    {
      "component": "badge",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to badge."
    },
    {
      "component": "separator",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to separator."
    },
    {
      "component": "checkbox",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to checkbox."
    },
    {
      "component": "switch",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to switch."
    },
    {
      "component": "slider",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to slider."
    },
    {
      "component": "tooltip",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to tooltip."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to dropdown-menu."
    },
    {
      "component": "table",
      "recipe": "Use steel borders, ink text, pearl/white content wells, mint focus rings, and restrained tint accents appropriate to table."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoidRules": [
        "no pastel text",
        "no candy gradients"
      ],
      "composition": "Steel navigation rail, frosted hero, token cards, compact ledger table.",
      "id": "application-shell",
      "mustShowStates": [
        "primary button focus",
        "active nav item",
        "selected table row",
        "tint badges"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu",
        "table"
      ],
      "scene": {
        "actions": [
          "Publish tokens",
          "Audit contrast"
        ],
        "description": "Review semantic tint roles while dark steel controls preserve contrast.",
        "eyebrow": "Palette operations",
        "headline": "Frosted token workspace",
        "rows": [
          {
            "constraint": "No body text",
            "primitive": "Frost Blue",
            "role": "Surface tint"
          },
          {
            "constraint": "White label",
            "primitive": "Deep Steel",
            "role": "Primary action"
          }
        ],
        "stats": [
          {
            "label": "AA pairs",
            "value": "42"
          },
          {
            "label": "Tint roles",
            "value": "18"
          },
          {
            "label": "Focus rings",
            "value": "3px"
          }
        ]
      }
    },
    {
      "avoidRules": [
        "no tint behind typed text",
        "no low-contrast helper copy"
      ],
      "composition": "A white editor card with frost rail, right sheet guidance, and accessible field focus.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input",
        "enabled switch",
        "checked checkbox",
        "dialog footer action"
      ],
      "primitives": [
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "button",
        "dialog",
        "sheet"
      ],
      "scene": {
        "actions": [
          "Save role",
          "Open preview"
        ],
        "description": "Fields stay white with steel borders; tint appears as rail and chip only.",
        "eyebrow": "Semantic role editor",
        "fields": [
          {
            "label": "Token",
            "value": "color.frost.blue.100"
          },
          {
            "label": "Usage",
            "value": "Elevation glaze"
          },
          {
            "label": "Contrast note",
            "value": "Pair with ink foreground"
          }
        ],
        "headline": "Assign a tint without losing contrast"
      }
    },
    {
      "avoidRules": [
        "do not rely on hue alone",
        "no saturated rainbow charts"
      ],
      "composition": "Data operations screen with patterned bars, mono headers, steel selected row, and hue-plus-shape status.",
      "id": "data-operations",
      "mustShowStates": [
        "active tab",
        "hover tooltip",
        "open menu",
        "selected row"
      ],
      "primitives": [
        "table",
        "badge",
        "separator",
        "tabs",
        "button",
        "card",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Export audit",
          "Filter rows"
        ],
        "description": "Color is paired with pattern, label, and ink outlines for safe interpretation.",
        "eyebrow": "Chart safety",
        "headline": "Tint families with pattern redundancy",
        "rows": [
          {
            "metric": "Completion",
            "status": "Mint + stripe",
            "value": "42%"
          },
          {
            "metric": "Review",
            "status": "Lilac + dot",
            "value": "31%"
          }
        ],
        "stats": [
          {
            "label": "Patterned series",
            "value": "5"
          },
          {
            "label": "Colorblind checks",
            "value": "Pass"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "frost-blue",
      "mint-focus",
      "lilac-chip",
      "blush-chip",
      "deep-steel-action"
    ],
    "border": "cool-steel-hairline",
    "contour": "rounded-rect",
    "density": "medium",
    "family": "frosted-enterprise",
    "grain": "subtle-grid",
    "material": "pearl-glass-over-steel",
    "motion": "clarify-lift",
    "stickerBadges": "restrained-tint-chips",
    "underlay": true
  }
}