Brand Book

What it is

A Brand Book is a Brand’s design system as a site of its own: Foundations (colour, type, space, radius, motion and the rest, drawn as specimens), Components (each one pictured, with Draw it live to see it in the chosen mode, and its props, variants, states, the tokens it uses and its Figma or code twin when they’re linked), Icons (the icons its release carries, when the Brand has any, searchable and in the text colour), Logos (the logo sets its release carries, set by set, each logo on the background it’s meant for (light and dark when it suits any) with its note and a download; a Brand with no sets shows its mark and the workspace’s logo) and a Changelog written from the releases that went live.

Its page is small on Stoaken and big on the Brand: a thin header with the Brand’s mark, name and “Brand Book”, a quiet Made with Stoaken at the foot, and everything else in the Brand’s own colours and type. Switch the mode at the top (light and dark, or any other modes the Brand has) and the whole page changes with it.

Open it from Book in the sidebar, beside Components. That page shows who can read it, its address and how its build stands, then the book as its readers see it. The book uses the full width of the page and reflows as you collapse or expand the sidebar, and on a phone.

Five layouts

The same book can be read in five layouts. Readers switch between them with the small layout switch at the top (unless an Admin turned that off); switching never reloads anything.

Docs

A contents rail, a wide reading column and a side column at wide widths. The default, and the feel of a design-system site.

Editorial

A full-bleed cover, a drop-cap standfirst from your first text block, then huge headings and specimens edge to edge, with a colophon at the end.

Board

Everything at a glance as tiles. A tile opens in place to the whole section; nothing pops over the page.

Chapters

One section per page (a page grows taller when a section needs it), a numbered index, a title page with its own contents, Present (full screen, arrow keys step pages) and Print / PDF (one chapter per printed page).

Spec sheet

Dense reference for developers: values with Copy, Copy as CSS per card, light and dark side by side, props per component, icons that copy their name.

Each section has a long form, a tile and a compact card, and the region decides which one draws, so any section works in any place. Colour sections have their own search, Show all (when key colours are chosen or the system is large) and a Semantic / Primitives filter.

Customise the layout

Brand Admins press Customise layout on the Book page. The panel sits beside the book, which keeps drawing live with your changes (with Show regions on, each region is outlined and named).

Layout

Pick one of the five to edit it. Readers open the book in sets the one readers start in; Let readers switch to the other layouts shows or hides their switch. Comfortable or Compact sets that layout’s density (compact colour ramps and swatches, tighter rows, smaller tiles).

What goes where

One box per region (with its limit, like 1 of 2) and Hidden in this layout. Drag a row, or focus its handle and press Space, the arrow keys and Space again (Escape cancels), or use the up and down buttons and the region menu. A full region says so instead of taking it.

Views

The gear on a row: Colour as Ramps, Swatch grid, Table (every mode side by side) or Chips, which colours show first, and Key colours (tick them, or Suggest); Typography as Specimen or Scale table; Components as Picture wall or List; Icons at S, M or L; Logos on Light and dark or Single. Views and density are saved per layout.

Text blocks

Your own words, in the Brand’s type, shared by all five layouts (hide one per layout). Plain text: a blank line starts a paragraph, “- ” a list item, two stars make bold, and a “Do:” line followed by a “Don’t:” line makes a pair. It is always shown as text.

Your changes are a draft, kept in this browser (reload and it’s still there; Discard it throws it away), and readers still see the published layout. Reset puts one layout back to its default. Publish layout sends it to readers in one step; they see it within a few minutes. With a public book, that includes the Brand’s Community page. New sections that arrive later (a new logo set, icons) appear in their usual place; sections that go away simply drop out.

Admin

Customises and publishes the layout.

Everyone

Reads the book in the published layout, and switches layouts when that’s allowed.

Who can read it

A Brand Admin chooses under Who can read it, on the Book page or in Brand settings › General:

Off

Nothing is built or shared. Where every Brand starts.

Anyone with the link

A private address (/book/ and a long code) that opens without signing in. Not listed anywhere and not indexed. Copy link to share it; Make a new link gives a new address, and the old one stops opening the book straight away.

Public

The Brand’s Community page becomes the book, in your layout, with Community’s likes, versions and Use this system in a strip at the top; it is also at /book/ and the listing’s own address, with nothing around it. Until the Brand is on Community, Public is greyed out, with a Share with community button right under the choices; if the listing is hidden for review, the book is too.

Workspace only

The same page, for people signed in to the workspace (with its SSO, if it has one). Part of the Team plan; the 14-day trial includes it.

Turn off takes it down: its address stops working and its copy is removed. Changing who can read it always gives a new address, so an old link never opens a book that’s now private.

Admin

Chooses who can read it, makes a new link, rebuilds it, turns it off.

Everyone

On the Brand: reads it on the Book page, and opens its address.

How it stays current

The book is built once for each release, from the release that is live: when it goes live (approved, published alone, as an exception or on its schedule), when you change who can read it, or with Rebuild now (for example after editing components without a release). Opening the Book page also catches it up if a release went live and it wasn’t rebuilt yet.

Readers never wait for a build: the page loads the built copy straight from storage. A component’s picture is the one its last visual check took; one that has none in a mode says so, and Draw it live draws it there and then.