The open-source marketing CMS
Menu

A brand of our own, shipped as a brand kit

Spillway now has a logo, colors and type of its own. The whole brand lives in one brand kit file in this site's repository, and every deploy imports and publishes it.

For its first few months this website looked like what it was: a CMS showing its default theme. That was honest, but it undersold the project. Open source deserves the same care as any enterprise product, and the site is often the first thing a team evaluating Spillway sees.

So Spillway has a brand. Here is what it is, and how we ship it, because the how is the more interesting part.

The mark

The logo is an S drawn as a spillway channel: three level runs stepping down, joined by rounded turns, in one stroke with a cyan to blue gradient on an ink tile. It reads as the letter and as water moving through a spillway: content arriving at one point and released in a controlled way. The wordmark is Manrope, outlined to paths so it renders the same everywhere.

Color and type

Primary blue #2B59FF, ink #101A33 for dark surfaces and a cyan accent #18C6E8, with a cool neutral for secondary text. Headings are set in Manrope and body text in Inter. Both are open source and served from this site as WOFF2 files, so pages make no requests to font services.

Shipped like code, managed like content

The brand is a Spillway brand kit: one JSON file with the colors, type scale, spacing, block styles, logos and font files inside it. It lives in this website's repository next to the deploy configuration. When the kit changes, the deploy runs spillway brand import on the server, which writes every value to the brand draft and files the logos and fonts in Media, then publishes the draft. A check in the repository imports the kit into a fresh instance and verifies the rendered pages before anything deploys.

Every Spillway site can work the same way. Export a brand from one site, review the file like any other change and import it on the next. The admin shows each value as a row before anything is applied.

What dogfooding found

Putting a real brand on a real site surfaced real problems, which is the point. The header crowded the logo against the top edge. Blocks after a hero started flush against its color, text did not line up with the headings above it, and a too-specific stylesheet rule ate the margins of hero subtitles and call-to-action text. All of those are fixed in Spillway itself, so every site gets the fixes, not just this one.