Design patterns

We don’t have a lot of rules when it comes to design. We acknowledge that effective design embraces evolution and so we prefer flexible patterns, as seen here. Honour these and you’ll do fine.

Focus on content

As makers of user-content-driven products we respect content as a sovereign country in our products.

Content is a sovereign country.

Content is a sovereign country Content is a sovereign country Content is a sovereign country

Sometimes content sends ambassadors. But only for special occasions.

Content sends ambassadors Content sends ambassadors Content sends ambassadors

It’s the height of rudeness to invade content.

Don’t invade content Don’t invade content Don’t invade content

Styling

Our visual style is modern, simple, and friendly.

  • Use a combination of rounded and square corners
  • Space visual elements at least one grid unit from each other
  • Use a subtle drop shadow if required (especially on dark colours)
Examples of visual style

Visual style Visual style Visual style

Visual effect Value
Drop shadow XOffset: 0, YOffset: 0, Blur: 1.5rem, Spread: 0, Color: BrigadierBlueDark
Corner radius 4px / .25rem
Structural grid size 16px / 1rem

Spacing

Our generous spacing introduces “air” in to our user interfaces giving them a simple and confident feel.

Our spacing values take advantage of screen real estate on large screens, and collapse when there’s less room. Use discretion.

Spacing for various screens

Spacing for various screens

Grid

[Content in development]

Icons

Please use icons conservatively. Icons can enhance the meaning of a UI but should never be left to do all the work, and should be supported with other affordances and helpers.

Our icon library covers most use cases in our products.

Our icon library

Icon library Icon library Icon library

Icons can be created using the guides below. We use a combination of rounded and square line joins, and lines have a two unit stroke. Some of our icons are hand-crafted, others are copied from existing icon sets.

Icon guides

Icon guides Icon guides Icon guides

Sometimes icons need to be adapted to suit certain UX contexts. Please use the below applications as a guide.

Icon extensions

Extended icon set Extended icon set Extended icon set

Some examples of icons adding context or supporting UI patterns.

Icons in use

Icons in use Icons in use Icons in use

Find these icons on the asset download page.

Element sizing

We design interface elements to be minimum 48 × 48 px (3 × 3 rem). At this size our touch/click area is a little bigger than Apple's HIG size of 44 × 44 px, and maps neatly to our structural grid.

The visible area may be smaller than the interactive area.

Examples of element sizing

Element sizing Element sizing Element sizing

Illustration

[Content in development]

Photography

[Content in development]

Accessibility

[Content in development]