@archetypeai/ds-lib-tokens

Tailwind v4 theme for the Archetype AI Design System. Provides semantic design tokens, color palettes, and base styles for use with the shadcn-svelte component registry.

Install

npm install @archetypeai/ds-lib-tokens tailwindcss

Usage

Import the theme before Tailwind in your global CSS:

@import '@archetypeai/ds-lib-tokens/fonts.css'; /* optional → PP Neue Montreal (requires font files in static/fonts/) */
@import '@archetypeai/ds-lib-tokens/theme.css';
@import 'tailwindcss';

<div class="bg-background text-foreground p-md border-border rounded-lg">
  Hello world
</div>

What's Included

| Feature | Details | |---------|---------| | Semantic Tokens | OKLCH CSS variables (shadcn-style): background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, chart-1–5, sidebar, atai-neutral, atai-good, atai-warning, atai-critical| | Brand Tokens | 8 OKLCH palettes with shades 50–950: atai-tangerine, atai-sunshine-yellow, atai-lime, atai-screen-green, atai-fire-red, atai-energy-pink, atai-cool-purple, atai-baby-blue | | Dark mode | .dark class via @custom-variant dark (&:where(.dark, .dark *)) | | Client theme | .client and .dark-client class variants | | Typography | Font-family stacks with system fallbacks and semantic HTML base styles |

Brand tokens are defined in tokens.css and loaded automatically via theme.css.

Fonts

fonts.css is included in this package with @font-face declarations pointing to /fonts/. The CLI (ds create / ds init) copies the actual font files to static/fonts/. Without fonts, the theme falls back to system fonts (system-ui, Courier New).