Pockets UI

The BiggerPockets design system: a 3-tier token architecture and a set of accessible React components, built on Panda CSS and React Aria.

How it fits together

Pockets owns every scale. Primitive tokens (OKLCH color ramps, the 4px spacing grid, type scales) feed semantic intents like bg, fg.subtle, and border.danger, which carry light and dark values. Components consume semantics through component-level tokens, so retheming never requires a recipe edit. Toggle the theme in the sidebar to preview dark mode on any page.

Explore

TokensColor ramps, typography, spacing, radii, elevation, borders, animation, and layout scales.ComponentsAccessible React components built on React Aria: Button, TextField, Checkbox, Dialog.Text stylesComposite typography tokens matching the Figma type scale.ContributingRepo layout, local development, and how to add tokens and components.