# The deebeo logo the deebeo mark The mark is the lowercase **d** of the wordmark — Outfit Bold's d, the same letter — whose bowl is a loop of three colours: **design**, **build**, **operate**. That is what "deebeo" has always stood for (d·b·o, spelled out the way it sounds), so the letter carries the name and the loop carries the meaning. The stem is the backbone the loop leaves from and returns to, and every colour boundary is a chevron pointing along the flow: from the stem over the top, down the left, along the bottom and back into the stem. Design, build, operate, repeat. Everything in this folder is generated from one description in [`build.mjs`](build.mjs): the glyph outline plus a handful of numbers. There is no master design file to keep in sync. This file is the logo's construction spec and design history. The **brand and style guide** — name, mark usage, colour, typography, layout, components and voice — is [`index.html`](index.html), served at . ## Files | File | Use it for | |---|---| | `deebeo-logo.svg` / `-dark` / `-mono` | The logo: the word "deebeo" with its first d as the mark. There is no separate symbol-plus-wordmark lockup; the mark *is* the wordmark's d. The site's hero uses this. | | `deebeo-mark.svg` / `deebeo-mark-dark.svg` | The mark alone, on light / dark backgrounds, centred optically in its square (the viewBox is offset so the bowl, not the bounding box, sits on the centre). | | `deebeo-mark-mono.svg` | One-colour mark; fills with `currentColor`, so it takes the colour of its context when inlined. The chevrons only exist between colours, so this is simply the d. | | `deebeo-tile.svg`, `deebeo-tile-512.png` | The mark on a solid Mocha square, for avatars (GitHub org, social) and the touch icon. Platforms round the corners themselves. | | `favicon-light.svg` | The favicon crop with fixed light-mode colours; source for `favicon.ico`. | | `glyph-d.path`, `wordmark.path` | Outline data for the d and for "deebeo" (see *Construction* and *Wordmark* below). | | `fonts/deebeo-sans-bold.ttf` / `.woff2` | deebeo Sans: Outfit Bold with the mark built in as a lowercase d, so the name can be typed (see *The font* below). TTF to install, WOFF2 for the web. `fonts/OFL.txt` is its licence. | | `../favicon.svg` | Theme-aware favicon; its colours follow the OS light/dark setting. | | `../favicon.ico`, `../apple-touch-icon.png` | Raster fallbacks for browsers without SVG favicon support. | ### Using it - The loop's three colours are the same everywhere; only the ink (stem and wordmark) reverses, the way type does. So on a light background use the Latte files; on a dark one the `-dark` files, which differ only in the ink. Don't put the light mark on a dark ground: its stem is Catppuccin's light-mode text colour and disappears. - When only one colour is available (print, engraving, a monochrome UI), use the `-mono` files. They are the same silhouette, so the mark stays recognisable. - The chevrons read clearly from about 24 px of d height up. Below that the mark collapses to a plain d on its own, which is fine: the favicon and tiny sizes only need the letter. - Use the logo wherever the name appears and the mark alone only in square slots (favicon, avatar, app icon). Never put the mark next to a typed "deebeo": two d's in a row read as a stutter. ## Construction The mark lives in a 100 × 100 box. - **The letter:** Outfit Bold's lowercase d, taken from the font as an outline (`glyph-d.path`, 100 units per em, baseline at y = 0, ascender at y = −72.6, ink from x = 2.4 to 54.1). In the box it is scaled so the ascender is 80 tall and set with its baseline at y = 90, centred, so the ink spans x 21.5..78.5 and y 10..90. Its stem is 17 wide with flat ends; its bowl is 47 wide with a 24-wide counter centred at (50.6, 63.2). - **Pieces:** the loop is cut from the glyph with three wedges around the counter's centre: design at the top-left (215°–285°), build on the left (145°–215°), operate at the bottom-left (75°–145°). The stem keeps everything else. Angles are SVG angles, increasing clockwise, 0° at three o'clock. The bowl's outer edge disappears under the stem at about 65° and 295°, and the two stem-side cuts sit 10° beyond that. - **Flow:** stem → top → left → bottom → stem, i.e. decreasing angle. - **Chevrons:** at each of the four cuts (285°, 215°, 145°, 75°) the wedge boundary is a V: its apex sits 10° ahead of the cut on the ring's centre radius (20.3), its two corners 10° behind the cut on the inner and outer radii (12.3 and 28.2). So each piece ends in a tip that sits in the next piece's notch. - **Drawing order:** the whole glyph in ink, then the three wedge-clipped colour pieces, then the stem contour in ink on top so the pieces tuck under it the way the bowl does. - **Optical centring:** wherever the mark sits alone in a square (the mark files, the tile, the favicon) the glyph is nudged up 4 and left 2 box units rather than centred by its bounding box. The box is 57 × 80 with the bowl in its lower half and only the ascender above, so a box-centred d visibly sits low and a little right; the nudge puts the bowl on the centre. In the mark files it is done by offsetting the viewBox (`2 4 100 100`), so the glyph's own coordinates stay put. - **The logo:** the wordmark's outline with its first glyph's three contours dropped and the mark drawn in their place, mapped from the mark box back to glyph units (scale 72.6/80, translate −18.87, −90). The d in the logo is therefore the same object as the mark, at the wordmark's size. ### Colours Catppuccin throughout. The ink reverses with the theme like any text; the three stage colours are fixed, because a mark keeps its colours wherever it goes. Latte's mauve, peach and teal are the fixed set: they are the only Catppuccin values that hold up on both grounds (on the Mocha base they measure 3.0, 5.5 and 4.4 to 1, all above the 3:1 bar for graphics; the Mocha pastels fail on light). | Role | On light | On dark | |---|---|---| | ink (stem, wordmark) | Latte text `#4c4f69` | Mocha text `#cdd6f4` | | design | mauve `#8839ef` | same | | build | peach `#fe640b` | same | | operate | teal `#179299` | same | | tile background | — | Mocha base `#1e1e2e` | ### Wordmark "deebeo" set in [Outfit](https://fonts.google.com/specimen/Outfit) Bold with −0.02 em tracking: a geometric face whose d, b, e and o share one round bowl. The text is stored as outlines in `wordmark.path` (100 units per em, baseline at y = 0, the d rising to y = −72.6, ink from x = 2.4 to 328.8) so the SVGs do not depend on the font being installed, and the mark's d is the same glyph in `glyph-d.path`. Outfit is SIL Open Font License, which permits this. To regenerate the outlines, load `Outfit-Bold.ttf` with [opentype.js](https://opentype.js.org/) and call `font.getPath('deebeo', 0, 0, 100, { kerning: true, letterSpacing: -0.02 }).toPathData(2)` for the wordmark and `font.getPath('d', 0, 0, 100).toPathData(2)` for the mark. ### The font **deebeo Sans** (`fonts/deebeo-sans-bold.ttf`, `.woff2`) is Outfit Bold with the mark added as a glyph, built by [`build-font.py`](build-font.py): - The mark is a COLR/CPAL (version 0) colour glyph, `d.logo`: the plain d painted in the text colour, then the design, build and operate pieces cut from it by the same chevron-edged wedges `build.mjs` uses (the same numbers, ten times larger, in font units), then the stem back on top in the text colour. Because the ink layers use the "foreground" palette entry, the d's stem and the rest of the text share whatever colour the text is set in, on light or dark; the single palette holds the three fixed stage colours. - A contextual rule swaps `d` for `d.logo` only when "eebeo" follows it, so typing the name sets the mark and every other d stays plain. It is registered as both `calt` and `rclt`: browsers switch `calt` off together with ligatures whenever `letter-spacing` is set, and the wordmark is always tracked, but `rclt` is a required feature and stays on. Stylistic set 2 (`ss02`, named "deebeo mark for every d") swaps every d. - Software without colour-font support draws `d.logo` as Outfit's plain d, so nothing breaks; it just loses the colour. - Outfit's own features (ligatures, fractions, tabular figures, its `ss01` alternates and so on) are untouched. Outfit's OFL reserves no font name, so the derivative may be renamed; `fonts/OFL.txt` ships with it as the licence requires. To rebuild it from Outfit's variable font: ```bash python3 -m venv .venv && .venv/bin/pip install fonttools skia-pathops brotli curl -L -o /tmp/Outfit-var.ttf "https://github.com/google/fonts/raw/main/ofl/outfit/Outfit%5Bwght%5D.ttf" .venv/bin/fonttools varLib.instancer --update-name-table /tmp/Outfit-var.ttf wght=700 -o /tmp/Outfit-Bold.ttf .venv/bin/python brand/build-font.py /tmp/Outfit-Bold.ttf ``` ### Regenerating ```bash node brand/build.mjs rsvg-convert -w 180 -h 180 brand/deebeo-tile.svg -o apple-touch-icon.png rsvg-convert -w 512 -h 512 brand/deebeo-tile.svg -o brand/deebeo-tile-512.png for s in 16 32 48; do rsvg-convert -w $s -h $s brand/favicon-light.svg -o /tmp/fav-$s.png; done magick /tmp/fav-16.png /tmp/fav-32.png /tmp/fav-48.png favicon.ico ``` ## How we got here This is the short history of the design, kept so the reasoning survives. ### The brief A vector logo for the deebeo GitHub organisation and deebeo.com with a single visual identifier, the way Apple has the apple and Google has the G. The site already used the Catppuccin palette, so the logo should too. ### Round 0 — a wrong turn The first four directions were built on a bee: the name was read as "dee-bee-oh", and a bee emoji had already crept into the site's favicon. That was a misreading. The name comes from **design, build, operate**, and the bee association was unwanted. Everything from here on is built on d·b·o instead. ### Round 1 — four directions on d·b·o - **A · Tri-arc d:** a lowercase d whose bowl is three arcs, one per stage. - **B · dbo ligature:** d, b and o as three rings sharing one stem. - **C · Phases:** one circle in three states, outline → half → solid. - **D · Typographic:** no symbol; d, b and o lifted out of "deebeo" in an accent colour. B, C and D were set aside. A had the right idea (a single letter that carries the meaning) but the execution didn't look right: round-capped arcs with wide gaps read as a loading spinner, and an accent bowl on an ink stem split the letter into two objects. ### Round 2 — five executions of A Same letter geometry, different ways of expressing the loop: **A1** three tints of one colour fading around the bowl; **A2** three colours for the three stages on an ink stem; **A3** one colour with flat-cut segments; **A4** the bowl as a repeat arrow; **A5** the bowl as a spiral. A1 and A2 were the keepers. ### Round 3 — the join A1 and A2 both suffered from the same thing once the stem and bowl were different colours: the d was literally a bar laid over a ring, and the ring's curve ran visibly into the bar's straight edge ("a straight line with a circle bumping into it"). The fix was structural, not cosmetic: give the stem its own piece that includes the right third of the bowl, so every colour change is a cut straight across the stroke, perpendicular to it, and the stem flares into the loop on both sides. A2 with this join was chosen. ### Round 4 — chevrons The last idea was to make each colour boundary a chevron pointing along the flow, so the mark shows its direction: from the stem over the top, round the left, along the bottom and back into the stem. Two versions were tried, one with the pieces touching and one with a hairline of background along each joint. The touching version won: the arrows are there when you look, and the mark still reads as a letter first. ### Round 5 — the same d Until here the mark was a constructed d: a true circle ring and a bar, lighter than the wordmark, with rounded stem ends. Set beside the wordmark's d in the horizontal lockup the two read as different letters. Measured at the same height, Outfit Bold's d has a stem about 17 units wide against the construction's 12, a narrower bowl with a much smaller counter, and flat terminals. Nothing in the colour construction depended on the bowl being a circle, so the mark was rebuilt on Outfit's actual outline: the same wedges and chevrons, now clipping the real glyph. The cost is that the one-colour version is now simply Outfit's d, so in mono the distinctiveness lives in the loop alone; the gain is that the mark and the wordmark are the same letter without qualification. ### Round 6 — one set of colours The dark-mode files had been following the site's theme tokens, swapping the loop's Latte colours for Mocha's pastels. That is right for buttons and links, where saturated colour vibrates on a dark surface, but it gave the mark two purples, two oranges and two teals, and colour is a large part of what makes a mark recognisable. The fix follows what most brands do: the loop's three colours are now fixed on every background, and only the ink — stem and wordmark — reverses with the text colour, the way type does. A single fixed stem colour was considered and rejected: a mid-tone that clears 3:1 on both near-white and near-black reads as greyed-out on both, and a fixed colour stem would make the mark's d stop matching the wordmark's. ### Round 7 — one logo Two lockups had survived from before the mark became the wordmark's d: a horizontal "d deebeo", which read as a stutter, and a stacked mark-over-name, which now showed the logo d twice. Both went. The logo is the name with its first d in colour, which is also exactly what deebeo Sans produces when the name is typed; the mark alone is kept for square slots. At the same time the standalone mark files got the optical centring the tile and favicon already had. The exploration canvas with rounds 1–4 is at . ### What carried through - One letter, one meaning: the d is the name, the loop is what the name stands for. - The mark is the wordmark's letter, not a drawing of one. Colour pieces are cut across the stroke rather than laid over each other, and the stem sits on top so they tuck under it the way the bowl does. - Keep a one-colour fallback that is the same silhouette. - Generate, don't draw: the mark is an outline plus a few numbers, so it can be rebuilt, retuned and re-exported without a design tool.