Skip to content
Surfhog home
Menu

Brand guide

SurfHog brand and interface guide

This page records the colours and interface rules used across SurfHog. It renders the real design tokens and components, so it also works as a quick visual regression check.

Core colour

SurfHog teal

Use brand or brand-500 for the primary series in simple charts, action backgrounds and selected controls.

What the colour should do

  • Identify the primary action or selected state.
  • Carry the main series in a simple graph.
  • Provide a recognisable accent without colouring whole pages.
  • Stay secondary to the data, labels and reading order.

Brand scale

The base colour stays fixed. Lighter and darker tokens are generated with perceptual colour mixing for backgrounds, borders, focus states and text that needs more contrast.

  • brand-50

    95% white

  • brand-100

    90% white

  • brand-200

    75% white

  • brand-300

    55% white

  • brand-400

    30% white

  • brand / brand-500

    #0098b0

  • brand-600

    15% black

  • brand-700

    30% black

  • brand-800

    45% black

  • brand-900

    60% black

  • brand-950

    75% black

Semantic colour roles

Components should ask for a role rather than a raw shade. This is what lets the same component follow light and dark mode.

SurfHog semantic colour tokens
TokenUse
brandPrimary charts, selected states and brand accents
actionAction backgrounds
action-contentText and icons on action backgrounds
canvasPage background
surfaceCards, controls and raised content
surface-mutedQuiet subdivisions within a surface
surface-borderCard and control boundaries
contentBody text
content-mutedSupporting text and metadata

Light and dark modes

These previews force each colour scheme locally. They do not depend on the theme selected for the rest of this page.

Light mode

Semantic tokens

Current conditions

Clean hierarchy, restrained colour

Surfaces carry the theme. Brand colour identifies actions, selected states and the primary series in a simple chart.

Text link
Native controls

Simple chart treatment

Brand chart exampleA rising brand-coloured line with circular points and pale horizontal grid lines.

Dark mode

Semantic tokens

Current conditions

Clean hierarchy, restrained colour

Surfaces carry the theme. Brand colour identifies actions, selected states and the primary series in a simple chart.

Text link
Native controls

Simple chart treatment

Brand chart exampleA rising brand-coloured line with circular points and pale horizontal grid lines.

Typography

Lato regular and bold

Coastal data should be calm to read.

Use bold weight for headings, measurements and short labels. Keep body copy regular, left aligned and narrow enough to read without losing the next line.

Supporting information is smaller and quieter, but it still needs enough contrast to remain readable.

Usage rules

Charts

  • Use brand for one primary data series.
  • Use another colour only when it communicates a second meaning.
  • Keep labels, shapes and patterns so colour is not the only cue.
  • Use darker colours for chart text only when contrast requires them.

Actions and contrast

Brand actions use white text under a product-approved, deliberately scoped contrast exception. The known contrast ratio is approximately 3.43:1. The base brand colour must remain unchanged, and this combination is reserved for action controls and selected states. It must not be used for body copy.

Use darker brand tokens for small text on light surfaces and lighter tokens on dark surfaces when the base brand colour does not provide enough text contrast.