Design system
Design system / Components

Reusable pieces with live specimens.

Components are documented by what they do, when to use them, and how they behave visually.

PaperReceiptsActions
04A / Composed

Page-level compositions.

Larger, opinionated layouts assembled from primitives. Use these to start a page, then customize.

04 / Components

Specimens before inventory.

Leadjr components should be testable in context, not just listed by name.

Component
QuietPill

Context label

Morning brief
Component
ReceiptPill

Signal state, source type, or compact metadata

Verified
Component
MagneticPill

Primary route action

Component
EditorialInput

Forms and capture surfaces

ActionSentenceCard

One route should say what changes if you take it.

Open route
PaperPanel

Panels carry story weight, not chrome.

Use for lead reads, evidence groups, route modules, and compact specimens. Do not stack panels inside panels.

04B / Inventory

The current primitive set.

These pieces form the working vocabulary for pages, queues, records, forms, and evidence surfaces.

PaperShell
components/PaperShell.tsx

Global frame: greeting, journey nav, left dispatch desk, content well.

Used in: All app routes

Documented
QuietPill
components/PaperShell.tsx

Small editorial label. Names context without becoming a badge soup.

Documented
PaperPanel
components/PaperShell.tsx

Primary specimen surface. Use for major modules and repeatable blocks.

Documented
ActionSentenceCard
components/PaperShell.tsx

Action route written as a consequential sentence.

Documented
ReceiptPill
app/globals.css (.receipt-pill)

Evidence/state tag. Short, square, black-bordered.

Documented
MagneticPill
app/globals.css (.magnetic-pill)

Command button for route-level actions.

Documented
EditorialInput
app/globals.css (.editorial-input)

Square black-bordered form field with off-white fill.

Documented
EvidenceRail
components/EvidenceRail.tsx

Source-linked claim list with compact provenance.

Used in: Detail pages, case studies

Documented
SiteHeader
components/SiteHeader.tsx

Sticky top header. Switches nav set based on current route.

Used in: All routes

Documented
SiteFooter
components/SiteFooter.tsx

Editorial footer. Animated drawn logo on full pages.

Used in: All routes

Documented
Sidebar
components/Sidebar.tsx

In-page side rail for desk-level views.

Used in: Dispatch desk and adjacent routes

Documented
DispatchDesk
components/DispatchDesk.tsx

Left rail composition: today, queue, capture, jump points.

Used in: Brief / morning surface

Documented
WorkDrawer
components/WorkDrawer.tsx

Reusable bottom-anchored drawer. Replaced TodayOrder.

Used in: Dispatch desk batch interactions

Documented
Card
components/Card.tsx

Default content card. Use sparingly — prefer ruled rows for editorial reads.

Documented
CaseStudyCard
components/CaseStudyCard.tsx

Case-study summary tile with receipts count, filterable.

Used in: /stories index, profile views

Documented
CaseStudyFilters
components/CaseStudyFilters.tsx

Track filter (IC pool / Leadership pool) for /stories index.

Used in: /stories

Documented
CaseStudyMarkdown
components/CaseStudyMarkdown.tsx

Markdown renderer for case-study bodies with receipt-aware footnotes.

Used in: Case study detail pages

Documented
PaperBody
components/PaperBody.tsx

Long-form prose container with editorial measure.

Documented
PipelineTile
components/PipelineTile.tsx

Tile summary of ingestion or pipeline status.

Used in: Ingest review surfaces

Provisional
HeaderConditions
components/HeaderConditions.tsx

Conditional header content (e.g. live weather/time strip).

Provisional
AnimatedFooterLogo
components/AnimatedFooterLogo.tsx

Animated drawn-logo SVG for the footer.

Used in: SiteFooter

Documented
Journal (v2) suite
components/journal-v2/

Editorial timeline + inline entry peek. See subfolder.

Used in: /field-notes

Documented
Readiness suite
components/readiness/

Readiness signal modules: gauges, gap callouts.

Used in: /readiness

Documented
Ingest suite
components/ingest/

Ingestion review components: claim proposals, source excerpts.

Used in: /ingest review surfaces

Provisional
Levels suite
components/levels/

Competency level readout components.

Used in: /readiness, level detail

Provisional