Single source of truth for design tokens, components, and patterns across the Perpetuals · Barriers · UpsideOnly product family. Same structural skeleton — radius, spacing, motion, sizing — wearing three different brand colors and feels.
Single CSS file, ~40 KB. CORS enabled — works cross-origin.
<link rel="stylesheet"
href="https://perpetuals-design-system.pages.dev/tokens.css">
<div data-brand="upsideonly">
<button class="fam-btn fam-btn--primary fam-btn--xl">
Submit Trade
</button>
</div>
Coming in v0.5: framework wrappers (`@perpetuals/ui-react`, `ui-angular`).
npm install @perpetuals/design-tokens
# in your entry CSS:
@import "@perpetuals/design-tokens/tokens.css";
# (optional, after v0.5):
import { Button } from '@perpetuals/ui-react';
<Button variant="primary" size="xl">Submit</Button>
