SUSE Product brand

An open source design system made for SUSE enterprise products and powered by EOS UI/UX solutions.

We’ve introduced new changes.See the changelog for more information.

Design new featuresDesign consistent UIs for your products using our all-in-one design kit.Download design kit

MVPs or proprietary codeUse the NPM package to quickly theme-up your Bootstrap 4 based product.Install using NPM

Ideal for downstream OSSImplement 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.

Atoms

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

Atoms: Buttons, Colors, Icons, Patterns, Typography, Writing guides, Badges, Checkbox, Radio buttons, Text area, Input fields, Select, Toggle, Links, Tooltips

Molecules

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

Molecules: Alerts, Dropdown, Address, Pagination, Tables, Cards

Organisms

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

Organisms: Main menu, Submenu

Templates

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

Templates: Main layout, Sign in, Error page

SUSE Product brand

Atomic design classification

Atoms

Molecules

Organisms

Templates

News and tutorials

Send feedback

Tell us your story