Doppla brand showcase · Version 1.0.1 · 18 October 2026

The mark

Two rounded blocks and a single hole. Blue is always in front of red — see the guidelines for why.

Colour

On paper

Flat

No gradient, on paper

Black

Single-ink, on paper

White

Single-ink, on ink

Which version goes where — the same set as the guidelines' own Backgrounds section. Full colour on any neutral surface; white, single-ink, the moment the surface is itself one of the brand colours.

Paper

Cream

Light grey

Ink

Charcoal

Warm grey

Brand blue, white mark

Brand red, white mark

Holds up small

The same file, from a favicon to a UI icon — no separate small-size version.

16 px
24 px
32 px
48 px

Colour

#C15E3D

Doppla Red

Input — the rear block

#1D6E8F

Doppla Blue

Output — the front block

#15151A

Ink

Body text, monochrome mark on light

#6B7280

Slate

Secondary text, captions, metadata

#FFFFFF

Paper

Primary background

#F7F3EC

Cream

Warm alternate background

#DADAD5

Hairline

Rules, dividers, input borders

Charts

Series colours in a fixed order — Doppla Blue first, Doppla Red never — plus a sequential ramp, a diverging pair, and reserved status colours. Toggle dark mode to see each set's dark values.

1  Doppla Blue

#1D6E8F · #1D6E8F

2  Ochre

#BD871C · #BD871C

3  Indigo

#4F54A0 · #686FBD

4  Sage

#569459 · #68A76A

5  Plum

#823B7D · #984F92

6  Teal

#06999A · #2AA9A9

Builds per week, by team

Example data

  • Platform
  • Runtime
  • Tooling
  • Web
  • Mobile
  • Data
0 50 100 150 200 Wk 1 Wk 3 Wk 5 Wk 7 Wk 9 Wk 11 Platform Runtime Tooling Web Mobile Data

Sequential

How much

LessMore

Diverging

Which side of a baseline

BelowBaselineAbove

Status

Reserved for state, always with an icon and a word

  • GoodHealthy, complete, or passing.
  • WarningNeeds attention soon; nothing has failed yet.
  • SeriousPartly failing; needs attention now.
  • CriticalFailed, destructive, or an error.

Lockups

Motion

The reveal, working live — the same markup and timing as motion/doppla-reveal-demo.html. Click to replay.

Loading

Loops continuously — the same markup and timing as loader/doppla-loader-demo.html. For buttons, inline rows, and full-page waits.