name: genomelab-design
version: alpha
description: >
  A dense, dark scientific-instrument cockpit for single-cell genomics — a
  near-black `#0C0E12` ink surface with slightly-raised `#151820` panels divided
  by 1px `#1F2430` hairlines into a four-rail layout (top status bar, left filter
  rail, center UMAP canvas, right eyepiece, bottom slide tray). The signature
  move is a crosshair-microscope metaphor: a radial-glow scatter canvas of glowing
  3px dots in three voltages — cyan `#6FE1E8` (selected), magenta `#E85C8A`
  (flagged), amber `#F3C15A` (annotated) — overlaid with cyan crosshair lines and
  an amber ping target. Three typefaces carry distinct jobs: Inter for UI display,
  IBM Plex Sans for scientific labels and uppercase section headers, and a mono
  stack (Berkeley Mono / JetBrains Mono) with tabular numerals for every metric.
  Everything is small (13px base, 9–11px labels), sharp-cornered (2–6px radii),
  and tabular — the aesthetic of a lab terminal, not a marketing page.
colors:
  # Surface
  ink: '#0C0E12'          # page background, canvas base, input fills, "ink" cards, bar-chart track
  panel: '#151820'        # raised panels (bars, rails, header, footer, tooltip), darkest heat-cell
  # Brand / voltages
  cyan: '#6FE1E8'         # primary accent: selected dots, LIVE, active states, links, heatmap hot
  magenta: '#E85C8A'      # flagged/doublet voltage: flagged dots, cluster 05, alerts
  amber: '#F3C15A'        # annotation voltage: annotated dots, target ping, input focus, [HK] tags
  # Text
  white: '#FFFFFF'        # primary values, key labels, headings
  body: '#C7CDD6'         # default body text color on scope
  soft: '#8A93A3'         # secondary text, science labels
  muted: '#5A6373'        # tertiary/disabled text, separators, scale bar
  # Hairlines / structure
  hairline: '#1F2430'     # 1px borders, dividers, segmented-control fill, chip borders, scrollbar
  dot-bg: '#2A323F'       # inactive scatter dots, tooltip border, background-legend swatch
  border-soft: '#3A4150'  # checkbox borders, off-toggle knob
  # Heatmap ramp (cyan luminance scale)
  heat-1: '#1F4951'       # low expression
  heat-2: '#3A8E97'       # mid expression
  # heat-3 is cyan (#6FE1E8) = high; heat-0 is panel (#151820) = none
typography:
  display:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 600
    letterSpacing: -0.01em
  sci:
    fontFamily: "'IBM Plex Sans', sans-serif"
    fontSize: 11px
    fontWeight: 400
  sci-label:
    fontFamily: "'IBM Plex Sans', sans-serif"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.12em
    textTransform: uppercase
  mono:
    fontFamily: "'Berkeley Mono', 'JetBrains Mono', ui-monospace, monospace"
    fontSize: 11px
    fontWeight: 400
  mono-micro:
    fontFamily: "'Berkeley Mono', 'JetBrains Mono', ui-monospace, monospace"
    fontSize: 9px
    fontWeight: 400
rounded:
  none: 0px
  sm: 2px      # rounded-sm — most panels, inputs, chips, cards, thumbnails
  md: 6px      # rounded-md — segmented control container
  full: 9999px # rounded-full — toggles, status dot, ontology pills, avatar, dots
spacing:                  # base unit 4px (Tailwind scale)
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  xxl: 20px
components:
  topBar:
    backgroundColor: '{colors.panel}'
    borderBottom: '1px solid {colors.hairline}'
    height: '44px'
    typography: '{typography.mono}'
  segmentedControl:
    backgroundColor: 'transparent'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.md}'
    typography: '{typography.mono}'
    activeBackground: '{colors.hairline}'
    activeColor: '{colors.cyan}'
    padding: '2px'
  railSection:
    headerTypography: '{typography.sci-label}'
    headerColor: '{colors.soft}'
    backgroundColor: '{colors.panel}'
    border: '1px solid {colors.hairline}'
  geneChip:
    backgroundColor: 'rgba(255,255,255,0.01)'
    border: '1px solid {colors.hairline}'
    textColor: '{colors.soft}'
    rounded: '{rounded.sm}'
    padding: '2px 6px'
    typography: '{typography.mono-micro}'
    activeBorder: 'rgba(111,225,232,0.5)'
    activeColor: '{colors.cyan}'
  ontologyPill:
    backgroundColor: 'rgba(255,255,255,0.01)'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.full}'
    padding: '2px 8px'
    typography: '{typography.sci}'
  input:
    backgroundColor: '{colors.ink}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.sm}'
    textColor: '{colors.white}'
    placeholderColor: '{colors.muted}'
    typography: '{typography.mono}'
    focusBorder: '{colors.amber}'
    focusShadow: 'inset 0 0 0 1px {colors.amber}'
  statCard:
    backgroundColor: '{colors.ink}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.sm}'
    labelColor: '{colors.muted}'
    valueColor: '{colors.white}'
    typography: '{typography.mono}'
    padding: '6px 8px'
  toolDockButton:
    backgroundColor: 'transparent'
    rounded: '{rounded.sm}'
    size: '28px'
    hoverBackground: '{colors.hairline}'
    pressedBackground: '{colors.hairline}'
  trayThumb:
    backgroundColor: '{colors.ink}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.sm}'
    size: '112px x 64px'
    hoverBorder: '{colors.cyan}'
    activeBorder: '{colors.cyan}'
    activeShadow: '0 0 0 1px {colors.cyan} inset'
  tooltip:
    backgroundColor: '{colors.panel}'
    border: '1px solid {colors.dot-bg}'
    rounded: '{rounded.sm}'
    padding: '8px 12px'
  scatterDot:
    size: '3px (big: 4px)'
    rounded: '{rounded.full}'
    inactiveColor: '{colors.dot-bg}'
    cyanColor: '{colors.cyan}'      # glow: 0 0 4px rgba(111,225,232,0.45)
    magentaColor: '{colors.magenta}' # glow: 0 0 5px rgba(232,92,138,0.5)
    amberColor: '{colors.amber}'     # glow: 0 0 4px rgba(243,193,90,0.45)
motion:
  livePulse: 'opacity 1 → 0.35 → 1, 1.6s infinite ease (status dot)'
  targetPing: 'Tailwind animate-ping on amber crosshair target'
  dotHover: 'transform: scale(2.2), .12s ease — dot magnifies on hover'
  buttonHover: 'background → #1F2430 on .btn-ghost'
  trayHover: 'border-color → cyan on thumbnail hover'
icons:
  library: Tabler icons (webfont, class "ti ti-*")
  style: outline
  sizes: { micro: 12px, sm: 14px }
  color: '{colors.soft}'  # accented to {colors.cyan} / {colors.amber} for active tools

GenomeLab

genomelab-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

GenomeLab is a single-cell genomics viewer styled as a scientific instrument — a microscope cockpit rather than a dashboard. The whole screen is a fixed, non-scrolling four-rail grid on a near-black ink surface (#0C0E12): a 44px top status bar, a left filter rail (15%, min 200px), a flexible center UMAP canvas, a right "eyepiece" inspector (18%, min 260px), and a 96px bottom slide tray. Panels (#151820) are barely raised off the ink and separated by crisp 1px #1F2430 hairlines — depth comes from hairlines, not shadows. The center canvas carries the signature move: a radial-gradient cyan glow over ink, scattered with hundreds of 3px glowing dots in three voltages — cyan #6FE1E8 for selected cells, magenta #E85C8A for flagged doublets, amber #F3C15A for annotated — and overlaid with translucent cyan crosshair lines converging on an amber animate-ping target, complete with a microscope scale bar and rotated UMAP axis labels. Typography is tri-modal and deliberately small: Inter (display) for UI, IBM Plex Sans (sci) for uppercase section headers and biology labels, and a Berkeley Mono / JetBrains Mono stack (mono) with tabular numerals for every count, ratio, and coordinate. The result reads like a lab terminal: dense, tabular, sharp, and calmly glowing.

Colors

Surface. ink #0C0E12 is the page background and also fills the canvas base, all inputs, "ink" stat cards, and bar-chart tracks. panel #151820 is the slightly-lighter raised panel for the header, footer, both rails, the tooltip, and the floating tool dock; it also doubles as the zero-value heatmap cell.

Voltages (brand). Three saturated accents each own a meaning. cyan #6FE1E8 is primary: selected scatter dots, the LIVE indicator, active segment/chip/tool states, hot heatmap cells, and key inline metrics. magenta #E85C8A is the flagged/doublet voltage (cluster 05 dots, the 312-flagged count, alerts). amber #F3C15A is the annotation voltage: annotated dots, the crosshair target ping, input focus rings, and the [HK] reviewer tags / save action.

Text. white #FFFFFF for primary values and headings; body #C7CDD6 is the default text on the scope; soft #8A93A3 for secondary/science labels; muted #5A6373 for tertiary text, separators (│), the scale bar, and placeholders.

Hairlines & structure. hairline #1F2430 is the universal 1px border, also filling the segmented-control track and chip borders and the thin scrollbars. dot-bg #2A323F is the inactive scatter-dot color, the tooltip border, and the "background" legend swatch. border-soft #3A4150 outlines checkboxes and the off-state toggle knob.

Heatmap ramp. A four-step cyan luminance scale: panel #151820 (none) → heat-1 #1F4951 (low) → heat-2 #3A8E97 (mid) → cyan #6FE1E8 (high).

Typography

Three families loaded via Google Fonts (@import): Inter (400/500/600/700) as the UI display face (.font-display, tracking -0.01em), and IBM Plex Sans (400/500/600) as the scientific face (.font-sci) for uppercase section headers and biology labels. The mono face (.font-mono) is a bespoke stack — Berkeley Mono → JetBrains Mono → ui-monospace — with tnum feature settings; substitute JetBrains Mono or IBM Plex Mono if Berkeley Mono is unavailable. Tabular numerals (tabular-nums) are used pervasively for counts and coordinates.

Token	Size	Weight	Tracking	Transform	Usage
display	13px (base)	600	-0.01em	—	UI labels, headings, body
sci	11px	400	—	—	biology labels, legend, prose
sci-label	10px	400	0.12em	uppercase	section headers (Tissue, Eyepiece…)
mono	11px	400	wider on LIVE	—	counts, coords, IDs, metrics
mono-micro	9px	400	—	—	thumbnail labels, timestamps

Layout

Base unit 4px (Tailwind scale); common steps 2/4/8/12/16/20px. The shell is a full-viewport (h-screen w-screen) flex column that never scrolls — only the left rail and canvas interiors scroll. Top bar (h-11/44px) holds status + a centered zoom segmented control + cell counts + avatar. The main row splits into left rail (15%, min 200px, hairline-r), center canvas (flex-1), and right rail (18%, min 260px, hairline-l). The canvas uses absolutely-positioned cluster regions (e.g. left-[18%] top-[22%] w-[22%] h-[28%]) each holding hand-placed dots and a mono cluster label, plus floating chrome: corner axis labels, a coordinate readout panel (top-right), a vertical tool dock (left-mid), a centered legend and scale bar (bottom). The footer (h-24/96px) is a horizontally-scrolling tray of 112×64px thumbnails. Whitespace is tight and tabular throughout — this is an information-dense instrument, not an airy page.

Elevation & Depth

Flat by design. There are no drop shadows on cards. Depth is built from two slightly-different fills (ink vs panel) and crisp 1px #1F2430 hairlines (.hairline, .hairline-b/-r/-l/-t). The only "shadows" are glows and inset rings: scatter dots carry small colored box-shadow glows (e.g. 0 0 4px rgba(111,225,232,0.45)); inputs get an inset 0 0 0 1px #F3C15A amber ring on focus; active tray thumbnails get 0 0 0 1px #6FE1E8 inset. The canvas itself glows from within via a central cyan radial-gradient.

Shapes

Sharp and small. The dominant radius is rounded-sm (2px) on nearly everything — panels, inputs, chips, stat cards, tooltips, tray thumbnails. The zoom segmented control is the lone rounded-md (6px). Fully-round (rounded-full) is reserved for genuinely circular things: the LIVE status dot, condition toggles, the avatar, scatter dots, the crosshair target, and the ontology pills. Bar-chart tracks use rounded-sm. The vibe is precision-engineered, not soft.

Components

• Top status bar — panel fill, hairline-b, 44px tall; LIVE pulse dot, dataset ID, pipeline commit (mono), centered zoom control, cell tallies, avatar.
• Zoom segmented control — hairline border, rounded-md, 2px padding; active segment seg-active = #1F2430 fill + cyan text; others btn-ghost. Labels: 40× 100× 400× 1000×.
• Rail section header — sci-label (uppercase, 10px, 0.12em) in soft, with a ti-chevron-down or a mono count on the right.
• Gene chip — chip = 1px hairline on rgba(255,255,255,0.01), rounded-sm, soft text; chip-on = cyan-50% border + cyan text. Labels: CD8A CD4 GZMB….
• Ontology pill — same chip styling but rounded-full; amber variant (chip-amber) for ⚑ Doublet score 0.71.
• Input / textarea — ink fill, hairline border, rounded-sm, mono/sci text, muted placeholder; amber focus border + inset amber ring.
• Stat card — ink fill, hairline, rounded-sm; uppercase muted micro-label over a right-aligned white mono value (nGenes 3,217).
• Tool dock — floating panel + hairline, rounded-sm; 28px ghost buttons, Tabler icons accented cyan/amber; pressed state adds #1F2430 fill.
• Tray thumbnail — 112×64px tray-thumb = ink fill + hairline; hover → cyan border; active → cyan border + inset cyan ring; holds mini dot scatter + mono label + amber timestamp dot.
• Tooltip — panel fill, dot-bg border, rounded-sm; mono cell ID, sci cell-type, mono micro stats, amber [HK] reviewer note.
• Scatter dot — 3px (big 4px) circle; inactive dot-bg, voltage variants cyan/magenta/amber with colored glow; scale(2.2) on hover.
• Heatmap cell — square (aspect-ratio:1), filled from the 4-step cyan ramp.
• Toggle — 32×16px #1F2430 pill with a 12px round knob; cyan when on, #3a4150 when off.

Motion

Restrained, instrument-like. The LIVE dot pulses via @keyframes pulse (opacity 1→0.35→1, 1.6s infinite). The selected-cell crosshair target uses Tailwind animate-ping. Scatter dots magnify (transform: scale(2.2), .12s ease) on hover. Ghost buttons and tray thumbnails have hover background/border transitions. No page-load or scroll animation; the JS only toggles active states (zoom, tools, chips, toggles, tray selection).

Iconography

Tabler icons via the webfont CDN (@tabler/icons-webfont), used as <i class="ti ti-*">. Outline style, small sizes (12px micro, 14px standard). Default color is soft; active/tool icons are accented cyan (ti-crosshair, ti-circle-dot, ti-camera) or amber (ti-tag). Icons are functional UI (chevrons, search, crosshair, lasso, ruler, tag, camera) — never decorative.

Do's and Don'ts

• Do keep every number in the mono face with tabular numerals.
• Do reserve cyan/magenta/amber for selected/flagged/annotated respectively — the voltages encode meaning, not decoration.
• Do build depth from ink-vs-panel fills and 1px hairlines; add glow, not shadow.
• Do keep type small (13px base, 9–11px labels) and sections uppercase via the sci-label token.
• Don't introduce drop shadows, large radii, or gradients beyond the canvas glow and heatmap ramp.
• Don't let the shell scroll — only rail/canvas interiors scroll.
• Don't mix the three families' roles (Inter UI, IBM Plex sci, mono numbers).

Known Gaps

• The mono face is the bespoke Berkeley Mono; it is not loaded by @import and falls back to JetBrains Mono / ui-monospace. Substitute JetBrains Mono or IBM Plex Mono.
• Scatter-dot positions and the cluster regions are hand-placed inline; the spacing scale for them is descriptive, not a fixed token grid.
• The canvas radial-gradient (rgba(111,225,232,0.04) → transparent at 60%) and the per-voltage dot glows are read directly from CSS; opacities like bg-cyan-s/80 are Tailwind alpha utilities applied to #6FE1E8.