01 — The problem

SvelteKit projects start with no color system

You scaffold a new SvelteKit app and it comes with... nothing. No design tokens. No color conventions. You start writing color: #333 in one component and color: #2a2a2a in another. Six months later you have 47 shades of gray and no idea which ones are intentional.

Scoped styles are great until every component invents its own palette.

02 — The fix

One file. Every component. Same tokens.

Export CSS custom properties from Paletter. Add to src/app.css. Every component references the same five tokens. Background, Ink, Accent, Support, Neutral. The scoped styles stay scoped. The colors stay consistent.

03 — Setup

Three steps. No config.

Generate

Upload a cover image or build from color theory. Paletter extracts five curated colors with assigned roles.

Export

Hit the Export tab. Choose "CSS Variables". Copy the :root block.

Paste

Open src/app.css. Paste the variables. Every component can now reference var(--color-*) in its style block.

04 — In practice

What it looks like in a Svelte component

<div class="card">
  <h2>{ title }</h2>
  <p>{ description }</p>
</div>

<style>
  .card {
    background: var(--color-background);
    color: var(--color-ink);
    border: 2px solid var(--color-support);
  }

  h2 {
    color: var(--color-accent);
  }
</style>

The tokens live in app.css. The component references them by role. Change the palette, every component updates. No find-and-replace. No missed hex values.

05 — We eat our own cooking

Built by a SvelteKit team, for SvelteKit teams

We use it ourselves

Paletter is built with SvelteKit. The token system we export is the same one we use. This is not theoretical advice.

No preprocessor needed

CSS custom properties work natively in Svelte component styles. No PostCSS, no SCSS, no build step surprises.

Scoped + global

Define tokens in app.css. Use them in scoped component styles. The cascade works exactly as you expect.

SSR compatible

CSS custom properties render on the server. No flash of unstyled content. No hydration mismatch.

Generate your SvelteKit palette

CSS tokens that drop into app.css. The same system we use to build Paletter.

Generate a palette View all integrations