For developers · Chapter 23

As code

Developers do not want to copy a colour card by hand. The button As code gives them the version in four formats, ready to paste, and exactly the one shown at the moment.

The dialog

As code stands at the top of every client's and every project's page. The dialog is called something like “Morgenrot Bakery as code” and has four tabs:

Copy puts the text on the clipboard, Download saves a file such as morgenrot-bakery-2026.css. Accented letters in the name are written out plainly, ä becomes ae.

Morgenrot Bakery

What is in it

:root {
  --color-<name>: #…;
  --color-<name>-50: #…;   /* up to 950 */
  --font-<role>: 'Family', serif;
  --text-h1: 2.5rem;
  --text-h1--line-height: 1.1;
  --text-h1--font-weight: 700;
  --dark-ground: var(--color-<name>);
}

• Colours with their name as a short form. Every colour whose role is not neutral gets the steps 50 to 950.
• Fonts per role, with their fallback.
• Type sizes in rem, 16 px being 1 rem, with line height and weight.
• Dark mode as references to the colours, so that you can map it onto your own variables.

The design tokens carry colours with their role as description and Pantone as an extension. Figma, Style Dictionary and Tokens Studio read this format; nexbrand has no connection of its own to these programs.

The same text everywhere

The app, a public page, the API and MCP deliver the same text. So a developer without an account gets exactly what you see in the app through a public page. For a project, the whole set comes as the project shows it: what it inherits from the client, together with its own.