🎨 UI design tip: Name colours after what they do, not what they look like.
If your tokens are named after the colour itself (blue-500, grey-100) nobody knows when to use them. Name them after their role instead.
A simple structure that works:
[element.tone.emphasis.state]
Each word describes how and where the colour appears in the interface. Four words maximum. Most tokens need fewer.
You can go deeper and create component-specific colour names, but in most cases it adds complexity without adding clarity.
What's your token naming structure?
📘 PS This is just 1 of 100+ guidelines from my @PracticalUi design book. I also use this naming structure in my Figma design system.
So the total number of dots is:
2 × (1 + 2 + ... + n) = n(n + 1)
Divide by 2, and the formula appears naturally.
No algebra tricks.
Just symmetry.
This is why the formula has to be true.
Here’s a geometric way to see it 👇
Think of the sum as a triangle of dots.
Row 1 has 1 dot,
…
row n has n dots.
Now duplicate the triangle and flip it upside down.
Together, the two triangles form a rectangle:
n rows × (n + 1) columns.