Composition

In this section we will collect general ideas of how to compose bigger cohesive components and page layouts in a somewhat standardized way. This includes topics like typography, padding & margins, container elements and grouping

A lot is inspired by Material 3

1. color system
2. ripple/wave effect on interaction
3. Many components but not all

Typography

Base font size is 16px and we use rems. Heading & label styles, body, fonts, icons and stuff Font used is Roboto flex. A variable font with 12 axises

All caps should be avoided for anything longer than two words. Back in the days with low dpi screens it was considered to improve legibility of small headlines and labels. Now the scientific consensus is that ALL CAPS should be avoided as it has an adverse effect on readability and legibility

Grouping

• Use space as the number one way of grouping elements
• Dividers in conjunction with space can be used sparingly as an alternative when it is needed
• containers and surface levels is another way of grouping content. The default roles, surface and surface container should dominate the layout but additional surface levels can also be used to on top to create visual hierarchy when needed

Example of surface / container elevation usage at page level

Top nav, sidebar & footer all use the default surface-container color

Main content uses the default surface color

This card is at low elevation

This is the lowest level and can be used to punch holes in the layout

This card is at high container elevation

This is the highest container elevation

Sidebar

Footer