...
Element | Description | Mobile | Web |
|---|---|---|---|
Avatar | Yes | Yes | |
Badge (tag) | Yes | Yes | |
Button | (covers glossary) | Yes | Yes |
Action chips | Yes | Yes | |
Checkbox | Yes | Yes | |
Heading | Yes | Yes | |
Text | Yes | Yes | |
Icon | Yes | Yes | |
Image | Yes | Yes | |
Flag | Yes | Yes | |
Label (form label) | Yes | Yes | |
Link (hyperlink) | Yes | Yes | |
Radio button | Yes | Yes | |
Spinner (loading) | Yes | Yes | |
Tooltip | Yes | Yes | |
Separator (divider) | Yes | Yes | |
Toggle | PIN InputYes | Yes | |
Rating | Yes | Yes | |
Progress bar | Yes | Yes | |
Preloader (loading bar) | Yes | Yes |
Molecules
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Think of them as UI components, like a form label + from input + button = search form.
Element | Description | Mobile | Web |
|---|---|---|---|
Money input | Yes | Yes | |
Search input | Yes | No | |
Phone number input | Yes | Yes | |
Country input | Yes | Yes | |
Date input | Yes | Yes | |
Date of birth input | Yes | Yes | |
Select input | Yes | Yes | |
Text input | Yes | Yes | |
Text area | Yes | Yes | |
Keypad | Yes | No | |
Time picker input (optional) | Yes | Yes | |
Alerts | Yes | Yes | |
Popover | No | Yes | |
Critical Banner | Yes | Yes | |
Breadcrumbs | No | Yes | |
Accordion | Yes | Yes | |
Countdown | Yes | Yes |
Organisms
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. They form distinct sections of an interface, like a product grid or a site header with a logo, primary navigation, and search form.
Element | Description | Mobile | Web | |||
|---|---|---|---|---|---|---|
Card banner | Yes | Yes | Action ListAction list | No | Yes | |
File upload | Yes | Yes | ||||
Image upload | Yes | Yes | ||||
Calender (optional) | Calendar (optional) | No | Yes | |||
Tabs | Yes | Yes | ||||
Steppers | Yes | Yes | ||||
Bottom tab | Yes | Yes | ||||
Side menu | No | Yes | ||||
Modal | No | Yes | ||||
Bottom sheet | Yes | No | ||||
Header (navbar) | Yes | Yes | ||||
Table | Yes | Yes | ||||
Stack list | Yes | Yes | ||||
Information List | Yes | Yes | ||||
Banner | Yes | Yes | ||||
Action box | Yes | Yes | ||||
Bar chart | Yes | Yes | ||||
Line chart | Yes | Yes | ||||
Pie chart | Yes | Yes |
Templates
At this level, you’re essentially laying out the structure of a page. You’re positioning organisms (or groups of organisms) in a layout, showing content structure without focusing too much on the actual content.
Element | Description | Mobile | Web |
|---|---|---|---|
Feedback (terminal) | Yes | Yes | |
Primers | Yes | No | |
Story viewer | Yes | Yes |
Pages
Pages are specific instances of templates. Here, placeholder content in templates is replaced with real content, thus forming a complete page. This level allows for testing the effectiveness of the design system’s hierarchy and seeing how the design system works in practice with real content.
...
Guideline
Naming schema
A naming schema provides consistency, clarity, and ease of reference. By following a set pattern or rules for naming, it becomes easier to identify, manage, and search for items.
...
[ category ] represents the broadest classification (components, organisms, etc.).
[ component ] type represents the specific component being referred to (button, checkbox, toggle, input, etc.).
[ style ] describes the general appearance or behaviour of the component (standard, iconOnly, textOnly, etc.).
[ variant ] specifies the purpose or use-case for the component (primary, secondary, tertiary, information, success, warning, etc.).
[ size ] denotes the component's dimensions or scale (small, medium, large, etc.).
[ state ] describes the current interaction or status of the component (default, hover, focus, active, disabled, etc.).
...
States
Variants
Rules of use
Guideline