Pho Design System
Photon's unified design system — the single source of truth for our product UI. Built on Base UI andTailwind v4, themed with the--pho-* token system (light & dark via light-dark()), and shipped as tree-shakeable, per-component packages.
Foundations
Branding
The Photon mark, wordmark, and product marks.
Colors
Monochrome surfaces, alpha text hierarchy, and semantic tokens.
Typeface
PolySans and Azeret Mono specimens.
Scale
Spacing, radius, and elevation — the numeric scales.
Icons
Tabler icon set plus Photon brand marks.
Install
pnpm add @photon-ai/pho-uiThen import per component for the best tree-shaking, and bring in the stylesheet:
import { Button } from "@photon-ai/pho-ui/components/button";
import "@photon-ai/pho-ui/styles";