CSS Day 2025
Design Token Architecture
About this presentation
<div class="flex-1 flex flex-col gap-3 px-4 max-w-3xl mx-auto w-full pt-1"> <div data-test-render-count="1"> <div> <div class="group relative -tracking-[0.015em] pb-3" data-is-streaming="false"> <div class="font-claude-message relative leading-[1.65rem] [&_pre>div]:bg-bg-000/50 [&_pre>div]:border-0.5 [&_pre>div]:border-border-400 [&_.ignore-pre-bg>div]:bg-transparent [&>div>div>:is(p,blockquote,h1,h2,h3,h4,h5,h6)]:pl-2 [&>div>div>:is(p,blockquote,ul,ol,h1,h2,h3,h4,h5,h6)]:pr-8"> <div> <div class="grid-cols-1 grid gap-2.5 [&_>_*]:min-w-0"> <p class="whitespace-normal break-words">Design system veterans Brad Frost and Ian Frost tackle one of the biggest challenges facing modern organizations: how to maintain consistent design across multiple products, brands, frameworks, and platforms. Drawing from their extensive experience working with companies like Salesforce, Starbucks, and Caterpillar, the brothers demonstrate how most organizations today are "multi-all-the-things" entities juggling numerous websites, native apps, white-label products, and rebrand efforts. They reveal the painful reality of traditional brand rollouts—where a simple color change can become a million-dollar, months-long ordeal requiring manual updates across disconnected systems.</p> <p class="whitespace-normal break-words">The solution lies in design tokens: a new separation of concerns that treats visual design decisions as data. Through live examples and practical code demonstrations, Brad and Ian show how design tokens create a centralized system where changing "Starbucks Green" to "Starbucks Purple" becomes a single line update that propagates across all touchpoints instantly. They walk through their proven three-tier token architecture, demonstrate multi-theme implementations from light/dark modes to complete rebranding, and share hard-won insights about getting developers involved in the naming and architecture process. The talk concludes with a compelling vision for a global design system that could eliminate the endless rebuilding of common components like date pickers and form fields, freeing developers to focus on truly innovative work.</p> </div> </div> </div> <div class="absolute bottom-0 right-2 pointer-events-none"> <div class="rounded-lg transition min-w-max pointer-events-auto translate-x-2 translate-y-full pt-2"> <div class="text-text-300 flex items-stretch justify-between"> <div> <div class="relative"></div> </div> <div class="flex items-center gap-0.5"><button id="radix-«rcn»" class="inline-flex items-center justify-center relative shrink-0 can-focus select-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:drop-shadow-none flex flex-row items-center gap-1 rounded-md p-2 py-1.5 text-sm transition-opacity delay-100 hover:bg-bg-300 select-none" type="button" aria-haspopup="menu" aria-expanded="false" data-state="closed">Retry</button></div> </div> </div> </div> </div> </div> </div> <div> <div class="ml-1 mt-0.5 flex items-center transition-transform duration-300 ease-out"> <div class="p-1 -translate-x-px"> <div class="w-8 text-accent-brand inline-block select-none" data-state="closed"></div> </div> <div class="text-text-400 pt-5 flex-1 text-right text-[0.65rem] leading-[0.85rem] tracking-tighter sm:text-[0.75rem]"><a class="inline-block underline-offset-2 transition-opacity hover:underline select-none opacity-100 duration-700" href="https://support.anthropic.com/en/articles/8525154-claude-is-providing-incorrect-or-misleading-responses-what-s-going-on" target="_blank" rel="noopener" data-state="closed">Claude can make mistakes. <br class="block sm:hidden" />Please double-check responses.</a></div> </div> </div> <div aria-hidden="true"></div> </div> <div class="sticky bottom-0 mx-auto w-full pt-6 z-[5]"></div>