Armağan Amcalar PRO
Armagan is the founder of Coyotiv GmbH, and is currently on a mission to bring a scalable and nimble engineering culture to startups and enterprises. Armagan is a public speaker, a mentor and a lecturer.
Rethinking Colors in Design Systems
A CSS Approach to Idiomatic Design
Armağan Amcalar
WHO AM I?
AUTHORED ON GITHUB
what is your experience with Colors
in design systems?
dashersw
Atlassian
dashersw
Atlassian
dashersw
Bootstrap
dashersw
Bootstrap
dashersw
ANT DESIGN
dashersw
ANT DESIGN
dashersw
CARBON
dashersw
Caveats
Which shade to use when?
Impossible to remember numerical names
Having to look up exact color token in design
No constraints on odd color combinations
dashersw
WHY ARE WE DOING THIS?
dashersw
Are you developing a framework or a design system?
dashersw
Our journey at neol started with this
dashersw
we reduced it to this
dashersw
A design system has 3 roles working on it.
Designer
Design system developer
UI developer
... and they all want different things.
dashersw
So we need a better approach that aligns all 3 roles.
something that would feel natural and easy to create, think of, and use.
dashersw
dashersw
How do I add color to this?
<div class="card">
<h1>Log in</h1>
<p>Welcome to the Design System. Please log in to access the palettes.</p>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</div>
dashersw
How many shades are there?
dashersw
How do I have more colors?
dashersw
Let's think algorithmically
dashersw
Shade as a function of...
FUNCTION. 🤷♀️
Frameworks have started acknowledging this, too.
Ant Design is offering programmatic palette creation
through @ant-design/colors package.
Bootstrap offers tint-color() and shade-color() functions
Demo tIme!
What about other color SPACES?
Glad you asked! Let's play with them!
THANK YOU!
Armağan Amcalar
dashersw
Slides: https://slides.com/armaganamcalar/rethinking-color
Repository: https://github.com/dashersw/colors
Good reads:
- Bootstrap: Bootstrap Color Docs
- Ant Design: Ant Design Colors
- Material Design: Material Design Color System
- Carbon: Carbon Design Color Usage
- Atlassian: Atlassian Design Color
- OKLCH: Playground, Evil Martians’ Article on OKLCH
Rethinking Colors in Design Systems: A CSS Approach to Idiomatic Design
By Armağan Amcalar
Rethinking Colors in Design Systems: A CSS Approach to Idiomatic Design
Rethinking Colors in Design Systems: A CSS Approach to Idiomatic Design” presents an innovative perspective on color management in design systems, aiming to simplify and enhance the developer experience. This talk focuses on the problematic aspects of current design systems, such as confusing color naming conventions and overly extensive color palettes, that make the development process complex and counterproductive. Armagan advocates for a refined approach that leverages CSS’s power to make color implementation more idiomatic and intuitive, hence streamlining the development process. The ultimate goal of a design system should be to facilitate ease in development, not to provide a baffling array of options that distract from the core coding task. The presentation introduces strategies to create a more functional, efficient, and developer-friendly environment. We emphasize limiting the options for colors, not to limit creativity, but to allow developers and designers to focus on the essence of their work—coding and designing. Join Armagan as he dives into how we can revolutionize our approach to colors in design systems and take a significant step towards a more effective and streamlined developer experience.
