DEBrowser Design System
Every component, both themes · rendered from `debrowser.css`

## Eyebrow · headline · stat strip

01 Upload & configure

### Bring your counts & metadata in.

12,481 genes 24 samples 2 conditions

## Buttons

Disabled buttons show `cursor:not-allowed` (§5 T8). Primary is the OK-blue a11y fallback; hover lifts 1px (§5 T5).

## Cards · de_card

Plain card
Body sits on `var(--de-bg-1)`. This is `de_card("Plain card", …)`.
Card with download
Mirrors `de_card(download_id=…)`.
Comparison 1 · Treatment vs Control
Sample grouping
Nested `de_card(class="de-subcard")` inside a `.de-comparison` card (§1 G12).

## Form controls

Text input
Select
Textarea
Checkbox
Radio A
Radio B
Switch
Range

Focus any control with the keyboard for the `:focus-visible` accent-ink ring (§5 T1). Live app renders `selectize`, `DT` and `ion-rangeslider` via their JS libraries.

## Dropdowns & pagination

Native select
Selectize (single)
DESeq2
Selectize (multi)
sample_01×
sample_02×
Open menu
DESeq2
EdgeR
Limma
Show
entries

- Previous
- 1
- 2
- 3
- 4
- Next

Selectize single/multi + open menu, native select, and DT pagination + length.

## Wizard step list

1 Quick start 2 Upload data 3 Filter & normalize 4 DE analysis

States: done · active · idle · locked. Locked steps carry `cursor:not-allowed` (§5 T8) and `pointer-events:none`.

## Nav tabs & pills

Active tab underline wipes in via `transform:scaleX` (§5 T6).

## Alerts & badges

Filtering complete — 8,204 genes retained.
No enriched terms at this cutoff.
Upload failed — could not detect a separator.
Primary DESeq2 optional padj < 0.05

## Workbar & progress

12,481 genes 24 samples

Progress bar uses the brand gradient `var(--de-grad)` — themes the DE-run `withProgress` feedback (§4).

## Table

pathway | size | NES | padj
--- | --- | --- | ---
HALLMARK_APOPTOSIS | 161 | 2.14 | 1.2e-04
HALLMARK_HYPOXIA | 200 | 1.87 | 8.9e-04
HALLMARK_P53_PATHWAY | 200 | -1.62 | 3.4e-03

Live app renders these via `DT`; markup here mirrors `.table.dataTable` styling.

## Iconography · Font Awesome 6

One icon set: Font Awesome 6 Free. The redesign re-asserts the FA font-family so Inter can't clobber glyphs (§3).

## Token palette

Live values of the `--de-*` tokens for the current theme — toggle to see the dark set. Single source of truth: `debrowser.css` · see `DESIGN.md`.