Phase 1BBrand adopted (DECISION-B: Underline mark, Signal colour). Providers not connected, sign-in not operational, no payments, API and MCP not live.Brand book

Brand book 1.1.0 · asset pack 1.1.0

Underline.

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.

DECISION-B canonicalbrand applied to every surfaceDownload PDF brand bookComplete asset ZIP

01

Product Owner decision record

Canonical — current

Decision
DECISION-BColour-direction amendment — hybrid identity
Decided by
Alex — Product Owner · alex@siteways.io
Decided on
2026-08-25
Selected
Candidate 3 mark + wordmark, Candidate 2 colour system
Supersedes
DECISION-A (colour direction only)
Scope
  • Canonical beeldmerk (mark): Candidate 3 — Underline, geometry unchanged
  • Canonical wordmark structure: Candidate 3 — Underline
  • Canonical colour direction: Candidate 2 — Signal (navy / indigo / cyan)
  • Tagline unchanged: Your website, understood everywhere.
  • Typography unchanged: Candidate 3 friendly, human character
Amendment
Recorded as a later amendment after review of the completed Phase 1B implementation. Alex did not originally select this hybrid: DECISION-A selected Candidate 3 in full on the same date, and the coral palette was implemented in good faith before this review.
State
decided

Original — superseded in part

Decision
DECISION-ABrand direction selection
Decided by
Alex — Product Owner · alex@siteways.io
Decided on
2026-08-25
Selected
Candidate 3 — Underline
Rejected
Candidate 1 — Aligned · Candidate 2 — Signal
State
superseded by DECISION-B (colour only)

DECISION-A is preserved unchanged. Its mark and wordmark selection remains canonical; only its colour direction was superseded.

What these decisions do not authorize

  • Production authentication or Google sign-in
  • Translation provider connections
  • Subscription billing and Bobby Credits
  • API and MCP activation
  • Human-translator payments or payouts
  • Bobby CMS connection
  • Pilot release

Candidate 1, the rejected Candidate 2 mark and the superseded Candidate 3 palette remain published as evidence at /brand/candidates.

02 — Story, purpose, promise, positioning

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.

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, suggests translations, and lets you approve them before they go live.

Purpose
Make full-website localization affordable and understandable for the people who were priced out of enterprise localization suites.
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.
Positioning
A friendlier, dramatically more accessible alternative to enterprise localization platforms, for website owners, agencies, product teams and independent translators.

03

The beeldmerk and its 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.

Geometry — drawn on a 40×40 grid

Stem
x 11.8 · y 5.2 → 25.8 · stroke 3.6 · round cap
Bowl
centre 22.2, 19.4 · r 7.4 · stroke 3.6
Counter
3.6 units clear aperture at every size
Underline
tapered fill · 4.6 units at heaviest · 1.6 clear of stem

The b sits above the stroke, never on it: the mark shows the moment before a translation is approved, not after.

Clear space and minimum sizes

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

  • Digital mark, full colour24px
  • Digital mark, tiny cutdown16px
  • Horizontal lockup128px wide
  • Stacked lockup96px wide
  • Print mark8mm
  • Print horizontal lockup32mm wide

04

Responsive variants and the size ladder

The selected concept was not redrawn. Three size-specific cutdowns keep the underline from degrading into a meaningless red dash.

Master

48px and above

Small cutdown

24–32px

Tiny cutdown

16–20px

Actual-size ladder

Rendered at true pixel size. The counter and the underline survive every step.

96px

64px

48px

32px

24px

20px

16px

Light field
Dark field
Monochrome ink
Monochrome reversed

Documented optical corrections

Every change below is a size-specific optical correction with before/after evidence. No fundamental redraw of the selected concept was made.

AreaBeforeAfterVerdict
Underline weight at small sizesA single 4.4px stroke scaled linearly and collapsed into a 1px red dash below 24px.The underline is a tapered filled shape in the master mark and switches to a shorter, heavier bar in the small cutdown (≤32px) and tiny (≤20px) variants.Optical correction, documented. Geometry of the selected concept unchanged.
Bowl counter of the bBowl drawn as an open path that filled in at 16px.Bowl is a true circle with a fixed 3.6/32 counter so the aperture survives 16px.Optical correction, documented.
Stem-to-underline gapStem sat on the underline, merging into one blob at favicon size.A constant 1.6/32 clear gap is enforced between the stem foot and the underline.Optical correction, documented.
Tiny variant (≤20px)Not defined.Dedicated tiny cutdown: shortened stem, larger counter, straight full-width underline bar. Used for favicon 16/20px only.New responsive variant, not a redraw.

05

Wordmark and lockups

Bobby TranslateHorizontal
Bobby TranslateStacked
Bobby TranslateWordmark only
Bobby TranslateYour website, understood everywhere.Dark + tagline

06

Colour

Cool mist fields, deep navy ink, one indigo primary accent and one cyan signal accent — the Candidate 2 Signal territory adopted under DECISION-B. No lilac gradients, no generic SaaS green.

Signal Mist

--mist · #F4F7FC

Default background on the public site, /account and /console.

Signal Cloud

--cloud · #E4ECFA

Alternating sections, hero field, sidebars, footers.

Signal Navy

--navy · #101B33

All body and heading text; inverted sections; mark letterform.

Signal Navy Deep

--navy-deep · #070E1F

App icon field, presentation covers, vehicle branding.

Signal Indigo

--indigo · #2F3BC4

Underline motif on light fields, primary buttons, focus ring, links.

Signal Indigo Deep

--indigo-deep · #212A93

Hover/active state, small indigo text, print-safe indigo.

Signal Cyan

--cyan · #16B6E0

Underline on navy, charts, product artwork. Never small text on light.

Signal Cyan Deep

--cyan-deep · #0A6E8C

Secondary buttons, machine-translation states, links on light.

Signal Cyan Ink

--cyan-ink · #08536B

High-contrast cyan text, cyan surfaces headers.

Signal White

--signal-white · #F7FAFF

Foreground on Navy, Indigo, Cyan Deep.

Raised Surface

--raised · #FFFFFF

Cards, floating product layers, modals, popovers.

Sunken Surface

--sunken · #DDE6F6

Inputs at rest, table zebra, code and diff wells.

Muted Text

--muted-foreground · #55627D

Supporting copy, captions, table meta.

Border

--border · #D5DFF0

Dividers, card borders, table rules. Never for text.

Success

--success · #0F7A55

Approved and published states.

Warning

--warning · #8A5A0B

Needs review, outdated source.

Danger

--danger · #B3261E

Blocked, destructive actions, import conflicts.

Information

--info · #1D6A96

Machine suggestions, neutral system notices.

Focus ring

--ring · #2F3BC4

2px outline, 2px offset, on every interactive element.

Disabled

--disabled · #93A0B8

Disabled control text and borders only. Never body text.

Legacy Coral

--legacy-coral · #C24328

Historical Candidate 3 accent. Campaign and archive use only; never competes with indigo or cyan.

Tints

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

6%
12%
25%
45%
6%
12%
25%
45%

Semantic colours are fixed

Success, Warning, Danger and Information never take a brand colour and are never used decoratively.

  • Success#0F7A55
  • Warning#8A5A0B
  • Danger#B3261E
  • Information#1D6A96

07

Contrast matrix

Measured with the WCAG 2.1 relative-luminance formula, in the browser, for the pairs the product actually ships.

PairForegroundBackgroundRatioVerdictUsed for
Body text#101B33#F4F7FC15.94:1AAAAll body copy
Body on cloud#101B33#E4ECFA14.41:1AAAAlternating sections
Body on raised#101B33#FFFFFF17.12:1AAACards and panels
Muted text#55627D#F4F7FC5.70:1AASupporting copy
Muted on cloud#55627D#E4ECFA5.15:1AACaptions in cloud fields
Link (indigo)#2F3BC4#F4F7FC7.69:1AAAInline links
Link hover (indigo deep)#212A93#F4F7FC10.76:1AAAHover and active
Primary button#F7FAFF#2F3BC47.89:1AAAStart translating
Secondary button#F7FAFF#0A6E8C5.54:1AACyan actions
Cyan text (interface)#08536B#F4F7FC7.95:1AAACyan text on light
Cyan on navy#16B6E0#101B337.18:1AAAUnderline and graphics on dark fields
Inverted section#F7FAFF#101B3316.36:1AAADark editorial bands
Success text#0F7A55#F4F7FC4.97:1AAApproved / published
Warning text#8A5A0B#F4F7FC5.51:1AANeeds review
Danger text#B3261E#F4F7FC6.09:1AABlocked / conflict
Information text#1D6A96#F4F7FC5.50:1AAMachine suggestion
Focus ring#2F3BC4#F4F7FC7.69:1AAANon-text contrast, needs 3:1
Disabled text#93A0B8#F4F7FC2.46:1Exempt (disabled)Disabled controls only (WCAG exempt)

Every colour against every field

ColourOn MistOn CloudOn RaisedOn Navy
Signal Mist1.00:11.11:11.07:115.94:1
Signal Cloud1.11:11.00:11.19:114.41:1
Signal Navy15.94:114.41:117.12:11.00:1
Signal Navy Deep17.91:116.19:119.24:11.12:1
Signal Indigo7.69:16.95:18.26:12.07:1
Signal Indigo Deep10.76:19.73:111.56:11.48:1
Signal Cyan2.22:12.01:12.39:17.18:1
Signal Cyan Deep5.40:14.88:15.80:12.95:1
Signal Cyan Ink7.95:17.19:18.54:12.01:1
Signal White1.03:11.14:11.05:116.36:1
Raised Surface1.07:11.19:11.00:117.12:1
Sunken Surface1.17:11.06:11.26:113.63:1
Muted Text5.70:15.15:16.12:12.80:1
Border1.25:11.13:11.34:112.75:1
Success4.97:14.49:15.34:13.21:1
Warning5.51:14.98:15.92:12.89:1
Danger6.09:15.50:16.54:12.62:1
Information5.50:14.97:15.91:12.90:1
Focus ring7.69:16.95:18.26:12.07:1
Disabled2.46:12.22:12.64:16.49:1
Legacy Coral4.74:14.28:15.09:13.36:1

Rules that follow from the matrix

  • Indigo #2F3BC4 is used for links and actions; Indigo Deep #212A93 for hover and dense text. Cyan #16B6E0 is never used for text on light — Cyan Ink #08536B is.
  • Border #E7D9C9 is never a text colour.
  • Disabled #A99589 is only ever a disabled-control colour, which WCAG exempts.
  • The focus ring is Indigo, 2px, with 2px offset, on every interactive element.

08

Typography and type scale

Display

Understood

Bricolage Grotesque

Text

Preview before publishing

Instrument Sans

Mono

nl-NL · {count}

IBM Plex Mono

NameSizeFamilyWeightUse
Display XLclamp(2.75rem, 6.5vw, 5.25rem)Bricolage Grotesque600Hero headline
Display Lclamp(2rem, 4vw, 3.25rem)Bricolage Grotesque600Section headline
Heading M1.5remBricolage Grotesque600Card and panel titles
Heading S1.125remBricolage Grotesque600Sub-headings
Body L1.125remInstrument Sans400Lede paragraphs
Body1remInstrument Sans400Default copy
Body S0.875remInstrument Sans400Dense UI, tables
Mono0.75remIBM Plex Mono400Keys, locales, placeholders, hashes
Eyebrow0.6875remIBM Plex Mono500Uppercase section labels

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, and no country flags — ever, for any language.

09

The underline motif

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

Contact us before Friday to receive the discount.

One marked phrase per view. Never a decorated heading.

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 (light fields) or Cyan (dark fields)

10

Translation-state visuals

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

StateTokenHexVisual
Missing / pending--state-missing#6D7B95Dotted hairline, no underline
Draft / in progress--state-draft#55627DSolid hairline
Machine suggested--state-machine#1D6A96Cyan dashed underline
Second opinion--info#1D6A96Two stacked cyan rules
Human translation--state-human#212A93Solid indigo underline
In review--state-review#8A5A0BAmber underline, hollow dot
Approved--state-approved#0F7A55Indigo marker underline + check
Published--state-published#0B5D41Indigo marker underline, filled dot
Outdated source--state-outdated#9A5B0DUnderline with a break
Rejected / blocked--state-blocked#B3261EStruck-through rule

Emoji and Unicode identifier

For plain-text contexts where the mark cannot render — commit messages, chat, release notes.

✍️ · U+2581 ▁ LOWER ONE EIGHTH BLOCK

11

Tone of voice

Principles

  • 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 used as language identifiers
  • "Native quality" as a machine-translation claim

Social bios

80 — Your website, understood everywhere. Translate every page, button and SEO field.

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.”
  2. “A machine translation is a suggestion. An approved translation is a decision.”
  3. “Import a ZIP. See exactly what will change. Write nothing until you say so.”

12

Correct usage and misuse

Correct

  • Mark on Mist, Cloud, Raised 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; Cyan for the motif on dark fields.

Misuse

  • Stretching, curving, rotating or gradienting the underline.
  • Recolouring the mark outside the published variants.
  • Placing the mark on photography without a solid field behind it.
  • Setting the wordmark in any face other than Bricolage Grotesque.
  • Adding a third accent beside Indigo and Cyan.

13

Applications

Open Graph 1200×630
Open Graph 1200×630
Social cover 1500×500
Social cover 1500×500
Business card, front
Business card, front
Business card, back
Business card, back
Presentation cover
Presentation cover
Letterhead A4
Letterhead A4
Avatar 400px
Avatar 400px
Sticker 80mm
Sticker 80mm
ApplicationSpecificationStatus
Favicon16 / 32 / 48px PNG + SVG, tiny cutdown, indigo underline on papergenerated
App icon512px rounded square, navy field, indigo underlinegenerated
Avatar400px circle, cloud field, master markgenerated
Open Graph1200×630, cloud field, stacked lockup + taglinegenerated
Social cover1500×500, navy field, horizontal lockupgenerated
Email logo240px wide PNG horizontal lockup on signal whitegenerated
Email signatureHTML block, Instrument Sans fallback to Arialgenerated
Invoice / document logoMonochrome navy horizontal lockup, 40mmgenerated
Business card85×55mm, cloud front, navy backgenerated
LetterheadA4, mark top-left, indigo rule at 24mmgenerated
Presentation cover1920×1080, navy field, oversized underlinegenerated
StickerDie-cut underline + wordmark, 80mmgenerated
MerchandiseSingle-colour navy or signal-white print, mark onlyspecified
SignHorizontal lockup, minimum 320mm wide, indigo underline in vinylspecified
Window stickerReverse-cut signal white on glass, underline cyan vinylspecified
Vehicle brandingDoor lockup 400mm, underline extended as body stripespecified

Specified, not produced

Merchandise, signs, window stickers and vehicle branding are specified in this book but no production artwork is generated in this phase.

14

Downloads, asset registry and SHA-256 hashes

Asset pack 1.1.0 · brand book 1.1.0 · generated 2026-08-25T16:18:40+00:00 · 82 registered files.

bobby-translate-brand-complete.zip

Everything: marks, social, print, favicons, email, brand book

840 KB

1b524fb83262a5bd300ebfa83d4f5211b14008914f2d474e3a17d937a3a7ec61

Download

bobby-translate-logos.zip

Marks, lockups, wordmarks, favicons and app icons

331 KB

3852bc8f02f7e983064342698eee03d19f048053d49dab350a1fdc361c4fcb37

Download

bobby-translate-social.zip

Open Graph, covers, avatars and email assets

248 KB

f77ceed0058c629382cebbe797b25fbe22c6e1f4077540145e313525c5ba97eb

Download

Brand book

Email signature

Copy-ready HTML block with an Instrument Sans → Arial fallback.

/brand/email-signature.html
Full asset registry — 79 files with SHA-256 hashes

Favicons & app icons

Brand book

Email

Logos & marks

Other

Print & stationery

Social & Open Graph

15

Phase 1B completion status

Phase 1B brand finalization is complete against the published checklist. Nothing beyond brand finalization is authorized.

RequirementStateEvidence
Canonical assets existdone82 files generated from one pipeline
Live /brand agrees with the assetsdoneBoth render from @/lib/brand and the generated registry
Small-size rendering verifieddone96→16px ladder rendered and inspected at actual size
Contrast testeddone18 shipped pairs measured, all pass or are WCAG-exempt
Homepage rebuiltdoneNew expressive Underline composition, nine sections
Desktop and mobile verifieddoneRendered and inspected at 1280px and 390px
Downloads workdoneThree ZIP bundles plus every individual file served from /brand
Markdown and PDF brand books generateddone/brand/brand-book.md and /brand/brand-book.pdf
SHA-256 hashes recordeddone/brand/asset-registry.json, mirrored into the app
Typecheck, tests and production build passdoneVerified in the delivery run

Still not operational

No authentication, Google sign-in, translation provider, subscription billing, Bobby Credits, human-translator payment, Bobby CMS connection, API or MCP endpoint is connected. Every product surface shown on this site is a designed, non-operational shell.