Project
Design system
The rules every Kineticons icon follows: the 24-unit grid, stroke and corners, three styles and the motion tokens.
Every icon follows the same rules for its shape and its motion, so they sit together anywhere.
Grid
A 24-unit square with a 2-unit margin. Round shapes go a touch past square ones, so they look the same size.
Stroke and corners
1.75 units with round caps and joins, and no sharp corners: rectangles round at 2.5 units or more.
Motion tokens
| Token | Value | Meaning |
|---|---|---|
| In | 460 ms | With a little spring: cubic-bezier(.34, 1.56, .64, 1) |
| Out | 260 ms | Smooth, no overshoot: cubic-bezier(.22, 1, .36, 1) |
| Stagger | 40–80 ms | Parts follow each other |
| Duotone | 16% to 28% | The fill deepens while active |
Something unclear or missing? Open an issue.