Bonus
Design token swatch sheet
Palette, spacing and radii with copyable values
Palette, spacing and radii with copyable values
Build a design token reference sheet with Tailwind CSS. Start with a heading, a muted line naming the version, and a segmented control for three sections — colour, spacing, radius. The colour section is a grid of swatch cards: each has a tall block of the colour, then the token name in monospace, the hex value in muted monospace, and a small contrast note reading the ratio against white or black. Include eleven neutrals and four accents. The spacing section is a list of rows showing the token name, a bar whose width equals the value, and the pixel and rem values in monospace. The radius section is a row of six squares with increasing corner rounding and their token names beneath. Then add JavaScript that copies a token name on click and flashes a small check overlay on the swatch that was copied.<section class="mx-auto max-w-4xl px-6 py-14">
<h1 class="text-3xl font-semibold tracking-tight text-neutral-900">Design tokens</h1>
<p class="mt-2 text-neutral-500">Version 3.1 · click any token to copy its name.</p>
<div class="mt-6 inline-flex rounded-xl border border-neutral-200 p-1">
<button class="rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white">Colour</button>
<button class="rounded-lg px-4 py-2 text-sm font-medium text-neutral-600 transition hover:text-neutral-900">Spacing</button>
<button class="rounded-lg px-4 py-2 text-sm font-medium text-neutral-600 transition hover:text-neutral-900">Radius</button>
</div>
<p class="mt-8 text-xs font-semibold uppercase tracking-widest text-neutral-400">Neutrals</p>
<div class="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="neutral-50">
<span class="relative block h-16 bg-neutral-50"><span class="flash absolute inset-0 hidden place-items-center bg-neutral-900/80 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">neutral-50</span><span class="block font-mono text-[11px] text-neutral-400">#fafafa</span></span>
</button>
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="neutral-100">
<span class="relative block h-16 bg-neutral-100"><span class="flash absolute inset-0 hidden place-items-center bg-neutral-900/80 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">neutral-100</span><span class="block font-mono text-[11px] text-neutral-400">#f5f5f5</span></span>
</button>
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="neutral-200">
<span class="relative block h-16 bg-neutral-200"><span class="flash absolute inset-0 hidden place-items-center bg-neutral-900/80 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">neutral-200</span><span class="block font-mono text-[11px] text-neutral-400">#e5e5e5</span></span>
</button>
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="neutral-400">
<span class="relative block h-16 bg-neutral-400"><span class="flash absolute inset-0 hidden place-items-center bg-neutral-900/80 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">neutral-400</span><span class="block font-mono text-[11px] text-neutral-400">#a3a3a3</span></span>
</button>
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="neutral-600">
<span class="relative block h-16 bg-neutral-600"><span class="flash absolute inset-0 hidden place-items-center bg-neutral-900/80 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">neutral-600</span><span class="block font-mono text-[11px] text-neutral-400">#525252</span></span>
</button>
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="neutral-900">
<span class="relative block h-16 bg-neutral-900"><span class="flash absolute inset-0 hidden place-items-center bg-white/90 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">neutral-900</span><span class="block font-mono text-[11px] text-neutral-400">#171717</span></span>
</button>
</div>
<p class="mt-8 text-xs font-semibold uppercase tracking-widest text-neutral-400">Accents</p>
<div class="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="green-600">
<span class="relative block h-16 bg-green-600"><span class="flash absolute inset-0 hidden place-items-center bg-white/90 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">green-600</span><span class="block font-mono text-[11px] text-neutral-400">#16a34a · 4.6:1 on white</span></span>
</button>
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="amber-400">
<span class="relative block h-16 bg-amber-400"><span class="flash absolute inset-0 hidden place-items-center bg-neutral-900/80 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">amber-400</span><span class="block font-mono text-[11px] text-neutral-400">#fbbf24 · 1.7:1 on white</span></span>
</button>
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="red-500">
<span class="relative block h-16 bg-red-500"><span class="flash absolute inset-0 hidden place-items-center bg-white/90 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">red-500</span><span class="block font-mono text-[11px] text-neutral-400">#ef4444 · 3.8:1 on white</span></span>
</button>
<button class="token overflow-hidden rounded-xl border border-neutral-200 text-left" data-token="blue-600">
<span class="relative block h-16 bg-blue-600"><span class="flash absolute inset-0 hidden place-items-center bg-white/90 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span></span>
<span class="block p-2.5"><span class="block font-mono text-xs text-neutral-900">blue-600</span><span class="block font-mono text-[11px] text-neutral-400">#2563eb · 5.2:1 on white</span></span>
</button>
</div>
<p class="mt-10 text-xs font-semibold uppercase tracking-widest text-neutral-400">Spacing</p>
<div class="mt-3 space-y-2 rounded-xl border border-neutral-200 bg-white p-5">
<div class="flex items-center gap-4"><span class="w-16 shrink-0 font-mono text-xs text-neutral-900">space-1</span><span class="h-3 rounded bg-neutral-900" style="width:4px"></span><span class="ml-auto font-mono text-xs text-neutral-400">4px · 0.25rem</span></div>
<div class="flex items-center gap-4"><span class="w-16 shrink-0 font-mono text-xs text-neutral-900">space-2</span><span class="h-3 rounded bg-neutral-900" style="width:8px"></span><span class="ml-auto font-mono text-xs text-neutral-400">8px · 0.5rem</span></div>
<div class="flex items-center gap-4"><span class="w-16 shrink-0 font-mono text-xs text-neutral-900">space-4</span><span class="h-3 rounded bg-neutral-900" style="width:16px"></span><span class="ml-auto font-mono text-xs text-neutral-400">16px · 1rem</span></div>
<div class="flex items-center gap-4"><span class="w-16 shrink-0 font-mono text-xs text-neutral-900">space-6</span><span class="h-3 rounded bg-neutral-900" style="width:24px"></span><span class="ml-auto font-mono text-xs text-neutral-400">24px · 1.5rem</span></div>
<div class="flex items-center gap-4"><span class="w-16 shrink-0 font-mono text-xs text-neutral-900">space-10</span><span class="h-3 rounded bg-neutral-900" style="width:40px"></span><span class="ml-auto font-mono text-xs text-neutral-400">40px · 2.5rem</span></div>
<div class="flex items-center gap-4"><span class="w-16 shrink-0 font-mono text-xs text-neutral-900">space-16</span><span class="h-3 rounded bg-neutral-900" style="width:64px"></span><span class="ml-auto font-mono text-xs text-neutral-400">64px · 4rem</span></div>
</div>
<p class="mt-10 text-xs font-semibold uppercase tracking-widest text-neutral-400">Radius</p>
<div class="mt-3 flex flex-wrap gap-4">
<div class="text-center"><div class="h-16 w-16 bg-neutral-200"></div><p class="mt-2 font-mono text-[11px] text-neutral-500">none</p></div>
<div class="text-center"><div class="h-16 w-16 rounded bg-neutral-200"></div><p class="mt-2 font-mono text-[11px] text-neutral-500">sm</p></div>
<div class="text-center"><div class="h-16 w-16 rounded-lg bg-neutral-200"></div><p class="mt-2 font-mono text-[11px] text-neutral-500">lg</p></div>
<div class="text-center"><div class="h-16 w-16 rounded-xl bg-neutral-200"></div><p class="mt-2 font-mono text-[11px] text-neutral-500">xl</p></div>
<div class="text-center"><div class="h-16 w-16 rounded-2xl bg-neutral-200"></div><p class="mt-2 font-mono text-[11px] text-neutral-500">2xl</p></div>
<div class="text-center"><div class="h-16 w-16 rounded-full bg-neutral-200"></div><p class="mt-2 font-mono text-[11px] text-neutral-500">full</p></div>
</div>
</section>Array.prototype.slice.call(document.querySelectorAll(".token")).forEach(function (button) {
var flash = button.querySelector(".flash");
button.addEventListener("click", function () {
navigator.clipboard.writeText(button.dataset.token).then(function () {
// A tick over the swatch itself, so the feedback is where the eye already is.
flash.classList.remove("hidden");
flash.classList.add("grid");
setTimeout(function () {
flash.classList.add("hidden");
flash.classList.remove("grid");
}, 700);
});
});
});