Web Style Guide
For Web Team:
- buttons always are the default size
- text size is always regular/default
Global Theme
This website uses the Light 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: #FF6A42
Secondary color: #290076
The title font is Degular
The body font is Open Sans at default size.
Button Styles
Image Dimensions
in pixels
Small hero image: 2000 x 500 | Medium hero image: 2000 x 650 (current style) | Large hero image: 2400 x 1200 | Pricing card image: 1200 x 600
Callouts
This is a callout with a gradient background!
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.
Vestibulum sit amet ultricies enim. Ut placerat nulla justo, nec semper est tincidunt nec. Nam eu nisi sit amet ipsum vestibulum lacinia. Vivamus condimentum lacus tortor, sit amet blandit est mollis eget. Maecenas malesuada velit nec congue eleifend. Suspendisse sit amet eros a mi hendrerit cursus. Curabitur erat quam, imperdiet vitae scelerisque eget, lacinia quis urna. Proin id mattis risus, mattis lacinia ligula. Curabitur quis dictum massa, vitae eleifend risus. Vestibulum eleifend velit sodales neque interdum lobortis. Quisque id feugiat risus.
3 Col
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus non augue non.
Video Background
Doesn't need two buttons. Can have text if you want...
Accordion
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.
