Foundation System
Last updated
Last updated
The foundation library includes things like brand colors, grids, type styles, iconography, motion, writing (voice and tone) and accessibility. It’s also where design tokens live. These are things everyone should use and is the minimum bar for every digital product.
"Design Tokens are a technology-agnostic methodology, architecture, & process for scaling design across tools, devices, & platforms." - Design Tokens W3C Community Group.
Design Tokens are what we use to create the component naming structure. It is the process of replacing variable elements with their non-variable equivalent. For example: a simple button is made of a number of tokens that describe its unique properties. They define its properties (background color, text style, etc) without talking about values (#49a4e6), but instead referencing its global property (Global-Blue-50). That way, the background color of the button will always be the variable regardless of the value it represents. The value can change but the property will stay the same.
This allows design teams to make global updates to the system from one place, automatically spreading the change to the entire system. It also creates an optimised governance model that ensures consistency throughout the ongoing evolution of the system.
We group colors in three categories depending on brand importance and use: Primary, Secondary and Tertiary. In order to ensure sufficient coverage, it is important that all colors have at least five tones for potential future states of interaction: default, hover, click, selected and active. We also recommend having at least one dark tone and one very light tone of each color to create hierarchy in compositions.
To define the space we use a responsive grid. The Bootstrap responsive grid creates a good base for horizontal measurements but lacks vertical rhythm and clear rules to facilitate both design and development. Our recommendation would be to use the 8−pixel grid that leverages the Bootstrap responsive grid but adds in vertical synergies.
Every UI element is aligned to the 8−pixel grid, both vertically and horizontally. The concept known as pixel-fitting ensures that all elements appear perfectly-defined on all devices. This also allows designers and developers to have the same box model, minimising additional decisions and errors.
Baselining your text is a great tool for developing vertical consistency in your designs. By positioning the baseline of each line of text onto an evenly-spaced vertical grid, you can easily bring all of the UI elements into a harmonious vertical rhythm.
There are times when we make an exception to the 8-pixel rule when deciding the size of typography. Allowing certain flexibility to use multiples of 4 gives designers the freedom to choose text sizes that achieve the best legibility. The important point here is that the line spacing is always a multiple of 8 to align to the grid—so for instance a text size of 20 pixels with line spacing of 32 pixels.
There are specific cases when it is hard to follow the 8-pixel grid, particularly data visualisation. In this case, we again use a container box that aligns to the 8px grid and allow the graphics inside the box to have more flexibility to accurately represent the data.
In digital products, it is important that typography is accessible, flexible and performs well. Guidelines that define the minimum sizes, both for sentence-case and all-caps, will help teams deliver experiences that are accessible for all users. A flexible typeface that renders clearly in a range of weights and sizes will also help designers create hierarchy within the compositions. It is best to limit the amount of typefaces and their weights to a few variations to ensure that the performance of the app or website is not effected.
We think of graphics on a size scale—comprised of icons, micro-illustrations, and illustrations—to create the most impactful composition. Once a brand style is defined, it is important that these graphics are executed correctly to best perform in digital products. We typically recommend using icons at 16 and 24 pixels, then moving to micro-illustrations from 32 to 320 pixels, and finally continuing with full illustrations for larger sizes. The exact breakpoints can vary depending on the visual style (especially between Micro-illustrations & Illustrations), but the important point is that they are clearly defined and communicated to all teams.
The execution of these graphics also is important for the development and performance within a digital product. Be conscious of details like container boxes, transparent backgrounds, line weights, etc to ensure the removal of error and rework.
Elevation is useful to define at the global level because it is a subtle visual style that is used quite extensively throughout the entire system in components like cards, modals, and overlays. This will keep visual consistency throughout the ecosystem of digital products.
One of the most important parts of a digital system is voice and tone. Much more than just instructions or messages, voice and tone guidelines help teams write clear and consistent content across all products and channels.
One great example is Mailchimp Voice & Tone style guide.
Animation is also a very important part of the system that has great impact on user engagement and business. Just like typography and color, animation says something about the product and its personality.
Understanding motion, particularly interactions, merges form and function to improve the user experience. It also helps direct user's attention, improves system feedback, generates user engagement and creates better storytelling.
One great example is Material Motion guidelines.
Implement workshop/s with Design and Development teams to align on grid system, typography and token naming
Work with Brand team to define colors, tones, icon and illustration styles
Begin creating the Foundations library
Document all to be shared with entire team
Name
Breakpoint
Columns
Margin
Gutter
XS
0-719
4
20
16
S
720-1023
8
40
16
M
1024-1439
12
44
24
L
1440-1919
12
88
32
XL
+1920
12
Auto
32
Name
Until Breakpoint S
From Breakpoint M
Caption
12
12
Body 1
14
14
Body 2
16
16
Action Button
18
16
Button
18
16
Small Button
16
14
Title 1
18
20
Title 2
16
16
Subheadline
24
24
Headline 1
48
64
Headline 2
40
48
Headline 3
28
40
