Style Guide
Colors
- Default Color
- Main Color 1
- Main Color 2
- Main Color 3
- Main Color 4
- Main Color 5
- Additional Color 1
- Additional Color 2
- Additional Color 3
- Additional Color 4
Typography
A header uses 4 common properties, font-family, font-size, font-weight, and line-height. Other styles such as margin and color are extra definitions that reflect the flow and style of the comp.
<h1>Header 1</h1>
The first baseline of this text should be a certain distance from the header above. This distance is provided in the comp.
Header 1
Utility Class: .alpha, %alpha
<h2>Header 2</h2>
The first baseline of this text should be a certain distance from the header above. This distance is provided in the comp.
Header 2
Utility Class: .beta, %beta
<h3>Header 3</h3>
The first baseline of this text should be a certain distance from the header above. This distance is provided in the comp.
Header 3
Utility Class: .gamma, %gamma
<h4>Header 4</h4>
The first baseline of this text should be a certain distance from the header above. This distance is provided in the comp.
Header 4
Utility Class: .delta, %delta
<h5>Header 5</h5>
The first baseline of this text should be a certain distance from the header above. This distance is provided in the comp.
Header 5
Utility Class: .epsilon, %epsilon
<h6>Header 6</h6>
The first baseline of this text should be a certain distance from the header above. This distance is provided in the comp.
Header 6
Utility Class: .zeta, %zeta
Primary Body
Primary Body
Variable Names: $body-font-size, $body-line-height
Secondary Body
Secondary Body
Variable Names: $sc-font-size, $sc-line-height