Skip to content
BrandRails

How it works

Your brand becomes something a model can actually follow

Not a PDF nobody opens. A file the model reads before it draws anything, and a checker that refuses the work if it did not.

  1. Answer the wizard

    Pick a depth and work through it. Questions are enums and named values wherever possible, because "modern and clean" cannot be turned into a rule but "never gradients" can. Drafts save after every step.

  2. We write the file

    BRAND.md is thirteen sections of instructions written for a model: non-negotiables, colour, type, layout, imagery, iconography, components, voice, and the never-ship list. tokens.css is the machine-readable half. The same answers always produce byte-identical output.

  3. Connect the URL

    You get a private MCP endpoint and a bearer token. Paste both into Claude or ChatGPT once. Each brand has its own URL, so an agency can keep clients apart.

  4. Ask for what you need

    The model reads the guidelines first, fetches the tokens, checks which assets exist, and only then designs. It publishes back to us as real HTML.

  5. We check it before it lands

    Every publish is linted against your brand: colours outside the palette, undeclared typefaces, wrong radius, gradients, emoji, centred body copy, contrast below your floor, and locked components that were quietly restyled. Off-palette colour blocks the publish and comes back with the line number and the fix.

  6. Open, edit, or take the PDF

    Every design gets a live URL, a lightweight editor for changing wording and sizes within the palette, a self-contained HTML download, and a vector PDF with live text that opens in Affinity or Illustrator.

The difference

The same model, the same brief, ten seconds apart

The difference is not the prompt. It is whether the model had anything to follow. Both panes below are the real thing rendered live — the right-hand one came straight out of the generator.

The brief, both times: A landing page for Meridian Freight, a pallet haulier.

Without the file

Purple gradient, pill button, three identical cards, invented client logos, and copy that could be any company.

With the file

The same brief, the same model. Brand colours, the declared type scale, real numbers, one action.

The artifacts

What you actually get

A file, not a mood board

The wizard asks between 14 and 76 questions, depending how far you want to go, and writes BRAND.md: thirteen sections of instructions aimed at a model rather than at a person. This is a real excerpt from a real answer set.

## Colour

| Token | Value | Use |
|---|---|---|
| `--ink` | #14201c | All body and heading text. Default foreground. |
| `--surface` | #f1efe7 | Page and card background. |
| `--accent` | #c2410c | One signal element per view. Never a large fill. |
| `--muted` | #5f6b65 | Secondary text, hairlines, empty image slots. |
| `--on-accent` | #f1efe7 | Text on the accent. Computed: accent luminance 0.153 ≤ 0.45 — 4.5:1. |

- Body on surface measures 14.56:1. The floor is 4.5:1.
:root {
  /* Colour */
  --ink: #14201c;
  --surface: #f1efe7;
  --accent: #c2410c;
  --muted: #5f6b65;
  /* Computed from the accent's relative luminance — never assumed.
     Measured 4.5:1 against the accent. */
  --on-accent: #f1efe7;

  /* Type */
  --font-display: Fraunces, serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: ui-monospace, monospace;

  /* Scale. Headings are fluid; body and small never scale. */
  --size-h1: clamp(2.0625rem, 1.5rem + 2.5vw, 3.75rem);
  --size-h2: clamp(1.3125rem, 0.9583rem + 1.5741vw, 2.375rem);
  --size-h3: clamp(1.0625rem, 0.8958rem + 0.7407vw, 1.5625rem);
  --size-body: 1.0625rem;
  --size-small: 0.875rem;

Tokens that survive a phone

Headings clamp to a floor that never falls below your body size. Grids use auto-fit so they can collapse instead of bursting the container. The text colour on your accent is computed from its luminance, so a lime button never ships with white text on it.

The list that does the most work

Every model reaches for the same defaults when nothing stops it. The never-ship list ships pre-ticked; you untick what you do not mind. Break one and the design is rejected at publish time with the line number and the fix.

  • Never use a gradient. Backgrounds are flat colour. This includes gradient text, gradient borders and gradient overlays on images.
  • Never use box-shadow, text-shadow or a glow to create depth. Separate surfaces with a hairline border or a change of background colour.
  • Never use backdrop-filter, translucent frosted panels, mesh backgrounds or floating 3D shapes.
  • Never use a fully-rounded (pill) radius unless the brand radius is explicitly a pill. Use the radius token.
  • Never introduce a colour that is not a declared token or a declared exception. If a state needs a new colour, mix the existing tokens.
  • Never use a typeface other than the declared display, body and mono faces. Do not substitute a system font "for safety".
  • Never use purple-to-pink or blue-to-violet colour schemes, whatever the palette says. They read as machine-generated.

Every file opens with the rules that cannot bend

Generated from your hard answers, and repeated at the top so they are the first thing read. These came from a real answer set.

  1. Read this whole file before producing anything. If a request conflicts with it, follow this file and say which rule you followed.
  2. Use only these colours: --ink #14201c, --surface #f1efe7, --accent #c2410c, --muted #5f6b65. Reference them as custom properties, never as raw hex.
  3. Text on the accent is always var(--on-accent) (#f1efe7). It is computed from the accent's luminance — do not substitute white or black by eye.
  4. Use only these faces: Fraunces for headings, Instrument Sans for body, ui-monospace, monospace for code. Never substitute a system font.
  5. The accent is a signal, not a surface. Use it for at most one element per view.
  6. Grids are repeat(auto-fit, minmax(min(260px, 100%), 1fr)). Never write repeat(N, 1fr).

Three depths, same file

Express

14questions

The essentials. Enough to stop the worst drift.

about 3 minutes

Standard

42questions

The recommended depth for most brands.

about 10 minutes

Advanced

76questions

Considerably longer, and produces a noticeably more accurate file. Unlocks extra modules rather than repeating questions.

about 35 minutes

Deeper tiers unlock further modules rather than repeating the same questions. Imagery and iconography are asked at every depth — a model given no positive rule about images invents stock photography, and one given no rule about icons puts an icon beside every heading.

What the wizard covers

IdentityAlways asked
What this is and who it talks to.
DeliverablesAlways asked
What you will actually ask for. This decides the rest.
ColourAlways asked
The palette, and what each colour is for.
TypographyAlways asked
Faces, roles and the size scale.
Shape and depth
Corners, hairlines and whether depth exists at all.
Layout
Container, rhythm and how grids behave.
ImageryAlways asked
Mandatory. A model given no rule about images invents stock photography.
IconographyAlways asked
Mandatory. A model given no rule about icons invents them, usually one per heading.
Components and states
Buttons, actions and focus.
Voice and copy
How it sounds, and what it never says.
Compliance
Only for regulated sectors.
Localisation
Languages, currency, dates, direction.
Never ship thisAlways asked
The highest-value section. Untick what you do not mind.
Technical target
Where the output has to run.
Governance
Who owns this file and when it gets reviewed.

The fastest way to understand it is to read your own file

Ten minutes of questions, then every design that comes out of Claude or ChatGPT follows the file. BrandRails keeps it hosted; the file itself is yours to download and keep.

Choose a plan