Do
Maintain clearspace
Padding equal to the height of the C on all sides.
Brand by example
How to use the Compass brand, by way of contrast.
Every section pairs a "do" with a "do not." It is faster to learn from examples.
Logo
Use the wordmark with breathing room.
Do not
Crowd the wordmark
Adjacent text or imagery breaks recognition.
Color
Pair primary with neutrals.
Do
Primary + neutral
Brand purple anchors the composition; neutrals carry text.
Do not
Two competing accents
Primary plus a saturated accent fights for attention.
Typography
Set body type at 1.55 line-height.
The quick brown fox jumps over the lazy dog. Then it sits down and thinks for a while about what it has just done.
Do15px · 1.55 line-height
The quick brown fox jumps over the lazy dog. Then it sits down and thinks for a while about what it has just done.
Do not15px · 1.15 line-height — too tight