Introduction
Colours
Typography
Logos & Assets
Buttons & CTAs
Rich Text - Blog Posts
Other

Welcome

WWW Style Guide

FOUNDATIONS

Design Principles

Theme, Schemes, Variations

Layout Grid System

Accessibility

Components

Overview

Header Components

Body Components

Grid Components

Accordions & Tabs

Resources

Helpful Links
Arrow

Layout Grid System

We use intrinsic design to guide our grid. Intrinsic design is content-driven and not set by the technology or strict design rules.

Grid

A soft grid approach supports content-driven design. Our grid is an 8px soft grid. In a soft grid, elements are positioned relative to each other (instead of placing elements on a hard grid pattern using 8px increments).

Why 8px? The most popular screen sizes are divisible by 8 on at least one axis - usually both. 8px grids allow scaling for a wide variety of devices much easier, and more consistent.

Spacing Tokens

Spacing tokens are used in the details of component creation. We use multiples of 8 to define the dimensions, padding, and margins of elements. These sizes can inform the size of elements like images and icons.

Medium-Large Screens

Token

  • --xxxs

  • --xxs

  • --xs

  • --sm

  • --md

  • --lg

  • --xl

  • --xxl

  • --xxxl

Value

  • 4px

  • 8px

  • 12px

  • 16px

  • 24px

  • 32px

  • 48px

  • 64px

  • 96px

Ratio

  • 0.25

  • 0.5

  • .75

  • 1

  • 1.5

  • 2

  • 3

  • 4

  • 6

Small Screens

Token

  • --xxxs

  • --xxs

  • --xs

  • --sm

  • --md

  • --lg

  • --xl

  • --xxl

  • --xxxl

Value

  • 2px

  • 4px

  • 8px

  • 12px

  • 16px

  • 24px

  • 32px

  • 48px

  • 64px

Ratio

  • 0.125

  • 0.25

  • 0.5

  • .75

  • 1

  • 1.5

  • 2

  • 3

  • 4

We try to always design using 8px increments, but where necessary 4px is available to allow more flexibility for line heights and smaller adjustments.

Layouts

Components can be placed into a variety of responsive page layouts. All layouts adjust to the viewport and will drop down to 1 column on a small enough screen size.

Components should be designed and developed to adapt to any device type or layout. In every situation, components should remain accessible, legible, and fully functional.

1 Column

Horizontal Distribution: 100

2 Columns - Even

Horizontal Distribution: 50-50

2 Columns - Thirds

Horizontal Distribution: 33-66

2 Columns - Thirds

Horizontal Distribution: 66-33

2 Columns - Fourths

Horizontal Distribution: 25-75

2 Columns - Fourths

Horizontal Distribution: 75-25

3 Columns - Even

Horizontal Distribution: 33-33-33

3 Columns - Fourths

Horizontal Distribution: 25-25-50

3 Columns - Fourths

Horizontal Distribution: 25-50-25

3 Columns - Fourths

Horizontal Distribution: 50-25-25

4 Columns - Even

Horizontal Distribution: 25-25-25-25

Spacing Rules

Consistent spacing rules are key in a soft grid. When all of your measurements follow the same rules, you automatically get a more consistent UI.

Spacing

Value

Usage

XS Gutters - Vertical spacing between smaller elements

--xs

  • Buttons

  • Paging dots

  • Tags

SM Gutters - Vertical space between multiple small-medium sized elements in a component

--sm

  • Interior card padding: Omar, Kevin

  • Horizontal space between image and text (Kevin, Wilma, Dora)

MD Gutters - Space inside nested layouts

--md

  • All interior edge padding of nested layouts

XL Gutters - Vertical space between multiple medium-large sized elements in a component

--xl

  • Large Cards (Cleo, Hortense)

  • Image grids (Dora, Lenny)

  • Felix Columns: Logo, Text, CTAs

  • Stat grid (Marilyn)

  • Tabs (Wilma)

XL Gutters - Vertical space between layouts with major columns

--xl

  • Carmen, Flora, Isidore, Rita (text to image)

XL Gutters - Vertical space between layout columns

--xl

  • All layouts with columns

XXL Gutters - Horizontal space between two components

--xxl

  • Global

XXL Gutters - Vertical gutters on the left and right edges of layouts and component content

--xxl

  • Global