Loose Brief

Brief, brand, website

Turn an idea into an identity.

Describe a business in a few sentences. Loose Brief works up three brand directions, turns the one you pick into a design system, and builds a homepage from it that you can edit and download.

Start a project

Replace your project with the demo?

You've started a brief of your own. Trying the demo replaces it, along with any files you've added and anything built from it.

The preview shows Ebbfield, a made-up coastal data company that Loose Brief uses as its demo brand. Try the demo to go straight to its three directions.

Coastal intelligence

See the shoreline before it changes.

Ebbfield turns coastal data into clear decisions for communities adapting to a changing climate.

Direction
Littoral Intelligence
Display
Instrument Serif
Body
Inter
Primary
#083B66

How it works

From a brief to a website in five stages

  1. 01

    Brief

    Answer five short sets of questions about the business, who it's for and how it should feel.

  2. 02

    Directions

    Get three different routes, each with its own colours, type, tone and a small website preview.

  3. 03

    Brand system

    Pick one. It becomes a set of design tokens you can look through and edit by hand.

  4. 04

    Studio

    See a full homepage built from those tokens, then ask the Creative Director for changes.

  5. 05

    Export

    Download the homepage as a site you can put online, plus the tokens, a Tailwind theme, a DESIGN.md and brand guidelines.

Design tokens

Try changing a token

Every colour, font and corner radius is stored as a named token. The website, its components and the exports all read from the same set, so an edit shows up everywhere it’s used. Have a go.

Primary colour
Corners
Display type
--color-brand-primary: #083B66;
--radius-button: 2px;
--font-display: Instrument Serif;

Got a business idea?

Write a short brief and see three directions for it. Or try the demo and have a look around first.

Start a project

Replace your project with the demo?

You've started a brief of your own. Trying the demo replaces it, along with any files you've added and anything built from it.