Style Guide
Colors
Dark Purple: #5A3F98
Light Purple: #9396CA
Yellow: #FFD240
Teal: #8FD1CA
Dark Teal: #00A09d
Orange: #F37735
Blue: #5bc2e7
Fonts
Font family: Open Sans
This is an H1
Title Heading Global Selector
PRIMARY Global Selector
Primary Class CSS
This is an h2
Secondary Global Selector
Accent Global selector
This is a paragraph in default #333 with line-height of 1.6 em. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Buttons
Images
Images
For Image file names, format should be Event Abbreviation Page Name Location.
Example: HP Event Overview Celebrate.webp
Image size should be twice the size of the display size for best quality
All Images should have alt tags
Heading HTML TAGS
Heading tags have no styling and are only used for organizing page structure for SEO and accessibility.
H1: Only used once for page title
H2: Only used once for page subtitle
H3, H4, H5, & H6 Can be used multiple times based on content structure
Page Spacing
Utilize 8-point grid system for adding space:
8, 16, 24, 32, 40, 48, 56, 64, 72, 80, etc
Page Start: 32 top margin
Page Bottom: 64 bottom margin
Misc
- See Party Details
Alternative grey color background: #f7f7f7
Alternative violet color background: #9397CB14