Theme · Drafting Table
Vol. 01 № 001
Brief.
May 2026 Internal
Design & Brand Brief

A tool that
looks like
the brand you're
working in.

Brief is a creative brief manager that adopts each client's brand environment — so writing a brief feels like working inside the client, not inside another SaaS dashboard.

§ 01 — Premise

Most project tools look the same no matter who you're working for. Brief looks like the brand you're working in.

A freelance designer spends Tuesday morning inside a fintech client's brand world — cold navy, sharp serif. By lunch they're inside an indie soap brand's — warm peach, editorial type.

FRICTION → THE META-TOOLS DON'T COME ALONG.

They'll spend hours inside those brands in Figma. But the moment they open their brief manager, file tracker, or project notes, it's all the same gray SaaS chrome. The tool that should help them stay grounded in each client's context strips the context away the second they switch surfaces.

Brief is the bet that the tool itself can be the context cue. Each client gets a full brand environment inside Brief — colors, type, corner radius, even mood. Switch clients and the entire surface re-themes in 420 ms.

The chrome — workspace home, sidebar, command palette — stays a neutral dark Drafting Table. Client-themed surfaces sit on it like prints pinned to a gallery wall.

CHROME = NEUTRAL. CLIENT SURFACES = THEMED. THE CONTRAST IS THE POINT.
"Theming isn't decoration here. It's a context cue — the cognitive shift happens at the level of the room you're sitting in, not inside your head." — The design bet
§ 02 — User

Solo freelance designers. Three to eight clients at once. Context-switching several times a day.

They live in brand-shaped containers. Every Figma file is in somebody's world — that client's typeface, that client's palette, that client's tone of voice.

Their work is essentially a long sequence of mental check-ins: "which brand am I in right now?" Figma confirms it. The brand book confirms it. The Slack channel sort of confirms it. Their brief manager, file tracker, and project notes confirm nothing.

That mismatch is friction. It also flattens what should be a felt distinction between "I'm in Acme mode" and "I'm in Sundial mode." Two clients, two completely different visual and verbal vocabularies, one identical workspace — pretending they're the same.

THE PRODUCT MUST FEEL LIKE A DIFFERENT ROOM PER CLIENT.
Jobs to be done
JTBD · 01

Re-enter a client's world fast.

When I open the app on a Tuesday morning, I want the surface itself to tell me which client I'm in.

JTBD · 02

Hold the brief in one place.

Goals, audience, references, deliverables, timeline — without juggling four apps.

JTBD · 03

Bootstrap a new client in minutes.

Drop a logo or brand PDF and have a defensible starting environment without picking ten tokens.

JTBD · 04

Switch contexts without ceremony.

Three clients, one afternoon. The transition should feel like walking into a different studio, not opening a different tab.

§ 03 — Status quo

The competitive set has converged on a single look. We are choosing to diverge from it.

Notion, Asana, Linear, Bonsai. All competent. All polished. All identical the moment you set them next to each other and squint.

A neutral chrome, a faint accent picker, an avatar in the corner. The same surface no matter who you're working for. The brand of the SaaS is the only brand in the room.

This is fine for project work that has no client — internal teams, personal docs, public communities. It is actively wrong for client services work, where the entire job is holding a brand in your head and producing for it.

SAMENESS IS A FEATURE FOR ENTERPRISE. A BUG FOR FREELANCERS.
Notion
Workspace, not a studio. Per-page accents at best; the chrome is the chrome.
Asana
Project-shaped. Pretends every job looks the same on the inside.
Linear
Beautiful and uniform. The uniformity is the brand.
Bonsai
Built for freelancers; still asks you to forget the brand at the door.
§ 04 — Insight

The tool can be the context cue.

If the surface itself confirms which client you're working in, the cognitive shift happens at the level of the room you're sitting in — not inside your head.

This re-frames theming from decoration to information architecture. The look of the page is no longer a finishing layer applied at the end; it is one of the primary signals the product transmits. It tells you, before you read a word, who this surface belongs to.

THEMING AS WAYFINDING. THEMING AS MEMORY AID.
The moment, in one sentence

"Switch a client. Watch the entire surface re-theme in 420 milliseconds — colors, type, corner radius, even the focus ring."

Choreography
0 ms110220330440
Colors morph — CSS transition, 420 ms ease-out-quint
Content cross-fades — Motion, 220 ms, starts at 200
A deliberate wave. Colors lead. Content follows.
§ 05 — Personality & voice

A quiet host. Brief is the wall the prints hang on.

Brief is not a maximalist. The product's own personality is restrained on purpose — because almost every surface a user spends real time on is wearing somebody else's brand.

When the chrome is loud, the client themes have nowhere to live. When the chrome whispers, the client themes get to speak.

Voice is plain and confident. Short sentences. Specific nouns. No emoji. Editorial without being precious. Like the most trusted designer in a studio — the one who doesn't oversell.

"DRAFTING TABLE" IS BOTH A PALETTE AND A POSTURE.
Brief is
  • Quiet, considered, dependable
  • Specific — names things, doesn't fudge
  • Editorial in cadence; technical in vocabulary
  • Reverent about the client's brand, not its own
  • Visible in restraint, not in features
Brief is not
  • Cheerful, exclamatory, marketed-at
  • Gradient-heavy, illustrative, ornamental
  • Enterprise-stiff or productivity-influencer-loud
  • A "design system" the user has to learn
  • The brand in the room. The client is.
§ 06 — Visual direction

A neutral chrome of warm graphite, set in an editorial serif and a workhorse sans.

The Drafting Table palette is intentionally a hair warmer than pure neutral — enough that any client theme, warm or cool, lands on it without fighting. Type pairs an editorial serif (used sparingly, for headlines and moments) with a humanist sans for body and UI, and a monospace for labels, metadata, and code-adjacent material.

Drafting Table — chrome palette
Ink 5recess
Ink 10bg
Ink 15raise
Ink 30rule
Ink 70soft
Ink 100fg

All in oklch · warm 60–80° hue · chroma capped at 0.012 so the chrome never competes with a client theme.

Type system
DisplayInstrument Serif
Same component.
Different brand environment.
Body / UIGeist · 400 / 500
Workhorse sans. Friendly metrics, neutral voice. Used for everything that isn't a moment.
Mono / LabelJetBrains Mono · 11px
METADATA · TIMESTAMPS · TOKEN NAMES · SHORTCUTS
Radius

Chrome uses 6px by default. Client themes override to whatever fits their brand — Dandy 3px, Sundial 16px, Halo 0px.

Motion

Two-stage. Colors first (CSS transition, 420 ms ease-out-quint); content cross-fades (Motion, 220 ms) starting at 200 ms. The user reads the shift as a single, deliberate gesture.

Never spring. Never elastic. The wow is in the choreography, not the springiness.

§ 07 — Token architecture

Four layers. One CSS attribute scope. No per-client components, no switch statements.

A token system is only worth designing if there's a design idea that demands it. Per-client theming is that idea.

Each layer narrows from the abstract to the consumed. Primitives are raw values; chrome semantics name the neutral surface; client semantics override those names per client; components consume the names — never the raw values.

A single attribute on a single root — [data-client-theme="dandy"] — flips Layer 3. Every component below it animates over 420 ms via a transition declared once.

SAME COMPONENT RENDERS DANDY OR HALO DEPENDING ON ITS PARENT.

Read top to bottom. Each layer references only the layer above. Components never reach past Layer 4 into raw primitives — the rule that makes the whole thing re-theme cleanly.

Switching a client only rewrites Layer 3. Layers 1, 2, and 4 are stable.

Layer 1
Primitives
Raw values. oklch(0.42 0.13 248) · 16px · 420ms
Layer 2
Chrome semantic
--bg · --fg · --rule · the Drafting Table
↓  ·  overridden per client
Layer 3
Client semantic
--client-accent · --client-radius · --client-display · scoped by [data-client-theme]
Layer 4
Component
--btn-bg: var(--client-accent) · components consume Layer 3, never Layer 1
§ 08 — Surfaces

Six surfaces. Two kinds of room.

Surfaces split cleanly into chrome (no client; you're in Brief itself) and themed (in a client's world). Every screen is one or the other — never a hybrid. The contrast between the two is the whole experience.

Chrome · 01 Workspace home All clients at a glance. Drafting Table palette.
Themed · 02 Client home All briefs & activity for one client. Full re-theme.
Themed · 03 Brief detail Goals, audience, scope, deliverables, timeline.
Themed · 04 References board Mood, inspirations, pinned links. Themed gallery.
Themed · 05 Files Deliverables, share links, version history.
Chrome · 06 Theme builder Where a client's tokens are made. The product's only meta-surface.
§ 09 — Onboarding

Three entry points. No dead ends.

The cost of an empty client should be one decision, not ten. New clients pick whichever path they have material for; every path lands on the same editable token sheet, so a user can drop a logo, accept a starter, and still tweak the radius before saving.

Path · 01

Drop a brand asset.

Upload a logo, brand PDF, or screenshot. Brief extracts a starter palette and suggests a type pairing. Editable from there.

For: brands with existing material.
Path · 02

Pick a starter preset.

Curated theme presets — Apothecary, Editorial, Console, Studio Default, others. Each is a complete, opinionated set of tokens.

For: new brands, side projects, prototyping.
Path · 03

Tune by hand.

Open the token sheet and set every variable directly — color, type, radius, density, motion. Every other path lands here eventually.

For: brand owners; designers who know what they want.
§ 10 — Client environments

Same brief detail surface. Three brand worlds.

Below: the brief detail screen rendered three times, no per-client component swap. Every difference here is a token override on a single CSS scope. The exercise is to make the three feel like three different studios.

Client · 01
Dandy Soap Co.
MoodApothecary, cold, exact
PaletteDeep navy on porcelain
TypeIBM Plex Serif
Radius3 px
VoicePrecise, almost clinical
Dandy Soap Co. · Spring '26 · Brief
Brief № 014

A relaunch for our hand-milled bar line.

Anchor the new label in apothecary tradition while staying legible at retail scale. Carry the new wordmark across packaging, web, and a printed care card.

In review Due · 14 Jun Owner · You
AudienceIndependent retailers
Deliverables7 assets
References12 pinned
Filesv04 · current
Client · 02
Sundial
MoodEditorial, warm, slow
PalettePeach & terracotta on cream
TypeDM Serif Display + Geist
Radius16 px
VoiceConversational, considered
Sundial · Summer '26 · Brief
Brief № 007

A field guide for our seasonal release.

Build the launch story around a 16-page editorial mini-zine; carry the same warmth and pacing across the site, the launch email, and three Instagram tiles.

Drafting Due · 02 Jul Owner · You
AudienceReturning customers
Deliverables11 assets
References23 pinned
Filesv02 · current
Client · 03
Halo Recordings
MoodConsole, neon, technical
PaletteNeon green on near-black
TypeJetBrains Mono
Radius0 px
VoiceTerse, lowercase, exact
halo / lp-04 / brief
brief / 022

lp-04 · sleeve, site, lyric pdf

cover the lp-04 release across a 12" sleeve, a one-page site, and a lyric pdf. one visual system, three formats. monospace everywhere.

open due · 28-jun owner · you
audiencesubscribers
deliverables5 assets
references8 pinned
filesv01
"The chrome is a gallery wall. The client themes are the prints." — Defending the restraint