The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
EOS Design System logotype

EOS Design System

A design system made for SUSE products and the Open Source community.

Changelog rocket icon
We’ve introduced new changes.

See the changelog for more information.

Graphic depicting laboratory glassware
Design consistent UIs for your products using our all-in-one design kit.Download design kit
Use the NPM package to quickly theme-up your Bootstrap 4 based product.Install using NPM
Implement SUSE's UI with your own code using design specs.Implement manually

Atomic design classification

All elements, components, guides, and more are delivered following the atomic design methodology. We have grouped them inside the next 4 cards for you to get a better overview of how we are building EOS.

Icon depicting atoms

Atoms

The smallest building blocks of your project. Text styles, buttons, icons, input fields, checkboxes, etc.

Atoms: Buttons, Colors, Icons, Patterns, Typography, Writing guides

Icon depicting molecules

Molecules

More complex entities consisting of several atoms. Things like notification toasts, data values (label: value), input fields with buttons, etc.

Molecules: Alerts

Icon depiciting molecules

Organisms

Truly functional parts of a page, made from groups of atoms and molecules.

Organisms: Main menu, Submenu

Icon depicting templates

Templates

Essentially, those are pages without real content. Text styles, buttons, icons, input fields, checkboxes, etc.

Templates: Main layout