If you’ve been exploring prototypes or mockups using tools that generate code under the hood, it’s worth thinking about how code acts as a design material—because it’s a lot more than something that makes mockups interactive or ties them to a real design system.
A few examples.
Colors. CSS has more ways to express color than any other design tool available. We can use additional color spaces like OKLab and OKLCH, but more importantly, we can write functions to create colors—mixing them, shifting hue, adjusting saturation or lightness from a base value. Color calculations are something visual design tools simply don’t allow for.
Typography. Many web fonts offer variable versions that let you dial in any weight across a continuous range. But design tools don’t support clamp()-based sizing, where type sizes scale fluidly with the available viewport or container width. This approach—sometimes called fluid typography—is easy to express in code and nearly impossible to visualize in any other tool.
clamp()-based sizing scales type and spacing fluidly between a minimum and maximum—no breakpoints, no media queries. Inspired by the interactive demo at utopia.fyi.Layout. Software interfaces are fundamentally flexible and responsive. CSS offers units with no equivalent in visual tools: the fr unit for grids, which expresses ratios between track sizes; the lh unit, based on line height, useful for creating spacing that feels proportional to the text it surrounds; and subgrid, for aligning items inside nested grid layouts. None of these can be expressed outside of code.
And this is just the basic visual layer. As soon as you want to work with tabular data or charts or other data visualizations—as soon as you want to add animations, interactions, or sound—code becomes a significantly more expressive medium for exploring design.
Don’t go halfway. Now is the time to dive in and go deep. Code is a fabulous design tool. Learn it. Don’t settle for someone else’s abstractions just because they seem easier.