Martus Style Guide
This style guide will show you different elements that can be used within the website modules.
Typography
The follow are our typography settings for the website and landing pages Blog post typography is set seperately in the theme settings.
Our two main brand fonts are Montserrat and Lato.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample Paragraph Text: Morbi ultricies, this is a text link nibh quis tincidunt scelerisque, magna purus malesuada erat, feugiat semper urna lectus at sapien. Maecenas ornare, metus ut mattis vehicula, nulla nulla efficitur lacus, vitae congue nisi nibh eget massa. Sed nec pharetra mauris, ac volutpat metus. Praesent sed enim mollis, tincidunt orci sit amet, mattis risus.
- Bullet Point
- Bullet Point
- Bullet Point
- Bullet Point
- Bullet Point
- Bullet Point
This is a call out quote.
Icons
Icons in the theme are by default Martus Green. Icons can be used in various places including layered on top of pictures.
CTAs & Standard Buttons
These are the button options you can choose from. Do not override the style. Each button is set to 5 for rounding corners.
Modal Popup
Modals pop-ups are features of various modules. You can give them global style.
Modal Headline
Donec sed pretium mauris. Suspendisse aliquam ornare quam, eleifend sagittis mauris interdum eget. Maecenas placerat mattis velit, in egestas erat vulputate vel. Morbi at nisl justo. Praesent quis erat risus.
Praesent varius quam quis ultricies consequat. Aenean ullamcorper commodo consectetur. Vivamus ex sapien, ullamcorper id ullamcorper in, eleifend in quam. Curabitur ac metus convallis, scelerisque libero in, vulputate justo. Mauris erat ex, commodo vitae ipsum et, vestibulum porttitor odio.
Forms
This is an example of a stylized form and what different input fields will look like.
Section Option 1
This is a section that uses light gray as the background. (#Fafafa)
Section Option 2
This is a section that is using white as the background. (#FFFFFF)
Section Option 3
This is a section using Martus Green (#40B87B) as the background. Always use white text with the Martus Green background
Section Option 4
This is a section using Dark Gray (#). Always use white text with this. Avoid using close to the bottom when possible.
Section Option 5
This is a section using Gradient Green (#40b87b and #00f5d8). The gradient direction should be top left to bottom right or horizontal left to right.