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
Spectrum-blue brand ramp and semantic tokens.
Typeface
PolySans and Azeret Mono specimens.
Icons
Phosphor icon set plus Photon brand marks.
Install
pnpm add @photon/pho-uiThen import per component for the best tree-shaking, and bring in the stylesheet:
import { Button } from "@photon/pho-ui/components/button";
import "@photon/pho-ui/styles";