Design System

Learn more about how the Elements design system works.

If you're just starting out with Elements it's important to take the time to learn the difference between Atoms, Components, and Globals.

It's also worth noting that Elements is a Mobile first design system, you can learn more about all of this and more below. If you have more questions, please visit the forum.


Atoms represent the most basic elements of a webpage, they are at the foundation of your page design. They include things like, containers, grids, headings, text, and buttons. They are singular items, like lego bricks, the are the core components.


Components are pre-built sections and layouts, each with their own unique set of features. They include things like, navigation, footer, layouts, and galleries. They are often fixed layouts, that offer a limited amount of customisation.

Here's a high level illustration on how Atoms and Components differ.


Globals are user created groups of atoms and/or components,. Globals can help maintain a consistent design language across your entire site.

You can reuse global blocks across your site so you need only need update the content in one place and have it automagically mirrored to all other instances of that global. For example, this can be very useful for header and footer sections.

You can take Globals even further by overriding content and design aspects on an individual instance. For example you might have a banner that you want to use on every page of your site and you'd like the design to be consistent. You can use the override feature to customise the text and background image on each instance. You can even override the design settings on individual instances.

Here's a visual illustration of how Atoms and Components can be group togther to form a Global.

Mobile First Design

Elements is a mobile first, static website builder. Mobile has now surpassed desktop in global internet usage, Google has switched to Mobile First indexing. thatโ€™s why Elements takes a mobile first approach to website design to ensure your sites work better and rank higher in search results.

We recommend designing at the mobile breakpoint first, and working your way up through the breakpoints to support larger screens.

Built on Tailwind and AlpineJS

Elements is built upon the popular Tailwind CSS framework (and AlpineJS) which makes it a piece of cake to build modern responsive websites.

By standardising on the framework used inside of Elements, we ensure third-party components work great with every website you build.

Learn More About Tailwind

Last updated

We are Realmac Software. We make nice things.