Extend brand-raster.mjs with a brand/social target #102

New issue

Closed

opened 2026-09-23 10:46:10 +01:00 by cruelacid · 1 comment

cruelacid commented

2026-09-23 10:46:10 +01:00

Owner

Why

The social profiles need avatars and banners. Exporting them by hand means they
drift from the design system the first time a token moves, and nothing notices.

What to do

Extend scripts/brand-raster.mjs with a brand/social/ target. The script
already does exactly this job for two other consumers — it renders SVG through
resvg to a named output directory and has a --check mode that re-renders to a
temp dir, diffs, and exits 1 on drift. A third consumer fits its existing shape,
and the drift check means the social art cannot silently diverge.

Sizes:

Asset	Size
Avatar	400×400 and 800×800
X / Mastodon banner	1500×500
Bluesky banner	3000×1000
YouTube channel art	2560×1440

site/static/og-card.png is already 1200×630 and is the reference for
composition.

Constraints

Colours from site/static/tokens.css — --withy #B08A2E, --withy-lift
#D9B65A, --ink #14201B, --vellum #EEF0EA. The file is generated
from the design system; do not hand-edit it.
The wordmark is artwork, not type. The ct bind lives in the contour, so
it must not be re-set in live Literata.
The Chiasm mark's middle stroke is a knockout in the page colour. Painted
on anything else it shows as a halo — which constrains what background an
avatar can use. Check every export against both light and dark surrounds.
No Obsidian logo, ever.

Verification

node scripts/brand-raster.mjs --check exits 0 on a clean tree, and exits 1
when a token is deliberately changed — check both directions, or the drift
check is a check that cannot fail.

## Why The social profiles need avatars and banners. Exporting them by hand means they drift from the design system the first time a token moves, and nothing notices. ## What to do Extend `scripts/brand-raster.mjs` with a **`brand/social/`** target. The script already does exactly this job for two other consumers — it renders SVG through resvg to a named output directory and has a `--check` mode that re-renders to a temp dir, diffs, and exits 1 on drift. A third consumer fits its existing shape, and the drift check means the social art cannot silently diverge. Sizes: | Asset | Size | |---|---| | Avatar | 400×400 and 800×800 | | X / Mastodon banner | 1500×500 | | Bluesky banner | 3000×1000 | | YouTube channel art | 2560×1440 | `site/static/og-card.png` is already 1200×630 and is the reference for composition. ## Constraints - Colours from `site/static/tokens.css` — `--withy` `#B08A2E`, `--withy-lift` `#D9B65A`, `--ink` `#14201B`, `--vellum` `#EEF0EA`. The file is **generated from the design system; do not hand-edit it.** - **The wordmark is artwork, not type.** The `ct` bind lives in the contour, so it must not be re-set in live Literata. - **The Chiasm mark's middle stroke is a knockout in the page colour.** Painted on anything else it shows as a halo — which constrains what background an avatar can use. Check every export against both light and dark surrounds. - No Obsidian logo, ever. ## Verification `node scripts/brand-raster.mjs --check` exits 0 on a clean tree, and **exits 1 when a token is deliberately changed** — check both directions, or the drift check is a check that cannot fail.

cruelacid added this to the Backlog - unscheduled milestone

2026-09-23 10:46:10 +01:00

cruelacid added the

marketing

channel:social

gate:pre-ga

labels

2026-09-23 10:46:10 +01:00

cruelacid referenced this issue

2026-09-23 10:46:56 +01:00

Go-to-market programme #110

cruelacid added this to the Marketing project