Elastic Token Driven Design system
Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. Inspired by chemistry, it identifies five stages: Atoms, Molecules, Organisms, Templates and Pages.
Chapter 1: Atoms Color 1.1
On tha path towards flexibility we identified that colors have to be desitnation oriented. Same HEX can be used various times in the project, but it does not have to mean it’s purpose is same every time. For example you can make white #FFFFFF as surface color same as text on the surface of a button, but if you want to translate this token into dark mode problem occurs:
Chapter 1: Atoms Color 1.2
Concluding we’ve created MaterialUI-inspired color token naming system for maintaining flexibility across various products. Solutions like this limit development resources necessary to kick-start projects.
Chapter 1: Atoms Text 1.3
Text has got two base tokens included: Font Family and Type Setup. Similarly to color tokens we suggest naming it purpose-oriented not size oriented. Font Family is a special token type which impacts Type Setup tokens.
Chapter 1: Atoms Grids 1.4
We use 3 basic grid setups: 4-collumn for mobile, 8-collumn for tablets and 12-collumn for desktop.
Chapter 1: Atoms Shapes 1.5
Shapes are a silent member of atoms family, often concidered as just icons, we have to remember that every rectangle or circle used in design is also a shape, but it’s rarely listed as a component.
Chapter 1: Atoms Motion 1.6
Motion is key to success but it’s also a vast topic. Our motion system could be the object of a separate case study. For now, we distinguish two types of tokens: $Bezier-Type and $Duration. Certain beziers and durations are predefined for certain action types across whole design system.
Chapter 2: Molecules Buttons 2.1
Molecules are made up of a collection of many atoms.
Chapter 2: Molecules Other molecules 2.2
Same approach is used in other molecules such as: Badges, Checkboxes, Chipses, Collapses, Flies, Inputs, Loaders, Radio Buttons, Search (Specific type of input), Stepers, Switches.
Chapter 3: Organisms Organism construction 3.1
Organisms are large components of an interface. Their construction is complex, they contain a lot of atoms and at least one molecule.
Chapter 4: Templates Listing types 4.1
Templates are very advanced type of atomic structure. Templates are mostly ready-to-use sections to build custom pages.
Chapter 5: Pages
Display templates for content types available in Squidex CMS.
Chapter 1: Atoms Color 1.1
On tha path towards flexibility we identified that colors have to be desitnation oriented. Same HEX can be used various times in the project, but it does not have to mean it’s purpose is same every time. For example you can make white #FFFFFF as surface color same as text on the surface of a button, but if you want to translate this token into dark mode problem occurs:
Chapter 1: Atoms Color 1.2
Concluding we’ve created MaterialUI-inspired color token naming system for maintaining flexibility across various products. Solutions like this limit development resources necessary to kick-start projects.
Chapter 1: Atoms Text 1.3
Text has got two base tokens included: Font Family and Type Setup. Similarly to color tokens we suggest naming it purpose-oriented not size oriented. Font Family is a special token type which impacts Type Setup tokens.
Chapter 1: Atoms Grids 1.4
We use 3 basic grid setups: 4-collumn for mobile, 8-collumn for tablets and 12-collumn for desktop.
Chapter 1: Atoms Shapes 1.5
Shapes are a silent member of atoms family, often concidered as just icons, we have to remember that every rectangle or circle used in design is also a shape, but it’s rarely listed as a component.
Chapter 1: Atoms Motion 1.6
Motion is key to success but it’s also a vast topic. Our motion system could be the object of a separate case study. For now, we distinguish two types of tokens: $Bezier-Type and $Duration. Certain beziers and durations are predefined for certain action types across whole design system.
Chapter 2: Molecules Buttons 2.1
Molecules are made up of a collection of many atoms.
Chapter 2: Molecules Other molecules 2.2
Same approach is used in other molecules such as: Badges, Checkboxes, Chipses, Collapses, Flies, Inputs, Loaders, Radio Buttons, Search (Specific type of input), Stepers, Switches.
Chapter 3: Organisms Organism construction 3.1
Organisms are large components of an interface. Their construction is complex, they contain a lot of atoms and at least one molecule.
Chapter 4: Templates Listing types 4.1
Templates are very advanced type of atomic structure. Templates are mostly ready-to-use sections to build custom pages.
Chapter 5: Pages
Display templates for content types available in Squidex CMS.