DocumentBrand Manual / v1.0 / May 2026
ClassificationPublic reference / unrestricted
Maintained byBRUTALS.AGENCY Design Council
BRUTALS.
AGENCY —
BRAND.
SYSTEM.
Volume
One
Pages
12 sections
Edition
2026.05
Status
Active / canonical

Contents

§ 01 — § 11
01

The idea

A soft name for hard work.

BRUTALS is the punchline. The name promises concrete; the wordmark hands you a marshmallow. That tension — rounded letterforms shouting a brutalist name — is the entire brand. Lean into it. Never resolve it.

Principle 01

Round shapes. Square thinking.

Every corner that can be soft, is soft. Every grid line that can be hard, is hard. Containers carry the discipline. Letters carry the warmth.

Principle 02

One red, one black, one breath.

Two colours do the work. Red is reserved for signal — the verb, the price, the answer. Black is mass; paper is silence. Anything else is a guest, not a resident.

Principle 03

Scale is the joke.

Type that's too big. Numbers that overflow. Margins that refuse to behave. The system tolerates one act of insolence per page. Pick it on purpose.

03

Palette

Three colours. Two roles. One signal.

Ink does the mass. Paper does the silence. Signal does the work. Everything else is a service tier — status, caution, success, link — called in by name, never by hand.

03.1 Core

The three that matter
INK
HEX#161515
RGB22 / 21 / 21
CMYK0 / 5 / 5 / 91
--color-ink
PAPER
HEX#f7f7f7
RGB247 / 247 / 247
CMYK0 / 0 / 0 / 3
--color-paper
SIGNAL
HEX#f61c1c
RGB246 / 28 / 28
CMYK0 / 95 / 90 / 0
--color-signal
The 70/25/5 rule On any composition: 70% paper or ink (one of them dominates), 25% the opposite, 5% signal. Signal is a verb. If everything is a verb, nothing is.

03.2 Ash / neutral ramp

11 stops, 025 → 900
025#f7f7f7
050#f3f1f1
100#ebe9e9
200#dad7d7
300#c1bebe
400#989494
500#6b6868
600#4a4747
700#2e2c2c
800#232121
900#161515

03.3 Signal ramp

6 stops, 050 → 900
050#fff0f0
100#ffd7d7
300#ff8080
500#f61c1c
700#b41212
900#6a0808

03.4 Support / service colours

Use sparingly — status only
CREAM
HEX#efece3
--color-cream
AMBER
HEX#f6b51c
--color-amber
MINT
HEX#1cf67e
--color-mint
OCEAN
HEX#1c5cf6
--color-ocean
INK / 900
USEDefault ink
--color-ink

Cream is the only paper alternative — warm stock for letterheads, invoices and other printed documents. Amber, mint and ocean exist only inside data UI for caution / success / link. They never lead a layout.

04

Typography

Quicksand does everything.

One family, five weights, every job. Quicksand is round, geometric and slightly naïve — the smile under the suit. Pair with mono only for codes, IDs, and the running margin labels of this document.

04.1 Weights

Variable / static
Aa
Light
300 — quiet long copy
Aa
Regular
400 — default body
Aa
Medium
500 — UI / labels
Aa
Semibold
600 — subheads
Aa
Bold
700 — display

04.2 Scale

12 → 168 / modular 1.25
Display / 7XL
brutals
168 / 140
weight 700
tracking -4%
Display / 6XL
A soft name.
120 / 108
weight 700
tracking -4%
Heading / 5XL
For hard work.
88 / 83
weight 700
tracking -2%
Heading / 4XL
Section openers
64 / 64
weight 700
Heading / 3XL
Page titles, key claims.
48 / 50
weight 600
Heading / 2XL
Subheads & pull-quotes
36 / 40
weight 600
Heading / XL
In-page section heads
28 / 32
weight 600
Body / LG
Dek and lead paragraphs. Slightly larger than body for atmosphere.
22 / 31
weight 400
Body / MD
Default reading size for long-form. Quicksand is round, so let the leading breathe a little.
18 / 27
weight 400
Body / Base
Standard UI body text and form labels. Reaches everywhere.
16 / 24
weight 400
Body / SM
Dense UI: tables, captions, secondary information. Don't go below this for prose.
14 / 21
weight 400
Label / Caps
Tracked label / always uppercase
12 / 16
weight 600
tracking 24%
05

Spacing & grid

Four pixels and a ruler.

Every gap is a multiple of 4. Twelve-column grid, 24-pixel gutter. The grid is hard so the content can breathe softly.

05.1 Space scale

13 stops, 0 → 256
Token
Px
Rem
Use
--space-0
0
0
--space-1
4
0.25
--space-2
8
0.50
--space-3
12
0.75
--space-4
16
1.00
--space-5
24
1.50
--space-6
32
2.00
--space-7
48
3.00
--space-8
64
4.00
--space-9
96
6.00
--space-10
128
8.00
--space-11
192
12.00
--space-12
256
16.00

05.2 The grid

12 col / 24px gutter
1
2
3
4
5
6
7
8
9
10
11
12
Container narrow — 880px / long-form reading
Container base — 1240px / standard pages
Container wide — 1600px / dashboards, hero
06

Radius, borders, shadow

Soft corners. Hard lines. Sharp shadows.

Six radius stops follow the logo geometry up to 28px (the squircle). Borders are hairline by default; rules earn their thickness. Shadows are mostly absent — when present they are sharp, offset, and the same colour as the ink.

06.1 Radius

0, 4, 8, 16, 28, 48, ∞
None0px
XS4px
SM8px
MD16px
LG28px ★
XL48px
Pillfull

LG / 28px is the brand radius — it matches the logo's squircle and is the default for cards, badges and buttons big enough to deserve it.

06.2 Borders

Hair, Line, Rule, Slab
Hair
1px / --bw-hair
Line
2px / --bw-line
Rule
4px / --bw-rule
Slab
8px / --bw-slab

06.3 Elevation

None → Brutal
Noneflat (default)
Softhover lift
Cardraised surface
Popmodal, popover
Brutal ★8/8/0 ink
07

Iconography

Two-pixel stroke. Round caps. Always.

Icons are drawn on a 24-pixel grid with a 2-pixel stroke and round line caps. The roundness is intentional — it echoes Quicksand. No fills. No double weights. If an icon needs colour, it gets red. That's it.

plus
minus
close
check
arrow-r
arrow-l
arrow-d
arrow-u
search
user
mail
download
clock
calendar
pin
phone
info
alert
verified
bolt
square
record
stack
done-all
08

Components

Built from the tokens, by the rules.

Buttons, inputs, badges, cards, tables. Each one is a token assembly — never a one-off. If you find yourself reaching for a new colour or radius, you don't need a new colour or radius. You need to choose differently.

Buttons

4 variants × 3 sizes

Tags & badges

Pill, all caps, 12px
Active Live Draft Archived Paid Pending In review v1.0

Inputs

Form primitives

Cards

Base, brutal, invert
Case study

A bank that learned to smile.

Rebranded a 110-year-old institution in 14 weeks, including a 600-page guideline document.

Service

Identity systems

Logo, type, motion and the rulebook to keep them all in line.

Talk to us

Got an awkward brief?

The harder it is to explain, the more we want to talk about it.

Data table

Hairline rows, tabular nums
Project Client Status Budget
Compass · rebrandCompass BankLive$182,400
Folio · publicationFolio PressPending$48,000
Hi-Lo · identityHi-Lo FoodsIn review$96,200
Strata · packagingStrata WinesClosed$67,800

Callouts

Inline notice
Rule of oneEach layout gets exactly one signal-red moment. Use it where the eye should land first.
NoteQuicksand has no italic. Don't fake one. If emphasis is needed, change weight or colour.
09

Voice & tone

Confident.
Plain. A bit dry.

We don't oversell. We don't apologise. We say the thing, in the fewest words that don't lose the shape of it.

Do say

“We make brands that don't flinch.”

Don't say

“We're passionate about creating bold, disruptive experiences.”

Why

If the sentence works without the adjective, the adjective is in the way. If everything is bold and disruptive, nothing is.

10

Applications

The system, in the wild.

Website. Email. Invoice. Letterhead. Business card. Social. Signage. Each piece uses only what's already in the system — that's the test.

10.1 Website / hero

brutals.agency
DESKTOP / 1440
brutals.

A soft name
for hard work.

BRUTALS is an independent brand studio. We build identity systems, books, screens and packaging for organisations who want to mean something specific.

Now booking

Q3 2026 — two slots open

10.2 Invoice

US Letter
PRINT / 8.5×11

Invoice
№ 2026-041

Issued
11 May 2026

Due
10 Jun 2026
From
BRUTALS.AGENCY
104 Wharf St, 4F
Brooklyn, NY 11201
To
Compass Bank, plc
Attn: Procurement
London EC2A 4HJ
Project
Compass · Identity system phase 02
Terms
Net 30 / USD
Wire — Chase 0083
ItemQtyRateAmount
Logotype refinement & lockups1$32,000$32,000.00
Type system & specimens1$18,500$18,500.00
Brand guidelines (digital, 142pp)1$24,000$24,000.00
Design council — senior, hours32$385$12,320.00
Subtotal  $86,820.00
Tax (n/a)  $0.00
Total due
$86,820.00
brutals.agency hello@brutals.agency № 2026-041

10.3 Letterhead

US Letter / cream
PRINT / 8.5×11

brutals.
agency

11 May 2026

Dear Maya,

Thank you for the brief — it's a generous one, and we're flattered that Compass chose to keep us around for phase two. The attached scope covers the next fourteen weeks: a refreshed logotype, a working type system, and a 142-page guideline document that will outlive all of us.

One small thing. We've shortened the timeline on the type specimen by a week, because the previous round taught us where the dragons are. Two slots in the schedule are already held in your name; the third opens 1 July.

Please countersign the SOW by the 25th if you'd like to keep them.

Warmly,

Sasha Petrov
Principal / BRUTALS

104 Wharf St, 4F · Brooklyn NY 11201 hello@brutals.agency · +1 718 555 0144

10.4 Transactional email

Project handoff
INBOX VIEW

10.5 Business cards

3.5 × 2 in / two-up
brutals.

Sasha Petrov

Principal / Design
sasha@brutals.agency
+1 718 555 0144
B.
brutals.agency
Brooklyn · Lisbon · Mexico City

10.6 Signage / sticker

Door, packaging, swag
SOFT NAME.
HARD WORK.
BRUTALS
MMXXVI
.

10.7 Social posts

1:1 / IG, LinkedIn, X
11

Token reference

The whole system, in 96 names.

If a value isn't in this table, it doesn't exist in the brand. Copy the variable name; never copy the literal.

Colour

32 tokens
TokenValue
--color-ink#161515
--color-paper#f7f7f7
--color-signal#f61c1c
--color-cream#efece3
--color-cream-deep#e3dfd0
--color-amber#f6b51c
--color-mint#1cf67e
--color-ocean#1c5cf6
--color-ash-025#f7f7f7
--color-ash-050#f3f1f1
--color-ash-100#ebe9e9
--color-ash-200#dad7d7
--color-ash-300#c1bebe
--color-ash-400#989494
--color-ash-500#6b6868
--color-ash-600#4a4747
--color-ash-700#2e2c2c
--color-ash-800#232121
--color-ash-900#161515
--color-signal-050#fff0f0
--color-signal-100#ffd7d7
--color-signal-300#ff8080
--color-signal-500#f61c1c
--color-signal-700#b41212
--color-signal-900#6a0808

Type / weight

2 + 5
--font-sans"Quicksand", system-ui
--font-monoui-monospace, Menlo
--weight-light300
--weight-regular400
--weight-medium500
--weight-semibold600
--weight-bold700

Size / tracking

13 + 7
--fs-3xs … --fs-7xl10 / 12 / 13 / 14 / 16 / 18 / 22 / 28 / 36 / 48 / 64 / 88 / 120 / 168
--lh-tight … --lh-loose1.0 / 1.15 / 1.4 / 1.6
--tracking-tightest-0.04em
--tracking-tight-0.02em
--tracking-wide0.04em
--tracking-wider0.12em
--tracking-widest0.24em

Space / radius / border

13 + 7 + 4
--space-0 … --space-120, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192, 256
--radius-0 … --radius-full0, 4, 8, 16, 28★, 48, 9999
--bw-hair / -line / -rule / -slab1 / 2 / 4 / 8
--shadow-brutal8 8 0 0 --color-ink ★
--ease-out / -in / -inoutcubic-bezier(.2,.7,.2,1) etc.
--dur-fast / -base / -slow120 / 220 / 420 ms