Sequence Glass Genomics

# Sequence Glass Genomics

## Philosophy

Sequence Glass Genomics is a clean product-interface language for interpreting genomic work as precise sequence structure: calm white planes, cool semantic highlights, and pixel-like nucleobase chips that behave as product information rather than biotech ornament.

### Values

- Genetic meaning expressed through modular sequence rhythm instead of literal helix decoration.
- White and neutral surfaces remain dominant so highlights carry status, confidence, and selection meaning.
- Pixel styling is crisp, tiny, and product-scaled: sequence chips, data glyphs, quantized strands, and micro-icons.
- The interface feels like a modern decision tool, not a lab dashboard, textbook figure, or game skin.

### Anti-Values

- No DNA helix wallpaper, molecule garnish, rainbow base palettes, square-grid backgrounds, or dotted default texture.
- No decorative left rails, colored side stripes, chipped corners, uneven borders, or generic medical SaaS cards.
- No dense lab-monitor dashboard chrome or textbook explanatory diagrams masquerading as UI.

### Visual Character

- Use layered white cards with hairline cool-gray borders, 20px committed radii, and shallow vertical shadows to create quiet product depth without colored side rails.
- Build gene motifs from small rounded-rectangle nucleobase chips and 2px quantized strand segments placed inline with real labels, never as wallpaper or square-grid background.
- Apply a limited cool highlight system where indigo marks primary actions, turquoise marks active sequence selection, and green marks confidence or completion states.
- Set broad whitespace gutters around compact data modules, with sequence ribbons crossing between panels as semantic connectors rather than decorative dividers.
- Use soft glassy underlays with subtle linear blue-turquoise washes inside selected modules only, keeping the page background clean white and neutral.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: Even cool-gray hairlines with occasional full-outline turquoise or indigo focus rings; no uneven borders or chipped corners.
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#24B26B` |
| background | `#F8FAFC` |
| border | `#DCE4EE` |
| error | `#D94D4D` |
| info | `#2D7DE1` |
| muted | `#6B778A` |
| primary | `#3454D1` |
| secondary | `#0E9F9A` |
| success | `#20A464` |
| surface | `#FFFFFF` |
| text | `#142033` |
| warning | `#C8871E` |

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: Small sequence chips brighten, compress, or slide one step on interaction; panels do not bounce or perform decorative science animations.

### Radii

- **Full**: 9999px
- **Lg**: 20px
- **Md**: 14px
- **None**: 0
- **Sm**: 8px

### Shadows

- **Lg**: 0 22px 60px rgba(20,32,51,0.12)
- **Md**: 0 10px 30px rgba(20,32,51,0.08)
- **Sm**: 0 1px 2px rgba(20,32,51,0.06)

### Spacing

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

### Surfaces

- **Bg Pattern**: Plain neutral background; sequence pixels appear only in semantic ribbons, locus chips, and data micro-illustrations, never as a repeated grid.
- **Card Style**: 20px rounded white cards, one-pixel cool gray border, restrained shadow, no colored stripe or rail accents.
- **Treatment**: Clean white product planes with selected glass panels using faint cool linear gradients only inside active genomic modules.

### Typography

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

## Rules

### Composition

Compose screens as a calm product workspace with a wide hero decision area, compact sequence evidence modules, and one contextual detail rail that is informational rather than decorative.

### Density

Balanced density: generous outer whitespace and compact sequence rows inside cards so the product feels precise without becoming a lab dashboard.

### Hierarchy

Lead with plain-language genomic decisions, then show sequence evidence through small chip rhythms, confidence badges, and concise tables; color always maps to meaning.

### Signature Patterns

- Quantized sequence ribbon: inline rounded nucleobase chips connected by 2px segments, with selected chips filled turquoise and the rest neutral blue-gray.
- Variant glass module: active cards receive a faint blue-to-turquoise inset wash plus a complete 2px focus outline, never a side stripe or colored rail.
- Micro-locus badges: small mono-coded pills combine chromosome labels, pixel glyph clusters, and confidence dots as semantic component labels.
- Sequence-to-decision connector: short stepped connector lines travel between cards using right-angle-free soft segments and chip endpoints, not a square grid.
- Evidence table rhythm: rows contain tiny sequence block previews and cool status badges so genomic data appears as product affordances rather than decoration.

## Layout

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px, wide 1440px

### Grid

Twelve-column desktop workspace with asymmetric 7/5 content split, collapsing to two-column tablet cards and single-column mobile flow.

### Whitespace

Large page gutters and 24-32px card gaps protect the white surface; sequence details may be dense only within bounded modules.

## Guidance

### Do

- Use nucleobase chips, sequence ribbons, micro-locus badges, and compact evidence tables to make genomics visible at product scale.
- Keep backgrounds white or neutral and reserve cool highlights for selected sequence, confidence, navigation, and primary action semantics.
- Use full outlines, shadows, and subtle glass fills for state changes rather than decorative colored side rails or stripes.
- Write real product labels: variant review, cohort match, sequence confidence, evidence queue, and report readiness.

### Don't

- Do not use helix wallpaper, molecule constellations, lab beakers, textbook diagrams, rainbow nucleobase colors, or neon cyberpunk gradients.
- Do not use square-grid backgrounds, dotted default textures, decorative card stripes, colored side rails, chipped corners, or uneven borders.
- Do not make a generic dashboard of KPI tiles; every module should advance a genomic interpretation workflow.
- Do not let pixel styling become a retro game skin; keep chips small, rounded, and tied to labels and sequence data.

### Candidate Directions Considered

- Glass Sequence Workbench: strongest product usefulness and restraint; selected for semantic pixel ribbons and calm surfaces.
- Locus Ledger Minimalism: fresh table-first direction but risked becoming accounting-like and less visually distinctive.
- Genome Card Sorter: useful for workflows but too close to generic SaaS cards without the sequence ribbon as a strong motif.
- Clinical Signal Notation: elegant but drifted toward medical SaaS and lab dashboard conventions.

### Chosen Direction Rationale

Glass Sequence Workbench best balances fresh product minimalism, limited cool highlights, DNA pixel motif quality, and avoidance of lab-dashboard cliches.

---
version: "alpha"
name: "Sequence Glass Genomics"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#24B26B"
  background: "#F8FAFC"
  border: "#DCE4EE"
  error: "#D94D4D"
  info: "#2D7DE1"
  muted: "#6B778A"
  primary: "#3454D1"
  secondary: "#0E9F9A"
  success: "#20A464"
  surface: "#FFFFFF"
  text: "#142033"
  warning: "#C8871E"
typography:
  headline-lg:
    fontFamily: "Instrument Sans"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.018em"
  headline-md:
    fontFamily: "Instrument Sans"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.018em"
  body-md:
    fontFamily: "Instrument Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.52
    letterSpacing: "-0.018em"
  label-md:
    fontFamily: "Fragment Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "20px"
  md: "14px"
  none: "0px"
  sm: "8px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
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 Glass Genomics

## Overview

Sequence Glass Genomics is a clean product-interface language for interpreting genomic work as precise sequence structure: calm white planes, cool semantic highlights, and pixel-like nucleobase chips that behave as product information rather than biotech ornament.

### Values

- Genetic meaning expressed through modular sequence rhythm instead of literal helix decoration.
- White and neutral surfaces remain dominant so highlights carry status, confidence, and selection meaning.
- Pixel styling is crisp, tiny, and product-scaled: sequence chips, data glyphs, quantized strands, and micro-icons.
- The interface feels like a modern decision tool, not a lab dashboard, textbook figure, or game skin.

### Anti-Values

- No DNA helix wallpaper, molecule garnish, rainbow base palettes, square-grid backgrounds, or dotted default texture.
- No decorative left rails, colored side stripes, chipped corners, uneven borders, or generic medical SaaS cards.
- No dense lab-monitor dashboard chrome or textbook explanatory diagrams masquerading as UI.

### Visual Character

- Use layered white cards with hairline cool-gray borders, 20px committed radii, and shallow vertical shadows to create quiet product depth without colored side rails.
- Build gene motifs from small rounded-rectangle nucleobase chips and 2px quantized strand segments placed inline with real labels, never as wallpaper or square-grid background.
- Apply a limited cool highlight system where indigo marks primary actions, turquoise marks active sequence selection, and green marks confidence or completion states.
- Set broad whitespace gutters around compact data modules, with sequence ribbons crossing between panels as semantic connectors rather than decorative dividers.
- Use soft glassy underlays with subtle linear blue-turquoise washes inside selected modules only, keeping the page background clean white and neutral.

## 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 | `#24B26B` |
| background | `#F8FAFC` |
| border | `#DCE4EE` |
| error | `#D94D4D` |
| info | `#2D7DE1` |
| muted | `#6B778A` |
| primary | `#3454D1` |
| secondary | `#0E9F9A` |
| success | `#20A464` |
| surface | `#FFFFFF` |
| text | `#142033` |
| warning | `#C8871E` |

## Typography

- **Headline-Lg**: Instrument Sans, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Instrument Sans, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Instrument Sans, 16px, weight 400, line-height 1.52.
- **Label-Md**: Fragment 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`

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px, wide 1440px

### Grid

Twelve-column desktop workspace with asymmetric 7/5 content split, collapsing to two-column tablet cards and single-column mobile flow.

### Whitespace

Large page gutters and 24-32px card gaps protect the white surface; sequence details may be dense only within bounded modules.

## Elevation & Depth

### Shadows

- **Lg**: 0 22px 60px rgba(20,32,51,0.12)
- **Md**: 0 10px 30px rgba(20,32,51,0.08)
- **Sm**: 0 1px 2px rgba(20,32,51,0.06)

## Shapes

### Rounded

- **Full**: `9999px`
- **Lg**: `20px`
- **Md**: `14px`
- **None**: `0px`
- **Sm**: `8px`

### Surfaces

- **Bg Pattern**: Plain neutral background; sequence pixels appear only in semantic ribbons, locus chips, and data micro-illustrations, never as a repeated grid.
- **Card Style**: 20px rounded white cards, one-pixel cool gray border, restrained shadow, no colored stripe or rail accents.
- **Treatment**: Clean white product planes with selected glass panels using faint cool linear gradients only inside active genomic modules.

### Borders

- **Accent Width**: 2px
- **Character**: Even cool-gray hairlines with occasional full-outline turquoise or indigo focus rings; no uneven borders or chipped corners.
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Compose screens as a calm product workspace with a wide hero decision area, compact sequence evidence modules, and one contextual detail rail that is informational rather than decorative.

### Density

Balanced density: generous outer whitespace and compact sequence rows inside cards so the product feels precise without becoming a lab dashboard.

### Hierarchy

Lead with plain-language genomic decisions, then show sequence evidence through small chip rhythms, confidence badges, and concise tables; color always maps to meaning.

### Signature Patterns

- Quantized sequence ribbon: inline rounded nucleobase chips connected by 2px segments, with selected chips filled turquoise and the rest neutral blue-gray.
- Variant glass module: active cards receive a faint blue-to-turquoise inset wash plus a complete 2px focus outline, never a side stripe or colored rail.
- Micro-locus badges: small mono-coded pills combine chromosome labels, pixel glyph clusters, and confidence dots as semantic component labels.
- Sequence-to-decision connector: short stepped connector lines travel between cards using right-angle-free soft segments and chip endpoints, not a square grid.
- Evidence table rhythm: rows contain tiny sequence block previews and cool status badges so genomic data appears as product affordances rather than decoration.

## 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-019e4bd3-759e-7782-badd-ee47545abea5/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 nucleobase chips, sequence ribbons, micro-locus badges, and compact evidence tables to make genomics visible at product scale.
- Do Keep backgrounds white or neutral and reserve cool highlights for selected sequence, confidence, navigation, and primary action semantics.
- Do Use full outlines, shadows, and subtle glass fills for state changes rather than decorative colored side rails or stripes.
- Do Write real product labels: variant review, cohort match, sequence confidence, evidence queue, and report readiness.
- Don't Do not use helix wallpaper, molecule constellations, lab beakers, textbook diagrams, rainbow nucleobase colors, or neon cyberpunk gradients.
- Don't Do not use square-grid backgrounds, dotted default textures, decorative card stripes, colored side rails, chipped corners, or uneven borders.
- Don't Do not make a generic dashboard of KPI tiles; every module should advance a genomic interpretation workflow.
- Don't Do not let pixel styling become a retro game skin; keep chips small, rounded, and tied to labels and sequence data.

### Candidate Directions Considered

- Glass Sequence Workbench: strongest product usefulness and restraint; selected for semantic pixel ribbons and calm surfaces.
- Locus Ledger Minimalism: fresh table-first direction but risked becoming accounting-like and less visually distinctive.
- Genome Card Sorter: useful for workflows but too close to generic SaaS cards without the sequence ribbon as a strong motif.
- Clinical Signal Notation: elegant but drifted toward medical SaaS and lab dashboard conventions.

### Chosen Direction Rationale

Glass Sequence Workbench best balances fresh product minimalism, limited cool highlights, DNA pixel motif quality, and avoidance of lab-dashboard cliches.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sequence-glass-genomics",
  "type": "registry:theme",
  "title": "Sequence Glass Genomics shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F8FAFC",
      "foreground": "#142033",
      "card": "#FFFFFF",
      "card-foreground": "#142033",
      "popover": "#FFFFFF",
      "popover-foreground": "#142033",
      "primary": "#3454D1",
      "primary-foreground": "#ffffff",
      "secondary": "#0E9F9A",
      "secondary-foreground": "#ffffff",
      "muted": "#6B778A",
      "muted-foreground": "#142033",
      "accent": "#24B26B",
      "accent-foreground": "#ffffff",
      "destructive": "#D94D4D",
      "border": "#DCE4EE",
      "input": "#DCE4EE",
      "ring": "#24B26B",
      "chart-1": "#3454D1",
      "chart-2": "#0E9F9A",
      "chart-3": "#24B26B",
      "chart-4": "#20A464",
      "chart-5": "#C8871E",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#142033",
      "sidebar-primary": "#3454D1",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2D7DE1",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#DCE4EE",
      "sidebar-ring": "#24B26B",
      "radius": "14px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#3454D1",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#24B26B",
      "accent-foreground": "#ffffff",
      "destructive": "#D94D4D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#24B26B",
      "chart-1": "#3454D1",
      "chart-2": "#0E9F9A",
      "chart-3": "#24B26B",
      "chart-4": "#20A464",
      "chart-5": "#C8871E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#3454D1",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#24B26B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#24B26B",
      "radius": "14px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e4bd3-759e-7782-badd-ee47545abea5",
    "slug": "sequence-glass-genomics",
    "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"
      ]
    }
  }
}
```