View on CodeCommit

Marketing Style guide

Become familiar with Measured’s style for public-facing experiences.

On this page

Introduction

Link to current styling for Marketing: Current Figma mocks

This page makes use of Measured’s specific typography font stack for Marketing.

Typography

Measured sets basic global display, typography, and link styles.

Font

The font chosen for Marketing is Inter. Fonts are available here. It provides a consistent font for each OS (Windows, Mac, Linux, etc) as well as for older OS versions (Windows XP, Ubuntu 19 and prior, OS X < 13).

The font weights in use are:

Regular (400)
Medium (500)
Semi Bold (600)
Bold (700)
Extra Bold (800)

Headings

Headings are used for signifying differing sections within the site. Headings are displayed horizontally, padded out from surrounding content. The font should be left aligned.

Heading Styles	Example
`<p class="m-h1">Measured</p>`	Measured
`<p class="m-h2">Measured</p>`	Measured
`<p class="m-h3">Measured</p>`	Measured
`<p class="m-h4">Measured</p>`	Measured

Colors

Theme Colors

We use a subset of Measured’s defined colors to create a color palette.

Light Gray

Eee

Dark Gray

Charcoal

Midnight

Measured Orange

Measured Jaffa

Measured Red

Measured Blue

Gradient

Common Usages

Charcoal is for body text
Light Gray is used for the Gray background on pages

Components

Buttons

Examples of buttons and button colors:

class="btn btn-primary"

class="btn btn-tertiary"

class="btn btn-warning"

Examples of outline buttons and button colors:

class="btn btn-outline-primary"

class="btn btn-outline-tertiary"

class="btn btn-outline-warning"

Links

Get a Demo class="link-primary"

Get a Demo class="link-tertiary"

Get a Demo class="link-warning"

Example of a select dropdown. Uses Bootstrap’s form-select class.