Atomic Design is a methodology for creating design systems in a structured and scalable way. It was introduced by Brad Frost and is based on the idea of breaking down UI components into smaller, reusable building blocks, similar to how atoms form molecules and organisms in chemistry.

The Five Levels of Atomic Design:

• Atoms The smallest building blocks (e.g., buttons, input fields, icons, labels).
• Molecules Simple components made up of multiple atoms (e.g., a search bar combining an input field and a button).
• Organisms: Complex components composed of multiple molecules and/or atoms (e.g., a website header containing a logo, navigation menu, and search bar).
• Templates: Page-level structures that define the layout of organisms but without final content (e.g., a wireframe of a product page).
• Pages: Fully designed screens with real content, ready for deployment.
  

Why Use Atomic Design?

• Promotes consistency in UI design.
• Enhances scalability and reusability.
• Improves collaboration between designers and developers.
• Helps maintain a modular design system.

Create a new react project with npm, vite or yarn add add the required packages:

From the root-dir of your project, create your first component with the following command:

Where <platform> is one of the following options:

• react: React / NextJS, plain JavaScript
• react-ts: React / NextJS, TypeScript
• react-native: React Native, plain JavaScript
• react-native-ts: React Native, TypeScript
• react-ts-vite: React, Vite,TypeScript

This will create an .atomic-bomb file in the root of your project. This file contains the configuration for the atomic bomb tool. Please include it in your git repository.It contains the following information (or something similar, depending on your chosen platform):

Install SASS

Install SASS/SCSS in your project (if you haven't already) with the following command:

add the atomic resources

I've created a package that contains the atomic resources for you. It setups an entire SCSS framework you can control with a single Design Token, a JSON file.

Execute following command in the root of your project:

This will give you the following file tree:

Description

• The design\token.json file contains all the design tokens for your project.
• In the fonts folder you can place the fonts to use in the project. freesans is already in there.
• The styles\**\* folders contain al the SCSS script files for the project (not listed here).
• The main.scss file is the overall SCSS in which all components are included
• and the ./src/resources/styles/main.css file is the compiled CSS file you should include in your app and Storybook.

scripts

Add the following scripts to your package.json file:

Since there is actually no standard (yet) for how a design token should be constructed, I designed my own. It's working perfectly for me and this implementation and covers quite a lot, but you can change it or feel free to adapt my SCSS code to your own needs

In this example you'll see the token I used for constructing this (react) website.

The structure is fairly self-explanatory. But there are some items you should take a look at:

• unit: the unit to use in your project. This is used in the SCSS code to convert the values to the correct unit.
• page: the default page settings. This is used in the SCSS code to set the default page settings.
• colors: the colors to use in your project. This is used in the SCSS code to set the colors and the shades (in %).
• fonts: the fonts to use in your project, you can refer to the name instead of the actual family.
  Attention: the URI is double-quoted, otherwise the script crashes/
• headings: the headings to use in your project. Again the double quoting and name to refer to
• spacing: the spacing to use in your project. (currently not implemented yet)

The main.scss has the following content:

Including the file in Storybook is done in the preview.js file.

Including the file in React is done in the index.js|tsx,main.tsx or App.js|tsx files.

Once you've set up the platform, use the following commands from the root of your project:

--platform can be used by itself to write or update the .atomic-bomb config. The shorthand is -p.

After the platform is configured, you can omit --platform and the CLI will read the configured platform from .atomic-bomb.

Atomic components

Use --type atom, molecule, organism, template or page to create React component boilerplate in src/components/<type>s/<Name>.

Component and domain container names are PascalCase, so button group becomes ButtonGroup.

This creates a folder like src/components/molecules/ButtonGroup:

Hooks and lib files

Use --type hook and --type lib to create shared files next to components, not inside it.

These names use camelCase and export a function const with the generated name.

Domains and subdomains

Use --type domain to create src/domains/<Domain>. Use --type subdomain --for <Domain> to create a subdomain with DDD folders.

Subdomains create components, hooks, services, state, models, events, helpers, api, pages and index files for their exports.

A generated subdomain has this structure:

Items inside a subdomain

Add components and non-component files inside a subdomain with --for <Domain>/<Subdomain>.

Atomic components go into components. Hooks, services, events, helpers, api, models and state go into their matching DDD folders.

Export and import structure

Use --export to write the generated structure to JSON. It exports the folder structure only, not file contents.

Use --from to validate that JSON with Zod and recreate the listed items.

The Rust version will be based on the same principles as the React version. It will be a CLI tool that creates boilerplate code for individual front-end components. The components will be based on the Atomic Design principles and will be easily customizable and reusable.