Design System Diary — Part II: Starting With the Basics

The beauty of atomic design (and why we don’t just use it as is)

Early sketches trying to figure out what the design system consists of and how to organise these different pieces of information

The “how”

Atoms, Molecules and Organisms

https://bradfrost.com/blog/post/atomic-web-design/ — visualisation of the five distinct levels in atomic design

1. Atoms

2. Molecules

3. Organisms

4. + 5. Templates and pages

How we structure our design system

A missing piece

The initial model for our design system structure

Lessons learned

Lesson #4 — Using the same language is way more important then it might seem in the beginning

Lesson #5 — The lines between different abstraction levels can be blurry

Lesson #6 — Start small

Lesson #7 — Don’t forget who you are building for

Frontend developer @rexlabs — https://github.com/julianburr

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store