Why custom properties are the sweet spot
CSS custom properties (variables) hit a great balance: they're native, dynamic, and expressive. They let you define a small design vocabulary (spacing, type, color) and reuse it everywhere — which is what gives a site that "sleek" look.
1 Start with tokens that match how you design
Don't start with hundreds of tokens. Start with the handful that drive 80% of the interface:
- Type scale: base, headings, and one large display size.
- Spacing: 4–6 steps that map to your layout rhythm.
- Color roles: primary text, secondary text, borders, backgrounds.
:root {
--color-text-primary: rgb(16, 16, 16);
--color-bg-primary: rgb(247, 247, 247);
--space-4: 16px;
--space-8: 32px;
--text-base: 16px;
--text-3xl: 32px;
}2 Separate tokens from components
A simple rule: tokens should never depend on components. Components can depend on tokens.
Good architecture: `design-tokens.css` → base styles → components → pages.
3 Use role-based naming
Name tokens by what they do, not what they are. Example: `--color-border` is better than `--gray-200`. Role-based naming makes future redesigns easier because the meaning stays stable while the values change.
4 Design your layout rhythm
Professional layouts feel calm because spacing is predictable. A consistent rhythm (like multiples of 4px) is the difference between "fine" and "finished".
If you want the site to feel more editorial, increase vertical spacing and reduce font weights. If you want it to feel more "product UI", tighten spacing and raise contrast.
5 Add small, high-signal components
You don't need dozens of components. Two or three great ones will do:
- Cards with subtle elevation and clear hierarchy.
- Pills for tags and categories.
- A readable article layout with a comfortable line length.
Closing thought
Design systems succeed when they reduce decision fatigue. If your tokens are small, your structure is clear, and your components reuse the same patterns, the whole site feels intentional — and stays easy to evolve.