Web Style Guide
For Web Team:
- Hero Titles are Proper Case
- Subtitles are Proper Case
- Buttons are always the default size and UPPERCASE
- Text size is always medium/default
Global Theme
This website uses the Dark Theme.
One primary (accent) color and secondary color can be configured in the website settings. The primary color is the default color for links, icons, and buttons. In some cases, this CANNOT be changed.
Accent color: sport blue (#0048de)
Secondary color: navy blue (#00205b)
Custom color:
birdie blue (#b9cbd3)
Custom color:
pga gold (#c5a561)
NOTE: For members only
Custom color:
graphite gray (#63666a)
Custom color:
steel gray (#97999b)
The title font is Montserrat
The body font is Montserrat at default size.
Button Styles
Image Dimensions
in pixels
Small hero image: 2000 x 500 (current style) | Medium hero image: 2000 x 650 | Large hero image: 2400 x 1200 | Pricing card image: 1200 x 600
Callouts
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blah blah form is closed
12 Column Grid
Instead of defined columns for example, 50/50 or 33/33/33, ATLAS has updated to allow for a 12 column grid. Below are some examples.
Layouts are available in a grid of 12
Here are some examples of combinations. There are more than what is shown. All columns become full-width on mobile devices.
6 Col
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus non augue non eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis, lacus sed feugiat suscipit, odio eros scelerisque mi, nec congue augue purus id nisi.
3 Col
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus non augue non eleifend. Pellentesque habitant morbi tristiqu.
3 Col
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus non augue non eleifend. Pellentesque habitant morbi tristiqu.
3 Col
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus non augue non.
9 Col
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus non augue non eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis, lacus sed feugiat suscipit, odio eros scelerisque mi, nec congue augue purus id nisi.
2 Col
7 Col
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus non augue non eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam iaculis, lacus sed feugiat suscipit, odio eros scelerisque mi, nec congue augue purus id nisi.
3 Col
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus non augue non.
Accordion (should only be used on light background)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero urna, viverra in fermentum eget, laoreet et orci. Ut ac lorem ultricies ligula fringilla lobortis. Duis ultrices ligula in metus suscipit imperdiet. Duis lorem diam, condimentum quis consequat et, laoreet nec arcu. Mauris convallis quam sed ante convallis, eget pulvinar lorem elementum. Donec bibendum euismod rutrum. Integer luctus, augue ac maximus ullamcorper, magna urna facilisis leo, eget congue ante sapien sit amet eros. Vivamus hendrerit lorem nec justo mollis, non sollicitudin libero maximus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero urna, viverra in fermentum eget, laoreet et orci. Ut ac lorem ultricies ligula fringilla lobortis. Duis ultrices ligula in metus suscipit imperdiet. Duis lorem diam, condimentum quis consequat et, laoreet nec arcu. Mauris convallis quam sed ante convallis, eget pulvinar lorem elementum. Donec bibendum euismod rutrum. Integer luctus, augue ac maximus ullamcorper, magna urna facilisis leo, eget congue ante sapien sit amet eros. Vivamus hendrerit lorem nec justo mollis, non sollicitudin libero maximus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer libero urna, viverra in fermentum eget, laoreet et orci. Ut ac lorem ultricies ligula fringilla lobortis. Duis ultrices ligula in metus suscipit imperdiet. Duis lorem diam, condimentum quis consequat et, laoreet nec arcu. Mauris convallis quam sed ante convallis, eget pulvinar lorem elementum. Donec bibendum euismod rutrum. Integer luctus, augue ac maximus ullamcorper, magna urna facilisis leo, eget congue ante sapien sit amet eros. Vivamus hendrerit lorem nec justo mollis, non sollicitudin libero maximus.
Video Background
Doesn't need two buttons. Can have text if you want...
Lorem ipsum dolor sit amet, consectetur adipiscing elit.