Branuál: a brand manual as a website, not a PDF
An application for brand manuals that people can open, search and update. Pages are assembled from blocks, assets live in one place and the published version has its own link. We use Branuál at nkz.studio and keep developing it based on what real projects need.
In practice, a PDF quickly stops being used
We used to hand over identity as a fifty-page PDF. Within a month someone from marketing would write asking for the logo; within six months three versions circulated in the company and nobody knew which one applied. The rules were written well, people just did not come back to them.
We wrote the brief ourselves: the manual has to be a website with one link, openable on a phone, searchable, and a place where everyone downloads what they need. And it has to be editable without us.
Eight parts that keep a manual alive
Pages and blocks
A manual is made of blocks: text, image, colour palette, typography, a logo with usage rules. Assembling and reordering is drag and drop.
Text editor
Formatting, links and heading structure right inside the block. Pasted content is cleaned so the manual keeps consistent typography.
Asset library
Logos, fonts and images in one place, with previews and download links. Clients take them themselves, without e-mail.
Preview and publishing
Work in progress is visible only in the admin. Publishing creates the public version of the manual on its own link.
The public manual
The manual is a website, not a PDF. It opens on a phone, it can be searched and a specific rule can be linked to.
Design token export
Colours and typography can be exported for developers, assets downloaded in one ZIP and the logo taken straight from the manual in print and web formats.
Permissions and roles
The studio manages the content, the client has read access. The model is ready for several organisations at once.
Deployment and error tracking
The application runs on Vercel with a database in Neon. Errors are reported by Sentry and the key paths are covered by Playwright tests.
From the overview to a published manual
For each part you can see what the studio does and what the client gets.
Overview of manuals
The studio sees all manuals in one place: who owns them, which version it is and what is published. The editor and the public version open from here.
Editor of pages and blocks
A page is made of blocks. Text, image, palette, typography, a logo with rules. Blocks are moved by dragging and you can see how they will look in the result.
Asset library
Everything the brand uses sits next to the manual. It can be downloaded piece by piece or all at once in one ZIP, the logo straight in formats for print and web.
The public manual
This is what the person with the link sees: an overview of sections, search and always the latest published version, never a draft.
An in-house product runs differently
Our own need
We made manuals in PDF. Clients could not find them, used an old version and wrote asking for logos.
The data model
First we described what a manual is: organisation, manual, pages, blocks, assets, versions. Screens came after.
Phase by phase
Foundation, administration, the page and block engine, assets, preview and publishing, the public manual. Six phases, each usable.
Running it on our own brands
We use Branuál on our own projects, so we find usability problems before a client does.
Two decisions that keep the manual in order
Blocks, not an empty text editor
A manual is assembled from defined blocks: palette, typography, logo with rules. It keeps its form regardless of who writes in it. The price is that a new type of content means a new block from us.
Publishing separate from editing
Work in progress is visible only in the studio; the client always opens the last published version. Nobody works with a half-finished identity and changes go out at once.
A monorepo so the product can be handed over
The application and the packages for data, permissions and blocks live in one repository.
The scope of the solution
What we are working on
The core of the product is live: administration, pages and blocks, assets, publishing and the public manual. Of the advanced part, design token export, downloading all assets in one ZIP and taking the logo straight from the manual in print and web formats are running.
Language versions are in progress: the data model and an overview matrix of states are ready, editing translations is missing. Planned next are exporting the whole manual to PDF and a static site, custom domains and an overview of which rule people open most often.
Working on something similar?
Tell us what you handle in documents and spreadsheets today. We reply within two business days.
What else we built
Walio: a loyalty system for businessesA card in the wallet, a terminal for staff and a portal with reporting.
Layered: a website that sells the course and checks the guest inBooking with live capacity, payment and confirmation in one place.
SinClinic+: a clinic website the clinic runs itselfThe clinic edits procedures, doctors and the price list in Keystatic.