Sign in

Anamnesis — Design System

Living reference for every token, component, and variant. Toggle the theme to preview light / dark; recolor brand values in globals.css.

Semantic Colors

Every semantic color has a full 50–900 scale. ★ marks the DEFAULT alias.

Primary / Accent

50
100
200
300
400
500
600 ★
700
800
900
DEFAULT

Success

50
100
200
300
400
500 ★
600
700
800
900
DEFAULT

Info

50
100
200
300
400
500 ★
600
700
800
900
DEFAULT

Warning

50
100
200
300
400 ★
500
600
700
800
900
DEFAULT

Danger

50
100
200
300
400
500
600 ★
700
800
900
DEFAULT

Feature

50
100
200
300
400
500
600
700 ★
800
900
DEFAULT

Charm

50
100
200
300
400
500
600 ★
700
800
900
DEFAULT

Highlight

50
100
200
300
400 ★
500
600
700
800
900
DEFAULT

Neutral Scale

Brand-tinted grays (hue ≈ 209°). Auto-inverts in dark mode.

50
100
200
300
400
500
600
700
800
900
background
surface
surface-2
surface-3
border
muted

Typography

Sans — Body (--font-sans)

Heading Bold 4xl

Heading Semibold 2xl

Subheading Medium lg

Body Regular base

Caption sm / muted

Tiny xs / muted

Mono — Data (--font-geist-mono)

HLA-B*27:05 · HLA-DRB1*15:01 · Class II

0D396C → 124A7E → 3F80B1

Border Radius

sm (8px)
md (12px)
lg (14px)
full

Shadows

sm
md
lg

Spacing Tokens

6px
8px
12px
16px
24px

Icon Library

Full lucide-react catalogue. Click any icon to copy its name. Icons with an accent ring are currently used in the project.

Usage: import { IconName } from "lucide-react"

5875 icons

Buttons

5 variants × up to 9 colors × 3 sizes. solid → flat → light → bordered → ghost (aliases: secondary=flat, tertiary=light, outline=bordered).

variant="solid"

variant="flat"

variant="light"

variant="bordered"

variant="ghost"

Sizes

Icon Only

With Start/End Content

Loading (Shimmer)

Disabled

Cards

Standard Card

Card with Header, Body, and Footer. Uses the shadow, radius, and surface tokens.

Surface-2 Card

Elevated surface for nested content. Used for content inside another card.

Surfaces & Layering

Semantic surface tokens for nested visual contexts. Every tier is perceptibly distinct from its neighbors in both light and dark mode. Use bg-stripe-a /bg-stripe-b for alternating rows. Use bg-inset for fields, snippets, and code blocks that sit inside any surface.

Elevation Model

background→card (content1)→stripe-a / stripe-b→inset
background
content1
stripe-a
stripe-b
inset

Striped Rows Demo

Q-0001 · HLA Class I structure
Inset field content — snippets, inputs, and code blocks use this surface.
Q-0002 · Peptide-binding groove
Inset field content — snippets, inputs, and code blocks use this surface.
Q-0003 · Class II isotypes
Inset field content — snippets, inputs, and code blocks use this surface.
Q-0004 · Serologic vs molecular typing
Inset field content — snippets, inputs, and code blocks use this surface.

Token Reference

Live swatches — these read the actual tokens, so they always match globals.css. Each maps to a numbered neutral that resolves per theme.

--stripe-a
→ default-50
--stripe-b
→ default-200
--inset
→ default-100

Existing Content Surfaces

The content1–4 scale for card nesting. The stripe/inset tokens compose on top of these — stripes live inside cards, inset lives inside stripes.

content1
content2
content3
content4

Inputs

Chips

Solid

primarysuccessinfowarningdangerfeaturecharmhighlightdefault

Flat

primarysuccessinfowarningdangerfeaturecharmhighlightdefault

Sizes

SmallMediumLarge

Tables

Striped with semantic cell coloring

TopicAttemptedCorrectAccuracy
HLA Class I Structure403793%
Class II & Antigen Presentation352880%
Crossmatching Principles301860%
Nomenclature & Typing25936%

Modals

Accordion

A board-prep study tool for the histocompatibility & immunogenetics community: practice questions mapped to standards and topics, each with source attribution, plus progress tracking.

Tabs

Solid (default)

Underlined

Tooltips

Selects

Checkboxes

Single Checkbox

Checkbox Group

Selected: a

Sizes

Indeterminate

Listbox

  • View details
    Open the full explanation
  • Download
    Export your results
  • Settings
    Manage preferences

Pagination

Full Pagination

Sizes

Progress

Colors

Accent75%
Success100%
Warning45%
Danger20%

Sizes

Small
Medium
Large

Stepper

Question readiness
Topic assigned to a standard
Source attribution present
Every question has one correct choice
2 questions have no correct answer set
Explanation written
3 questions are missing an explanation
Publishing
Publishing question set
Notifying subscribers

Alerts

Toasts (Sonner)

Toasts replace inline success/error state patterns. Centralized via <Toaster /> in root layout.

Spinners

Loading data...
Loading questions...

Skeleton

Loading placeholders. Compose shapes with className — the component is intentionally a blank slate.

animation="pulse" (default)

animation="wave"

animation="none"

Card Skeleton

Table Skeleton

Snippets

npm install @radix-ui/react-accordion
const user = await getCurrentUser()
if (!user?.isAdmin) redirect('/')

Dividers

Horizontal

Content above

Content below

Vertical

Left
Right

Drag & Drop

Move between columns

Built on dnd-kit. Drag a card by its handle onto a column (pointer, touch, and keyboard; auto-scrolls; floating overlay). Primitives:

DndProvider
,
Draggable
,
Droppable
,
DragHandle
.

To review

Crossmatch interpretation
Eplet mismatch

Reviewed

HLA nomenclature