Components
Components
Theme-aware React primitives and molecules — every component reads semantic tokens only, so it renders on ink and paper without props.
Primitives
components/core · forms · navigation · feedbackAvatar
Circular identity mark — an image, or monogram initials on a neutral surface.
Badge
Small status / category marker carrying a domain accent or the live hue.
Button
The brand's action primitive — five variants from solid contrast to ghost.
Elevated
Default card surface.
Panel
Recessed, lifts on hover.
Contrast
Opposite tone.
Bare
Border appears on hover.
Card
Surface container with the hairline-border hover treatment and four surfaces.
Chip
Flat capsule tag for skills, stacks, and dates — neutral metadata only.
IconButton
Square or round affordance for a single glyph — ghost, outline, or solid.
Input
Hairline-bordered text field or textarea; border brightens on hover and focus.
LiveBadge
The “in motion” indicator — mono elapsed readout with a pulsing live dot.
SectionLabel
The uppercase eyebrow that titles every page band, with optional meta.
Select
Native dropdown styled to the quiet UI, with a custom chevron.
Tabs
Underline navigation — wide-tracked labels with a single moving rule.
VersionBadge
Monospace version tag for design iterations, with lifecycle status.
Molecules
components/contentPostCard
Reading-first blog card — category eyebrow, title, excerpt, and a quiet meta footer.
Design leads hiring specialist designers for design systems, building it for the sake of having one, without engineering alignment.
PullQuote
Editorial excerpt with the 3px accent rule — large light quote and a quiet source.
Designing an AI annotation tool in 12 weeks
24K views · 2 weeks agoVideoCard
16:9 video thumbnail with a duration badge and a hover play affordance.
IterationCard
A frame in a design-iteration gallery — artwork, version tag, and rationale.
Data
components/data · the Chart.js taxonomy in chart inkCycle state
as of todayPanel
Labeled dashboard surface — eyebrow, optional aside, free-form data body.
Open positions
14
37 tickers tracked
StatTile
A single KPI — uppercase label, large light numeral, optional status dot.
TrackBar
Horizontal meter — recessive track, chart-ink fill, optional target tick.
StatusPill
Quiet machine-state pill — one status dot, monochrome text.
LineChart
The Chart.js line type in chart ink — ink-ramp series, hover readouts.
BarChart
The Chart.js bar type in chart ink — rows or columns, targets, one story bar.
DonutChart
The Chart.js doughnut type in chart ink — ordinal segments, center readout.
| Ticker | Weight | Δ 1d |
|---|---|---|
| WGLD | 12.0% | +1.4% |
| CEG | 4.7% | -2.1% |
DataTable
Finance-grade table — mono numerics, delta tinting, sorting, summary footer.