Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Design Token Foundation v1.0.0

Use this resource to bring consistency to a site's styles

New

  • 397 downloads
  • 106 likes
  • 185 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install design-token-foundation

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent inspects your code, counts inconsistent colours and spacings, then writes a token file as CSS variables or a Tailwind theme. It separates global and semantic tokens so dark mode works, migrates a few files and hands you a migration table for the rest.

Mostly picked by

Updated November 2, 2026

CSS token file with colours, spacing and dark mode

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: inspection, intake, build and output format
  • references/token-architecture.md: three-layer taxonomy and Tailwind v3 and v4 wiring

Good fit for

  • Your site has "50 shades of the same blue"
  • You are starting a new site and want a foundation
  • You want to add dark mode cleanly

Not for

  • Creating a brand identity or logo
  • Projects with no front-end code

Tags

  • tokens
  • design system
  • css
  • tailwind
  • dark mode

About

You say

"Set up design tokens for my site and tell me what to migrate first."

CSS token file with colours, spacing and dark mode

Skill published by sanky369 under the MIT license.

Show more

Prerequisites

You bring
An existing front-end project or a brand colour and Your choice on dark mode

How to use it

  1. Install the skill with its references/ folder
  2. Open your front-end project and make the request
  3. Review the token file and the migration table

Content preview

Files

  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/token-architecture.md6.7 KB
  • SKILL.md8.3 KB

Origin and licence

Modified by PalateKit

Author
sanky369
Source
github.com/sanky369/vibe-building-skills/tree/e9714d8decbc9a76eaab3bd85866117b8010e9bc/skills/frontend-design/design-foundation
Licence
MIT

Notice

Version modifiée de « design-foundation » (sanky369, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Is Tailwind required?

No. The skill adapts to Tailwind v3 or v4, or to plain CSS with variables.

Are the paths to other skills blocking?

No. They are just possible next steps. The skill works alone with its reference file.