How Loose Brief works

What's real so far

The journey as data

Each stage adds to one project, and each one reads what the stage before it left behind.

1. 01BriefYour answers, checked one step at a time.
2. 02DirectionsThree complete sets of tokens, each with its own strategy, voice, imagery and homepage copy.
3. 03Brand systemA working copy of the direction you pick, with a history of every change.
4. 04StudioThat same working copy, shown as a full homepage.
5. 05ExportFiles made from the working copy as it is at that moment.

Design tokens

Every direction is a set of tokens: brand colours for light and dark mode, three fonts, a spacing scale, corner sizes, a card shadow and motion timings. Each set is checked against a strict schema before it’s used, so a malformed value can’t reach the page. That matters more once directions come from a model rather than a file.

The tokens become CSS custom properties on a wrapper around the brand preview. The homepage, the direction cards and the component samples only ever read those properties, which is why one change shows up everywhere at once. Here are some of the Littoral Intelligence direction’s:

.brand-scope {
  --color-brand-primary: #083B66;
  --color-background: #F6F4EE;
  --color-text-primary: #102A43;
  --color-button-primary: #083B66;
  --font-display: var(--face-instrument-serif), Georgia, 'Times New Roman', serif;
  --space-m: 1.6rem;
  --radius-button: 2px;
  --motion-normal: 500ms;
  --motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
  /* ...and 33 more */
}

Loose Brief’s own interface uses a separate set of variables that all start --ui-, so editing a brand never restyles the editor around it.

Accessibility checks

The main pairings of text and background in a brand are checked against the WCAG contrast minimums, in both light and dark mode. When a pair fails, the suggested fix changes only the lightness of the colour, so it still looks like the same colour. These are the light mode results for Littoral Intelligence:

“Accent colour for icons and chart lines” fails here, with #53D6C7 on #FFFFFF. The app suggests #00A496 instead, the same colour at a lightness that passes, and applies it in one click.

The interface itself works with a keyboard, labels its controls for screen readers, and turns off movement for anyone who has asked their device for reduced motion. The downloaded website does the same.

One project, one history

Every change, whether it’s a colour picker, a heading you retyped or a Creative Director suggestion, goes through one function that takes the project and the change and returns the new project. Because every change is recorded the same way, undo and redo work across the brand system, the Studio and the Creative Director, and a drag of a slider counts as one step rather than fifty.

The project is saved in your browser with a version number. When the shape of a project changes between versions, older saves are upgraded when they load. A save that can’t be read is replaced with a fresh project, and the app tells you, rather than showing a broken screen.

The website

One React component draws the homepage from the tokens and the page content. The Studio shows it in frames at real widths: 1280 pixels for desktop, 834 for tablet and 390 for mobile. The layout responds to the width of its frame rather than the width of your browser, so the mobile frame shows the real mobile layout even on a big screen.

The download uses the same component, turned into plain HTML, with the same stylesheet and your tokens at the top of it. A small script with no libraries handles the mobile menu, the form and the coastline explorer. So the website you download is the page you designed, rather than a copy made from it.

The Creative Director

A request goes through the same steps every time:

1. It’s matched to one of the twelve rules by key phrases.
2. The rule plans changes against the brand as it is now, so the same request does different things to different brands.
3. The changes are tried out on a copy, through the same checks the editor uses. If any would break a rule, nothing is suggested.
4. You see what will change, with every before and after, and a preview on the page.
5. Apply records it as one step you can undo. Cancel leaves the brand alone.

This is the structured reply for “Make it more premium” on Littoral Intelligence, as the app produces it:

{
  "change_type": "token_update",
  "summary": "Quieter colour, finer corners, more space, slower movement and an editorial type pairing.",
  "affected_areas": [
    "Colours (light mode)",
    "Colours (dark mode)",
    "Spacing",
    "Corners",
    "Card shadow"
  ],
  "changes": {
    "tokens.color": {
      "brand": {
        "primary": "#183B5D",
        "secondary": "#D3BA8F",
        "accent": "#3FA296"
      },
      "surface": {
        "page": "#F6F4EE",
        "card": "#FFFFFF",
        "inverse": "#071B2A"
      },
      "text": {
        "primary": "#102A43",
        "secondary": "#52606D",
        "inverse": "#F6F4EE"
      },
      "button": {
        "primary": "#0C3152",
        "primaryText": "#FFFFFF"
      },
      "border": {
        "subtle": "#DDD6C8"
      }
    },
    "tokens.colorDark": {
      "brand": {
        "primary": "#82A8D0",
        "secondary": "#CDB489",
        "accent": "#72D2C5"
      },
      "surface": {
        "page": "#07101A",
        "card": "#0F1A26",
        "inverse": "#F6F4EE"
      },
      "text": {
        "primary": "#E9EFF6",
        "secondary": "#AEB9C4",
        "inverse": "#102A43"
      },
      "button": {
        "primary": "#88AED7",
        "primaryText": "#07101A"
      },
      "border": {
        "subtle": "#29343F"
      }
    },
    "tokens.space.ratio": 1.7,
    "tokens.radius": {
      "small": "2px",
      "medium": "4px",
      "large": "8px",
      "button": "small",
      "card": "small"
    },
    "tokens.shadow.card": "0 18px 40px -24px rgba(16, 42, 67, 0.35)"
  },
  "confidence": 1
}

In live mode, a request none of the rules match goes to Claude along with the brand as it is. Claude answers in this same shape, naming each value to change, and the answer goes through the same checks before you see it. If a change names something that doesn’t exist or breaks a rule, Claude is told exactly which one and asked once more.

Live mode

Writing directions from your own brief takes seven requests to Claude, made on the server, and about a minute:

1. A plan for three routes, so they’re clearly different from each other before any detail is written.
2. For each direction, the brand itself: strategy, voice, colours, type, shape and movement.
3. Then its words: the homepage copy and the reasoning behind each choice, written knowing the brand, so the two agree.

Claude makes the creative choices: the words, the colours, the fonts from Loose Brief’s list, how round and how lively, and which shapes from a small drawn library the illustration is built from (a car and a map pin for a taxi firm, wheat and a loaf for a bakery). The app does the mechanical parts, such as working out the second colour mode, fixing contrast and setting spacing, then checks the result against the same strict rules as the demo. A direction that fails is sent back once with the problems listed. Progress is streamed to the page as each step actually finishes.

The instructions and your brief are the same at the start of every request, so they’re cached: the first direction goes slightly ahead so the other two can reuse what it stored instead of paying to store it again. Each visitor can run a few generations an hour, and there’s a daily ceiling, with a spending limit on the API key as the backstop.

Exports

• The homepage as a static website: HTML, CSS and a small script, ready for any host.
• CSS variables, design tokens in the W3C JSON format and a Tailwind CSS v4 theme.
• DESIGN.md, the design system written out for developers and AI coding tools.
• Brand guidelines as a web page, with a print layout for saving as PDF.
• A copy deck, the page content as JSON, and two social images.

All of them are made in your browser from the brand as it is when you press the button.

Stack and tests

• Next.js 16, React 19 and TypeScript.
• Plain CSS in cascade layers for the app. Brands change while you use them, which suits CSS variables better than classes compiled in advance, so Tailwind is an export here rather than how the app is styled.
• Zod for the schemas that brands, briefs and saved projects have to pass.
• fflate to make the zip files in the browser.
• The Anthropic SDK for Claude, used only on the server, with Claude Sonnet 5 by default.
• Unit tests with Node’s built-in test runner, covering the project history and upgrades, tokens, contrast, the Creative Director’s rules, the exports, and the live generation steps run against a stand-in for Claude.

Try it

The demo shows the whole journey with Ebbfield. With live mode on, write a brief for a business of your own, add what it already has (a logo, brand colours, an existing website or a PDF of its guidelines), and Claude builds the directions around them.

Loose Brief is Paul Wilson’s project: the idea, the decisions and testing every section. The code was written with Claude Code. Back to the home page.