# Doppla Brand Guidelines

Version 1.0.1, 18 October 2026

The plain-text edition of `Doppla_Brand_Guidelines.pdf`. It carries the same rules and values. Figures are given as tables, or as links to the files in this package.

## What is inside

- 01 Brand overview — Where the name comes from, and what the mark is saying
- 02 The mark — Construction, proportions, and the one rule that never bends
- 03 Clear space & sizing — How much room it needs, and how small it can go
- 04 Lockups — Primary, stacked, and the wordmark on its own
- 05 Colour — The palette, with values for screen and print
- 06 Typography — The drawn wordmark, and Poppins for everything else
- 07 Monochrome — One-colour reproduction, and why the tones differ
- 08 Backgrounds — Which version to place on what
- 09 Motion — The reveal animation, with timings
- 10 Misuse — The things that break it
- 11 Digital direction — Spacing, radius, and surfaces for product and web work
- 12 Supergraphic — The mark, enlarged past the frame, for backgrounds
- 13 Data visualisation — Chart colours, by the job they do
- 14 Iconography — Material Symbols, set the same way everywhere
- 15 Files & tokens — What ships in the package, and how to wire it up
- 16 Name & mark — Who may use the mark, how to reproduce it, and how to write the name
- 17 Co-branding — The mark beside a partner’s logo
- 18 Voice & tone — How Doppla writes, and how that shifts with the context

## 01 Brand overview

*Where the name comes from, and what the mark is saying*

Doppla takes its name from the Doppler effect — the shift in a wave’s frequency as its source moves relative to whatever is measuring it. You hear it when a siren changes pitch as it passes. Astronomers see it as light becoming redder or bluer depending on whether a star is moving away or drawing closer.

The reference earns its place because software does something structurally similar. Every platform fundamentally takes something in and hands something back, changed: a request becomes a response, raw events become a readable picture, one team’s data becomes another team’s decision.

The mark states that plainly, read the way the eye naturally moves, left to right. Red, trailing, is what has been left behind — the redshift. Blue, ahead, is what is being moved towards — the blueshift. The hole between them marks the source itself, caught at the point where one becomes the other. None of that needs a waveform, a frequency bar, or a concentric ring to land; the whole idea lives in which colour sits where, and in that one gap, and nowhere else in the drawing. That restraint is deliberate and it should hold: the moment the brand starts illustrating sound waves, it becomes a different, much more literal company.

![The horizontal lockup](logo/svg/doppla-lockup-horizontal-color.svg)

### How it should feel

Calm, exact, and unhurried. Doppla is infrastructure — the kind of product people trust with work that matters, and trust is built with precision rather than enthusiasm. Where there is a choice between a louder treatment and a quieter one, take the quieter one.

## 02 The mark

*Construction, proportions, and the one rule that never bends*

Two rounded blocks and a single hole. The red block sits behind, trailing — the input, and the redshift. The blue block sits in front, ahead — the output, and the blueshift, always solid, always the stronger of the two. The hole is cut through both at the centre of the mark, at the point where one becomes the other.

![The Doppla mark](logo/svg/doppla-mark-color.svg)

### What holds it together

**Blue is never behind red.** Output in front of input is the whole reading of the mark; reverse the layers and it describes the opposite. This is the single rule in this document with no exceptions.

**The proportions are fixed.** The red block is wider than the blue, and the two overlap far enough that red’s corners sit entirely behind blue’s straight edge — nothing of red’s rounding shows at the seam. Use the supplied files rather than rebuilding it; the balance of the two colours, the overlap, and the hole are easy to approximate badly.

**One mark, every size.** There is no separate favicon version. The hole and both colours stay legible down to 16 px, which means the same file works from a browser tab to a building sign.

## 03 Clear space & sizing

*How much room it needs, and how small it can go*

Keep clear space on every side equal to half the mark’s width. Nothing enters that zone — not type, not rules, not the edge of the page or screen.

### Minimum sizes

- Mark alone, screen — 16 px wide
- Mark alone, print — 5 mm wide
- Horizontal lockup, screen — 100 px wide
- Horizontal lockup, print — 25 mm wide
- Stacked lockup, screen — 64 px wide

> Below the lockup minimums, drop the wordmark and use the mark on its own rather than shrinking the pair further.

## 04 Lockups

*Primary, stacked, and the wordmark on its own*

### Primary

Mark left, wordmark right, with the gap set at roughly a third of the mark’s width. The wordmark is optically centred on its x-height rather than its bounding box, which is why it sits slightly low against the mark’s midpoint. Use this everywhere there is horizontal room.

![The horizontal lockup](logo/svg/doppla-lockup-horizontal-color.svg)

### Stacked

For square and near-square placements — avatars, app tiles, sponsor walls. Mark and wordmark share a centre axis.

![The stacked lockup](logo/svg/doppla-lockup-stacked-color.svg)

### Wordmark alone

Drawn at its light weight when it stands by itself, which gives it the airier feel the lockups cannot afford. Use where the mark already appears elsewhere on the same surface.

![The wordmark](logo/svg/doppla-wordmark-color.svg)

## 05 Colour

*The palette, with values for screen and print*

Two brand colours, standing in for redshift and blueshift. They are not interchangeable: red is always the input, blue always the output. The pair is deliberately muted — saturated enough to hold attention, restrained enough to sit in a working interface all day without fatiguing.

| Colour | Use | Hex | RGB | CMYK | Pantone (C) | Pantone (U) |
|---|---|---|---|---|---|---|
| Doppla Red | Input — the rear block | `#C15E3D` | `rgb(193 94 61)` | `cmyk(0 51 68 24)` | not yet matched — confirm before print use | not yet matched — confirm before print use |
| Doppla Blue | Output — the front block | `#1D6E8F` | `rgb(29 110 143)` | `cmyk(80 23 0 44)` | not yet matched — confirm before print use | not yet matched — confirm before print use |

CMYK values are a standard conversion from the screen colours, not a press-calibrated one — confirm against your printer's own profile before a run. Coated (C) and uncoated (U) Pantone matches are given separately, since the same ink prints differently on each stock; treat any number here as provisional until it has been checked against a physical swatch.

### Neutrals

| Colour | Use | Hex | RGB | CMYK |
|---|---|---|---|---|
| Ink | Body text, monochrome mark on light | `#15151A` | `rgb(21 21 26)` | `cmyk(19 19 0 90)` |
| Slate | Secondary text, captions, metadata | `#6B7280` | `rgb(107 114 128)` | `cmyk(16 11 0 50)` |
| Paper | Primary background | `#FFFFFF` | `rgb(255 255 255)` | `cmyk(0 0 0 0)` |
| Cream | Warm alternate background | `#F7F3EC` | `rgb(247 243 236)` | `cmyk(0 2 4 3)` |
| Hairline | Rules, dividers, input borders | `#DADAD5` | `rgb(218 218 213)` | `cmyk(0 0 2 15)` |

> Use the brand colours as accents, not as page fills. The mark itself, a key figure in a chart, a single primary action — that is the right density. Large flat areas of either colour flatten the contrast the mark depends on.

**The mark's default colour fill is a subtle gradient, not a flat tint.** Each block brightens towards the hole and darkens towards its own outer edge, within the same red or blue — restrained enough that the block still reads as one solid colour at a glance. It is defined once from the brand colours themselves, not approximated by eye.

Where a gradient will not survive — a print process without smooth tonal control, or a small, heavily compressed image — use the `flat` files rather than approximating the gradient or dropping to monochrome. `logo/svg` and `logo/png` each ship `color`, `flat`, `black`, and `white`.

| Tile | Background | Mark |
|---|---|---|
| Colour, with the gradient | Paper, `#FFFFFF` | Full colour, `logo/svg/doppla-mark-color.svg` |
| Colour, flat | Paper, `#FFFFFF` | Flat colour, `logo/svg/doppla-mark-flat.svg` |

## 06 Typography

*The drawn wordmark, and Poppins for everything else*

Two separate things, worth keeping apart: the wordmark is drawn artwork, and everything else is set in Poppins.

### The wordmark

The logotype is not typed. It is constructed from circles and straight lines — every bowl a true circle of one diameter, every stem a bar of one width, meeting the curve tangentially with no notch at the join and no foot running past it. That gives the wordmark the same plain geometry as the mark standing beside it.

Its proportions are lifted from Poppins — the same x-height, ascender, descender, letter widths, and sidebearings, with stroke weights matched to the corresponding Poppins weight — so the two sit together without looking like different families. It ships as finished artwork in `logo/`. Never rebuild it by setting the word in a typeface.

![The wordmark](logo/svg/doppla-wordmark-color.svg)

### Poppins, for everything else

Headings, interface, body copy, and captions are all Poppins — a geometric sans whose round letterforms sit naturally with the wordmark. The three weights the brand uses ship in `fonts/` with their licence, so nothing needs sourcing separately.

| Weight | Value | Use | File |
|---|---|---|---|
| Light | 300 | Display and large headings | `fonts/Poppins-Light.ttf` |
| Regular | 400 | Body copy | `fonts/Poppins-Regular.ttf` |
| Medium | 500 | UI labels, table headers | `fonts/Poppins-Medium.ttf` |

### Setting text

Sentence case for headings and buttons; reserve all-caps entirely. Body copy sits at 16 px with line height around 1.6, and lines stay under 75 characters. Headings tighten slightly, around −0.01em. Avoid Bold — it reads as urgency, which is off-tone. For code and identifiers use any plain modern monospace; JetBrains Mono and IBM Plex Mono both sit well beside Poppins.

## 07 Monochrome

*One-colour reproduction, and why the tones differ*

Single-ink printing, engraving, embroidery, a platform that flattens icons — the mark needs a one-colour form, and a naive one fails badly. Fill both blocks with the same flat colour and the seam between them vanishes; what is left is a rounded square with a hole in it, and the input-and-output reading is gone.

The fix is to separate them by tone instead of hue. **The blue block stays at full strength and the red block drops to 55%.** The seam stays visible, and blue still reads as the block in front — which matters, because that layering is the whole reading of the mark.

| Tile | Background | Mark |
|---|---|---|
| Ink on paper | Paper, `#FFFFFF` | Black, `logo/svg/doppla-mark-black.svg` |
| Paper on ink | Ink, `#15151A` | White, `logo/svg/doppla-mark-white.svg` |

> Where a process cannot hold a tint at all — a single-line engraving, a fax-grade stamp — fall back to the solid silhouette. The seam is lost, but the outline and the hole still identify the mark.

## 08 Backgrounds

*Which version to place on what*

On any neutral surface, use the full-colour mark. On a surface that is itself one of the brand colours, the matching shape disappears into it — switch to the monochrome mark in white.

| Tile | Background | Mark |
|---|---|---|
| Paper | Paper, `#FFFFFF` | Full colour, `logo/svg/doppla-mark-color.svg` |
| Cream | Cream, `#F7F3EC` | Full colour, `logo/svg/doppla-mark-color.svg` |
| Light grey | `#EDEDE9` | Full colour, `logo/svg/doppla-mark-color.svg` |
| Ink | Ink, `#15151A` | Full colour, `logo/svg/doppla-mark-color.svg` |
| Charcoal | `#232323` | Full colour, `logo/svg/doppla-mark-color.svg` |
| Warm grey | `#DAD5CD` | Full colour, `logo/svg/doppla-mark-color.svg` |
| Brand blue, white mark | Doppla Blue, `#1D6E8F` | White, `logo/svg/doppla-mark-white.svg` |
| Brand red, white mark | Doppla Red, `#C15E3D` | White, `logo/svg/doppla-mark-white.svg` |

### Photography and busy surfaces

Place the mark on a quiet part of the image, or on a solid panel drawn over it. Never rely on a drop shadow or an outline to rescue contrast — if it needs one, the placement is wrong.

## 09 Motion

*The reveal animation, with timings*

One reveal, used sparingly: a first page load, a splash screen, the top of a keynote. Not on every route change, and never on a loop.

The two blocks set off at the same instant and land at the same instant. Red starts close and has little ground to cover; blue starts at the far end of the wordmark and crosses the whole lockup. Same time, different distance — so blue arrives fast and red arrives unhurried, a quiet echo of the name. Once they have landed, the hole opens through both and the wordmark fades up with it.

To see the reveal, open `motion/doppla-reveal-demo.html`.

### Timings

- Blocks, duration — 650 ms, fading in as they travel
- Blocks, easing — cubic-bezier(0.2, 0.7, 0.2, 1)
- Red block, from — −0.67w
- Blue block, from — +2.45w, the end of the wordmark
- Blue block, fade — 263 ms, opaque before it meets red
- Hole, opens — after 650 ms, over 190 ms
- Hole, easing — cubic-bezier(0, 0, 0.58, 1)
- Wordmark, appears — after 650 ms, over 400 ms, ease-out

> *w* is the mark’s width, so the motion scales with the lockup. Working CSS ships in `motion/`, and honours `prefers-reduced-motion` by rendering the resolved lockup with no animation.

## 10 Misuse

*The things that break it*

- **Layers swapped.** Blue is placed behind red. Blue is always in front.
- **Distorted.** The mark is stretched or squashed. Scale it only in proportion.
- **Recoloured.** The blocks take other colours. They are always Doppla Red and Doppla Blue.
- **Re-angled.** The mark is turned off the level. It always sits square to the page.

- No shadows, glows, bevels, or outlines, and no gradient beyond the mark's own defined one. Use the `flat` files where a gradient will not survive, rather than approximating one.
- Do not rebuild it by eye. The overlap and the hole are specific; use the files.
- Do not re-set the wordmark in a typeface. It is drawn artwork — use the supplied files.
- Do not enclose the mark in a box, circle, or badge unless the platform forces it.
- Do not place the full-colour mark on either brand colour — switch to white.
- Do not animate it on a loop, or on every page load.

## 11 Digital direction

*Spacing, radius, and surfaces for product and web work*

Enough of a system to keep product and marketing work coherent without prescribing every screen. These are the defaults; depart from them when a specific problem calls for it.

### Space

A 4 px base unit, used in multiples: 4, 8, 12, 16, 24, 32, 48, 64, 96. Section padding on desktop sits at 64–96 px, and content columns cap around 1200 px. Generous space is part of the brand’s calm; when a layout feels wrong, the first thing to try is more room, not more structure.

### Shape

Radius of 8 px on cards and panels, 6 px on buttons and inputs, and full radius only on pills and avatars. Keep the vocabulary that small — a page where every element has a different corner is the fastest way to look assembled rather than designed.

### Surfaces

Separate surfaces with a hairline rule or a change in background, not with shadow. Shadow is reserved for things that genuinely float above the page — menus, dialogs, toasts — and stays soft and shallow when it appears.

### Colour in the interface

Ink and Slate on Paper carry almost everything. Blue marks the primary action and the current state. Red is reserved for the mark and for the input side of a diagram — it is not the error colour, and pressing it into service as one will muddy both meanings. For destructive and error states, use the critical status colour from section 13: #A8002C on light surfaces, #F97F95 on dark.

### Dark surfaces

Ink at #17171A as the base with panels a step lighter at #1D1D21, text at #F4F3F0, and both brand colours used unchanged — they were chosen to hold up on dark as well as light.

## 12 Supergraphic

*The mark, enlarged past the frame, for backgrounds*

Some pages need more than a blank ground: a blog header, a title slide, the top of a documentation page. Use the supergraphic for these rather than repeating the logo. It is the mark itself, enlarged until it runs off the frame and set in two quiet tones of the background, so only the seam and the hole survive. It reads as Doppla without becoming a second logo on the page.

| Version | Ground | File |
|---|---|---|
| Light, on Cream | `#F7F3EC` | `graphics/doppla-supergraphic-header-1600x840-light.svg` |
| Dark, on the dark base | `#17171A` | `graphics/doppla-supergraphic-header-1600x840-dark.svg` |

### Using it

- Set text on the left and let the graphic take the right. Keep text clear of the rear block’s edge, which starts just right of centre.
- Use the files in `graphics/` as they are. Each is cropped for its format; stretching or re-cropping one to fit another loses the hole, which is the point of the graphic.
- One per page, behind the content. It is a background, never a foreground element, and never a stand-in for the mark — the lockup still appears in its usual form.
- Keep the two tones. The supergraphic never takes the brand colours; those belong to the mark.
- Never mirror or rotate it. Like the mark, it reads left to right: rear block on the left, front block on the right, the hole between them.
- On a dark page, use the dark version. Its tones are set so the shape reads the same.

### Formats

- Header, 1600 × 840 px — Blog and article headers
- Slide, 1920 × 1080 px — Title and section slides
- Banner, 2400 × 480 px — Docs and page banners

The banner enlarges the mark further than the others. At the same scale a wide crop loses the rounded corners and reads as two stripes; the closer crop keeps the hole in view.

### Tones

- Light — ground, rear, front — #F7F3EC  ·  #EAE7E2  ·  #DEDCD9
- Dark — ground, rear, front — #17171A  ·  #232326  ·  #2F2F32

> In both modes the rear block sits half as far from the ground as the front block, so the layering matches the mark’s: front over rear.

## 13 Data visualisation

*Chart colours, by the job they do*

In a chart, every colour does one of four jobs: telling series apart, showing how much, showing which side of a baseline, or flagging a state. Each job has its own colours, and they are never borrowed from one job for another.

### Series

| Order | Series | Light mode | Dark mode |
|---|---|---|---|
| 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` |

- Use the six series colours in this order, every time, and never cycle them. A seventh series folds into Other rather than taking a new colour.
- Doppla Blue is always the first series. Doppla Red is never a chart colour: it means input, and in a chart it would read as a warning.
- Give every chart with two or more series a legend, and label lines directly where there is room, so identity never rests on colour alone.
- Keep text in Ink and Slate. Colour belongs to the line or bar it labels.

The sample chart, “Builds per week, by team”, uses example data. Its series take the colours in order: Platform in Doppla Blue, Runtime in Ochre, Tooling in Indigo, Web in Sage, Mobile in Plum, and Data in Teal.

### How much, and which way

| Mode | Less |  |  |  |  |  | More |
|---|---|---|---|---|---|---|---|
| Light mode | `#DBEFF9` | `#B1D4E6` | `#83B6D0` | `#4D93B3` | `#1D6E8F` | `#0A5470` | `#053E53` |
| Dark mode | `#16323E` | `#1A485C` | `#1F637F` | `#2B7EA1` | `#529CBF` | `#82BAD5` | `#B4D7E9` |

Sequential colours show how much: a single ramp of Doppla Blue, from less to more. In light mode more is darker; in dark mode the ramp flips, so more is brighter.

| Mode | Below |  |  | Baseline |  |  | Above |
|---|---|---|---|---|---|---|---|
| Light mode | `#70306C` | `#9C6496` | `#C8A4C3` | `#E7E4DF` | `#D7B98B` | `#C18E35` | `#976213` |
| Dark mode | `#A15E9C` | `#774272` | `#4F314C` | `#282623` | `#543E1A` | `#886116` | `#BA882E` |

Diverging colours show which side of a baseline: plum and ochre either side of a neutral grey. Neither side is red or blue, so the chart never reads as input against output.

### Status

| Status | Label | Meaning | Icon | Light mode | Dark mode |
|---|---|---|---|---|---|
| Good | Operational | Healthy, complete, or passing. | `check_circle` | `#2A904B` | `#45B164` |
| Warning | Degraded | Needs attention soon; nothing has failed yet. | `warning` | `#E6B731` | `#ECBD3A` |
| Serious | Partial outage | Partly failing; needs attention now. | `indeterminate_check_box` | `#ED9831` | `#F3A44A` |
| Critical | Major outage | Failed, destructive, or an error. | `dangerous` | `#A8002C` | `#F97F95` |

Status colours are reserved for state and never used for a series. Always pair one with its icon from section 14 and a word. Critical is also the error red for the interface — destructive actions and failed states — and is kept well apart from Doppla Red in both modes.

> Set charts on Paper in light mode and on the dark base in dark mode. Every value here is checked against those two surfaces for colour-blind separation and contrast; on any other background, check before use.

## 14 Iconography

*Material Symbols, set the same way everywhere*

Doppla does not draw its own icons. It uses Material Symbols Rounded, filled, set the same way everywhere. The mark carries the identity; an icon is there to label something, and a large, familiar set does that better than a small bespoke one.

Examples from the set: `description`, `settings`, `search`, `terminal`.

### Settings

- Family — Material Symbols Rounded
- Fill — 1
- Weight — 400, alongside Poppins Regular
- Grade — 0
- Optical size — The size the icon is shown at, from 20 to 48

Get the font, or single icons as SVG, from `https://fonts.google.com/icons`. Use these settings for every icon. Never mix in outlined icons, other weights, or the Sharp and Outlined styles. A few symbols, such as search and terminal, have no filled form and look the same either way; use them as they are.

### Using them

- Set icons in Ink on light surfaces and in the dark-mode text colour on dark. Use Slate for secondary and disabled icons.
- Blue marks an icon on the primary action or the current state, as it does for text. Red never colours an icon unless the icon means input.
- Show icons at 20, 24, 40, or 48 px, where their edges land on whole pixels.
- Pair an icon with a word wherever there is room. An icon on its own needs an accessible label.
- Every symbol in the set may be used, including those that show waves or bars. An icon names a function; the rule against Doppler imagery covers the brand’s own graphics, not icons.
- If the set lacks an icon, draw the new one to match it: on the 24-unit grid with 2 units of padding, filled, with rounded corners. Never draw an icon in a style of its own.

### Status icons

| Status | Icon | Light mode | Dark mode | Cut-out, light mode |
|---|---|---|---|---|
| Good | `check_circle` | `#2A904B` | `#45B164` | Shows the surface |
| Warning | `warning` | `#E6B731` | `#ECBD3A` | Ink |
| Serious | `indeterminate_check_box` | `#ED9831` | `#F3A44A` | Ink |
| Critical | `dangerous` | `#A8002C` | `#F97F95` | Shows the surface |

Each status has its own glyph, so the shape differs as well as the colour: `check_circle`, `warning`, `indeterminate_check_box`, and `dangerous`. Set them in the status colours from section 13, always with a word.

In light mode the cut-outs of warning and serious are filled with Ink. On those two bright colours the white of the page would all but disappear through the cut-out. In dark mode every cut-out shows the surface, and reads clearly. The token CSS carries this as an `-inlay` property for each of the two.

> Material Symbols Rounded is published by Google under the Apache License 2.0. The licence for the outlines drawn in this document is in `licences/material-symbols.txt`.

## 15 Files & tokens

*What ships in the package, and how to wire it up*

- `fonts/` — Poppins in the three weights the brand uses, with the SIL Open Font Licence. Install these, or serve them directly, rather than sourcing the font elsewhere.
- `logo/svg/` — Vector masters. The wordmark is drawn geometry rather than text, so nothing depends on a font being installed. Start here for print or any re-editing. Includes the “Works with” lockup for a partner’s own material (section 17).
- `logo/png/` — Raster exports of the mark (16–512 px), both lockups, and the “Works with” lockup, on transparency, in full colour, a flat colour variant, black, and white.
- `logo/favicon/` — favicon.ico at six resolutions, a vector favicon, 16 and 32 px PNGs, and a 180 px Apple touch icon.
- `platform/` — Ready-to-upload avatars, banners, and icons for GitHub, LinkedIn, X, Discord, Mastodon, Bluesky, Product Hunt, Docker Hub, and VS Code, plus an Open Graph card for link previews. Each is sized to its platform, and banners keep the lockup clear of that platform's overlaps. Upload them as they are; the mark's margin already allows for circular crops.
- `graphics/` — The supergraphic, cropped for a header, a slide, and a banner, in light and dark, as SVG masters and PNGs. Use each at its own format rather than re-cropping one to fit another.
- `motion/` — The reveal as a drop-in CSS file and a self-contained demo, with reduced-motion handling built in.
- `loader/` — The loading indicator as a drop-in CSS file and a self-contained demo, looping, with reduced-motion handling built in.
- `showcase/` — A single browsable page of the mark, palette, lockups, the reveal, and the loader together — built from the same functions as everything else here, so it never drifts out of sync with it.
- `tokens/` — The palette, chart colours, icon settings, type scale, spacing, radius, motion, loader, supergraphic, and full logo geometry as JSON and CSS custom properties.
- `web/` — The brand laid out for a website: favicons, a web manifest, and the link-preview image for the site’s root, the tags for a page’s head, Poppins as WOFF2, the stylesheets, and SVG logos for inlining, including lockups whose wordmark follows the page’s text colour.
- `licences/` — Google’s Apache License 2.0 for the Material Symbols Rounded outlines drawn in this document and the showcase. The icons themselves are not included; get them from Google, as section 14 describes.

### Using this document as a brief

The token files carry the same values as these pages, in a form that a build system or a generative tool can consume directly. When commissioning any Doppla-branded work — a deck, a landing page, a diagram, a social card — supply `tokens/brand-tokens.json` alongside sections 05 to 14 of this document. Between them they pin down the palette, the type, the spacing, the surface treatment, the misuse rules, the supergraphic, the chart colours, and the icons, which is everything needed to produce something on-brand without guessing. Where the work includes words, add section 18. Where a tool will read the brief, supply those sections from `Doppla_Brand_Guidelines.md`, which carries the same rules as plain text.

> Anything this document does not cover, resolve from section 02 and section 11 rather than improvising a new rule.

## 16 Name & mark

*Who may use the mark, how to reproduce it, and how to write the name*

Doppla is a trademark of Doppla Pty Ltd. These rules apply wherever the mark or the name appears, whoever is using it: Doppla itself, a partner, a customer, or the press.

### Who may use it

Press, partners, and customers may use the name and the mark to refer to Doppla: in an article about the company, in a list of integrations, or in a case study.

- **Not in your own branding.** Neither may appear in a logo, a product or company name, a domain name, or a social media handle.
- **Not as an endorsement.** Do not imply that Doppla made, sponsors, or approves what it did not.

For any other use, or any question about the name or the mark, write to brand@doppla.io.

### Reproducing the mark

- **Use the supplied files.** Take the mark, the lockups, and the wordmark from `logo/`, or the ready-made files in `platform/`, `graphics/`, and `web/`. Never take them from a screenshot or a web page, and never redraw them.
- **Do not alter them.** No recolouring, re-spacing, cropping, outlines, or effects. Scale proportionally, and change nothing else.
- **Follow these guidelines.** Clear space and minimum sizes (section 03), backgrounds (section 08), and misuse (section 10) apply to every reproduction, not only Doppla’s own.
- **Keep it on its own.** Do not merge the mark with another logo, name, or graphic.

### Writing the name

In running text the name is always written Doppla: a capital D, then lower case.

- Not DOPPLA, even where the surrounding text is set in capitals, and not doppla. The lower-case form belongs to the wordmark, which is artwork rather than a spelling.
- In Doppla’s own material, add ™ to the first prominent use of the name in each piece, and leave later mentions plain. Others need not add it. It never goes on the logo artwork.
- Write it in full. Do not abbreviate it, and do not hyphenate it across a line break.
- Use it as a name, not as a verb or a common noun. A name that turns into an ordinary word stops pointing at one company.
- In a sentence, type the name. Do not drop the wordmark into a line of text in its place.
- The legal name, Doppla Pty Ltd, is only for legal text: the copyright line, contracts, invoices.

## 17 Co-branding

*The mark beside a partner’s logo*

Two arrangements cover every case, and which one to use depends on whose material it is. Both keep to section 16: the mark is never merged with another logo, recoloured to match it, or shrunk below its minimum size.

### Joint material

For material that Doppla and a partner publish together, such as an announcement, a joint event, or a shared case study.

*Figure: the horizontal lockup beside a partner’s logo, with a hairline rule between them.*

- Use the horizontal lockup, with the partner’s logo beside it and a Hairline rule between them. On a dark ground, use the white lockup and the dark-mode hairline.
- The rule is as tall as the mark’s blocks. Each logo stands half the mark’s width clear of it.
- Set the two logos to the same visible height. Judge the partner’s logo by its main shape, not by its bounding box.
- The publisher’s logo comes first, on the left. On Doppla’s own channels, Doppla leads.

### A partner’s own material

For a partner’s website, documentation, or listings, where they say that they work with Doppla.

![The “Works with” lockup](logo/svg/doppla-works-with-color.svg)

- The partner’s logo leads. Doppla follows as the supplied `doppla-works-with` file: the horizontal lockup under the label “Works with” in Poppins Light, in Slate, aligned with the left edge of the mark. Use the file rather than setting the label.
- The mark’s blocks are 60% of the height of the partner’s logo, and the lockup never goes below its minimum of 100 px wide.
- Keep the label’s wording. A different phrase makes a different claim about the relationship.

> The grey disc is a stand-in for the partner’s logo.

## 18 Voice & tone

*How Doppla writes, and how that shifts with the context*

Doppla writes the way the mark looks: calm, exact, and unhurried. One voice covers everything from a button to a launch. What changes from one context to the next is how many words it uses, not how it sounds.

### Principles

- **Say the thing.** Lead with the fact or the action, and put the context after it. Most people read the first few words and decide from those.
- **Give the reason.** A rule, a change, or a request is easier to trust when it says why. One reason is enough.
- **Calm, not cold.** No exclamation marks, no hype, and no false urgency. Speak to the reader directly as “you”, and stay polite.
- **Fewer words in the interface.** On screen, space is tight and people scan, so labels and status lines can be fragments. Everywhere else, write in full sentences.

### By context

- **Interface.** Buttons start with a verb and name the result: “Connect source”, not “Submit”. Labels and status lines are as short as they can be while staying exact: “Connected”, “Retrying in 1 min”. A fragment takes no full stop.
- **Errors.** Say what happened, why if it is known, and what to do next. Never blame the reader. When the fault is Doppla’s, say so once and plainly.
- **Documentation.** Start with what something does, then how to use it. Use the present tense and one idea per sentence.
- **Marketing.** The same voice, applied to the facts. Make only claims that can be shown, and let a concrete detail do the work of an adjective.
- **Incident updates.** State what is affected, since when, what is being done, and when the next update will come. Do not soften the facts with words like “just” or “minor”.

The product never refers to itself as “I”. It names Doppla, or leaves the subject out. “We” is the company, for incident updates, announcements, and the like.

### Mechanics

- Australian spelling: colour, organise, licence as a noun, and program in every sense.
- Sentence case for headings, buttons, and labels. Only the first word and proper names take a capital.
- No contractions. Write “do not” and “cannot” in full.
- No exclamation marks.
- Use the serial comma: red, blue, and the hole.
- Numerals in the interface. In running text, one to nine as words and 10 upwards as numerals. A unit always takes a numeral and a non-breaking space: 30 s, 16 px.
- Dates are written in full, day first: 17 October 2026.
- Times use the 24-hour clock, with the time zone when readers may be in more than one: 09:40 UTC.
- The name follows section 16: always Doppla in running text.

### Instead of, write

- “Oops! Something went wrong.” — “Doppla could not reach the source. It will try again in 1 min.”
- “Submit” — “Connect source”
- “Seamless, lightning-fast integrations” — “Connects to a source in under a minute”
- “We are experiencing some minor issues.” — “Event ingestion has been delayed since 09:40 UTC. Next update at 10:30.”
- “You entered an invalid date.” — “Enter the date as day, month, year.”

---

© 2026 Doppla Pty Ltd. All rights reserved.  
Doppla is a trademark of Doppla Pty Ltd.