Bloom — brand assets

Logo, wordmark, and color guidelines for Bloom (/bloom, @bloom_directory).

All logo source lives in logo/. Assets are generated by logo/build.mjs, which writes each variant as a vector .svg and a 1024×1024 .png, plus dedicated favicon assets for the mono marks. To explore the design interactively — tune every knob, preview all variants live, and export a matching build.mjs — open logo/preview.html in a browser (no build step, fully self-contained).

---

Colors

Name	Hex	RGB	Use
Cream	#f0ebe0	240, 235, 224	Primary background; banner and cream icon
Burgundy	#9d2d3f	157, 45, 63	Primary mark color — the filled petals
Burgundy deep	#7a2230	122, 34, 48	Secondary — the outlined petals (the two-tone depth)
Burgundy mid	#8a2a3a	138, 42, 58	Wordmark slash accent; single-color (mono) mark
Ink	#1a1a1a	26, 26, 26	Mono mark on light surfaces
Black	#000000	0, 0, 0	Black icon background
White	#ffffff	255, 255, 255	White icon background

The mark is two-tone by default: Burgundy filled petals alternating with Burgundy deep outlined petals. Burgundy mid is the tone of the wordmark slash and is used for the single-color version of the mark.

---

Wordmark

The /bloom wordmark is set in Instrument Serif — https://fonts.google.com/specimen/Instrument+Serif.

• Style: lowercase, italic, as shown on the banner.
• The leading slash / is set in Burgundy mid (#8a2a3a); the word bloom is set in Ink (#1a1a1a) on cream, or reversed to Cream on dark.
• Pair the wordmark with the mark only when there's room; at small sizes use the mark alone.

Load the webfont:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">

font-family: "Instrument Serif", serif;
font-style: italic;

---

The mark

A six-petal bloom arranged as a braided pinwheel: filled and outlined petals alternate and weave consistently over/under all the way around, with an outlined petal at the top. The mark is centered with a uniform edge margin (~15–16%, fills ~69% of the frame vertically). It's rotated 17.5° clockwise.

Negative overlap (knockout). A single-color (mono) mark would read as a solid blob where an outlined petal crosses a filled one. To keep the weave legible, the mono marks — and bloom-icon-black — knock a hole through the petal beneath (revealing the background / surface), bounded by the outline. Two-tone marks have enough contrast already, so they leave this off.

---

Logo variants

Primary (transparent background)

File	Mark	Use
bloom-primary	Two-tone burgundy	Default mark. Place on cream, white, or light surfaces.

Icons (full square background)

Edge-to-edge square fill — use as app icons, avatars, favicons, or on busy surfaces.

File	Background	Mark	Use
bloom-icon-cream	Cream	Two-tone burgundy	Default icon, brand surfaces
bloom-icon-white	White	Two-tone burgundy	Icon on white UI
bloom-icon-black	Black	Cream	Icon on dark — burgundy lacks contrast on black, so the mark goes light

Mono (transparent background, single color)

For one-color contexts (print, embroidery, watermarks) and overlays.

File	Mark color	Use
bloom-mono-black	Ink #1a1a1a	One-color on light backgrounds
bloom-mono-white	White	On dark backgrounds / photos
bloom-mono-cream	Cream #f0ebe0	On dark backgrounds / photos (softer than white)
bloom-mono-burgundy	Burgundy mid #8a2a3a	Single-color brand mark on light backgrounds

The icons carry a small center dot matching the background where the petals converge. The transparent and mono marks omit it and let the petals meet, since there's no background color to fill it with.

Favicons (mono marks)

Each mono mark also ships a dedicated favicon, drawn at a larger scale so the bloom fills the tab icon (less margin than the masters), as a scalable SVG plus 16/32/48px PNG fallbacks:

Files	From
bloom-mono-black-favicon .svg + -16/-32/-48.png	mono black
bloom-mono-white-favicon .svg + -16/-32/-48.png	mono white
bloom-mono-cream-favicon .svg + -16/-32/-48.png	mono cream
bloom-mono-burgundy-favicon .svg + -16/-32/-48.png	mono burgundy

Use the SVG as the primary favicon (crisp at any size) with the PNGs as fallbacks. Pick the mono color that contrasts with the tab/surface it sits on.

---

Tooling

logo/preview.html

Live tool: https://bloom-directory.github.io/branding/preview.html — published from main via GitHub Pages (.github/workflows/pages.yml) on every change to the file. You can also just open the file locally.

A self-contained, no-build HTML tool — open it in a browser. It lets you:

• tune every knob live: mark scale, rotation, stroke width, stroke-petal length and an area-preserving "tip pull", center-dot radius, and all colors;
• toggle the negative-overlap knockout (none / all / mono only);
• preview the main variant (cream / white / black / transparent), a grid of all variants, and a configurable favicon strip — click a favicon to set it as the page's own tab icon, with its own (larger) favicon scale;
• export a ready-to-run build.mjs with your values, or copy/paste a compact settings string to save and reload a configuration without the whole file.

logo/build.mjs

The asset builder. The design is parameterized at the top of the file (SCALE, ROTATE, SW, STROKE_LEN, STROKE_TIP, CENTER_R, KNOCKOUT, FAV_SCALE, and the colors). Run:

node logo/build.mjs

It writes every .svg, renders the matching 1024px .png for each, and emits the mono favicon sets — all via rsvg-convert. It fails closed: if rsvg-convert is missing it exits non-zero rather than emitting SVGs without PNGs (brew install librsvg).

SCALE controls the edge margin across every master asset; FAV_SCALE independently sizes the favicons; KNOCKOUT selects the negative-overlap mode.