Quick question on design token philosophy
(This might be better for ui/ux) I've recently read Brad Frost's Atomic Design and looked into design tokens. Really cool stuff and seems super useful for bigger projects/scalability. My question is, I'm not sure if I'm using it right. Should I go all in with every css property being a design token, or is it okay to use a mix of both, or other? For example:
5 Replies
I've also realized with this project, since I'm not automatically syncing a style guide to my design tokens, that it is probably a bad idea to do design tokens, as a lot of the benefits gets diminished. But I started it anyway! If anyone has good software/implementations of syncing a style guide (say in Figma or another software) into your stylesheets, please let me know! I'm new to this stuff
I would say that colors, fonts, sizes, etc (basically all the things which could be one of a wide range of custom values) should be design tokens as that way you can ensure consistency across your application and quickly change all of, eg, your links text color.
Whereas things which must be one of several predefined values should be set on a per-selector basis.
Most of all though, use common sense.
If you find yourself changing the same property across many classes, time for a design token.
If you have a design token which is only used in one specific case, probably make it hard-coded.
Ultimately you will never be able to correctly lay out your design tokens before you start composing selectors, and you'll probably be adding and removing tokens for the full duration of your work with the design system you're using.
Make reasonable assumptions, and be comfortable with writing out large chunks of CSS knowing that you may have to refactor parts of it to make use of tokens.
Thank you, great advice!!
https://github.com/5t3ph/moderncss-dot-dev/blob/main/src/sass/_color-tokens.scss
I tried to find Mikes work on FEHorse but 🤷♂️ I'll try to find teh vod from Spooktacular event
I think I showed you kinda how he does it. Or rather how I do it haha
something more like this
so same with fonts, then I will do some gap/spacer tokens and context tokens to keep spacing uniform. Like gaps will match .spacer > * + * etc.
Also fallbacks imo are your friend you can do vars in them so
You can see how steph builds with Sass though that might help a bit too, you can apply the same login I am with $vars
Ah I remember you showing me this, but it makes a lot more sense now with this example!! Thank you!