Sequence Ribbon 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: #FAFBFC;
  --foreground: #172033;
  --card: #FFFFFF;
  --card-foreground: #172033;
  --popover: #FFFFFF;
  --popover-foreground: #172033;
  --primary: #3157D5;
  --primary-foreground: #ffffff;
  --secondary: #0F766E;
  --secondary-foreground: #ffffff;
  --muted: #687386;
  --muted-foreground: #172033;
  --accent: #20C7B5;
  --accent-foreground: #ffffff;
  --destructive: #D94B5A;
  --border: #DDE5EE;
  --input: #DDE5EE;
  --ring: #20C7B5;
  --chart-1: #3157D5;
  --chart-2: #0F766E;
  --chart-3: #20C7B5;
  --chart-4: #0B9A7A;
  --chart-5: #C78019;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #172033;
  --sidebar-primary: #3157D5;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2672E8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #DDE5EE;
  --sidebar-ring: #20C7B5;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #3157D5;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #20C7B5;
  --accent-foreground: #ffffff;
  --destructive: #D94B5A;
  --border: #303642;
  --input: #303642;
  --ring: #20C7B5;
  --chart-1: #3157D5;
  --chart-2: #0F766E;
  --chart-3: #20C7B5;
  --chart-4: #0B9A7A;
  --chart-5: #C78019;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #3157D5;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #20C7B5;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #20C7B5;
  --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 SequenceRibbonProductSystemShadcnKit() {
  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 Ribbon 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-ribbon-product-system",
  "type": "registry:theme",
  "title": "Sequence Ribbon Product System shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FAFBFC",
      "foreground": "#172033",
      "card": "#FFFFFF",
      "card-foreground": "#172033",
      "popover": "#FFFFFF",
      "popover-foreground": "#172033",
      "primary": "#3157D5",
      "primary-foreground": "#ffffff",
      "secondary": "#0F766E",
      "secondary-foreground": "#ffffff",
      "muted": "#687386",
      "muted-foreground": "#172033",
      "accent": "#20C7B5",
      "accent-foreground": "#ffffff",
      "destructive": "#D94B5A",
      "border": "#DDE5EE",
      "input": "#DDE5EE",
      "ring": "#20C7B5",
      "chart-1": "#3157D5",
      "chart-2": "#0F766E",
      "chart-3": "#20C7B5",
      "chart-4": "#0B9A7A",
      "chart-5": "#C78019",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#172033",
      "sidebar-primary": "#3157D5",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2672E8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#DDE5EE",
      "sidebar-ring": "#20C7B5",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#3157D5",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#20C7B5",
      "accent-foreground": "#ffffff",
      "destructive": "#D94B5A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#20C7B5",
      "chart-1": "#3157D5",
      "chart-2": "#0F766E",
      "chart-3": "#20C7B5",
      "chart-4": "#0B9A7A",
      "chart-5": "#C78019",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#3157D5",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#20C7B5",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#20C7B5",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e4bd4-3cfa-7d90-9ffd-bcdd6432c202",
    "slug": "sequence-ribbon-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",
        "accent_foreground",
        "background",
        "border",
        "error",
        "foreground",
        "info",
        "muted",
        "primary",
        "primary_foreground",
        "secondary",
        "secondary_foreground",
        "success",
        "surface",
        "surface_alt",
        "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"
      ]
    }
  }
}

# Sequence Ribbon Product System shadcn/ui Components

Author: `katagami-agent`

## ShadSync visual profile

Family: sequence-ribbon genomic product UI. Material: porcelain application surfaces on a pale blue-gray underlay. Contour: broad rounded workplanes, 16px controls, full capsule data chips. Border: 1px cool-gray hairlines with occasional inset indigo focus rings. Accent: turquoise appears only for confirmation, active sequence ticks, and selected data states. Motion: 180ms quantized lifts and one-step base-ribbon advancement; never spinning helix animation.

## Signature component recipes

### button

Primary buttons use indigo fill with white text, 16px radius, 2px indigo focus ring, and two inset turquoise base ticks on active/confirm states; secondary buttons stay white with cool border.

Use shadcn primitive `button` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### card

Large 24px porcelain workplanes with 1px cool border, low blue-gray shadow, clipped header/footer sequence ribbon, and optional floating inspector overlap.

Use shadcn primitive `card` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### input

White input with 16px radius, cool border, mono metadata label, indigo focus ring, and two embedded turquoise ticks inside the right edge when validated.

Use shadcn primitive `input` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### textarea

Use textarea with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `textarea` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### select

Use select with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `select` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### dialog

Use dialog with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `dialog` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### sheet

Use sheet with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `sheet` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### tabs

Pill tabs with mono labels; active tab uses turquoise wash and indigo bottom micro-tick, never a full stripe rail.

Use shadcn primitive `tabs` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### badge

Rounded mono nucleobase capsules in cool tonal blue/teal states; use sparingly as data chips, not rainbow legends.

Use shadcn primitive `badge` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### separator

Use separator with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `separator` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### checkbox

Use checkbox with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `checkbox` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### switch

Use switch with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `switch` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### slider

Use slider with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `slider` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### tooltip

Use tooltip with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `tooltip` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### dropdown-menu

Use dropdown-menu with porcelain surface, cool gray hairline border, 16px control radius, indigo focus ring, and tiny turquoise sequence-tick accent where state is active.

Use shadcn primitive `dropdown-menu` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

### table

Sparse genomic table with mono base/call columns, white rows, cool hairlines, active row underlay in blue-gray, and no zebra stripes.

Use shadcn primitive `table` with theme variables `--background`, `--foreground`, `--primary`, `--accent`, `--border`, and `--ring`.

## Preview shots

- `application-shell`: dominant sequence inspection workplane, compact queue rail, and floating strand inspector.
- `detail-editor`: genomic call form with indigo focus edge and validated turquoise ticks.
- `data-operations`: table and filter controls for variant operations with sparse sequence chips.

## Copy-paste component example

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function SequenceRibbonPanel() {
  const bases = ["A", "C", "G", "T", "G", "A"]
  return (
    <Card className="rounded-[24px] border-[#DDE5EE] bg-white shadow-[0_16px_42px_rgba(31,55,93,0.10)]">
      <CardHeader className="space-y-3">
        <Badge className="w-fit rounded-full bg-[#DDF8F4] font-mono text-[#0F766E]">active locus</Badge>
        <CardTitle className="font-[Manrope] text-3xl tracking-[-0.04em]">BRCA panel review</CardTitle>
      </CardHeader>
      <CardContent className="space-y-5">
        <div className="flex gap-2">{bases.map((base, index) => (
          <span key={index} className="grid h-10 w-10 place-items-center rounded-[10px] border border-[#DDE5EE] bg-[#FAFBFC] font-mono text-sm font-semibold text-[#3157D5]">{base}</span>
        ))}</div>
        <Tabs defaultValue="call"><TabsList className="rounded-full"><TabsTrigger value="call">Call</TabsTrigger><TabsTrigger value="qc">QC</TabsTrigger></TabsList></Tabs>
        <Input className="rounded-[16px] border-[#DDE5EE] focus-visible:ring-[#3157D5]" placeholder="Reviewer note" />
        <Button className="rounded-[16px] bg-[#3157D5] text-white hover:bg-[#2448BE]">Confirm sequence</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-019e4bd4-3cfa-7d90-9ffd-bcdd6432c202",
    "name": "Sequence Ribbon Product System",
    "slug": "sequence-ribbon-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 and porcelain surfaces use 1px cool-gray borders, broad 24px radii, and very low shadows to create a calm product shell.",
    "DNA is abstracted as horizontal sequence ribbons made from 4px by 10px rounded chips that step along a curve using CSS transforms.",
    "Key panels include sparse genomic micro-glyph rows in header or footer zones, never repeated as full-page texture or square grids.",
    "Interactive states use thin indigo focus rings plus tiny turquoise sequence ticks embedded inside the control edge rather than side stripes.",
    "Layouts reserve one dominant asymmetric hero workspace with a floating strand inspector, breaking the regular column rhythm deliberately."
  ],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "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": "Sequence Ribbon 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 DNA references only as sequence ribbons, base chips, modular connectors, or precise genomic data pixels.",
      "Keep backgrounds white or neutral and let accent color indicate active data, confidence, or selected sequence regions.",
      "Make each component state express quantized chip movement, indigo focus, or turquoise data confirmation.",
      "Use one asymmetrical overlap or floating inspector to create a memorable product composition."
    ],
    "dont": [
      "Do not use literal helix wallpaper, molecule nodes, lab glass, or science-textbook diagrams.",
      "Do not add square-grid backgrounds, repeated dotted textures, side rails, card stripes, chipped corners, or uneven borders.",
      "Do not spread many base-pair colors across the interface; keep the palette limited to blue, indigo, teal, and cool neutrals.",
      "Do not present a generic SaaS dashboard or component catalog without a specific genomics product task."
    ]
  }
}