# Doppla brand package — Version 1.0.1 18 October 2026 ## Start here `Doppla_Brand_Guidelines.pdf` The mark, colour, typography, motion, and the rules that keep it all consistent. Read sections 02, 03, and 16 before using the logo anywhere. `Doppla_Brand_Guidelines.md` The same guidelines as plain text, with the figures given as tables and links to the files here. Use it where text is easier to work with than a PDF: searching, quoting, or reading by a tool. ## Logo files `logo/svg/` Vector masters. The wordmark is drawn geometry rather than text, so these open correctly whether or not any font is installed. Use these for print, large format, and anything that needs re-editing. - `doppla-mark-*.svg` — the mark on its own - `doppla-lockup-horizontal-*.svg` — primary lockup - `doppla-lockup-stacked-*.svg` — square and near-square placements - `doppla-wordmark-*.svg` — wordmark alone - `doppla-works-with-*.svg` — the horizontal lockup under "Works with", for a partner's own material (section 17 of the guidelines) Each comes in `-color`, `-black` (for light surfaces), and `-white` (for dark surfaces and for either brand colour). `logo/png/` Raster exports on transparency. The mark at 512, 256, 128, 64, 32, and 16 px, plus both lockups, the wordmark, and the "Works with" lockup, each in colour, black, and white. `logo/favicon/` - `favicon.ico` — 16 / 32 / 48 / 64 / 128 / 256 px in one file - `favicon.svg` — vector favicon for browsers that accept one - `favicon-16.png` - `favicon-32.png` - `apple-touch-icon-180.png` ## Platform assets `platform/` Ready-to-upload files for specific external platforms — sized and, where a platform requires it, cropped for that platform's own upload requirements, rather than a general-purpose export. - `github/avatar-512.png` — GitHub organisation profile picture, 512×512. - `opengraph/card-1200x630.png` — the link-preview image for a shared Doppla link (Facebook, X, LinkedIn, Slack, Discord, WhatsApp, iMessage). Wire it up with `og:image`, `og:image:width` / `og:image:height` set to 1200/630, and `twitter:card=summary_large_image`. - `linkedin/logo-300.png` — LinkedIn company page logo, 300×300. - `linkedin/banner-1128x191.png` — LinkedIn company page cover banner, 1128×191. Clear of the bottom-left logo overlap and centred within LinkedIn's recommended middle 50% of the width. - `twitter/avatar-400.png` — X (Twitter) profile photo, 400×400. - `twitter/banner-1500x500.png` — X header/banner photo, 1500×500. Clear of the profile-photo overlap (bottom-left), the mobile follow-button overlap (bottom-right), and the mobile crop line (top/bottom). - `discord/icon-512.png` — Discord server icon, 512×512. - `discord/banner-1920x1080.png` — Discord server banner (static needs Boost Level 2, animated needs Level 3). Centred within the band Discord reliably shows regardless of window size. - `mastodon/avatar-400.png` — Mastodon profile picture, 400×400. - `mastodon/banner-1500x500.png` — Mastodon profile header, 1500×500. Clear of the avatar's overlap on mobile. - `bluesky/avatar-1000.png` — Bluesky profile picture, uploaded at 1000×1000 for a sharper result under their circular crop. - `bluesky/banner-3000x1000.png` — Bluesky profile header, uploaded at 3000×1000 (Bluesky has no official spec; this is double the 1500×500 community-standard minimum, for a sharp result on high-DPI screens). - `producthunt/thumbnail-240.png` — Product Hunt launch thumbnail, 240×240. - `dockerhub/logo-512.png` — Docker Hub repository logo, 512×512 (Verified Publisher Program only). - `vscode/icon-256.png` — VS Code extension icon; reference it from `package.json`'s `icon` field. All of the above are the colour mark, upload as-is — each platform's own crop (circular, for everything except Product Hunt) is already accounted for by the mark's built-in margin. ## Supergraphic `graphics/` The mark itself, enlarged past the frame and set in two quiet tones of the background, so only the seam and the hole survive. Use it where a page needs more than a blank ground — headers, title slides, banners — instead of repeating the logo. Set text on the left; the graphic takes the right. - `doppla-supergraphic-header-1600x840-*` — Blog and article headers - `doppla-supergraphic-slide-1920x1080-*` — Title and section slides - `doppla-supergraphic-banner-2400x480-*` — Docs and page banners Each comes in `-light` (on Cream) and `-dark` (on the dark-mode base), as an `.svg` master and a `.png`. Use each at its own format; re-cropping one to fit another loses the hole. Section 12 of the guidelines has the rules and the tones. ## Fonts `fonts/` Poppins, the brand typeface, in the three weights the brand uses, together with the SIL Open Font License that must travel with them. - `Poppins-Light.ttf` — 300, display and large headings - `Poppins-Regular.ttf` — 400, body copy - `Poppins-Medium.ttf` — 500, interface labels, table headers - `OFL.txt` — the licence - `poppins.css` — `@font-face` rules for self-hosting Poppins is for text. It is not the wordmark — see below. ## Icons Icons are Material Symbols Rounded, filled, at weight 400, from https://fonts.google.com/icons. They are not included here: use the font or the SVGs from Google, which stay current as new icons are added. Section 14 of the guidelines has the settings and the status icons. `licences/material-symbols.txt` is Google's Apache License 2.0 for the icon outlines drawn in the guidelines and the showcase. ## Motion `motion/` - `doppla-reveal.css` — drop-in stylesheet for the logo reveal - `doppla-reveal-demo.html` — self-contained demo, light and dark Reduced-motion handling is built in. Use the reveal once per session at most — never on a loop or on every route change. ## Loading `loader/` - `doppla-loader.css` — drop-in stylesheet for the loading indicator - `doppla-loader-demo.html` — self-contained demo, light and dark Loops for as long as the wait lasts, and freezes on its resting frame when reduced motion is requested. ## Showcase `showcase/` - `doppla-showcase.html` — the mark, palette, lockups, reveal, and loader on one browsable page, light and dark ## Tokens `tokens/` - `brand-tokens.json` — palette, chart colours, icon settings, type, spacing, radius, motion, the supergraphic's tones and crops, co-branding proportions, and the full geometry of the mark and wordmark - `doppla-tokens.css` — the same values as CSS custom properties ## Websites `web/` The brand laid out for a website, to copy into a site as it is: the favicons, web manifest, and link-preview image for the site's root, the tags that wire them up, Poppins as WOFF2, the stylesheets, and SVG logos ready to inline. The lockups also come as `-themed`, with the wordmark in the colour of the surrounding text, so one inlined file works in light and dark mode. `web/README.md` says where each file goes. ## Wordmark and typeface These are two separate things. The wordmark is drawn artwork — circles and straight lines, with every bowl a true circle and every stem meeting it tangentially. It is not set in a typeface and must never be re-typed in one. Use the files in `logo/`. Poppins is the brand typeface for everything else: headings, interface, body copy, captions. By the Indian Type Foundry, under the SIL Open Font License 1.1, which permits use, embedding, and redistribution, and requires that `OFL.txt` travels with the font files. Bold is not used. ## Using the name and mark Press, partners, and customers may use the name and the mark to refer to Doppla, but not in their own branding or in a way that suggests endorsement. Section 16 of the guidelines sets this out, with the conditions for reproducing the mark: use the supplied files, alter nothing, and follow the guidelines. It also covers writing the name, which in running text is always Doppla, with a capital D. Section 17 covers placing the mark beside a partner's logo: a hairline rule between the two in joint material, and the lockup under "Works with" on a partner's own material. For a use the guidelines do not cover, write to brand@doppla.io. ## Commissioning branded work When briefing anyone — or anything — to produce Doppla-branded material, hand over `tokens/brand-tokens.json` together with sections 05 to 14 of the guidelines. Between them they fix the palette, the typography, the spacing, the surface treatment, the misuse rules, the supergraphic, the chart colours, and the icons, which is enough to produce something on-brand without guesswork. Where the work includes words, add section 18, voice and tone. For a tool, give those sections from `Doppla_Brand_Guidelines.md` rather than the PDF. It holds the same rules as plain text, which a tool reads more reliably. For questions the guidelines do not answer, work from section 02 (how the mark is built) and section 11 (digital direction) rather than inventing a new rule. --- © 2026 Doppla Pty Ltd. All rights reserved. Doppla is a trademark of Doppla Pty Ltd.