Typography:

Headers should have key text be black and rest grey. Only capitalize the first word.

Grey = Grey text normal font size

Brown = Darker grey text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc vel mauris commodo molestie nec vitae tellus.

Purple = small 16px grey text

Orange = header small 20px default color text

Grey bg inside of panel with have margin top and be small 16px text.

Use brown bg to hide text

Use brown quote to hide any content

use blue to center align text

Panels:

Page Header

Page description

Table of contents

• Typography:
• Headers should have key text be black and rest grey. Only capitalize the first word.
• Use brown bg to hide text
• Panels:
• Page Header

What you need to review

Items to review

Image only panel

Default panel, white bg, large box shadow

Panel status updates:

Needs review

Coming soon

🚀

Panel with content (this text won’t show)

Panel Header

Panel sub header

Panel content.

💡

This panel will be a white bg with no border or box shadow

This text has a grey bg which will give it a margin top value

panel with no box shadow, white bg, border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc vel mauris commodo molestie nec vitae tellus.

panel with no box shadow, transparent bg, border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc vel mauris commodo molestie nec vitae tellus.

🏆

Yellow callout is used in roadmap to show any content insdie of the callout and hide everything else. Doesn’t have any call out styling