Having all of your color tokens available globally can lead to design problems. Instead, scope your colors to specific use-cases such as background or text.

Create a bespoke design system in Tailwind by extending the Tailwind theme with semantic design tokens for different contexts.

Semantic Design Tokens

[00:00] Okay, so we are going to move our colors out of the colors object, but because we're going to keep them and map them, we're going to place these colors in a colors object that we can then reuse or refer to. So I'll copy those lines and cut them off. I can also remove the comment. And

[00:18] intentionally, we will keep these three in the colors object because we want these accessible everywhere. Remember, text color, border color, carrot color, everything needs access to these. So by putting them in colors, they're going to be available in anything colors related,

[00:34] which is exactly what we want. But for the rest, I will go at the top here and go const colors equals and paste my colors here. By the way, we have removed all the colors now, except these three. So our UI should look completely bare bones because there are no more colors to be used.

[00:51] And now we're going to go through the really interesting steps of mapping the colors from Figma in a Tailwind config and then use the actual semantic colors for BG highlight, the actual highlight instead of teal, and then the border muted and stuff like this. And this is

[01:09] going to all take shape and make more sense at the end of this challenge. So we've defined our colors here, and then you can see that we should extend the background colors object for the background colors, the border colors. And when I say objects in Tailwind, they're called core plugins.

[01:25] So there is this concept of plugins and then core plugins. And we can extend all of these core plugins here. And this time we're going to extend them because we want to have them be based with

[01:40] that and then extended with extra colors on top. So here I will extend the background color object. And we need to take a look at Figma here. We want neutral pointing to gray zero. And the way

[01:55] you can make that relationship is have a neutral key, which is going to point to our colors object and then gray, and we'll get the key zero. Next, we want neutral inverted pointed to gray 100.

[02:10] And again, I could go neutral inverted on the next line, but let's create an object for the neutral keys. And if you want one of the keys to be just the parent key neutral, you can use the uppercase default in Tailwind. And so it's not going to be neutral dash default. It's just going

[02:27] to be neutral. It has to be uppercase though for that to happen. We have neutral default and neutral inverted, which is going to be colors dot gray 100. And whoops, I am missing a closing bracket. There we go. So now we've done neutral and neutral inverted. Let's do subtle, which is gray 5.

[02:47] Bold, gray 80. Subtle colors dot gray 5. Bold colors dot gray 80. And then we have highlight, which points to teal, and accent, which points to purple. Let's put them at the top here.

[03:04] Highlight colors dot teal, and accent colors dot purple. And so now this is really cool, because when I go bg dash, you can see that I am presented with exactly the colors that I can use

[03:19] for the background colors. But if I was to go text dash, we still have nothing. I mean, we're going to have inherit current color and transparent, because they are extended from the colors where we've added them. But as you can imagine, once we've done the border and the text colors as well,

[03:37] we're going to have a system that feels really safe and easy to reason about, because we only presented with the options that we can and should use. All right, so let's do the same for the text colors. We have copy gray 100. This time we're going to extend the text color object. So text

[03:56] copy colors dot 100. Subtle is 60. Muted is 40. Subtle colors gray 60. Muted colors gray 40.

[04:11] And inverted, I believe, colors gray, but it's 5. Don't try to trick me, Copilot. Okay, and we'll do the border real quick. We have three of them. Bold, subtle, muted. And it's 60, 40, 20. So this is the

[04:25] border color. Bold colors dot gray dot 60. Subtle is colors dot gray dot 40. And muted is colors dot gray dot 20. So now we have this bespoke design system that feels really good.

[04:43] And if a designer had given you this Figma file and you show them what I'm about to show you, they will love, love, love it. So yeah, pull your designer aside and say, hey, can I show you something real quick? These colors that you asked me to add to the system, look at this background color. You can only use the highlight, accent, neutral, inverted, bold, and subtle.

[05:03] It's pretty cool, huh? And if we go text dash, once again, you're only going to have the copy, subtle, muted, and inverted colors, just like you've told us we can allow to the users. And then finally, if we look at the borders, the same deal. Once we find the colors,

[05:20] we're going to have bold, subtle, and muted. And the same for border X or border Y. Pretty cool, huh? So that is our job done in the Tailwind config file. We have done that task. So let me untoggle these to see what we've done. We've got our background color,

[05:40] text color, and border colors that are consuming the row tokens we have here at the top. And now what we can do is go and update our UI because it's using colors that are not available anymore. We have intentionally removed access to the row tokens.

[05:56] Even if they are the correct colors, we don't want people to use the colors directly. We want them to use the mapping from the design tokens that are semantic and can change colors because later in this challenge or in this workshop, we are going to make a themable

[06:12] dark light strategy. So our UI is all borked in terms of color, but we're going to bring that up. And this is going to be actually pretty cool because this time I can close the panel and we're going to use the language of the semantic tokens. So when I see background subtle,

[06:30] this is what is intended to use and this is exactly what we're going to use. So instead of gray 5, I actually go bg and look for the subtle token, which is here. Remove the comments, remove that. Next on our card, we want to have this white background, which is actually called background neutral.

[06:51] So instead of gray 0, once again, background neutral. And the border is border muted. And so I can go border muted. And you can see now how the Figma file and Tailwind are speaking the same design language and have the same sort of convention for these tokens.

[07:10] And that's one thing I really like about Tailwind is you can turn it into a, what feels like a bespoke design system built specifically for a project because you can just tie in the naming convention and what's available for each things like borders and backgrounds and text colors. And I just think this is awesome.

[07:29] And look at it slowly, but surely it's coming back together. So that was our card. Next, we have the special deal title, which has a color of text muted. So we go replace here gray 40 with muted. How cool is this? We just follow the convention from Figma.

[07:47] This is text copy. And the next one will be text subtle. So in here I can go text copy. And in here I can go subtle. And everything's coming along nicely. Next, we can do the button. Our button has a text inverted and a background bold.

[08:06] So down here, here comes the link. So this background is actually bold. And you can see the swatch showing. And the gray 5 is text inverted, which is almost white. And then here for this hover gray 100, which we kind of made the decision, it's not on the Figma design.

[08:25] Well, let's see if there's one background. And actually neutral inverted is 000. So I think we can use that. It's actually a decent use case. It's meant to be used as a background. So I think designers are going to be cool with that. And so now on a hover,

[08:42] we still have this hover to black effect using the semantic token, which means that in a different theme like dark mode, this neutral inverted might be closer to complete white. So we're not tying it to a gray, which is almost black or completely black,

[08:58] but we have this semantic abstraction that still allows us to make things like theming possible. And brilliant, this is our card done. And then we can quickly move to the rest. This is pretty quick, actually. And I don't really need the Figma file to understand what I need to do here. Instead of BG teal, we got to go BG highlight.

[09:16] This is our main highlight and purple is the accent colors. And then for the text here, text gray 100, which is black. It's not text black, it is text copy. And I'm going to go here as well. And see, I get the hang of things. Like I kind of start to speak the

[09:37] language of the design system, which is awesome. And gray 5 is text inverted. And there it's text inverted as well. Our UI looks exactly like it should. And if we check to verify what I was saying, there is this text copy on this one and the text

[09:55] inverted on that one with the backgrounds of accent and highlight. Amazing. So hopefully you start to understand the reasoning behind making these semantic tokens. We haven't even scratched the surface of the reason why you would do this,

[10:11] but just having a set of choices that is restricted to the minimum that is available is, I think, really cool. Because you're not starting to think, oh, is it slate 400 or zinc 400? Is it indigo or purple or violet? You just have the colors that the designers chose for you to use.

[10:29] And you just pick from a smaller set of choices and it can, in certain things, certain contexts, accelerate things for you.

[00:00] There's a fundamental difference right now between the colors in our Tailwind config and the colors in Figma. In the Tailwind config, all the colors are defined on the colors object and available everywhere, which is the equivalent of that, all colors defined. But remember,

[00:15] we want, at some point, to have various tokens for background, text, and border, and these are very different. For example, teal is only available for a background color, not a text or border. And let me show you why that's a thing. Right now, teal is usable everywhere

[00:32] because in the colors object, and so as a result, I could, if I wanted, to make the special deal text here, text, teal. That's available and that's going to work. But I don't know about you, but this teal text on white background is really hard to read, and I'm pretty sure that's not what the

[00:50] designers intended with the highlight color, which is the teal. So your challenge in this exercise is to scope out the background color, the text color, and border colors, and make them only available for these purposes in Tailwind. You're going to take the row tokens that we have already

[01:08] defined, and then you're going to make scopes for background, text, and border, and map the colors appropriately. There's more info in the descriptions below if you need that. Good luck!

Semantic, themable color design tokens in Tailwind CSS

In this workshop, we're going to define semantic color tokens in Tailwind CSS,
to adhere to a convention set in a Figma design File.

We'll cover both Tailwind CSS v3 and v4 approaches 🔥

## What to expect:

**Figma to Tailwind CSS:** Convert a Figma design to a Tailwind CSS project.

**Color Design Tokens:** Implement custom colors in your Tailwind CSS project,
starting with raw colors and adding a layer of abstraction for semantic color
tokens.

**Semantic Design Tokens:** Lock down color usage to specific scenarios.

**CSS Variables:** Leverage CSS variables to make your color tokens themable.

**Tailwind CSS v4:** Prepare for the future by porting your work to the Tailwind
v4 CSS-first theme configuration.

Tailwind CSS Color Tokens

Simon Vrachliotis

Learn about the role that semantic design tokens play in mature design systems.

Introduction to Tailwind CSS Color Tokens

Introduction

In this exercise, you'll recreate a design from Figma using Tailwind. 

Intro

Recreate a design in Figma using Tailwind as precisely as possible on both mobile and desktop.

Use Tailwind with CSS Grid classes to re-create a design from Figma pixel by pixel.

Design Implementation

Figma to Tailwind CSS

Implement custom colors from a Figma design into a Tailwind project. Starting with the raw colors first and then an abstraction for semantic color tokens.

Extend your Tailwind theme with the 14 raw colors from the Figma design and update the UI to use them.

Extend your Tailwind theme with color tokens and then style your app based on the colors from a Figma design using them.

Custom colors in UI

Cutoff Tailwind's default colors by defining all of the colors directly in theme.colors and override everything else.

Cutoff Default Colors

Overriding Tailwind's color classes got rid of the "non-colors" such as -inherit, -current, and -transparent. Let's add them back!

Add Tailwind's non-colors back by simply adding them to theme.colors before the custom colors.

"Non colors" support

When overriding colors it's easy to wipe out most of Tailwind's core color plugins. Your challenge is to extend your theme with a few missing plugins.

Abstract your semantic design tokens into constants and then reference them in theme.extend for the various core color plugins in Tailwind.

Broader Scopes

Make your design themeable! Move your colors from the Tailwind config into CSS Variables and then consume those variables in the config.

Move your colors and semantic tokens in Tailwind config to CSS Variables using HSL strings to make your colors changeable at runtime.

CSS Variables

Support enabling dark mode support in your tailwind project with just a single class.

Tailwind CSS Color Tokens

Tailwind CSS Color Tokens

Transcript

Semantic Design Tokens

Transcript