​
Design System

Everything uses a token-first design system shared across web, Apple, Android, Windows, and future clients.

​
Source of truth

The canonical tokens live in: 
packages/everything-design-system/tokens/everything.tokens.json
The token file uses a DTCG-style structure with three tiers:
  • primitive: raw palette, spacing, radius, type, and motion values.
  • semantic: product roles such as background, surface, text, brand, border, status, and task priority.
  • component: shared component contracts for focus rings, cards, buttons, and inputs.
Do not hand-edit generated platform files. Change the source token JSON, then run: 
npm run design:build
CI and local verification run: 
npm run design:check

​
Generated outputs

  • TypeScript: packages/everything-design-system/src/index.ts
  • Resolved JSON: packages/everything-design-system/platform/json/tokens.json
  • Platform manifest: packages/everything-design-system/platform/json/platform-manifest.json
  • Web CSS variables: packages/everything-design-system/platform/web/tokens.css
  • Electron CommonJS: apps/electron/everything-design-tokens.cjs
  • SwiftUI: apps/apple/Sources/Shared/EverythingDesignTokens.swift
  • Android Compose: apps/android/app/src/main/java/co/sapientic/everything/ui/theme/EverythingDesignTokens.kt
  • Android XML resources: apps/android/app/src/main/res/values/colors.xml
  • Wear OS Compose: apps/android/wear/src/main/java/co/sapientic/everything/wear/EverythingDesignTokens.kt
  • Wear OS XML resources: apps/android/wear/src/main/res/values/colors.xml
  • WinUI: apps/windows/Styles/EverythingDesignTokens.xaml
The package also keeps platform reference copies under packages/everything-design-system/platform.

​
Token groups

  • primitive.color: raw palette values.
  • semantic.color: light and dark color roles for surfaces, text, borders, brand, status, and task priority.
  • component: focus ring, card, button, and input contracts.
  • space: spacing scale from 0 to 64.
  • radius: shared corner radius scale.
  • typography: font family, size, line-height, and weight scale.
  • shadow: web shadow presets.
  • motion: duration and easing tokens.

​
Platform usage

Web imports the generated CSS variables from app/globals.css. Use semantic variables such as --eds-color-surface, --eds-color-text, --eds-space-lg, and --eds-radius-md. Electron reads apps/electron/everything-design-tokens.cjs for shell-level values such as the native window background. The rendered app still uses the web CSS tokens. Apple code uses EverythingDesignTokens directly, with EverythingStyle providing app-level semantic aliases. Android code uses EverythingDesignTokens inside the Compose Material theme. Android resource XML receives generated color resources for launcher/system surfaces. Wear OS has its own generated token file because its Kotlin package differs from the phone app package. Windows code merges Styles/EverythingDesignTokens.xaml at the application level, then pages use resources such as EverythingPageBrush, EverythingPanelBrush, EverythingLineBrush, EverythingTextBrush, and EverythingSubtleBrush.

​
Guardrails

npm run design:check does three things:
  • Verifies generated platform files are up to date.
  • Verifies all required platform outputs exist.
  • Checks required contrast pairs for text, muted text, inverse text, and primary buttons.
  • Fails when product UI source files introduce hard-coded colors instead of tokens.
CI also runs scripts/check-design-source-change.mjs, which rejects generated platform design artifact changes unless they are paired with a shared token or generator change.

​
Rule

Use tokens for product UI decisions. Platform-native controls are still preferred, but colors, spacing, radius, type scale, and motion should come from the shared token source unless a platform-specific accessibility or system convention requires a deliberate exception.