Bonus / Brand book

Brand book composition

Every branding primitive composed into one long-scroll brand book. Use this scene as the end-to-end stakeholder walkthrough — identity, palette, mood, voice, accessibility, patterns, all the way through.

Production answer

Brand book composition is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Brand book composition states
Generative search brief

Brand book composition: Every branding primitive composed into one long-scroll brand book. Use this scene as the end-to-end stakeholder walkthrough — identity, palette, mood, voice, accessibility, patterns, all the way through.

Brand book · v3.2

Oak Flats Mufflermen

Workshop · Exhaust · Tuning

The Oak Flats Mufflermen brand book pins identity, voice, and asset governance into one scrollable surface. Every customer-facing thing we ship — invoices, livery, marketing pages — pulls from in here.

01

Identity

Mark, lockups, clear-space, and approved configurations.

Stacked
Oak Flats Mufflermen mark
Oak Flats MufflermenWorkshop · Exhaust · Tuning
Use
Window decals · social
Min size
120px wide
Horizontal
Oak Flats Mufflermen mark
Oak Flats MufflermenWorkshop · Exhaust · Tuning
Use
Letterhead · web nav
Min size
160px wide
Mark only
Oak Flats Mufflermen mark
Use
Favicon · stencils
Min size
24px wide
Wordmark only
Oak Flats MufflermenWorkshop · Exhaust · Tuning
Use
Invoices · vehicle livery
Min size
120px wide
02

Mark exploration

Live editor for testing alternative silhouettes during early identity work.

Workshop red Circle mark, Solid treatmentOFMWorkshop red Circle mark, Solid treatment
Shape
Tone
Stroke
03

Palette

The lab pulls five-colour palettes from real imagery before we lock them down.

Palette extractor

Five colours pulled from the source frame

Choose a source frame below — the swatches update with the five most representative colours and the semantic role each one carries on the brand surface.

  • Service amber#FFC14F
    Accent
  • Workshop red#E62028
    Primary
  • Bay graphite#1B1C25
    Surface
  • Chrome mist#9AA3AD
    Muted
  • Stencil ink#050508
    Base
04

Colour roles

Semantic colour roles — Primary, Surface, Critical, Success, Muted, Accent.

Colour roles

Semantic colour cascade

Each tone is bound to a job — surface, interaction, critical, success, muted, accent. Designers reach for the role, never the literal hex.

Primary

Workshop red. Reserved for the brand mark, primary actions, and the voice of the bay.

Surface
#E62028
Ink
#FFFFFF
Surface

Bay graphite. The default canvas for marketing and product surfaces.

Surface
#101016
Ink
#F6F6F8
Critical

Stop. Destructive actions, hard errors, and bay-out alerts.

Surface
#A8141A
Ink
#FFEDED
Success

Telemetry green. Confirmations, completed jobs, and safe states.

Surface
#37D67A
Ink
#06150D
Muted

Chrome mist. Supporting labels, breadcrumbs, and inactive UI text.

Surface
#1B1C25
Ink
#AEB2BD
Accent

Service amber. Highlight role — used sparingly.

Surface
#FFC14F
Ink
#1A1306
05

Mood board

References, textures, and quotes pinned to anchor design decisions.

Mood board

Workshop, grit, and chrome

A pinned composition of references — surfaces, textures, type pairings, and atmospheric colour pulls that define the Oak Flats Mufflermen visual register.

Bay 04Service light · 6500K
Workshop red#E62028
ANTONDisplay headliner
Service amber#FFC14F
Carbon weaveSurface texture
Pit laneTooling rack
"Built properly. Not pretty — proper."Workshop manifesto
Scan teal#40BCFF
Stencil ink#050508
DecalsVan livery
Diamond plateFloor texture
Telemetry#37D67A
06

Typography

Display + body pairing with rationale and full sample copy.

Type pairing

Display + Body

Built properly. Not pretty — proper.

Anton carries the marquee. Inter handles every body string underneath without competing.

Display
Anton, Impact, sans-serif
Body
Inter, Arial, sans-serif

Industrial cut + neutral body. The pair lets the headline shout without the page feeling salesy.

07

Voice & tone

Attribute chips plus do/don't examples for the workshop voice.

Voice & tone

How Oak Flats speaks

Mufflermen write the way the counter sounds — confident, plain-spoken, never salesy.

  • Confident
  • Honest
  • Workshop
  • Warm
  • Direct
Do

Your exhaust system needs three new gaskets. We can fit them on Thursday — no surprises on the bill.

Don't

Critical exhaust failure detected. Immediate intervention required to mitigate cascading risk.

Do

Honest answer — that part will outlast the car. Skip the upgrade.

Don't

Highly recommended premium replacement option (limited-time offer, save 20%).

08

Brand rules

Hard rules for handling the mark in the wild.

Brand rule

Always keep the mark in its locked aspect ratio.

Locked aspect

The disc stays a disc. Never scale on a single axis.

Stretched mark

Single-axis scaling destroys the silhouette inside three metres.

09

Favicon

Browser tab, bookmark bar, iOS home screen, Android PWA.

Favicon

Tab + home-screen identity

Every favicon size redraws the mark for the pixel grid it lands on. Small sizes drop the wordmark and rely on the chevron silhouette alone.

16px favicon
16×16Browser tab
32px favicon
32×32Bookmarks bar
180px favicon
180×180iOS home screen
192px favicon
192×192Android PWA
10

Asset library

Every approved logo variation, ready to download.

Asset library

Logo + lockup downloads

Every approved logo variation, packaged as SVG, PNG, and PDF. Mono and inverse versions are colour-locked — no recolouring.

Full colour

Default brand mark on canvas.

  • SVG
  • PNG
  • PDF
Mono black

Single ink — receipts and paperwork.

  • SVG
  • PNG
Outline

Stencilling, etching, light-on-dark posters.

  • SVG
  • EPS
Duotone

Reserved for events and partnership lockups.

  • SVG
  • PNG
11

Voice axes

Calibrate the brand against formality, seriousness, and restraint.

Voice axes

Calibrate the brand tone

Move each slider to where the brand sits on its voice spectrum. Use the captured values as written guidance for copywriters and AI prompts.

FormalCasual
72%Lean casual — counter warmth.
SeriousPlayful
34%Serious by default.
RestrainedBold
68%Bold for marketing, restrained for docs.
12

Accessibility

WCAG pass-fail matrix across the approved colour set.

Contrast grid

WCAG pass-fail at a glance

Each cell compares a foreground colour against a background colour. The badge tells you whether the pairing passes AAA, AA, AA for large text only, or fails.

Fg \\ Bg
Canvas
Paper
Workshop red
Telemetry
Stencil ink
18.32:1AAA
18.60:1AAA
6.41:1AA
12.42:1AAA
Paper
17.92:1AAA
1.06:1FAIL
4.62:1AA
1.51:1FAIL
Service amber
11.84:1AAA
1.60:1FAIL
2.71:1FAIL
1.49:1FAIL
13

Pattern library

The texture system, with usage rules baked in.

Carbon fibre

Performance product surfaces.

carbon-fibre
Diamond plate

Workshop floor backdrops.

diamond-plate
Herringbone

Editorial accents.

herringbone
Brushed metal

Chrome surfaces.

brushed-metal
Guideline ownerOak Flats Mufflermen Workshop · Brand & IdentityDocument Brand book · v3.2