Branding

Typography

Font Families

• .f-family--sans: sans-serif, body font uses default sans-serif font
• .f-family--light: "Brandon Grot W01 Light", helvetica, 'helvetica neue', arial, sans-serif
• .f-family--regular: "BrandonGrotW01-Regular", helvetica, 'helvetica neue', arial, sans-serif
• .f-family--medium: "Brandon Grot W01 Medium", helvetica, 'helvetica neue', arial, sans-serif
• .f-family--bold: "Brandon Grot W01 Bold", helvetica, 'helvetica neue', arial, sans-serif

Font Sizes

• .f-size--xs: 0.85rem
• .f-size: 1rem
• .f-size--sm: 1.25rem
• .f-size--md: 1.5rem
• .f-size--lg: 2rem
• .f-size--xl: 4rem

Color Variables

• $c-blue: #002f69
• $c-tx-blue: #183a71
• $c-orange: #ff7700
• $c-light-blue: #849ebf
• $c-link-blue: #469ffc
• $c-bright-blue: #1680fb
• $c-lightest-blue: #eaf1f7
• $c-login-blue: #057CFF
• $c-faded-blue: #b0d6ff
• $c-gray: #999999
• $c-light-gray: #d2d2d2
• $c-red: #E8391E
• $c-green: #75A841

Email Templates

Content Guidelines

• Each template includes a greeting and closing. The only content needed is the body of the message.
• The max width of the content area is 700px. All content must fit within this area and be flexible enough to scale down on small screens.

Markup Guidelines

table

• Avoid hardcoding a width attribute.
• Use a percentage value if setting a column width.
• Style tables with utility classes versus inline attributes.

p

• Avoid styling with utility classes that add padding.

Utility Classes

For styling content in the email template.

Block Elements

• .u-featured-block: Styles a div with a bright blue background with white text.

Tables

• .u-tabular-data: Add class to a table element to add basic table styling. Affects spacing of cells and aligns text.

Javascript

This is a markdown document.

var foo = 'bar'

Styles

Utility Classes

Misc Utilities

• .u-screen-reader-text: hide screen reader text
• .u-no-list-style: reset default list styles
• .u-clear: clear left and right
• .u-clearfix: fix collapsed element

Spacing

• .u-sp: add margin below
• .u-sp--sm: add less margin below
• .u-sp--md: add a little more margin below
• .u-sp--lg: add more margin below
• .u-sp--top: add margin above
• .u-sp--top-md: add a little more margin above
• .u-sp--right: add margin on right
• .u-sp--right--lg: add more margin on right
• .u-sp--left: add margin on left
• .u-sp--vertical-lg: add medium margin above and large margin below
• .u-sp--none: remove all margin

Padding

• .u-pd: add padding on all sides
• .u-pd--hz: add padding on left and right
• .u-pd--lg: add more padding
• .u-pd--bottom: add padding on bottom

Text

• .tx-underline: display text with an underline
• .tx-uppercase: capitalize all text
• .tx-smaller: decrease font size
• .tx-capitalize: capitalize the first letter of each word
• .tx-blue: blue text color
• .tx-light-blue: light blue text color
• .tx-medium: medium font weight
• .tx-bold: bold font-weight
• .tx-white: white text-color
• .tx-letter-spacing: more letter spacing
• .tx-center: center align text