Standard Values
Many of the building block classes use relative values (xs through xl, etc.) to imply their values. The following is a representation of the actual values behind the relative naming scheme.
Font Sizes
All font sizes are rem-based, meaning that they are multiples of the document's root font size.
- xs
- 1.2rem (12px)
- s
- 1.4rem (14px)
- standard
- 1.4rem (14px)
- m
- 1.8rem (18px)
- l
- 2.0rem (20px)
- xl
- 2.4rem (24px)
- xxl
- 3.2rem (32px)
- xxxl
- 4.0rem (40px)
Font Families
These are the predefined font families. A font family is a list of font faces by order of priority. If the first font face is not installed on the user's operating system, the next one will be used instead.
- global
- Open Sans, Verdana, DejaVu Sans, Arial, Helvetica, sans-serif
- headline
- Open Sans, Tahoma, Geneva, Arial, sans-serif
Line Heights
The line height determines the total height of a line. Line heights are calculated as multiples of the font size.
- s
- 1.4
- standard
- 1.61
Spacings
These values apply to margins, paddings, list spacings, and grid gutters.
Be aware: Gutters have a different standard implicit size as the other spacing elements. gutter has the value size of L
- xs
-
palm: 2px
lap/desk: 4px - s
-
palm: 4px
lap/desk: 8px - standard (implicit size)
-
palm: 8px
lap/desk: 16px - m
-
palm: 8px
lap/desk: 16px - l
-
palm: 16px
lap/desk: 24px - xl
-
palm: 24px
lap/desk: 32px - xxl
-
palm: 32px
lap/desk: 40px