# Bobby Translate — Brand Book

**Version 1.1.0** · Direction: **Underline mark (Candidate 3) + Signal colour (Candidate 2)** · Asset pack 1.1.0
Canonical decision: **DECISION-B**, which supersedes the colour scope of DECISION-A.
Canonical domain: `bobbytranslate.com`

---

## 1. Product Owner decision record

| Field | Value |
| --- | --- |
| Decision | DECISION-A — Brand direction selection |
| Decided by | Alex, Product Owner (`alex@siteways.io`) |
| Decided on | 2026-08-25 |
| Selected | **Candidate 3 — Underline** |
| Scope | Beeldmerk, wordmark direction, colour direction, typography direction, tagline |
| Tagline | **Your website, understood everywhere.** |
| Rejected, preserved | Candidate 1 — Aligned; Candidate 2 — Signal |
| State | Decided. Phase 1B brand finalization authorized. |

### DECISION-B — Hybrid amendment (canonical)

| Field | Value |
| --- | --- |
| Decision | DECISION-B — Hybrid brand amendment |
| Decided by | Alex, Product Owner (`alex@siteways.io`) |
| Decided on | 2026-08-25 |
| Mark and wordmark | **Candidate 3 — Underline** (unchanged from DECISION-A) |
| Colour direction | **Candidate 2 — Signal** — Mist, Cloud, Navy, Indigo, Signal Cyan |
| Tagline | **Your website, understood everywhere.** |
| Supersedes | DECISION-A, colour scope only |
| State | Decided. All assets, tokens and hashes in this book reflect DECISION-B. |

DECISION-A is preserved unchanged as history. The Candidate 3 coral palette is no longer canonical;
`--legacy-coral` `#C24328` is retained only as a documented trace for archived campaign material.

The decision does **not** authorize production authentication, provider connections, subscription
billing, Bobby Credits, API or MCP activation, human-translator payments, Bobby CMS connection or
pilot release.

Candidate 1 and Candidate 2 remain published as rejected evidence at `/brand/candidates`. Their
original marks, palettes, typography, strengths and risks are unchanged.

---

## 2. Introduction

This book is the single authority for how Bobby Translate looks and sounds. If a surface disagrees
with this book, the surface is wrong. Every colour, size, lockup and phrase here is generated from
one source and shipped with the product, so the live site, the console and the downloadable assets
cannot drift apart.

## 3. Brand story

Localization software was built for companies with a localization department. Everyone else — the
shop owner with four languages, the two-person product team, the agency running twelve client
sites — was handed either a spreadsheet or an enterprise contract.

Bobby Translate is the third option. It keeps every sentence, button, page and SEO field of a
website organized in every language, shows a preview before anything is written, and never
publishes anything nobody approved. When the machine is good enough, use it. When the words matter,
ask a person.

## 4. Bobby Translate for dummies

You have a website. It says things: headings, buttons, error messages, page titles, the little
description Google shows, the text screen readers read out loud.

Bobby Translate collects all of that in one place. You pick the languages. It suggests translations
automatically, or asks a second engine for a different opinion, or lets you hire a real translator.
You look at the result, approve what is right, and only then does it go live.

## 5. Purpose

Make full-website localization affordable and understandable for the people who were priced out of enterprise localization suites.

## 6. Promise

Every sentence, button, page and SEO field of your website, organized in every language — with a preview before anything is written and an approval before anything is published.

## 7. Positioning

A friendlier, dramatically more accessible alternative to enterprise localization platforms, for website owners, agencies, product teams and independent translators.

## 8. Why Candidate 3 was selected

The clearest wedge against enterprise localization suites is friendliness and price. A marker
underline is a human editing gesture — the act of marking a phrase and saying *this one, say it
properly*. It supports the human-translation marketplace, it survives at 16px, and it is the least
generic option in a category dominated by blue technology marks.

The recorded risks are accepted and mitigated:

| Risk | Mitigation |
| --- | --- |
| Indigo must stay credible for business buyers | Indigo is `#2F3BC4`, a deep terracotta red — never fluorescent orange. Indigo Deep `#212A93` carries all small text. |
| The underline could read as a generic "highlight" brand | The motif is rationed: one marked phrase per view, never every heading. |
| Warm backgrounds are harder to keep accessible | Every shipped pair is measured; see the contrast matrix. |

## 9. Beeldmerk meaning

A lowercase **b** resting above a hand-weighted marker underline. The b is Bobby. The underline is
the human gesture of marking a phrase for attention. The b sits *above* the stroke, never on it:
the mark shows the moment before a translation is approved, not after.

## 10. Geometry

Drawn on a 40×40 grid.

| Element | Value |
| --- | --- |
| Stem | x = 11.8, y 5.2 → 25.8, stroke 3.6, round cap |
| Bowl | circle centre (22.2, 19.4), radius 7.4, stroke 3.6 |
| Counter | 3.6 units clear aperture, fixed at every size |
| Underline | tapered filled path, 4.6 units at its heaviest, 1.6 units clear of the stem foot |
| Optical rotation | none — the taper carries the handwritten quality |

## 11. Responsive mark variants

| Variant | Range | What changes |
| --- | --- | --- |
| Master | 48px and above | Full geometry, tapered underline |
| Small cutdown | 24–32px | Heavier strokes, shortened taper |
| Tiny cutdown | 16–20px | Shortened stem, wider counter, straight underline bar |

### Documented optical corrections

| Area | Before | After |
| --- | --- | --- |
| Underline weight at small sizes | A single 4.4px stroke scaled linearly and collapsed into a 1px red dash below 24px. | Tapered filled shape in the master; a shorter, heavier bar in the small cutdown and a straight bar in the tiny cutdown. |
| Bowl counter of the b | Bowl drawn as an open path that filled in at 16px. | True circle with a fixed 3.6/32 counter, so the aperture survives 16px. |
| Stem-to-underline gap | Stem sat on the underline and merged into one blob at favicon size. | A constant 1.6/32 clear gap between the stem foot and the underline. |
| Tiny variant (16–20px) | Not defined. | Dedicated tiny cutdown: shortened stem, larger counter, straight full-width underline bar. |

The selected concept was not redrawn. Every change above is a size-specific optical correction with
before/after evidence, published at `/brand`.

## 12. Clear space and minimum sizes

Clear space equals the underline stroke height × 4 (one quarter of the mark height) on all sides.

| Context | Minimum |
| --- | --- |
| Digital mark, full colour | 24px |
| Digital mark, tiny cutdown | 16px |
| Horizontal lockup | 128px wide |
| Stacked lockup | 96px wide |
| Print mark | 8mm |
| Print horizontal lockup | 32mm wide |

## 13. Wordmark and lockups

- **Wordmark** — "Bobby Translate" in Bricolage Grotesque 600, tracking −0.03em. "Translate" may
  take Indigo when the mark is not present.
- **Horizontal lockup** — mark + wordmark, gap equal to 0.14 × mark height. Default for headers,
  email, invoices, signs and vehicles.
- **Stacked lockup** — mark above wordmark, centred. Avatars, covers, presentation covers, merch.
- **Wordmark only** — permitted when the mark already appears within the same view.

## 14. Colours

| Colour | Token | Hex | On Mist | On Navy | Role |
| --- | --- | --- | --- | --- | --- |
| Underline Mist | `--mist` | `#F4F7FC` | 1.00:1 | 15.94:1 | Primary page background |
| Underline Cloud | `--cloud` | `#E4ECFA` | 1.11:1 | 14.41:1 | Secondary field |
| Underline Navy | `--navy` | `#101B33` | 15.94:1 | 1.00:1 | Primary ink and dark field |
| Underline Indigo | `--indigo` | `#2F3BC4` | 7.69:1 | 2.07:1 | Primary brand accent |
| Underline Indigo Deep | `--indigo-deep` | `#212A93` | 10.76:1 | 1.48:1 | Indigo for small text and print |
| Underline Cyan Deep | `--cyan-deep` | `#0A6E8C` | 5.40:1 | 2.95:1 | Secondary accent |
| Underline Cyan Ink | `--cyan-ink` | `#08536B` | 7.95:1 | 2.01:1 | Secondary dark |
| Signal Cyan | `--cyan` | `#16B6E0` | 1.90:1 | 8.38:1 | Bright accent on Navy only — never text on Mist |
| Signal White | `--signal-white` | `#F7FAFF` | 1.03:1 | 16.36:1 | Text on dark and indigo |
| Raised Surface | `--raised` | `#FFFFFF` | 1.07:1 | 17.12:1 | Elevated card |
| Muted Text | `--muted-foreground` | `#55627D` | 5.70:1 | 2.80:1 | Secondary text |
| Border | `--border` | `#D5DFF0` | 1.25:1 | 12.75:1 | Hairline |
| Success | `--success` | `#0F7A55` | 4.97:1 | 3.21:1 | Approved / published |
| Warning | `--warning` | `#8A5A0B` | 5.51:1 | 2.89:1 | Needs review |
| Danger | `--danger` | `#B3261E` | 6.09:1 | 2.62:1 | Blocked / conflict |
| Information | `--info` | `#1D6A96` | 5.50:1 | 2.90:1 | Machine suggestion |
| Focus ring | `--ring` | `#2F3BC4` | 7.69:1 | 2.07:1 | 2px outline, 2px offset |
| Disabled | `--disabled` | `#93A0B8` | 2.46:1 | 6.49:1 | Disabled controls only |

### Tints

Indigo and Cyan Deep may be tinted at 6%, 12%, 25% and 45% over Mist for fills, chips and charts.
Tints are never used for text.

### Semantic colours

Success, Warning, Danger and Information are fixed. They are never swapped for brand colours and
never used decoratively.

## 15. Contrast matrix

Measured with the WCAG 2.1 relative-luminance formula. Every pair below is one the product actually
ships.

| Pair | Foreground | Background | Ratio | Verdict | Used for |
| --- | --- | --- | --- | --- | --- |
| Body text | `#101B33` | `#F4F7FC` | 15.94:1 | AAA | All body copy |
| Body on cloud | `#101B33` | `#E4ECFA` | 14.41:1 | AAA | Alternating sections |
| Muted text | `#55627D` | `#F4F7FC` | 5.70:1 | AA | Supporting copy |
| Muted on cloud | `#55627D` | `#E4ECFA` | 5.15:1 | AA | Captions in cloud fields |
| Link (cyan-deep) | `#0A6E8C` | `#F4F7FC` | 5.40:1 | AA | Inline links |
| Indigo text small | `#212A93` | `#F4F7FC` | 10.76:1 | AAA | Indigo text below 24px |
| Indigo display | `#2F3BC4` | `#F4F7FC` | 7.69:1 | AAA | Headline accents 24px+ and UI graphics |
| Primary button | `#F7FAFF` | `#2F3BC4` | 7.89:1 | AAA | Start translating |
| Secondary button | `#F7FAFF` | `#0A6E8C` | 5.54:1 | AA | Cyan Deep actions |
| Inverted section | `#E4ECFA` | `#101B33` | 14.41:1 | AAA | Dark editorial bands |
| Success text | `#0F7A55` | `#F4F7FC` | 4.97:1 | AA | Approved / published |
| Warning text | `#8A5A0B` | `#F4F7FC` | 5.51:1 | AA | Needs review |
| Danger text | `#B3261E` | `#F4F7FC` | 6.09:1 | AA | Blocked / conflict |
| Information text | `#1D6A96` | `#F4F7FC` | 5.50:1 | AA | Machine suggestion |
| Disabled text | `#93A0B8` | `#F4F7FC` | 2.46:1 | Exempt (disabled) | Disabled controls only (WCAG exempt) |

Rules that follow from the matrix:

- Indigo `#2F3BC4` clears AAA on Mist (7.69:1) and is permitted at any text size. Indigo Deep `#212A93` (10.76:1) remains the print and small-caption default.
- Signal Cyan `#16B6E0` is never text on Mist (1.90:1). It is the underline and accent colour on Navy fields only (8.38:1).
- Border `#D5DFF0` is never a text colour.
- Disabled `#93A0B8` is only ever a disabled-control colour, which WCAG exempts.
- The focus ring is Indigo at 2px with 2px offset on every interactive element, on every surface.

## 16. Typography

| Role | Family | Notes |
| --- | --- | --- |
| Display | Bricolage Grotesque | Headings, wordmark, numerals in pricing |
| Text | Instrument Sans | All body copy and UI |
| Mono | IBM Plex Mono | Keys, locales, placeholders, hashes, eyebrows |
| Hand | Caveat | Annotation only, never UI copy |

### Type scale

| Name | Size | Family | Use |
| --- | --- | --- | --- |
| Display XL | clamp(2.75rem, 6.5vw, 5.25rem) | Bricolage Grotesque 600 | Hero headline |
| Display L | clamp(2rem, 4vw, 3.25rem) | Bricolage Grotesque 600 | Section headline |
| Heading M | 1.5rem | Bricolage Grotesque 600 | Panel titles |
| Heading S | 1.125rem | Bricolage Grotesque 600 | Sub-headings |
| Body L | 1.125rem | Instrument Sans 400 | Lede paragraphs |
| Body | 1rem | Instrument Sans 400 | Default copy |
| Body S | 0.875rem | Instrument Sans 400 | Dense UI, tables |
| Mono | 0.75rem | IBM Plex Mono 400 | Keys, locales, hashes |
| Eyebrow | 0.6875rem | IBM Plex Mono 500 | Uppercase section labels |

## 17. Iconography

Line icons, 1.6px stroke on a 24px grid, round caps and joins, Navy by default. Icons never
carry brand colour except when they represent an active or approved state. No filled pictograms, no
country flags — ever, for any language.

## 18. The underline motif

**Use it to:** mark the active phrase; connect a source string to its translation; show a corrected
sentence; highlight exactly one important word in a headline; indicate an approved translation;
guide the eye between website sections; animate a translation transition; form dividers or paths in
campaign graphics.

**Never:** underline every heading; decorate every card; underline a full paragraph; use it as a
text-decoration inside product copy; stretch, curve or gradient the stroke; recolour it outside
Indigo or Indigo Deep.

The stroke is hand-weighted and slightly uneven. Everything around it is precise. That tension is
the brand.

## 19. Translation-state visuals

| State | Token | Hex | Visual |
| --- | --- | --- | --- |
| Missing | `--state-missing` | `#6D7B95` | Dotted hairline, no underline |
| Draft | `--state-draft` | `#55627D` | Solid hairline |
| Machine suggested | `--state-machine` | `#1D6A96` | Cyan Deep dashed underline |
| Second opinion | `--info` | `#1D6A96` | Two stacked cyan-deep rules |
| Human translation | `--state-human` | `#0A6E8C` | Solid cyan-deep underline |
| In review | `--state-review` | `#8A5A0B` | Amber underline, hollow dot |
| Approved | `--state-approved` | `#0F7A55` | Indigo marker underline + check |
| Published | `--state-published` | `#0B5D41` | Indigo marker underline, filled dot |
| Outdated source | `--state-outdated` | `#9A5B0D` | Underline with a break |
| Blocked | `--state-blocked` | `#B3261E` | Struck-through rule |

Colour is never the only signal: every state also carries a label and a distinct underline
treatment.

## 20. Emoji and Unicode identifier

- Emoji: ✍️
- Unicode: `U+2581` ▁ LOWER ONE EIGHTH BLOCK

Used in plain-text contexts (commit messages, chat, release notes) where the mark cannot render.

## 21. Tone of voice

- Say what is true, including what is not built yet.
- Speak to a website owner first and a developer second.
- Short sentences. Concrete nouns. No localization jargon without a plain-language gloss.
- Warm, never cute. Confident, never boastful.

### Preferred wording

Your website, understood everywhere. · Preview before anything is written. · Approve before
anything is published. · A second opinion, not a second guess. · Real translators, when the words
matter. · Bobby Credits · Workspace · Collection

### Forbidden wording

- "AI-powered revolution", "game-changing", "next-generation"
- "Instant perfect translation"
- Guaranteed SEO rankings
- Claiming a provider, API, MCP or payment rail is live when it is not
- Naming a competitor's price without a cited, dated source
- Country flags as language identifiers
- "Native quality" as a machine-translation claim

## 22. Correct usage

- Mark on Mist, Cloud, Signal White or Navy only.
- Minimum clear space respected on all four sides.
- One marked phrase per view.
- Indigo reserved for the motif, the primary action and the focus ring.

## 23. Misuse

- Do not stretch, curve, rotate or gradient the underline.
- Do not recolour the mark outside the published variants.
- Do not place the mark on photography without a solid field behind it.
- Do not set the wordmark in any face other than Bricolage Grotesque.
- Do not add a second warm accent beside Indigo.
- Do not use the underline as a text decoration in running copy.

## 24. Applications

| Application | Specification |
| --- | --- |
| Favicon | 16 / 32 / 48px PNG + SVG + ICO, tiny cutdown |
| App icon | 512px rounded square, Navy field, Indigo underline |
| Avatar | 400px circle, Cloud field, master mark |
| Open Graph | 1200×630, Cloud field, lockup + marked tagline |
| Social cover | 1500×500, Navy field, horizontal lockup |
| Email logo | 240px PNG horizontal lockup |
| Email signature | HTML block, Instrument Sans falling back to Arial |
| Invoice / document logo | Monochrome Navy horizontal lockup, 40mm |
| Business card | 85×55mm, Cloud front, Navy back |
| Letterhead | A4, mark top-left, Indigo rule at 24mm |
| Presentation cover | 1920×1080, Navy field |
| Sticker | Die-cut 80mm, Indigo field |
| Merchandise | Single-colour Navy or Signal White, mark only |
| Sign | Horizontal lockup, minimum 320mm wide, Indigo underline in vinyl |
| Window sticker | Reverse-cut Signal White on glass, Indigo underline vinyl |
| Vehicle branding | Door lockup 400mm; the underline extends as a body stripe |

Merchandise, signs, window stickers and vehicle branding are **specified only** — no production
artwork is generated in this phase.

### Social bios

- **Short (80):** Your website, understood everywhere. Translate every page, button and SEO field.
- **Long (160):** Bobby Translate keeps every sentence, button, page and SEO field of your website
  organized in every language — automatic providers, second opinions or real human translators.

### Example posts

1. "Your website says more than you think: buttons, error messages, alt text, the description
   Google shows. Bobby Translate keeps all of it organized in every language."
2. "A machine translation is a suggestion. An approved translation is a decision. We keep those two
   things apart on purpose."
3. "Import a ZIP. See exactly what will change. Write nothing until you say so."

## 25. Governance and versions

| Item | Version |
| --- | --- |
| Brand book | 1.0.0 |
| Asset pack | 1.0.0 |
| Design tokens | 1.0.0 |

Phase 1B is **not** declared adopted-and-complete by this document alone. See the completion
checklist published at `/brand`.