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

Edit preferences

EOS Design System

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

We’ve introduced new changes.

See the changelog for more information.

Getting started

If your product’s UI was built using Bootstrap 4, we recommend you installing the EOS npm package which includes everything you need to start using the components, layout, and elements delivered in EOS.

Installing and using EOS npm

Boostrap - decorative

Are you not using Bootstrap? We didn’t forget about you. All of the components and elements in EOS include a Design Spec, as well as the original file in Adobe XD or SVG.

Manual implementation with specs

Adobexd and Inkscape logos - decorative

News and tutorials

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.

Atoms

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

Atoms

Molecules

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

Molecules

notificationsAlerts

Organisms

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

Organisms

Templates

Essentially, those are pages without real content. They combine organisms into a proper website layout

Templates

webMain layout

Send feedback

Report an issue or share an idea

Include screenshot of current page

Send feedback

moveclear

Thank you for helping us improve EOS.