Skip to content

Foundation / Component Inventory - reusable components + tokens

StageBuilding
StatusPartial
Design statusIn progress
EstimateM
ConfidenceHigh
LinearPIN-11 ↗ PIN-233 ↗
Linear statusDone
DesignDesign ↗
Linear epicPlatform Foundation
ModuleSettings & Admin ↗

Priority: Low

Scope

Shared UI component library (44 primitives — layout, data display, forms, feedback, navigation) extracted from the design prototype and rebuilt on a consistent design-token system, so every page draws from the same components and tokens rather than one-off styling. Cara's brand tokens (color, shadow, spacing, typography) are loaded as CSS custom properties and mapped into the theme system. (Source: PIN-11, PIN-233.)

Acceptance criteria

  • Shared component library covers layout, data display, forms, feedback, and navigation primitives
  • Every frontend page consumes the shared library rather than page-local components
  • All brand palette colors available as CSS custom properties (design tokens)
  • Shadow, spacing, and typography tokens loaded alongside color tokens
  • No hardcoded hex values in branded components — tokens only
  • Theme utilities (e.g. brand color classes) usable across the app

Conor's comments

Want a token inventory that can be changed for different tenants

Notes

Design-system reference; tokens shipped (v1.0 canon)

Open question for Conor

-