In recent years, I’ve closely followed the transition from responsive design to Intrinsic Design, and I couldn’t be more excited about the impact this shift is having on how we develop interfaces — especially regarding scalability. The main contribution to this comes from the evolution of CSS, and its latest updates have brought significant changes in how we work with design tokens.
Intrinsic what?
If you’re not yet familiar with intrinsic design, let me explain it simply: the idea is to create flexible and fluid interfaces that naturally adjust, instead of being rigid and based on fixed patterns. Basically, we’ll move away from breakpoint-based approaches and focus on alternatives that adapt to content or context of use.
CSS functions play a key role in intrinsic design as they allow for more flexible and adaptable layouts and styles. When combined with design tokens, they gain enormous scalability potential.
I’ve gathered some CSS functions that, in my view, will have a major impact on how we design design tokens and their interfaces.
1. color-mix()
This function is a dream for those working with color palettes. With color-mix(), you can mix two colors and create variants directly in CSS.
:root {
--primary-color: #ff5722;
--secondary-color: #2196f3;
--blend-color: color-mix(in srgb, var(--primary-color) 60%, var(--secondary-color) 40%);
}
Amazing, right? Imagine the possibilities of creating dynamic colors without the need for external tools.
2. clamp()
I love using this function for fluid typography and spacing. It allows you to define a minimum and maximum value at the same time, so the typography or spacing is calculated based on the viewport size or the container the element is in, without exceeding the defined limits.
:root {
--font-size-base: clamp(1rem, 2vw, 1.5rem);
}
Wanna see clamp() in action? Go to utopia.fyi
3. min-content, max-content, fit-content (new values for width, height, flex…)
These new values help define an element’s dimensions based on its content.min-content and max-content allow the element’s size to adjust to the minimum or maximum size of the content, while fit-content adjusts the size more flexibly, but within defined limits.
width: max-content;
height: min-content;
This will make the element’s width adjust to its content, but the height will be adjusted to the minimum possible size that still allows the content to fit.
4. My darling: light-dark() ❤️
This feature will definitely shake up the way you create tokens for light and dark themes. With it, you can assign two colors to a property, and the browser automatically selects the most suitable one based on the color scheme defined, whether by the developer or the user’s preferences. This eliminates the need for additional media queries and simplifies the management of responsive themes.
button {
border: 1px solid light-dark(#cccccc, #333333);
background: light-dark(#f9f9f9, #1a1a1a);
color: light-dark(#333333, #f9f9f9);
}
Designers, this one’s for you too!
I know that often these CSS updates seem like they’re more for developers, but trust me, they’re not! If you’re working with design systems, mastering these tools can make all the difference! They allow you to create guidelines that account for the dynamic behavior of tokens, help anticipate real-world situations in production, and, best of all, make collaboration with devs way more efficient.
So, what do you think? Is there a CSS feature you absolutely love?