Keep taking things out.
Remove what the interface can do without. Keep going until every part has a job.
One spacing scale. A small set of colors and shapes. Fewer choices keep the work consistent and make room for what matters on the page.
Design me anything
Remove what the interface can do without. Keep going until every part has a job.
One spacing scale. A small set of colors and shapes. Fewer choices keep the work consistent and make room for what matters on the page.
Make a decision once. Let the system carry it through.
Colors have named roles. Spacing follows one scale. Components use those rules, so a new screen starts with the choices we have already made. Its appearance should follow from how it works.
A vague label makes someone stop and decode the interface. Details like that deserve our attention.
Be precise with the words, spacing, and interactions. Give components a clear set of choices so the easy path produces something we would want to use ourselves.
How do tokens work?
A token names a design decision. Brand always resolves to Askrob blue. Components use that name instead of picking a new color.
Color, spacing, type, and motion.
Explore the foundationsLayout with a fixed spacing scale and real HTML semantics.
Type styles for headings, labels, and readable answers.
Actions, secondary controls, and chat questions.
A label, input, and connected hint or error.
A bordered surface with consistent padding.
Compact status with a text label.