Guide
From the first colour to the finished CI.
The guide takes you through nexbrand step by step. First you set up the server and create a client. Then you enter colours, fonts, logos, sizes and rules, keep versions and projects apart, let nexbrand do the maths and agree the result with the client. At the end come code and API for developers, your account, access rights and running the server.
Every chapter stands on its own, so you can jump straight to wherever you have a question. The pictures show the English interface, and the button names in the text are the ones you see on screen. The clients in them, such as Morgenrot Bakery, are made up.
First steps
1
Set upHow to start nexbrand with Docker, fetch the setup code from the log and create the first account, which runs the server as its operator.
2TourWhat you see after signing in: the overview of clients, the sidebar, the quick search, the header and a client's page with its tabs.
3New clientHow the wizard designs a CI for a new client in six steps: from a description, a picture or one colour, with a font pair, sizes and checks running along.
4Record a CIHow to enter the CI of an existing client, add older versions with the date they applied from, change a client's details and move a client to the trash.
The CI
5
ColoursWhat a colour card shows, which values you copy with one click, how to add colours in a draft and what the four roles main colour, second colour, accent and neutral do.
6Steps and harmoniesHow the editor computes the steps 50 to 950 for every colour, suggests neutrals with a touch of the main colour and shows harmonies that go with the main colour.
7FontsHow to pick fonts from the catalogue, upload your own or record them by name only, what the three licences mean and why an in-house font never leaves as a file.
8Type sizesHow nexbrand computes a series of type sizes from a base size and a ratio, how you adjust each step by hand and how the sizes arrive in the code.
9LogosHow to upload logos, set their ground, minimum width and clear space, attach further formats such as EPS and use word marks as stand-ins until the logo is ready.
10RulesThe four kinds of rule in nexbrand: colour pairs, logo grounds and fonts are checked by computation, free rules stay text for people. Plus suggestions from the checks.
11Examples and UIHow to add example files to a version, and how the sample page and the UI elements show what buttons, fields, cards and badges look like in the CI.
12Dark modeHow a CI's dark mode maps six parts of an interface onto colours of the palette, and how nexbrand suggests it, checks it and writes it out as code.
Versions and projects
13
DraftsWhy every change is a draft first, how to create a new version, edit it, save it and publish it with a valid-from date, and what stays unchangeable afterwards.
14Time lineHow the time line shows every version of a client, how “As of” calls up the CI of any day and what a version with a later valid-from date does.
15CompareHow the History tab lists every version with its origin and note and compares two versions field by field, with colour distance and the checks that changed.
16ProjectsHow a project stands on a version of the client, inherits, extends or sets its own values per part, and only moves to a newer version when somebody moves it.
Checks
17
ChecksWhat the Checks tab computes: hints with their thresholds, the contrast table of every colour pair and how people with colour vision deficiencies see the palette.
18Contrast checkerHow the contrast checker tests any two colours against every criterion, proposes the nearest passing colour of the same hue and shows the result with colour vision deficiencies.
With clients
19
ReviewHow to put a draft with up to four directions to the client, how the client comments and chooses without an account, and how the choice becomes the published version without another click.
20Public pagesHow to share a version as a read-only page without an account, for a printer, a photographer or a developer, with an end date and a password, and what such a page shows and does not.
21CollectHow nexbrand measures colours, fonts and logos from a website, a GitHub repository or a PDF style guide, sorts them and takes them over as a draft, and what never happens along the way.
22Check against the CIHow nexbrand checks a website, a repository or a PDF against the CI that applies, finds nearly right shades and foreign fonts, and checks code through the API and MCP.
For developers
23
As codeHow to copy or download any version as CSS variables, a Tailwind 4 theme, SCSS or design tokens, with steps, fonts, type sizes and dark mode.
24APIHow to create an API token, what it may read, which addresses /api/v1 offers and how a token of the draft level writes a new version back as a draft.
25MCPHow an AI tool in an editor uses MCP to read a client's CI, check contrast, compare versions, check code against the CI and write a redesign back as a draft.
26AI serviceHow each account enters its own AI service, what nexbrand uses it for, what goes out and what the list of every request from the last 14 days looks like.
Account and operation
27
Access and teamsHow access per client works: three rights, invitations by name or link, teams with a lead, and why a client somebody may not see does not exist for them at all.
28Account and sign-inProfile and picture, password, a second factor with recovery codes, linking a sign-in provider, accepting invitations and signing other browsers out.
29OperatorWhat the operator looks after under Settings, Server: accounts and blocking, sign-in with authentik in one step, the switches to the outside, mail, languages, log and the version check.
30BackupsHow nexbrand backs up every night, how to back up by hand, check a backup, download it and restore from it, and how to move to a new server with a backup.
Pavo saysThe quick search finds any client: press Ctrl K, or Cmd K on a Mac, and type its name, its sector or the name of one of its fonts.