Design, code, deliver
Use Werfen design system to craft outstanding digital experiences and awesome products.
Styles
Styles are the visual elements needed to create engaging layouts and end-to-end user experiences.
Colors affect all the parts of the system, so you have to organize them first.
SpacingProvides tokens to take the guesswork out of spacing and help deliver clear, functional layouts
IconsIconography is a powerful visual cue to the user and should reflect our particular sense of style.
TypographyTypography creates purposeful texture, guiding users to read and understand the hierarchy of information.
Components
Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.
Buttons allow an application to communicate action and direct user intent.
ComboboxThe combobox component allows users to choose one option from a list. It is used in forms for users to submit data.
FormForms are a grouping of input controls that allow a user to submit information to your application.
DialogDialogs inform users about a task and can contain decisive information that requires immediate attention.
TabsThey allow the user to navigate between groups of information that appear within the same context
Patterns
Patterns are best practice solutions for how a user achieves a goal. They show reusable combinations of components and templates that address common user objectives with sequences and flows.
Application header
Dialog
Dialogs inform users about a task and can contain decisive information that requires immediate attention.
LoginForms
Forms are a grouping of input controls that allow a user to submit information to your application.
Message popupFocus the user’s attention exclusively on one task or piece of information via a window.
SearcherSignature canvas
Two lists
Resources
A collection of tools, kits, plugins and guides to help simplify the creation process for our users.
Werfen brand guidelines
This guide provides a practical summary of the fundamental features of the Werfen brand.
Logo library
This guide provides a practical summary of the fundamental features of the Werfen brand.
Presentation kit
This guide provides a practical summary of the fundamental features of the Werfen brand.
Contributing to the design system
We encourage any feedback and ideas towards the design system itself as well! If you are interested in contributing, check out our guidelines to get started. Have any questions? Open an issue on our Design System issue tracker. Otherwise, be sure to check out the resources below!