Basics
The header is firmly anchored and fixed in the upper part. The head moves with scrolling, so that all functions are visible and selectable. The header-Organism always consists of 3 molecules.
1. Navigation molecules,
2. Logo molecules
3. Toolbar molecules.
1920 The header-organism
1920 The header-molecules
1920 The header-atoms
To explain the single template, organism, molecule or atom, this design kit uses the Web Max(1920) Breakpoint. |
Header spacing
The mobile header differs from the standard header within the icon atoms, in the spacing between the atoms and the atoms inside the molecule.
1. all icons within the mobile breakpoint have a size of 48px. This is necessary because the input via finger needs a larger area.
2. the spacing between the atoms is much smaller because the icon atoms are larger and have a different padding.
3. the navigation molecule consists only of one burger. The logo molecule is placed in the left area. The toolbar molecule consists of fewer atoms(2 icons atoms max).
All these points are necessary because the user behaviour within the mobile breakpoint is different.
375 header-atoms-spacing
Header theming
All molecules and atoms of the Header exist in two themes, the Astronaut(light) and the Tokyo at Night Theme(dark).
375 Astronaut theme
375 Tokyo at night theme