How a web interface keeps its style
By Oliver Schmalzl · Written: · Archive discovery date:
21 July 2022 · Archive date
An interface feels coherent when similar things look similar and work in a similar way. That starts with colours and spacing. But it reaches all the way to error messages and the behaviour of a button.
A short design description can record these decisions. Instead of "modern and tidy", it contains concrete rules: one typeface for body text, a clearly visible highlight, fixed spacing between sections and clear labels for actions.
A button has several states
For an invented reading list, the save button could be normal, focused by keyboard, busy while saving, or available again after an error. All these states belong to the same function. If only the prettiest normal state is designed, a large part of real use is left open.
Storybook documents such component examples as stories. What is interesting about this approach is looking at each part separately: you can view a state without first clicking through the whole application.
The same applies to small controls. A slider needs a recognisable meaning and, where needed, a readable value display. MDN describes the HTML element for it. To pick an exact number, an extra input field can make more sense than long dragging with the mouse.
Consistency makes changes easier
If a colour is changed later, nobody should have to guess it again in twenty places. Documented design values make changes traceable. Even more important: the same action keeps the same meaning everywhere.
A design system does not have to be a large collection for this. For a small website, a few good decisions are enough, as long as they also hold up in the less pretty states.
Original finds
These links were the starting point for this post. The assessment in the text is my own; the linked posts are not my own tests.
- A slider made with HTML, CSS and JavaScript
- A design system in a DESIGN.md
- Viewing UI components one by one with Storybook
- Parallax websites as a design demo
About the date: This post was written on 11 October 2026. The archive date is the date of the earliest related find in the collection, not of a publication at that time. Technical assessments and sources added later refer to the time of writing.