Style Guide
Color Palette
The primary collection of colors to be used throughout the website. All color values are to be used as they are and any shades must use the base color and an equal percentage of opacity (i.e. 10, 20, 50, etc.)
Theme Accent
#055FFD
Theme Accent - 30%
#B9EDE8
Theme Accent - Alt
#0432AE
Theme Accent - 30%
#BCD7E1
Subtle Text/Inactive
#69707B
Medium Text
#4A5568
Strong Text
#2D3748
Strongest Text
#33333
Warning
#FE6D73
Informational - 50%
#DA3E9780
Informational
#FFCB77
Informational - 50%
#ffb9ff
Informational - 30%
#fffcff
White/Off-white
#FFFFF
Lighter Background
#E9F1FF
Subtle Background
#DFE5F6
Typography
Heading 1
H1 – Saira Condensed – 3.75 ems – 800 Weight
Heading 2
H2 – Saira Condensed – 3.25 ems – 800 Weight
Heading 3
H3 – Saira Condensed – 2.75 ems – 500 Weight
Heading 4
H4 – Saira Condensed – 2.25 ems – 500 Weight
Heading 5
H5 – Saira Condensed – 1.75 ems – 500 Weight
Heading 6
H6 – Saira Condensed – 1.25 ems – 500 Weight
Samples
Body Text
p – PT Sans – 1 rem – 400 Weight
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id. Sapien pellentesque habitant morbi tristique senectus. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Sit amet risus nullam eget felis eget nunc. Lacus sed turpis tincidunt id. Massa enim nec dui nunc mattis enim ut. Hendrerit gravida rutrum quisque non tellus orci ac. Interdum varius sit amet mattis vulputate. Ac auctor augue mauris augue neque gravida in fermentum et. Quis commodo odio aenean sed adipiscing. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed elementum tempus egestas sed sed risus pretium quam.
Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Convallis aenean et tortor at risus viverra. Velit ut tortor pretium viverra suspendisse potenti nullam ac. Amet cursus sit amet dictum sit amet justo donec enim. Ornare aenean euismod elementum nisi. Ac ut consequat semper viverra nam. Massa enim nec dui nunc mattis enim ut tellus. Vel pharetra vel turpis nunc eget lorem dolor sed. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Porttitor rhoncus dolor purus non enim. Vitae suscipit tellus mauris a diam maecenas sed. Aliquam sem fringilla ut morbi tincidunt. Lacus vel facilisis volutpat est velit egestas dui id ornare. Non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus.
Content Sample
Accent Text
Primary Text
Secondary Text
Paragraph Text
Community
Live Member Calls
Every Thursday - 9am Pacific
We get together every Thursday – meet your fellow members, get and give advice.
It’s a member-led conversation that stays mostly technical/business-oriented. Microphone and Camera are encouraged but not required.
Content Sample
Buttons
Secondary Text
Primary Text
Accent Text
Text Text
Forms
Component Styles
Padding & Margins
0, 10, 20, 40, 80, 160 px
0, 0.5, 1, 2, 4, 8 rem
