Component Reference

Every component and its states, built entirely from tokens.css. Toggle Light/Dark and Colour-blind above to verify each in context. This page uses only CSS custom properties and a few vanilla-JS toggles; the production Vue app maps each block to the component named in DESIGN.md.

Colour tokens

Switch theme to see both palettes. Text tokens meet WCAG AA on their paired surfaces (see DESIGN.md §3).

--paper

--surface

--surface-2

--ink

--ink-soft

--ink-faint

--line

--line-strong

--accent

--accent-soft

--accent-ink

--hi

--hi-soft

--hi-ink

--mid

--mid-soft

--mid-ink

--low

--low-soft

--low-ink

Typography

Display · serif 700

Section title · serif 700

Body · sans 400. The retired academic reads here every day.

Secondary / meta · sans, ink-soft

doi:10.1177/09567976251234567 · mono, ink-faint

Buttons

Variants · default / hover / focus / active / disabled (hover & focus are live)

Inputs & controls

Display name *

Email * Enter a valid email address.

Sync schedule

Toggle (switch)

Colour-blind badges

Checkbox

Select row

Radio

Candidate A Candidate B

Badges — the two status vocabularies

Confidence and source health share one colour scale. Toggle Colour-blind to add outline patterns (solid / dashed / dotted).

Matching confidence

ConfidentLikelyUncertainNot yet identified

Source health

HealthyCooling downNot connected

Open access

OA checking none

Role

ReaderAdmin

Filter chips / tabs

All 14Unread 3NewFavoritesPsychology

List row — publication

PSYReappraisal flexibility predicts affective recovery

K. Ramaswamy · Psychological Science · 2026 · doi:10.1177/09567976251234567

PHYNonreciprocal magnon transport (read)

S. Andersson · Phys. Rev. Lett. · 2026

none

Card / panel

Where data comes from

UnpaywallCooling down

Skeleton (loading)

Empty state

Nothing to read yet

When the researchers you follow publish, their work appears here.

Toast + undo

Lucas Bakker was removed.

Auto-dismiss after 5s. Carries an Undo for every consequential change. One toast at a time; new ones replace the old.

Modal — destructive confirmation

Remove Lucas Bakker?

This deletes their account and personal followed list. The shared publication pool is untouched.

Pagination

123…25Showing 1–12 of 247

Mobile tab bar

HomeReadingAuthorsReviewMore

Icon set

dashboardpublicationsauthorsreviewsourcesactivitysettingssearchcheckcircledotplusexternalchev-leftchev-rightarrow-leftundosunmoonsystemsignoutwarningxoalockpendingbookuploadeye

404

That page is not on the shelf

It may have been merged, removed, or never existed. Nothing is broken.