The mark is a D seen in depth: a bright purple face (#b348ff) over a dark purple side (#3a1956), kept as one SVG. Everything made of it lives in one workspace package, @datler/brand (packages/brand), so a change to it is made once.
In the app and on the site
DatlerMark (packages/brand/src/DatlerMark.tsx) draws it in the theme’s accent: the face in --brand, the depth in a dark shade of it (--brand mixed 33% with black), so it follows the accent the theme picks (Theming System). Either colour can be passed instead. Given a title it is an image with that name; without one it is decoration, hidden from assistive technology. It is the mark beside “Datler” in the app’s header and drawer (App Shell) and on its onboarding screens, and in datler.ca’s header and footer (Public Site).
As an icon
A launcher, a taskbar and a browser tab show a picture, which cannot follow a theme, so they use the mark’s own colours. The sources are in packages/brand/icons, and pnpm run icons makes every picture from them (packages/brand/scripts/icons.mjs):
- Windows, macOS, iOS and the Windows store logos, through Tauri’s icon command reading the manifest
app-icon.json, intoapps/desktop/src-tauri/icons, on transparency. - Android, into the committed Gradle project,
apps/desktop/src-tauri/gen/android. A phone shows an adaptive icon: the mark over a white plate, cut to the launcher’s shape. The launcher keeps only a circle 66 dp across out of a 108 dp layer, so the foreground isapp-icon-android.svg, the same drawing in a wider frame (840 units instead of 512) that keeps the whole D inside that circle. Tauri’s ownandroid_fg_scaledoes not apply to an SVG, which is why there is a second file. - The tab icons of the app and of datler.ca,
favicon.svgin each one’spublic, as the SVG itself. - A site’s fixed-size pictures: datler.ca’s 256-pixel
apple-touch-icon.png, and docs.datler.ca’s 200-pixelstatic/icon.png.
Tauri writes icon.icns with different bytes on every run, the drawing unchanged, so a run that changed nothing else leaves it out of the commit.
The plate is white because the mark’s depth is dark purple: on a dark plate the depth would disappear and the D would read flat.
A built app keeps its icon
An installed build carries the icon it was built with. The desktop dev build picks a change up on its next rebuild; the phone needs a new APK installed; an installed desktop release, a new release.