A styleguide is like a brand book or a UI design graphic standard manual, but for your website or app.
We use styleguides to keep the UI consistent, to quickly onboard new designers or team members and to ease the UI setup for developers.
A styleguide is the UI version of the project design system.
A standard web or app styleguide includes:
- color styles
- typography styles
- effect styles (shadows, blurs, etc.)
- grids and layouts
- standard spacing elements
- brand assets
- communication tone&voice
- icon set
- guidelines on using these elements
- categorized UI components
- UI states of the components (ideal state, empty, loading, error, etc.)
- interaction styleguide or instructions for developers
You can find a styleguide template with all the necessary elements for your project in our set of reusable templates.
Always keep a styleguide and the components in the same file as the UI design unless you have organized a styleguide in the form of a Figma project library.