Creating UI guidelines
UI guidelines set binding standards so that in-house teams, agencies and developers produce consistent interfaces.
Background
Without shared rules, each team reads the corporate design slightly differently. The result is inconsistent interfaces, duplicated work and long alignment rounds. With UI guidelines, new partners settle in faster and your brand looks the same everywhere.
What good UI guidelines contain
Foundations: colours, type, grid, spacing and icons.
Components: variants and states of buttons, forms, menus and tables.
Interaction: behaviour on input, errors, waiting times and transitions.
Accessibility: fixed WCAG 2.2 AA rules for every component.
Language: tone of voice, form of address and rules for buttons and error messages.
Living documentation
A PDF is often out of date by the first release. We therefore use a library in Figma and real components in code, such as Storybook. Both share the same design tokens, so changes apply to both at once. External partners can also open the documentation in a browser.
Approach
Collect existing rules and show where they diverge.
Agree binding standards with your team.
Describe every component with examples and code.
Present the guidelines in a training session.
Maintenance and ownership
We agree with you who approves changes and how new components are added. We can also take over maintenance.