Why different shapes can still feel like one whole
Thinking about coherence in design systems through the colors and materials of a city.
A talk by Professor Yoo Hyun-joon about cities made me think about design systems. As I remember it, the buildings in Gangnam can have similar rectangular forms without making the city feel unified. In Greek cities, different building shapes can feel connected through recurring blue colors and similar materials.
This is a reflection on what stayed with me, rather than a verbatim account of his words. How different is making similar shapes from creating a shared impression?
What we share beyond shape
When building a design system, it is easy to begin with things we can name: buttons, cards, and inputs. We might expect that using the same components will naturally make our screens feel consistent.
Yet the same card can feel like it belongs to a different product when its background, border, shadow, and text density change. Screens with different layouts can still feel related when their use of color, type hierarchy, and spacing carries through. The story about cities gave me a useful analogy for that difference.
Screens have materials, too
What would material mean on a screen? I think of the relationship between backgrounds and surfaces, the sharpness of borders, and the depth created by shadows. Typography and spacing help give those surfaces a particular character.
Repeating a color value is only part of it. We also need a shared understanding of which colors invite action, which surfaces group information, and which contrasts establish priority. To me, tokens give those decisions names so they can be used again across screens.
Shared rules, room for difference
This perspective changes the questions I want to ask. Before trying to make screens look alike, I want to understand what makes this product feel like itself.
A dense dashboard and an onboarding screen focused on one action need different compositions. They can still share a text hierarchy, the meaning of action colors, and rules for surfaces and borders. Their differences serve their individual purposes; their shared rules connect them into one experience.
What I want to look for next
The next time I review screens side by side, I want to look beyond component shapes. Do primary actions stand out in the same way? Can I read the information hierarchy with the same expectations? Do surface distinctions carry the same meaning?
I think of a good design system as a set of decisions that allows different screens to do their own jobs while feeling connected. A story about the colors and materials of cities made me reconsider where to look for those decisions.