#Design #Guidelines
Design systems need a color space · Ignoring color spaces is no longer an option https://ilo.im/162qtm

_____
#Color #ColorSpace #DesignToken #DesignSystem #ProductDesign #UiDesign #VisualDesign #WebDesign

#designToken operations are not hear yet, but feel like an integral part of design tokens, without which they will not be sustainable in the long run. @donnie has a neat writeup: https://buff.ly/3BsZ5nd

Personally, I gravitate to the simpler solution suggested in the w3c repo: https://buff.ly/4dmoOeg as it makes it easier for tools to adopt quickly and covers most cases.

#Design #Resources
Design systems glossaries and primitive tokens · The ideas driving conversations about design systems https://ilo.im/160gmd

_____
#Glossary #Jargon #Terminology #DesignToken #DesignSystem #UiDesign #WebDesign #Development #WebDev #Frontend

Interesting post on #decisionTrees for #designSystems #components: https://www.linkedin.com/pulse/decision-trees-ui-components-vitaly-friedman-chgae/

They are a great way of helping folks pick the right component or #designToken.

#Design #Proposals
Design token ugly mode · An approach to uncover hidden design flaws https://ilo.im/15zd8o

_____
#Consistency #DesignToken #DesignSystem #ProductDesign #UiDesign #WebDesign #Development #WebDev #Framework #TechDebt

#Development #Approaches
A structured approach to custom properties · How can we manage CSS variables effectively? https://ilo.im/15zcqz

_____
#CustomProperty #Typology #Naming #DesignToken #DesignSystem #WebDev #Frontend #CSS

#Development #Approaches
Better know a design system: CSS frameworks! · “Arguably, CSS frameworks are design systems for the web.” https://ilo.im/15z72v

_____
#Framework #Tooling #DesignToken #DesignSystem #Design #UiDesign #WebDesign #WebDev #Frontend #CSS

Our #DesignSystem's #DesignToken pipeline has become more of a hydra...

Figma vars & styles
|
+-> DTCG file
|
+-> CSS custom properties
+-> CSS utility classes
+-> Storybook stories for util classes
+-> TS code
+-> TS interface

...and there's more to come: React Native components, docs, etc.

Also, longterm I want to make Figma an output from the DTCG file (or have some kind of 2 way sync), rather than it being the source.

A fresh and interesting take on #designToken naming: https://uxdesign.cc/warhol-design-tokens-3acd49431484

While I am not a big fan of introducing new naming ideas that have to be memorized, others may disagree.

It is definitely food for thought and re-evaluating your own naming convention.

I know it's been done a million times (incl. a few by my past self), but it still feels like magic when demoing a #DesignToken pipeline.

In our case, the demo was:
- Static HTML, React & Angular web apps are all open in browser windows, displaying some of p
our #DesignSystem components
- An Android emulator running a React Native app, also using DS components, is open too.
- I open a Figma library, edit the color of a variable
...

Quite pleased with the #DesignToken pipeline I've just cobbled together:

Figma vars Tokens Brücke DTCG file in a git repo Cobalt UI (configured to output CSS vars) PostCSS (with CSSNano) CSS file

The hard part was that our source Figma lib has *multiple* modes AND I wanted the final output to only include semantic tier tokens (so all the brand-specific color ramps and whatnot are just internal implementation details of our theme). Had to make a custom Cobalt plugin for that.

Great article by @smashingmag on #designProcesses. Interesting approaches like hot Potatoe and the loop by #ibm: https://smart-interface-design-patterns.com/articles/perfect-design-process/

I agree that you need to find out what works for you and your team. But it's also important to understand that it depends on the phase of a project and the kind of project. Starting a new product is very different to implementing a new #designToken strategy.

.@zetareticoli comments on a context dilemma with #tokens:
https://designtokens.substack.com/p/the-context-dilemma I feel context specific #designTokens are still the way to go. Repetition in this case is no problem. Ease of use without knowledge of the system should be the primary goal of any #designToken set.

Has anyone succeeded in automating design tokens (system) from the designer to developers? I try Specificy but it can extract Figma token just first level in group? I am interested in Style-Dictionary but not sure it’s going to work. #react #designsystem #designtoken

Thinking about #DesignToken documentation lately as we'll be doing a lot of that at work soon.

Have you seen any great examples? What about them stands out to you?

Beyond the obvious listing tokens with names, descriptions and previews, what *else* are people doing?

For themeable systems there are potentially different audiences too:
- theme makers
- component implementers
- componnent consumers trying to tweak styling

How do you help each find what they need to know?

Color: My journey through the spectrum · New ways to explore and work with color https://ilo.im/103qnl

_____
#design #tools
#UIdesign #webdesign #designSystem #dataviz #accessibility #a11y #generator #designToken #colorPalette #color #colorName

Super proud of my son, as he created this can, using our physical #designtoken transformer, to be my new pen holder, as I was missing one on my table. Guess this will be our first official kickstartDS merchandise article #styledictionary #token #designsystem

Designing a color system · An efficient way to design a color system with light and dark modes https://ilo.im/zr6mj

#design #business #techniques
#UIdesign #webdesign #brand #designsystem #designtoken #colorsystem #color

Last time we highlighted all the cool features enabled by #DesignToken ... this time we shine some light on #ContainerQueries. One of the most exciting new features of the #opensource release. There were a couple of articles lately, e.g. from @brad_frost or Dan Donald

https://www.kickstartds.com/blog/release-spotlight-container-queries/

Complementary Space · A provocative take on how we think of space in design https://ilo.im/zhdwv

#webdesign #webdevelopment #approaches
#UIdesign #designsystem #designtoken #frontend #css