Skip to content
NewTry RouterPlus with free creditsTry playground →

Brand kit

Logos, colours and type for writing or designing about RouterPlus.

Rules

  1. Use these files only to refer to RouterPlus and its products.

  2. Don't stretch, squash, rotate, recolour, outline, add shadows or re-space the logo.

  3. Clear space: leave at least half the mark's height empty on every side.

  4. Minimum size: wordmark 80 px wide on screen (20 mm in print); mark alone 16 px.

  5. Black or blue-mark versions on light backgrounds, white on dark backgrounds and photos.

  6. Don't put the logo in a box, badge or shape, except the app icon as supplied.

  7. Don't use the logo to suggest that RouterPlus endorses, sponsors or partners with you unless we've agreed it.

  8. Don't make the logo part of another logo, product name or domain.

RouterPlus wordmark with clear space marked around it
Clear space: half the mark's height on every side
RouterPlus wordmark at 80 pixels wide80 px
RouterPlus mark at 16 pixels16 px
Minimum sizes on screen, shown at actual size

Files

Use SVG wherever it's accepted. PNGs are transparent and large enough to scale down.

Colour

Paper and ink carry the page, blue is the brand colour, and the soft accents are for fills and gradients.

Core

  • Blue

    RGB 49, 92, 218

    Brand colour: logo mark, buttons, links

  • Blue dark

    RGB 36, 73, 184

    Hover, pressed

  • Ink

    RGB 48, 46, 35

    Text, dark panels

  • Paper

    RGB 254, 252, 251

    Page background

  • Muted

    RGB 107, 102, 86

    Secondary text

  • Line

    RGB 227, 225, 222

    Rules, borders

Accents

  • Periwinkle

    RGB 201, 216, 248

    Accent

  • Lilac

    RGB 196, 184, 250

    Accent

  • Pink

    RGB 230, 192, 236

    Accent

  • Butter

    RGB 242, 213, 143

    Accent

Tokens as CSS

Type

  • Serotiva

    Headlines

    Commercial font by Yukita Creative, not included in the kit. Hanken Grotesk is the free substitute.

    Hanken Grotesk on Google Fonts

    Route to the right model, every time.

    • Aa400 Regular
    • Aa500 Medium
  • Geist

    Body and interface

    Free, SIL OFL.

    Geist on Google Fonts

    Route to the right model, every time.

    • Aa400 Regular
    • Aa500 Medium
    • Aa600 Semibold
  • Geist Mono

    Code, labels and numbers

    Free, SIL OFL.

    Geist Mono on Google Fonts

    Route to the right model, every time.

    • Aa400 Regular
    • Aa500 Medium