This theme uses a modular type scale combined with varying font weights to establish a functional and visually pleasing content hierarchy. By default, each heading pushes down one measure of the base line height (26px). This ensures that when constructing new elements, a consistent rhythm can be achieved.
This theme uses REM units to ensure that typography and general spacing remain optimized at different screen sizes and on different devices. Type and spacing scale down from a base font size of 16px, to 14px towards a mobile screen size. Try dragging this window down to the narrowest width to see the scale in action.
Text Styles
Text styles should follow these guidelines. Microcopy should only be used for supporting text and all important copy should use body copy styles due to contrast.
Body text
Open Sans, 16px
Link text
Heading One (2.6rem)
Heading Two (2.2rem)
Heading Three (1.2rem)
Heading Four (1.1rem)
Heading Five (1rem)
Heading Six (0.9rem)
- This is unordered list item #1
- This is unordered list item #2
- This is unordered list item #3
- This is unordered list item #4
- This is ordered list item #1
- This is ordered list item #2
- This is ordered list item #3
- This is ordered list item #4
Color Selections
Primary Color
Secondary Color
Tertiary Color
Accent Color
Paragraph Styles
Lead Paragraph
This theme offers a clean and contemporary design to suit a range of purposes. Modules and layouts have been designed to showcase content in a diverse yet consistent manner.
Standard Paragraph
This theme offers a clean and contemporary design to suit a range of purposes. Modules and layouts have been designed to showcase content in a diverse yet consistent manner.
Blockquote Paragraph
This theme offers a clean and contemporary design to suit a range of purposes. Modules and layouts have been designed to showcase content in a diverse yet consistent manner.
Button Styles
.btn–primary .btn–secondary .btn–tertiary
Code Styles
There are different styles for referencing code inline or within a block of code.
Using <code>
this is inline code
Using pre
this is
a block
of code