The following fonts are available to choose from out of the box. If you choose to change the default fonts, you can pick two fonts and apply them at the theme level—one font choice controls the navigation & headlines and the other controls descriptions and body copy.
Since Frost 2.0 allows you to choose more than one font for the headlines and body text, here are some suggested pairings to use on your site.
Frost's typography used across devices is laid out here. In the theme, you can override the font family, but the typography spacing & size will remain the same.
Mobile:
Mobile:
Mobile & Tablet:
Desktop:
The following colors are the defaults for the out-of-the-box Frost palette. However, you can easily customize your theme further by choosing your own hex values for these defaults.
Primary Color: #EE0120
Used for: Buttons, Links, Eyebrows, Highlight bar on selected tab or nav item
Primary Text Color: #4B4545
Used for: Headlines, Body Text
Secondary Text Color: #787171
Used for: Description Text
Background Color: #787171
Used for: Module backgrounds, Hover State for Menu Items
Borders & Dividers Color: #F1ECED
Used for: Borders on input fields, dividers between promos, bar under tab items.
Available Button Styles - Based on Module Type / Use:
Some of the button styles vary based on where they are published. See below for the styles and their appearances.
Promos:
When Publishing an Individual Promo, these are the available Frost Button Styles:
Button White Outline
Link with Arrow
Lists:
When Publishing the List's CTA (Call to Action) Styles:
Interactions:
Here are the interactions to note while viewing the button options above.
- Primary, Secondary:
- Is driven by the following colors in the theme.
- Primary Button Background Color, Primary Button Text Color and Primary Button Border Color.
- The colors will swap on hover; text color becomes background color, background color becomes text color.
- Is driven by the following colors in the theme.
- Primary, Secondary Outline:
- The button text color becomes the button background color, and the button background color becomes the button text color.
- Link with Arrow: the arrow nudges right on hover.
- Standard Link: the underline disappears on hover.
