Sequence Glass Product System

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

:root {
  --background: #F8FBFC;
  --foreground: #102033;
  --card: #FFFFFF;
  --card-foreground: #102033;
  --popover: #FFFFFF;
  --popover-foreground: #102033;
  --primary: #123A7A;
  --primary-foreground: #ffffff;
  --secondary: #0B6B72;
  --secondary-foreground: #ffffff;
  --muted: #697B8C;
  --muted-foreground: #102033;
  --accent: #12BFA7;
  --accent-foreground: #ffffff;
  --destructive: #C2413D;
  --border: #D9E7EE;
  --input: #D9E7EE;
  --ring: #12BFA7;
  --chart-1: #123A7A;
  --chart-2: #0B6B72;
  --chart-3: #12BFA7;
  --chart-4: #16885B;
  --chart-5: #B7791F;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #102033;
  --sidebar-primary: #123A7A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2563B8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D9E7EE;
  --sidebar-ring: #12BFA7;
  --radius: 14px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #123A7A;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #12BFA7;
  --accent-foreground: #ffffff;
  --destructive: #C2413D;
  --border: #303642;
  --input: #303642;
  --ring: #12BFA7;
  --chart-1: #123A7A;
  --chart-2: #0B6B72;
  --chart-3: #12BFA7;
  --chart-4: #16885B;
  --chart-5: #B7791F;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #123A7A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #12BFA7;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #12BFA7;
  --radius: 14px;
}

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 SequenceGlassProductSystemShadcnKit() {
  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">Sequence Glass Product 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": "sequence-glass-product-system",
  "type": "registry:theme",
  "title": "Sequence Glass Product System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F8FBFC",
      "foreground": "#102033",
      "card": "#FFFFFF",
      "card-foreground": "#102033",
      "popover": "#FFFFFF",
      "popover-foreground": "#102033",
      "primary": "#123A7A",
      "primary-foreground": "#ffffff",
      "secondary": "#0B6B72",
      "secondary-foreground": "#ffffff",
      "muted": "#697B8C",
      "muted-foreground": "#102033",
      "accent": "#12BFA7",
      "accent-foreground": "#ffffff",
      "destructive": "#C2413D",
      "border": "#D9E7EE",
      "input": "#D9E7EE",
      "ring": "#12BFA7",
      "chart-1": "#123A7A",
      "chart-2": "#0B6B72",
      "chart-3": "#12BFA7",
      "chart-4": "#16885B",
      "chart-5": "#B7791F",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#102033",
      "sidebar-primary": "#123A7A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2563B8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D9E7EE",
      "sidebar-ring": "#12BFA7",
      "radius": "14px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#123A7A",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#12BFA7",
      "accent-foreground": "#ffffff",
      "destructive": "#C2413D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#12BFA7",
      "chart-1": "#123A7A",
      "chart-2": "#0B6B72",
      "chart-3": "#12BFA7",
      "chart-4": "#16885B",
      "chart-5": "#B7791F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#123A7A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#12BFA7",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#12BFA7",
      "radius": "14px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e4bd5-5b05-7441-8ded-d4c6e7d6f782",
    "slug": "sequence-glass-product-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"
      ]
    }
  }
}

# shadcn/ui Components for Sequence Glass Product System

Author: `katagami-agent`

## ShadSync visual profile
Family: clinical genomics product UI. Material: white glass cards on ice-neutral canvas. Contour: 18px cards, 14px controls, 10px sequence chips, pill badges. Border: blue-tinted 1px hairlines with full-outline indigo/turquoise focus rings. Accents: sparse rounded nucleotide chips placed inside cards and active controls only.

## Signature component recipes
### `button`
Use `<Button>` with 14px radius, primary indigo fill, white text, 1px primary border, and an optional trailing Fragment Mono base-pair chip such as `GC`. Secondary buttons stay white with blue hairline borders.
### `card`
Use `<Card>` as an 18px white glass panel with `border-[#D9E7EE]`, soft cool shadow, 24px padding, and one clipped sequence-chip strand only when the card represents genomic evidence.
### `input`
Use input with white surface, 14px radius, blue-tinted border, Fragment Mono helper tags for sample IDs, and complete turquoise focus outline; never use underline-only fields.
### `textarea`
Use textarea with white surface, 14px radius, blue-tinted border, Fragment Mono helper tags for sample IDs, and complete turquoise focus outline; never use underline-only fields.
### `select`
Use select with white surface, 14px radius, blue-tinted border, Fragment Mono helper tags for sample IDs, and complete turquoise focus outline; never use underline-only fields.
### `dialog`
Use dialog as a calm clinical review surface with 18px radius, white/ice layering, variant metadata rows, and restrained internal chip accents, not decorative side rails.
### `sheet`
Use sheet as a calm clinical review surface with 18px radius, white/ice layering, variant metadata rows, and restrained internal chip accents, not decorative side rails.
### `tabs`
Use pill-like tabs with active full-outline indigo state and tiny filled sequence-chip marks beside active genomic workflows.
### `badge`
Use 9999px capsules for base-pair tags, QC states, and cohort labels; text uses Fragment Mono at 11-12px.
### `separator`
Use a 1px blue-tinted hairline with generous whitespace, never dotted or grid-textured dividers.
### `checkbox`
Use compact controls with turquoise activation, complete outline focus, and no neon glow; switch thumbs remain clean white.
### `switch`
Use compact controls with turquoise activation, complete outline focus, and no neon glow; switch thumbs remain clean white.
### `slider`
Use compact controls with turquoise activation, complete outline focus, and no neon glow; switch thumbs remain clean white.
### `tooltip`
Use white elevated surfaces with 14px radius, blue hairline borders, subtle shadow, and concise clinical copy.
### `dropdown-menu`
Use white elevated surfaces with 14px radius, blue hairline borders, subtle shadow, and concise clinical copy.
### `table`
Use row cards or softly separated rows for sequence data, with Fragment Mono variant IDs and right-aligned QC outcomes.

## Preview shots
- `application-shell`: cohort review overview with hero variant decision card and asymmetric sequence panel.
- `detail-editor`: variant detail form with fields, tabs, mono base-pair tags, and review actions.
- `data-operations`: QC table and sliders/switches for sequence-quality thresholds.

## 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 { Table, TableBody, TableCell, TableRow } from "@/components/ui/table"

export function SequenceGlassReviewCard() {
  return (
    <Card className="rounded-[18px] border-[#D9E7EE] bg-white shadow-[0_14px_40px_rgba(18,58,122,0.10)]">
      <CardHeader><Badge className="w-fit rounded-full bg-[#12BFA7]/10 font-mono text-[#0B6B72]">BRCA2 · GC</Badge><CardTitle className="text-[#123A7A]">Variant evidence review</CardTitle></CardHeader>
      <CardContent className="space-y-4"><Table><TableBody><TableRow><TableCell className="font-mono">TP53-219</TableCell><TableCell>High confidence match</TableCell><TableCell className="text-right text-[#16885B]">Clear</TableCell></TableRow></TableBody></Table><Button className="rounded-[14px] bg-[#123A7A]">Approve sequence match</Button></CardContent>
    </Card>
  )
}
```

{
  "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": "en-019e4bd5-5b05-7441-8ded-d4c6e7d6f782",
    "name": "Sequence Glass Product System",
    "slug": "sequence-glass-product-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": [
    "White-to-ice neutral application canvas with large unboxed whitespace fields and soft glass cards using one committed 18px radius geometry.",
    "Pixel DNA motifs built from tiny rounded-rectangle sequence chips, stepped nucleotide blocks, and short quantized strand clusters placed inside product components only.",
    "Hairline borders use blue-tinted low-opacity strokes with occasional inset luminous focus rings rather than grey default outlines or colored side stripes.",
    "Headers and hero modules use asymmetric product composition: one strong left content column balanced by a floating genomic micro-illustration panel that breaks the strict grid.",
    "Interactive controls use compact pill geometry, crisp mono sequence labels, and structural hover states that raise borders, fills, and chip density instead of decorative shadows."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "pebble",
    "border": "solid",
    "underlay": false,
    "grain": true,
    "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": "Sequence Glass Product 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 white and ice-neutral surfaces as the primary material, with blue/indigo/turquoise/green reserved for action, focus, and genomic sequence meaning.",
      "Express DNA through short modular sequence blocks, chips, tiny labels, quantized strands, and precise micro-illustrations inside components.",
      "Keep borders as deliberate blue-tinted hairlines with full outline focus states and consistent 18px card geometry.",
      "Build plausible product scenes around genomic review, cohort matching, sequence quality, or health insight workflows."
    ],
    "dont": [
      "Do not use square-grid backgrounds, repeated dotted texture, literal helix wallpaper, molecule decorations, or science textbook diagrams.",
      "Do not add decorative left rails, card stripes, colored side borders, chipped corners, uneven borders, rainbow status sprawl, or neon cyberpunk glows.",
      "Do not make a generic dashboard or component catalog; every screen needs product-specific genomics labels and decisions.",
      "Do not let pixel styling become retro game skin; chips must remain subtle, precise, and product-native."
    ]
  }
}