Palette (Design System)
Palette is the design system management service for the Shift Platform. It provides a structured catalog for design tokens, components, patterns, standards, and accessibility rules. Export tokens as CSS, JSON, or Tailwind config. Full-text search across all collections.
What It Does
- Design Tokens — Register and manage color, typography, spacing, and other design tokens with CSS variable and Tailwind mappings.
- Components — Define component specifications with props, variants, examples, and linked tokens/a11y rules.
- Patterns — Document UI patterns with problem/solution pairs, step-by-step guides, and do/don't lists.
- Standards — Define brand and design standards with categorized rules.
- Accessibility Rules — Catalog WCAG-linked a11y rules with severity levels and component associations.
- Export — Export tokens as CSS custom properties, JSON theme objects, or Tailwind configuration.
- Full-Text Search — Search across all five collections by name, description, or tags.
Key Concepts
| Concept | Description |
|---|---|
| Token | A design primitive (color, spacing, typography, etc.) with optional dark mode values. |
| Component | A UI component definition with props, variants, and usage examples. |
| Pattern | A reusable UI pattern documenting a problem/solution approach. |
| Standard | A brand or design standard with categorized rules and guidelines. |
| A11y Rule | An accessibility requirement with WCAG references and severity levels. |
Configuration
| Setting | Value |
|---|---|
| Storage Directory | .palette/ |
| API Dev Port | 4006 |
| Web Dev Port | 4106 |
| Gateway Prefix | /api/v1/palette/* |
Getting Started
Create your first design token:
shift-cli palette tokens add --name "primary-blue" --category color --value "#0066FF"
Or via the API:
curl -X POST http://localhost:3000/api/v1/palette/tokens \
-H "Content-Type: application/json" \
-d '{"name": "primary-blue", "category": "color", "value": "#0066FF"}'
Then explore the design system:
shift-cli palette tokens list
shift-cli palette components list
shift-cli palette search "blue"
shift-cli palette export --format css