# FirmClerk Brand Brief
*v1 — 2026-06-22 · Editorial direction confirmed · Design system: [DESIGN.md](../DESIGN.md)*

## Company
FirmClerk designs, builds, and runs custom AI-agent automation and workflows for
businesses, delivered as a managed service with consulting to get them live. The
positioning wedge: the **tailored suit** against off-the-rack DIY automation
(n8n / Zapier / Make).

- **Domain:** firmclerk.com (prototype gallery at prototype.firmclerk.com)
- **Legal entity:** Little Rocket Ltd.
- **GitHub (site):** https://github.com/christensen-digital/firmclerk-website
- **GitHub (creative):** https://github.com/christensen-digital/firmclerk-creative

See [PRODUCT.md](../PRODUCT.md) for the full concept, users, and positioning.

---

## One visual system — "Editorial"

Light mode is primary: editorial ink on near-white paper, a single bespoke accent,
and craft details (a tailor's chalk stitch, optical-size serif display). This is
how FirmClerk does "AI without the hype" — restraint, specificity, and outcomes,
never glow, robots, or neon. Dark appears only as a full-bleed "drenched ink" band,
not a separate theme.

---

## Colour (oklch)

| Token | Value | Use |
|---|---|---|
| bg | `oklch(0.992 0 0)` | Page — near-white paper |
| surface | `oklch(0.974 0.002 265)` | Raised panels, alt sections |
| panel | `oklch(0.95 0.004 265)` | Nested panels, tag fills |
| ink | `oklch(0.23 0.016 265)` | Primary text, the dark band |
| ink-soft | `oklch(0.43 0.016 265)` | Secondary text |
| ink-faint | `oklch(0.52 0.012 265)` | Tertiary text, mono labels (AA for small text) |
| rule | `oklch(0.9 0.006 265)` | Borders, dividers |
| paper-inv | `oklch(0.985 0.003 60)` | Warm white text on the ink band |
| **accent** | `oklch(0.46 0.137 24)` | **Oxblood — the suit lining. Used sparingly.** |
| accent-dk | `oklch(0.38 0.12 24)` | Accent hover / pressed |

**Accent discipline.** The oxblood is a lining, not a coat: italic emphasis words in
display headings, the human/"you" state, one primary indicator per component, focus
rings, the drenched-band glow. Never body text, large fills, or more than one attention
point per viewport. Do not introduce a second hue.

---

## Typography

| Role | Font | Weight | Use |
|---|---|---|---|
| Display / headings / pull-quotes | **Fraunces** | 300–600 + italic | `font-optical-sizing: auto`; display ~360; italic = accent emphasis |
| Body / UI / buttons + wordmark | **DM Sans** | 300 / 400 / 500 | All UI text; body 400, sub-copy 300 |
| Kickers / labels / meta | **DM Mono** | 400 | Uppercase, letter-spacing 0.06–0.16em |

```
https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400&display=swap
```

---

## Voice
Three words: **assured, bespoke, exacting.** A senior practitioner who builds and
operates this for a living — confident, specific, free of hype. The tailoring metaphor
(craft, fit, measurement, materials) is the spine of the voice and the antidote to AI
hype: the story is fit and outcomes, not magic. Emotional goal: trust and relief.

---

## Rules
- **Light is primary**; the ink band is the only "dark" moment, used sparingly.
- **One accent** — oxblood, on touch points and emphasis only, never prose or decoration.
- **AI without hype** — no glow, robots, circuitry, neon, or "AI-powered" badges.
- **Not** a DIY automation tool (n8n/Zapier/Make node canvas), generic SaaS template, or
  stuffy legacy consulting. Industries are examples, never the structure.
- **No em dashes** in body copy; use commas, colons, semicolons, periods, parentheses.
- **WCAG 2.1 AA floor**; visible `:focus-visible` rings; a `prefers-reduced-motion`
  alternative for every animation.

---

## Open / TBD
- Wordmark + mark: the favicon uses a provisional "running stitch" glyph — a proper mark
  exploration is still open.
- Vocabulary lock for `_vocab/` (terms of art) — TBD.