APT Platform
Design System
Single source of truth for all UI components, tokens, and patterns. Every page must use these components exclusively.
Color Tokens
Background
#0a0a0a
Surface
#111111
Surface High
#1a1a1a
Primary (Teal)
#5ECECE
Text
#ffffff
Text Muted
rgba(255,255,255,0.45)
Success
#4ade80
Warning
#facc15
Danger
#f87171
Info
#60a5fa
Border
rgba(255,255,255,0.08)
Typography Scale
Button System
Variants
variant="primary"variant="secondary"variant="tertiary"variant="destructive"variant="ghost"Sizes
size="sm"size="md" (default)size="lg"States
loadingdisabledicon={Zap}Badge System
Badge variants (component not exported)
Import badge components from @/components/ds when implemented.
Form Fields
Form components not yet exported from @/components/ds.
Cards
Card Example
Card body content.
Clickable Card
Pass an onClick prop to make cards interactive.
Tabs
Tabs component not yet exported from @/components/ds.
Data Table
Table component not yet exported from @/components/ds.
Modal
Spacing Scale (4px base)
Usage Rules
Import from @/components/ds — never create one-off styled elements
Use OpsShell as the wrapper for every admin/ops page
Use StatusBadge for all Registration / Tournament statuses
Use StatTile for all KPI numbers in dashboards
Use the DS Table for all admin list views
Use Modal (not browser alert/confirm) for all actions
Never hardcode hex colors — use tokens from tokens.js
Never create page-specific font sizes or button styles
Never use browser alert() or prompt() in final UI
Never use Tailwind colors directly — use the DS color names