This Style Guide provides a central location to make stylistic changes to your site.
Style Guide for Field Minder
Manage the look and feel of the entire website from our style guide. Style and components used on the site are documented here, and any changes made will be immediately visible across all pages. Includes:
Our primary color palette is based on Raisin Black. Use this color palette to empathize brand feeling in your system.
Raisin black (#202022)
Secondary Color
When used in conjunction with our primary color, these secondary color make every moment feel on-brand and every interaction informative. Use these colors to highlight the primary color.
spanish gray (#9e9e9e)
Accent Color
Accent colors are supplementary colors that typically contrast or complement the primary colors used in a room to create an emotional response.
Inchworm (#97f65d)
Heading Font
A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading.
figtree
Regular - 100 px
Heading 1
Regular - 95 px
Heading 2
Regular - 76 px
Heading 3
Regular - 61 px
Heading 4
Regular - 49 px
Heading 5
Regular - 39 px
Heading 6
Regular - 31 px
Heading 7
Subheading Font
A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading.
figtree
Regular - 39 px
Subheading 1
Regular - 31 px
Subheading 2
Regular - 25 px
Subheading 3
Regular - 20 px
Subheading 4
Regular - 16 px
Subheading 5
Regular - 14 px
Subheading 6
Regular - 12 px
Subheading 7
Body Font
A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading.
figtree
Light - 24 px
Body Text 1
Light - 20 px
Body Text 2
Light - 18 px
Body Text 3
Light - 16 px
Body Text 4
Light - 14 px
Body Text 5
Light - 12 px
Body Text 6
Primary Button
A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading.
.png)
.png)
.svg)