Sequence Porcelain Atlas

# Sequence Porcelain Atlas

## Philosophy

Sequence Porcelain Atlas turns genomic work into a premium evidence atlas: quiet porcelain-white product surfaces, precise coordinate typography, nucleobase chips, and small quantized confidence pixels make DNA feel like inspectable data rather than biotech decoration.

### Values

- Use genomics as operational notation: coordinates, base calls, variant evidence, confidence, and provenance drive the interface grammar.
- Keep the product calm and high-trust through white/neutral surfaces, exact spacing, restrained outlines, and cool semantic highlights.
- Let modular pixels appear only as data-bearing confidence cells, sequence ticks, or alignment mismatches rather than decorative retro styling.
- Make complex biology feel navigable through layered tracks, review queues, and evidence cards instead of textbook diagrams.

### Anti-Values

- No DNA helix wallpaper, molecule sprinkles, chromosome rainbows, lab-dashboard templates, or science textbook illustrations.
- No square-grid background, default dotted texture, colored side rails, striped card accents, chipped corners, uneven borders, or retro game skin.
- No hospital-blue monotony or rainbow sprawl; color must encode status, base family, focus, or action.

### Visual Character

- Use porcelain-white and warm-neutral application surfaces with very thin blue-gray borders, large rounded rectangles, and soft ambient shadows that read as premium instruments rather than cards with garnish.
- Build sequence motifs from inline nucleobase chips: compact A/C/G/T letter cells, muted neutral fills, and occasional cool-highlight mutation cells embedded inside tables, tabs, and summary panels.
- Express pixel/modular styling through 3px to 8px quantized confidence cells, stepped focus halos, and tiny alignment bars that carry data state instead of forming repeated background grids.
- Compose screens as genomic evidence atlases: a coordinate header, layered horizontal sequence tracks, variant review cards, and a right-side interpretation workspace with no decorative side stripes.
- Use cool highlights as semantic channels: deep indigo for primary action and active locus, sea-glass green for validated evidence, turquoise for live selection, and amber only for review uncertainty.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: Cool blue-gray instrument borders; active states use complete indigo or turquoise outlines, never side rails or partial stripes.
- **Default Width**: 1px
- **Style**: solid hairline with occasional stepped focus outline

### Colors

| Name | Value |
|------|-------|
| accent | `#12AFA8` |
| background | `#F7F8F6` |
| border | `#DCE3E8` |
| error | `#B94A54` |
| info | `#2478C8` |
| muted | `#6F7C86` |
| primary | `#3157D5` |
| secondary | `#4F46A6` |
| success | `#1D8E72` |
| surface | `#FFFFFF` |
| text | `#17202A` |
| warning | `#B7862F` |

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: Motion is analytical and small: locus rows lift 2px, confidence cells brighten, and panels crossfade without bouncing or theatrical lab effects.

### Radii

- **Full**: 9999px
- **Lg**: 22px
- **Md**: 12px
- **None**: 0
- **Sm**: 6px

### Shadows

- **Lg**: 0 30px 80px rgba(31, 50, 73, 0.14)
- **Md**: 0 14px 34px rgba(31, 50, 73, 0.10)
- **Sm**: 0 1px 2px rgba(25, 36, 47, 0.06)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64,80]

### Surfaces

- **Bg Pattern**: Plain warm neutral background with a few localized sequence tick underlays inside dedicated track components only; no repeated square-grid background.
- **Card Style**: Large rounded evidence panels, soft shadow, 1px cool border, compact internal sequence notations, and data-bearing chips rather than stripes.
- **Treatment**: Porcelain white panels over a warm mist background, with blue-gray hairline separation and no full-page grid or decorative dot texture.

### Typography

- **Base Size**: 16px
- **Body Font**: Geist
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap
- **Heading Font**: Geist
- **Letter Spacing**: -0.018em
- **Line Height**: 1.5
- **Mono Font**: Geist Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Create a real genomic review workspace: top coordinate/navigation band, large central alignment and evidence track, supporting metric modules, and an interpretation editor. Use asymmetry through content scale, not decorative rails or equal dashboard cards.

### Density

Medium density with generous macro whitespace: sequence rows may be compact and data-rich, while panel gaps and page margins remain calm enough for premium review work.

### Hierarchy

Use crisp Geist headings, mono coordinate labels, and sequenced chip rows to separate product command, genomic location, evidence confidence, and clinical interpretation. Color appears only where it encodes action, state, base group, or validation.

### Signature Patterns

- Nucleobase chip strings place A/C/G/T inside tiny rounded cells with neutral fills and selective indigo, turquoise, green, or amber states for mutation, selection, validation, and uncertainty.
- Quantized confidence pixels appear as short rows of 3px to 8px square cells inside variant cards, tables, and sliders, always labeled or adjacent to a confidence value.
- Layered genome tracks use horizontal rounded bars, coordinate ticks, exon blocks, and mismatch markers inside bounded components instead of full-page grids or decorative wallpaper.
- Stepped focus halos combine a normal rounded outline with four tiny square corner pixels, making modularity visible only during focus, selection, or active locus states.

## Layout

### Breakpoints

mobile <= 640px, tablet 641px-1024px, desktop >= 1025px

### Grid

Desktop uses a 12-column product grid with a 3-column left navigation/evidence stack, 6-column central sequence atlas, and 3-column interpretation rail; tablet collapses to 8 columns and mobile becomes a single evidence flow.

### Whitespace

Keep outer page margins at 24-64px and panel gutters at 16-24px; reserve tight 4-8px spacing for nucleobase chips and confidence cells only.

## Guidance

### Do

- Use genomic coordinates, sequence reads, base chips, variant queues, quality/confidence cells, and provenance labels as the primary visual motifs.
- Keep backgrounds neutral and clean; localize modular pixels to data components, active focus, and confidence notation.
- Use cool highlights with semantic discipline: indigo for action/locus, turquoise for selection, green for validation, amber for review uncertainty.
- Write scene copy as a real genomics product with samples, loci, transcript IDs, pathogenicity notes, and review states.

### Don't

- Do not draw helixes, molecules, generic lab beakers, rainbow chromosomes, or science textbook panels.
- Do not use square-grid backgrounds, dotted default texture, colored side rails, card stripes, chipped corners, uneven borders, or retro-game pixel art.
- Do not create a generic analytics dashboard; every module should feel tied to sequence review, evidence interpretation, or genomic operations.

### Candidate Directions

- {"idea":"white porcelain surfaces with genomic coordinate ledgers, nucleobase chips, quantized confidence pixels, and calm cool highlight semantics","name":"Sequence Porcelain Atlas","scores":{"distinctiveness":9,"freshness":9,"motif_quality":10,"palette_harmony":9,"product_usefulness":10,"research_grounding":10,"restraint":9},"verdict":"chosen"}
- {"idea":"legal/records office metaphor for variant review with stamped provenance and monospaced accession labels","name":"Variant Clerk Ledger","scores":{"distinctiveness":8,"freshness":8,"motif_quality":8,"palette_harmony":7,"product_usefulness":9,"research_grounding":8,"restraint":8},"verdict":"strong but too document-heavy and less expressive for live product UI"}
- {"idea":"translucent microscopy panes and soft green glow for lab-to-cloud workflow","name":"Cellular Glass Console","scores":{"distinctiveness":5,"freshness":6,"motif_quality":6,"palette_harmony":7,"product_usefulness":7,"research_grounding":6,"restraint":5},"verdict":"rejected because glass biotech risks generic lab SaaS and garnish color"}
- {"idea":"inheritance and cohort relationships expressed through braided rows, family-haplotype bands, and sparse kinship arcs","name":"Population Weave","scores":{"distinctiveness":8,"freshness":8,"motif_quality":8,"palette_harmony":8,"product_usefulness":7,"research_grounding":8,"restraint":7},"verdict":"not chosen because relationship diagrams are narrower than a reusable product language"}
- {"idea":"high-density sequencer-console UI with monospace reads, command palette, and quality histograms","name":"Basecall Terminal","scores":{"distinctiveness":7,"freshness":7,"motif_quality":8,"palette_harmony":7,"product_usefulness":8,"research_grounding":9,"restraint":6},"verdict":"too close to lab terminal/dashboard territory and less premium"}
- {"idea":"minimal white interface with turquoise markup layers and floating genomics notes","name":"Turquoise Annotation Field","scores":{"distinctiveness":5,"freshness":6,"motif_quality":6,"palette_harmony":8,"product_usefulness":7,"research_grounding":6,"restraint":8},"verdict":"too likely to become generic medical SaaS without a stronger structural motif"}

### Chosen Direction Rationale

Sequence Porcelain Atlas scored highest because it converts research-derived genomics primitives into product-useful UI grammar while preserving restraint. It can scale across shadcn components, supports premium white/neutral surfaces, and uses pixel/modular styling as evidence notation rather than decoration.

### Research Notes

- {"observation":"Serious genomics tools organize meaning as tracks, alignments, base calls, genomic coordinates, variants, confidence, and annotations. The strongest product metaphor is not a helix but a navigable coordinate atlas of evidence layers.","source":"UCSC Genome Browser / Ensembl / IGV interface conventions"}
- {"observation":"A/C/G/T letters, base-quality marks, variant callouts, exon/intron blocks, and alignment mismatches are compact, non-cliche visual material. They can become chips and micro-bars rather than decorative science icons.","source":"DNA sequencing notation and nucleobase conventions"}
- {"observation":"Trust comes from quiet surfaces, generous white space, exact typography, subdued outlines, and narrow semantic color channels. Blue alone risks generic hospital SaaS; cooler blue-violet plus sea-glass green feels more precise and less clinical.","source":"Modern premium health-tech/product UI"}
- {"observation":"Pixel language feels premium when it is quantized data notation: tiny square confidence cells, base tickers, and stepped focus rings. It fails when used as a game skin, background grid, or decorative dot wallpaper.","source":"Contemporary modular/pixel product design"}
- {"observation":"Avoid helix wallpaper, molecule sprinkles, rainbow chromosomes, lab-dashboard templates, left color rails, generic KPI cards, and textbook diagrams. Product usefulness requires sequence operations, review states, provenance, and decision queues.","source":"Bioinformatics anti-pattern scan"}

---
version: "alpha"
name: "Sequence Porcelain Atlas"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#12AFA8"
  background: "#F7F8F6"
  border: "#DCE3E8"
  error: "#B94A54"
  info: "#2478C8"
  muted: "#6F7C86"
  primary: "#3157D5"
  secondary: "#4F46A6"
  success: "#1D8E72"
  surface: "#FFFFFF"
  text: "#17202A"
  warning: "#B7862F"
typography:
  headline-lg:
    fontFamily: "Geist"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.018em"
  headline-md:
    fontFamily: "Geist"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.018em"
  body-md:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.018em"
  label-md:
    fontFamily: "Geist Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "22px"
  md: "12px"
  none: "0px"
  sm: "6px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "80px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Sequence Porcelain Atlas

## Overview

Sequence Porcelain Atlas turns genomic work into a premium evidence atlas: quiet porcelain-white product surfaces, precise coordinate typography, nucleobase chips, and small quantized confidence pixels make DNA feel like inspectable data rather than biotech decoration.

### Values

- Use genomics as operational notation: coordinates, base calls, variant evidence, confidence, and provenance drive the interface grammar.
- Keep the product calm and high-trust through white/neutral surfaces, exact spacing, restrained outlines, and cool semantic highlights.
- Let modular pixels appear only as data-bearing confidence cells, sequence ticks, or alignment mismatches rather than decorative retro styling.
- Make complex biology feel navigable through layered tracks, review queues, and evidence cards instead of textbook diagrams.

### Anti-Values

- No DNA helix wallpaper, molecule sprinkles, chromosome rainbows, lab-dashboard templates, or science textbook illustrations.
- No square-grid background, default dotted texture, colored side rails, striped card accents, chipped corners, uneven borders, or retro game skin.
- No hospital-blue monotony or rainbow sprawl; color must encode status, base family, focus, or action.

### Visual Character

- Use porcelain-white and warm-neutral application surfaces with very thin blue-gray borders, large rounded rectangles, and soft ambient shadows that read as premium instruments rather than cards with garnish.
- Build sequence motifs from inline nucleobase chips: compact A/C/G/T letter cells, muted neutral fills, and occasional cool-highlight mutation cells embedded inside tables, tabs, and summary panels.
- Express pixel/modular styling through 3px to 8px quantized confidence cells, stepped focus halos, and tiny alignment bars that carry data state instead of forming repeated background grids.
- Compose screens as genomic evidence atlases: a coordinate header, layered horizontal sequence tracks, variant review cards, and a right-side interpretation workspace with no decorative side stripes.
- Use cool highlights as semantic channels: deep indigo for primary action and active locus, sea-glass green for validated evidence, turquoise for live selection, and amber only for review uncertainty.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| accent | `#12AFA8` |
| background | `#F7F8F6` |
| border | `#DCE3E8` |
| error | `#B94A54` |
| info | `#2478C8` |
| muted | `#6F7C86` |
| primary | `#3157D5` |
| secondary | `#4F46A6` |
| success | `#1D8E72` |
| surface | `#FFFFFF` |
| text | `#17202A` |
| warning | `#B7862F` |

## Typography

- **Headline-Lg**: Geist, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Geist, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Geist, 16px, weight 400, line-height 1.5.
- **Label-Md**: Geist Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `80px`

### Breakpoints

mobile <= 640px, tablet 641px-1024px, desktop >= 1025px

### Grid

Desktop uses a 12-column product grid with a 3-column left navigation/evidence stack, 6-column central sequence atlas, and 3-column interpretation rail; tablet collapses to 8 columns and mobile becomes a single evidence flow.

### Whitespace

Keep outer page margins at 24-64px and panel gutters at 16-24px; reserve tight 4-8px spacing for nucleobase chips and confidence cells only.

## Elevation & Depth

### Shadows

- **Lg**: 0 30px 80px rgba(31, 50, 73, 0.14)
- **Md**: 0 14px 34px rgba(31, 50, 73, 0.10)
- **Sm**: 0 1px 2px rgba(25, 36, 47, 0.06)

## Shapes

### Rounded

- **Full**: `9999px`
- **Lg**: `22px`
- **Md**: `12px`
- **None**: `0px`
- **Sm**: `6px`

### Surfaces

- **Bg Pattern**: Plain warm neutral background with a few localized sequence tick underlays inside dedicated track components only; no repeated square-grid background.
- **Card Style**: Large rounded evidence panels, soft shadow, 1px cool border, compact internal sequence notations, and data-bearing chips rather than stripes.
- **Treatment**: Porcelain white panels over a warm mist background, with blue-gray hairline separation and no full-page grid or decorative dot texture.

### Borders

- **Accent Width**: 2px
- **Character**: Cool blue-gray instrument borders; active states use complete indigo or turquoise outlines, never side rails or partial stripes.
- **Default Width**: 1px
- **Style**: solid hairline with occasional stepped focus outline

## Components

### Composition

Create a real genomic review workspace: top coordinate/navigation band, large central alignment and evidence track, supporting metric modules, and an interpretation editor. Use asymmetry through content scale, not decorative rails or equal dashboard cards.

### Density

Medium density with generous macro whitespace: sequence rows may be compact and data-rich, while panel gaps and page margins remain calm enough for premium review work.

### Hierarchy

Use crisp Geist headings, mono coordinate labels, and sequenced chip rows to separate product command, genomic location, evidence confidence, and clinical interpretation. Color appears only where it encodes action, state, base group, or validation.

### Signature Patterns

- Nucleobase chip strings place A/C/G/T inside tiny rounded cells with neutral fills and selective indigo, turquoise, green, or amber states for mutation, selection, validation, and uncertainty.
- Quantized confidence pixels appear as short rows of 3px to 8px square cells inside variant cards, tables, and sliders, always labeled or adjacent to a confidence value.
- Layered genome tracks use horizontal rounded bars, coordinate ticks, exon blocks, and mismatch markers inside bounded components instead of full-page grids or decorative wallpaper.
- Stepped focus halos combine a normal rounded outline with four tiny square corner pixels, making modularity visible only during focus, selection, or active locus states.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-019e4c10-d236-7f81-b35c-9268b9ae3f35/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Use genomic coordinates, sequence reads, base chips, variant queues, quality/confidence cells, and provenance labels as the primary visual motifs.
- Do Keep backgrounds neutral and clean; localize modular pixels to data components, active focus, and confidence notation.
- Do Use cool highlights with semantic discipline: indigo for action/locus, turquoise for selection, green for validation, amber for review uncertainty.
- Do Write scene copy as a real genomics product with samples, loci, transcript IDs, pathogenicity notes, and review states.
- Don't Do not draw helixes, molecules, generic lab beakers, rainbow chromosomes, or science textbook panels.
- Don't Do not use square-grid backgrounds, dotted default texture, colored side rails, card stripes, chipped corners, uneven borders, or retro-game pixel art.
- Don't Do not create a generic analytics dashboard; every module should feel tied to sequence review, evidence interpretation, or genomic operations.

### Candidate Directions

- {"idea":"white porcelain surfaces with genomic coordinate ledgers, nucleobase chips, quantized confidence pixels, and calm cool highlight semantics","name":"Sequence Porcelain Atlas","scores":{"distinctiveness":9,"freshness":9,"motif_quality":10,"palette_harmony":9,"product_usefulness":10,"research_grounding":10,"restraint":9},"verdict":"chosen"}
- {"idea":"legal/records office metaphor for variant review with stamped provenance and monospaced accession labels","name":"Variant Clerk Ledger","scores":{"distinctiveness":8,"freshness":8,"motif_quality":8,"palette_harmony":7,"product_usefulness":9,"research_grounding":8,"restraint":8},"verdict":"strong but too document-heavy and less expressive for live product UI"}
- {"idea":"translucent microscopy panes and soft green glow for lab-to-cloud workflow","name":"Cellular Glass Console","scores":{"distinctiveness":5,"freshness":6,"motif_quality":6,"palette_harmony":7,"product_usefulness":7,"research_grounding":6,"restraint":5},"verdict":"rejected because glass biotech risks generic lab SaaS and garnish color"}
- {"idea":"inheritance and cohort relationships expressed through braided rows, family-haplotype bands, and sparse kinship arcs","name":"Population Weave","scores":{"distinctiveness":8,"freshness":8,"motif_quality":8,"palette_harmony":8,"product_usefulness":7,"research_grounding":8,"restraint":7},"verdict":"not chosen because relationship diagrams are narrower than a reusable product language"}
- {"idea":"high-density sequencer-console UI with monospace reads, command palette, and quality histograms","name":"Basecall Terminal","scores":{"distinctiveness":7,"freshness":7,"motif_quality":8,"palette_harmony":7,"product_usefulness":8,"research_grounding":9,"restraint":6},"verdict":"too close to lab terminal/dashboard territory and less premium"}
- {"idea":"minimal white interface with turquoise markup layers and floating genomics notes","name":"Turquoise Annotation Field","scores":{"distinctiveness":5,"freshness":6,"motif_quality":6,"palette_harmony":8,"product_usefulness":7,"research_grounding":6,"restraint":8},"verdict":"too likely to become generic medical SaaS without a stronger structural motif"}

### Chosen Direction Rationale

Sequence Porcelain Atlas scored highest because it converts research-derived genomics primitives into product-useful UI grammar while preserving restraint. It can scale across shadcn components, supports premium white/neutral surfaces, and uses pixel/modular styling as evidence notation rather than decoration.

### Research Notes

- {"observation":"Serious genomics tools organize meaning as tracks, alignments, base calls, genomic coordinates, variants, confidence, and annotations. The strongest product metaphor is not a helix but a navigable coordinate atlas of evidence layers.","source":"UCSC Genome Browser / Ensembl / IGV interface conventions"}
- {"observation":"A/C/G/T letters, base-quality marks, variant callouts, exon/intron blocks, and alignment mismatches are compact, non-cliche visual material. They can become chips and micro-bars rather than decorative science icons.","source":"DNA sequencing notation and nucleobase conventions"}
- {"observation":"Trust comes from quiet surfaces, generous white space, exact typography, subdued outlines, and narrow semantic color channels. Blue alone risks generic hospital SaaS; cooler blue-violet plus sea-glass green feels more precise and less clinical.","source":"Modern premium health-tech/product UI"}
- {"observation":"Pixel language feels premium when it is quantized data notation: tiny square confidence cells, base tickers, and stepped focus rings. It fails when used as a game skin, background grid, or decorative dot wallpaper.","source":"Contemporary modular/pixel product design"}
- {"observation":"Avoid helix wallpaper, molecule sprinkles, rainbow chromosomes, lab-dashboard templates, left color rails, generic KPI cards, and textbook diagrams. Product usefulness requires sequence operations, review states, provenance, and decision queues.","source":"Bioinformatics anti-pattern scan"}

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sequence-porcelain-atlas",
  "type": "registry:theme",
  "title": "Sequence Porcelain Atlas shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7F8F6",
      "foreground": "#17202A",
      "card": "#FFFFFF",
      "card-foreground": "#17202A",
      "popover": "#FFFFFF",
      "popover-foreground": "#17202A",
      "primary": "#3157D5",
      "primary-foreground": "#ffffff",
      "secondary": "#4F46A6",
      "secondary-foreground": "#ffffff",
      "muted": "#6F7C86",
      "muted-foreground": "#17202A",
      "accent": "#12AFA8",
      "accent-foreground": "#ffffff",
      "destructive": "#B94A54",
      "border": "#DCE3E8",
      "input": "#DCE3E8",
      "ring": "#12AFA8",
      "chart-1": "#3157D5",
      "chart-2": "#4F46A6",
      "chart-3": "#12AFA8",
      "chart-4": "#1D8E72",
      "chart-5": "#B7862F",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#17202A",
      "sidebar-primary": "#3157D5",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2478C8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#DCE3E8",
      "sidebar-ring": "#12AFA8",
      "radius": "12px"
    },
    "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": "#12AFA8",
      "accent-foreground": "#ffffff",
      "destructive": "#B94A54",
      "border": "#303642",
      "input": "#303642",
      "ring": "#12AFA8",
      "chart-1": "#3157D5",
      "chart-2": "#4F46A6",
      "chart-3": "#12AFA8",
      "chart-4": "#1D8E72",
      "chart-5": "#B7862F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#3157D5",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#12AFA8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#12AFA8",
      "radius": "12px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e4c10-d236-7f81-b35c-9268b9ae3f35",
    "slug": "sequence-porcelain-atlas",
    "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"
      ]
    }
  }
}
```