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

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

DESeq2
sample_01×
sample_02×
DESeq2
EdgeR
Limma

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

Wizard step list

1Quick start 2Upload data 3Filter & normalize 4DE 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

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

pathwaysizeNESpadj
HALLMARK_APOPTOSIS1612.141.2e-04
HALLMARK_HYPOXIA2001.878.9e-04
HALLMARK_P53_PATHWAY200-1.623.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.