Design tokens for Svelte

CSS variables, stores, and SvelteKit

Svelte's component model is CSS-first — styles live in the component, scoped by default. Design tokens as CSS custom properties are a natural fit. A designtoken.md gives your coding agent full color scales, typography hierarchies, and spacing systems so it generates consistent Svelte components from the start.

Foundation

How Svelte uses tokens

Three core patterns for integrating designtoken.md into your Svelte project.

Component Level

Component Styles

Svelte's <style> blocks are scoped by default. CSS variables from designtoken.md work naturally: color: var(--color-primary-500). Agent reads the token file and generates semantic references, not hardcoded values.

State Management

Stores for Dynamic Theming

Svelte stores make theme switching reactive. Agent generates writable stores referencing your token scales: $theme.color.primary[500]. Full hierarchy means proper light/dark mode support.

Project Setup

SvelteKit

File-based routing, server-side rendering, same designtoken.md in your project root. Agent reads it for every route and layout. Works with SvelteKit's +layout.svelte for global token application.

Example

What your agent generates

A Svelte component built with designtoken.md variables.

Button.svelte

Svelte component
<script> export let variant = 'primary' </script> <button class="btn btn-{variant}"> <slot /> </button> <style> .btn { font-size: var(--font-body-sm); font-weight: 500; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); transition: background 0.2s ease; } .btn-primary { background: var(--color-primary-500); color: var(--color-white); } .btn-primary:hover { background: var(--color-primary-600); } </style>
Compatibility

Works with your Svelte stack

designtoken.md integrates seamlessly with modern Svelte tooling.

SvelteKit

  • Full-stack framework, same token file in project root.
  • Agent reads designtoken.md for every route and layout.
  • No configuration needed — markdown is context.

Svelte 5 (Runes)

  • Reactive tokens with $state and $derived, same CSS variables.
  • Framework-version agnostic — designtoken.md works everywhere.
  • Snippets and components use identical token references.

Skeleton UI

  • Theming via CSS variables compatible with designtoken.md.
  • Agent uses your token scales instead of Skeleton defaults.
  • Full customization without template override.

Tailwind + Svelte

  • designtoken.md outputs Tailwind config alongside markdown.
  • Agent generates utility classes with semantic intent.
  • Works with SvelteKit's default Tailwind integration.
FAQ

Common questions

Do I need an npm package for designtoken.md?
No. It's a markdown file in your project root. Your coding agent reads it directly — no packages, no plugins, no build config.
Does it work with Svelte 5?
Yes. designtoken.md is framework-version agnostic. Svelte 5's runes and snippets work with the same CSS variables and token references.
Can I use designtoken.md with UnoCSS in SvelteKit?
Yes. UnoCSS is utility-first like Tailwind. The designtoken.md generator outputs compatible token config, and the markdown gives your agent the semantic context for generating correct utility classes.

Generate your Svelte design tokens

Create a designtoken.md file for your Svelte project, free, no signup.

Start generating →