@lace-cloud/design-tokens

CSS tokens for Lace Cloud's design system. Three-tier architecture: Primitive → Semantic → Component. Single source of truth for colors, spacing, typography, radii, shadows.

Consumed by @lace-cloud/canvas, @lace-cloud/chat-webview, @lace-cloud/ui, and Storybook setups.

Install

npm install @lace-cloud/design-tokens

Usage

Import the tokens stylesheet once at your app's entry:

import '@lace-cloud/design-tokens/tokens.css';

Then reference tokens via CSS custom properties:

.my-component {
  background: var(--lace-bg-surface);
  color: var(--lace-text-primary);
  padding: var(--lace-space-4);
  border-radius: var(--lace-radius-md);
}

For programmatic access from JS/TS (e.g. canvas's pinColor.ts):

import { brand, pin, ui } from '@lace-cloud/design-tokens';

console.log(brand.green); // '#CEFE65'

Conventions

• Tokens first. No raw hex in consumer code. If a color isn't in tokens, add a token here first.
• Three tiers: primitives (concrete values, e.g. --lace-color-green-500), semantic (purpose-named, e.g. --lace-bg-surface), component (component-scoped overrides where needed).
• CSS custom property naming: --lace-{category}-{role}-{variant?}.

License

Proprietary — see LICENSE.