# HoodWashers — Brand System (machine-readable brief)

A compact, directive version of the HoodWashers brand guidelines, written to be
handed to an AI assistant. The full interactive guide is for people; this file is
for models.

**Asset base URL.** Every asset path in this file is relative to:

    https://brand.hoodwashers.com/

So the horizontal logo is
`https://brand.hoodwashers.com/logos/logo-primary-horizontal-blue.svg`.

**How to use it:** paste this whole file into a Claude Project's instructions, save
it as `CLAUDE.md` in a repo, attach it to a conversation, or drop it into a ChatGPT
Project. Then ask for the work — "build a landing page", "draft the service email",
"design the invoice header" — and the rules below apply.

---

## 1. What HoodWashers is

Professional, NFPA 96 compliant commercial kitchen exhaust and hood cleaning. We
remove grease, buildup and contaminants from hoods, filters, ducts and fans so
kitchens stay clean, safe, compliant and performing at their best.

The brand is the expert in the room: credible and precise, but approachable and
easy to work with. Specialists, not generalists.

**The one-line test.** Any piece of communication must answer three questions
without the reader asking: *what work is done*, *to what standard*, and *what the
customer receives afterwards*. Naming the standard is what separates us from a
general cleaning service.

---

## 2. Hard rules

Violating any of these produces off-brand work.

1. **Never redraw, retype or regenerate the logo.** Use the supplied master files.
   Do not ask an image model to draw it. See §6.
2. **Never set body text in accent orange `#FA824C`.** It scores 2.51:1 on white
   and fails every WCAG threshold. Orange is a *shape and action* color.
3. **One orange action per view.** If two buttons compete, the second is navy.
4. **Never place any lockup on accent orange.** No master is approved on it.
5. **Never stretch, rotate, recolor, or add effects to the logo** — no shadows,
   glows, gradients or outlines.
6. **Status color is separate from brand color.** Orange means *act*, not *alert*.
   Use the semantic palette for state.
7. **Lead with the standard.** NFPA 96 and the certificate are the proof points;
   don't sell on fear alone.

---

## 3. Color

Navy leads, orange accents. Navy carries structure, chrome and trust. Orange is
reserved for emphasis — primary actions, highlights, brand moments — so it stays
impactful. Keep large surfaces calm and let orange do the pointing.

### Core

| Role | Token | Hex | Notes |
|---|---|---|---|
| Brand primary | `--navy-800` | `#26547C` | Structure, chrome, headings on light |
| Brand accent | `--orange-500` | `#FA824C` | Actions and emphasis only, never text |
| Text primary | `--ink-950` | `#15171A` | Body copy |

### Ramps

| Navy | Orange | Ink | Cool gray |
|---|---|---|---|
| `--navy-950` `#18354E` | `--orange-700` `#C2531F` | `--ink-950` `#15171A` | `--gray-50` `#F3F6F9` |
| `--navy-900` `#21496B` | `--orange-600` `#EC6B31` | `--ink-700` `#3A3D43` | `--gray-100` `#E4E9EF` |
| `--navy-800` `#26547C` | `--orange-500` `#FA824C` | `--ink-600` `#52555C` | `--gray-200` `#D6DEE6` |
| `--navy-700` `#35608A` | `--orange-400` `#FC9C6F` | | `--gray-300` `#BAC5D1` |
| `--navy-600` `#4E7599` | `--orange-300` `#FDB794` | | `--gray-400` `#7B8A99` |
| `--navy-500` `#85A0B8` | | | |

### Semantic — status only

| State | Solid | Tint |
|---|---|---|
| Success | `#2D8F5F` | `#E5F2EC` |
| Warning | `#D9A21A` | `#FBF1D7` |
| Danger | `#C73838` | `#F7DDDD` |
| Info | `#1F6FA8` | `#DCEBF6` |

### Verified contrast (WCAG 2.1)

Use these pairings; they are measured, not estimated.

| Pairing | Ratio | Verdict |
|---|---|---|
| Ink `#15171A` on white | 17.96:1 | AAA |
| White on deep navy `#18354E` | 12.67:1 | AAA |
| Navy `#26547C` on white | 7.95:1 | AAA |
| White on navy `#26547C` | 7.95:1 | AAA |
| Navy on gray-50 `#F3F6F9` | 7.33:1 | AAA |
| Ink `#15171A` on orange `#FA824C` | 7.15:1 | AAA — **this is how to label an orange button** |
| `--orange-700` `#C2531F` on white | 4.61:1 | AA — the only orange legal for text |
| **Orange `#FA824C` on white** | **2.51:1** | **FAILS — never** |
| **White on orange `#FA824C`** | **2.51:1** | **FAILS — never** |

If you need orange-colored text, use `--orange-700 #C2531F`. If you need an orange
button, fill with `--orange-500` and set the label in `--ink-950`.

---

## 4. Typography

Three families, clear jobs.

| Family | Role | Weights | Fallback stack |
|---|---|---|---|
| **Outfit** | Headings & display | 400–800 | `"Outfit", ui-sans-serif, system-ui, sans-serif` |
| **Inter** | Body & interface | 400–700 | `"Inter", ui-sans-serif, system-ui, sans-serif` |
| **JetBrains Mono** | Data & technical — NFPA refs, certificate numbers, codes | 400–700 | `"JetBrains Mono", ui-monospace, "SF Mono", monospace` |

All three are free (Outfit and Inter under the SIL Open Font License, JetBrains
Mono under Apache 2.0).

```bash
npm i @fontsource/outfit @fontsource/inter @fontsource/jetbrains-mono
```

Headings: tight tracking (`-0.02em` at display sizes), `text-wrap: balance`.
Body: ~1.6 line height, keep running text near 65 characters wide.
Mono: use for anything that is a number, code or reference — not for emphasis.

---

## 5. Voice

Talk like a trusted specialist: direct, knowledgeable, reassuring. Lead with
safety and compliance, explain plainly, never oversell. Confidence comes from
expertise, not hype.

**Do** — lead with compliance and safety (NFPA 96, documentation) · be specific,
name the work (hoods, filters, ducts, fans) · keep sentences short and confident ·
reassure with free inspections, clear quotes, certificates after service.

**Don't** — overpromise or use hype ("best ever", "magic") · bury the customer in
unexplained jargon · sound generic, like a handyman rather than a specialist ·
sell on fear alone; always pair risk with the fix.

### Rewrite patterns

| Off-brand | On-brand | Why |
|---|---|---|
| "We are the best hood cleaning company around — nobody beats our magic touch!" | "NFPA 96 compliant hood cleaning, hood to fan, with a certificate on completion." | Hype replaced with the standard we work to and what the customer receives. |
| "Dirty hoods cause fires. Book now before it is too late." | "Grease buildup is a leading cause of kitchen fires. A scheduled clean keeps your system compliant — inspections are free." | Risk still named, but paired with the fix rather than left as a threat. |
| "We provide comprehensive facility maintenance solutions." | "We clean commercial kitchen exhaust systems: hoods, filters, ducts and fans." | Generic vendor language replaced with the specific work we do. |
| "Our techs will remediate the HVAC-adjacent grease-laden vapor infrastructure." | "Our technicians remove grease from the hood, ductwork and exhaust fan." | Jargon translated into what a kitchen manager would recognize. |

---

## 6. Logo

The mark is a four-point sparkle; the wordmark is "HoodWashers". Each lockup ships
as two masters: a **navy** version for light backgrounds and a **white knockout**
for dark backgrounds and photography.

### Choosing a master

Pick by measured contrast, not by eye: whichever master has the higher contrast
ratio against the background wins. On white, mist, or cool gray → navy. On brand
navy, deep navy, or ink → white knockout.

### Files

All paths are relative to `https://brand.hoodwashers.com/`. Every lockup is also
available as PNG (transparent) at `logos/png/<name>-{512,1024,2048}.png` and JPG
(flattened) at `logos/jpg/<name>-{512,1024,2048}.jpg`.

| Lockup | Light background | Dark background | Min width | Use |
|---|---|---|---|---|
| Horizontal | `logos/logo-primary-horizontal-blue.svg` | `logos/logo-primary-horizontal-white.svg` | 120px | Default — headers, web, letterhead |
| Stacked | `logos/logo-primary-stacked-blue.svg` | `logos/logo-primary-stacked-white.svg` | 72px | Square and centered spaces |
| Apparel | `logos/logo-apparel-blue.svg` | `logos/logo-apparel-white.svg` | 80px | Embroidery, uniforms, vehicle |
| Monogram | `logos/logo-apparel-hw-blue.svg` | `logos/logo-apparel-hw-white.svg` | 28px | Tight spaces, favicons, stitching |
| Monogram + sparkle | `logos/logo-apparel-hw-sparkle-blue.svg` | `logos/logo-apparel-hw-sparkle-white.svg` | 36px | Compact badge alternative |
| Badge | `logos/badge-blue-fill.svg` (navy field) | `logos/badge-transparent-fill.svg` (transparent field) | 44px | Seals, stamps, stickers |
| Sparkle | `logos/hw-sparkle.svg` — single master, works on any background | | 16px | App icon, avatar, bullet mark |

**The badge is a pair, not two marks.** `badge-transparent-fill.svg` is the badge
with its navy field removed; its "HOOD WASHERS / ESTD 2025" wordmark is *white*, so
it only reads on a dark background and disappears on a light one.

### Rules

- **Clear space:** at least the height of the sparkle mark on all sides. Nothing —
  type, page edges, other graphics — enters that zone.
- **Minimum width:** see the table. Below it, switch to the monogram or the sparkle.
- **Never** stretch, rotate, recolor, add shadows/effects, or place on accent orange.
- **Never** rebuild or re-typeset the wordmark. Use the file.

### Getting the logo into generated work

- **HTML / React / web output:** reference the SVG by URL — `<img
  src="https://brand.hoodwashers.com/logos/logo-primary-horizontal-blue.svg"
  alt="HoodWashers">` — or fetch the SVG and inline its source. SVG is text, so a
  coding assistant can embed it byte-exact.
- **Documents and slides:** link the PNG at a suitable width, or download it.
- **Never ask an image generator to draw the logo.** Diffusion models will
  approximate the sparkle and mangle the wordmark. Generate the background or
  photography with an image model if you like, then composite the real SVG or PNG
  on top.

---

## 7. Icons

**Lucide** (ISC licensed), stroke width **2px** brand-wide — do not vary it. Size
on a 24px grid. Navy by default; orange only for the one action or status you want
noticed.

Working set:

- **Exhaust & cleaning** — flame, wind, fan, spray-can, droplets, brush-cleaning
- **Compliance & records** — shield-check, clipboard-check, badge-check, file-check, calendar-check, clock
- **Crew & service** — hard-hat, wrench, truck, utensils, gauge, thermometer
- **Contact & status** — phone, mail, map-pin, circle-check, triangle-alert, circle-x

Need something else? Pull it from lucide.dev at the same stroke and grid.

```bash
npm i lucide          # plain JS
npm i lucide-react    # React
npm i lucide-static   # raw SVG for design work
```

---

## 8. Paste-ready tokens

```css
:root {
  /* Navy — brand & structure */
  --navy-950: #18354e;
  --navy-900: #21496b;
  --navy-800: #26547c;
  --navy-700: #35608a;
  --navy-600: #4e7599;
  --navy-500: #85a0b8;
  /* Orange — accent only */
  --orange-700: #c2531f;
  --orange-600: #ec6b31;
  --orange-500: #fa824c;
  --orange-400: #fc9c6f;
  --orange-300: #fdb794;
  /* Ink — neutral text */
  --ink-950: #15171a;
  --ink-700: #3a3d43;
  --ink-600: #52555c;
  /* Cool gray — surfaces & borders */
  --gray-50: #f3f6f9;
  --gray-100: #e4e9ef;
  --gray-200: #d6dee6;
  --gray-300: #bac5d1;
  --gray-400: #7b8a99;
  /* Semantic — status */
  --success: #2d8f5f;  --success-tint: #e5f2ec;
  --warning: #d9a21a;  --warning-tint: #fbf1d7;
  --danger:  #c73838;  --danger-tint:  #f7dddd;
  --info:    #1f6fa8;  --info-tint:    #dcebf6;
  /* Type */
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}
```

---

## 9. Prompt starters

> Using the HoodWashers brand system, build a landing page hero for our quarterly
> hood-cleaning service. Use the real logo SVG from the asset table, navy ground,
> one orange call to action with an ink label.

> Draft a service reminder email in HoodWashers voice. Lead with the compliance
> standard, name the work, and close with what the customer receives.

> Design a service certificate. Badge lockup, JetBrains Mono for the certificate
> number and NFPA reference, Inter for body.

When output is finished, check it against §2. Most off-brand results are one of:
orange used as text, the logo redrawn instead of referenced, or two competing
primary actions.