Colours

A carefully-selected palette of colours allows us to consistently represent our intentions in various design components. To keep our designs focused on what should draw viewers' attention and avoid attention overload, the palette should be limited to only the colours needed to highlight actionable elements.

The shade range for each colour has been selected to provide a flexible range of dark and light shades of each colour while maintaining acceptable contrast ratios for legibility of foreground and background text.

In your designs, keep introduction of new colours limited except where clearly reasonable. For user-interface elements, try to avoid using more than a single foreground and background colour (in a range of shades) per interactable element.

Primary

Our primary colour is a bright, bold blue, intended to demonstrate our confident, authoritative nature along with our enthusiasm for God's word and the study of His creation.

We use Primary-600 to guide viewers toward particular actions. It is also used for navigational aids such as links.

Use the Primary palette for

• Buttons and other actionable elements with a single, clear function
• Highlighting active selections in a list of elements
• Hyperlinks

Do NOT use the Primary palette for

• Decorations
• Text copy
• Backgrounds with no interactable action
• Marketing call-to-action buttons - use the Accent palette instead
• Situations where no primary action is clear - use the Neutral palette instead
• Every element in a list of actions

A range of shades is provided for situations where we might have need of lighter and darker primary colours.

Accent

Our accent colour is a dramatic, vibrant orange, intended to draw viewers attention to promoted items of interest.

We use Accent-600 as a call-to-action to highlight promotions, discounts, upcoming events, and new content.

Use the Accent palette for

• Buttons that send visitors to promotions and new content
• Decorations around elements that highlight promotions, discounts, upcoming events, and new content.

Do NOT use the Accent palette for

• Text copy
• Non-promotional buttons and links - use the Primary or Neutral palettes instead.
• Multiple promotions in the same visual container - either separate them or choose one to highlight with the Accent colour

A range of shades is provided for situations where we might have need of lighter and darker accent colours.

Neutral

Our neutral palette is built on a range of calming, slightly-bluish greys.

We use the Neutral palette for defining visual hierarchy and introducing contrast where needed.

Use the Neutral palette for

• Establishing visual hierarchy for text copy - darker colours for headers, lighter for paragraphs and such
• Providing visual cues to break up functionally independent sections of a design
• Backgrounds and outlines for non-primary interactable buttons and other elements

Do NOT use the Neutral palette for

• High-contrast decorations - to break up adjacent elements use whitespace instead
• Drawing attention to interactable elements - use the Primary or Accent palettes instead

A range of shades is provided for situations where we might have need of lighter and darker neutral colours.

Semantic Colours

Info

Success

Warning

Danger