Pine Design System is a React UI library that lets you switch between basic, game, and crayon looks in a single codebase. Built on Base UI for accessibility, with light and dark mode support.
Toggle the design to see every component update instantly — same code, different design prop.
Vanilla Extract token contracts keep color, spacing, and typography in one place, resolved per theme.
Headless primitives for keyboard and screen reader accessibility with consistent behavior.
Sync the theme prop with system preferences so every design supports light and dark mode.