# Doppla for the web — Version 1.0.1 This folder is the brand laid out for a website. Copy it into the site as it is, and replace it as a whole when a new release of the brand package comes out. Do not edit the files in it: put the site's own styles in its own stylesheets, on top of these. ## root/ These files belong at the root of the site, because browsers look for some of them there and `head.html` refers to them there. - `favicon.ico` — 16x16 32x32 48x48, for browser tabs - `favicon.svg` — the vector favicon, for browsers that accept one - `apple-touch-icon.png` — 180 px, for iOS home screens - `icon-*.png` and `site.webmanifest` — the icons and colours a browser uses when the site is added to a home screen or pinned. The `icon-maskable-*.png` versions set the mark on Cream, for launchers that crop icons to their own shape. - `og-card.png` — the 1200 × 630 link-preview image ## Making a web app installable The manifest sets `display` to `browser`, so the site opens in the browser as normal and is never offered as an app. Everything else an installable app needs is already in place: the name, the start address, the scope, the icons in both kinds, and the colours for the splash screen and the window. To make a web app installable, change `display` to `standalone`, and change `start_url`, `scope`, and `id` if the app does not live at the root of its site. ## head.html The tags that wire up the files in `root/`. Paste them into every page's ``. The `og:image` address must be absolute, so put the site's own address in front of it. ## fonts/ Poppins in the three weights the brand uses, as WOFF2, with `fonts.css` to load them. `OFL.txt` is the font licence, and must stay with the font files. To avoid a flash of the fallback font, preload the Regular weight from the page's ``. ## css/ - `doppla-tokens.css` — the palette, type, spacing, radius, and motion as CSS custom properties. Import it after `fonts/fonts.css`. Dark mode applies under `[data-theme='dark']` or the `.doppla-dark` class. - `doppla-reveal.css` — the logo reveal. Use it once per visit at most, never on a loop or on every route change. - `doppla-loader.css` — the loading indicator. The markup for the reveal and the loader is documented at the top of each file. The full working markup is in the demos in the package's `motion/` and `loader/` folders: copy it from there rather than retyping it. ## logo/ SVGs for inlining in HTML or for use as images. The wordmark is drawn geometry, so none of them depend on a font. - `doppla-mark-*.svg` — the mark on its own - `doppla-lockup-horizontal-*.svg` — the primary lockup - `doppla-lockup-stacked-*.svg` — for square and near-square placements - `doppla-wordmark-*.svg` — the wordmark alone Each comes in four versions: - `-color` — the full-colour mark, with the wordmark in Ink, for light surfaces - `-black` and `-white` — the monochrome versions, for one-colour use - `-currentcolor` — the monochrome version in the colour of the surrounding text, so one inlined file follows the page's light and dark modes The two lockups also come as `-themed`: the full-colour mark with the wordmark in the colour of the surrounding text. This is the one to inline in a site that has a dark mode. The full-colour mark works on any neutral surface, light or dark, so only the wordmark needs to change. `currentcolor` and `themed` only follow the page when the SVG is inlined. Used through ``, they draw in black. Every file gives its mask its own id, so different files can be inlined on the same page. To inline the same file twice on one page, change the id in the second copy, in both the `` and every place that refers to it. The guidelines set the clear space and minimum sizes (section 03) and which version to use on which background (section 08). On a surface that is one of the brand colours, use `-white`. ## tokens.json The same values as `doppla-tokens.css`, with their roles and the full geometry of the mark, for use from JavaScript. --- © 2026 Doppla Pty Ltd. All rights reserved. Doppla is a trademark of Doppla Pty Ltd.