Avoid z-index Escalation in the System
Stacking conflicts tempt teams into an arms race of ever-larger z-index value until the numbers are meaningless and overlays fight each other unpredictably.
Classify Tokens by Intent, Not Just a Value
Deeply understand why an element exists in an experience and name variables with this information to keep consistent usage, no matter the value assigned.
Favor the Browser's Native Layout Over a Curated Grid
A grid assumes the designer controls the final rendering, when in practice the user does. Through their personal font size, zoom level, and the language they read in.
Grow the System Organically, with Transparency Over Gatekeeping
Design systems have been stone tablets that are often rejected by the organization for not understanding their needs. It's time for a change.
Prove the Design in Black and White Before Adding Color
The industry often reaches for ever-larger color palettes and treats color as the thing that makes an interface good, when it is closer to the finish than the foundation.
Render Metadata as Text, Not Interactive-Looking Chips
When labels and real controls share the same shape, users cannot tell what is clickable, so they hesitate or avoid the controls entirely.
Scope Styles to Components, Not Utility Classes
Keep the styles with the component. Utilities mean that something wasn't considered in the initial design and should be revisited.
Treat Modals as a Last Resort
A modal is the default reach for almost any interruption, but it is often a way to avoid organizing the page: when content has no obvious home, it gets dropped into a dialog that appears on demand.
Use Nested Modes Instead of New Tokens for Expressive Moments
Making a design token for every decision leads to bloat and unmaintainable resources. There's another way which keeps the count low and the expressions infinite.