# Timberlea Consulting — Brand Guidelines

**Version 2.0 · May 2026**
**Single canonical reference · Supersedes v1.0 (April 2026) and consolidates `brand-v2-foundation.md`, `brand-v2-hero-cta.md`, `brand-voice-cta-audit.md`, `brand-v2-verification-report.md`.**

This document is the source of truth for the Timberlea Consulting brand. It covers everything from how we write a tweet to how we pick a primary button color in a SaaS product we ship three years from now. If you're building anything that represents us — a webpage, an app, a LinkedIn post, a proposal deck, a business card, a Slack bot — start here.

When in doubt, re-read Section 2 (Foundation) and Section 3 (Voice). Those two sections tell you who we are. Everything else tells you how to make things look and feel like us.

The HTML version of this brand bible (`timberlea-brand-guidelines.html`) is a human-readable display rendering of this document. This markdown file is the canonical source — agents, version control, and humans should refer to this one first.

---

## Table of Contents

1. [Who this is for](#1-who-this-is-for)
2. [Brand foundation](#2-brand-foundation)
3. [Voice & tone](#3-voice--tone)
4. [Wordmark & logo](#4-wordmark--logo)
5. [Color system](#5-color-system)
6. [Typography](#6-typography)
7. [Layout & spacing](#7-layout--spacing)
8. [Component tokens](#8-component-tokens)
9. [Application — web](#9-application--web)
10. [Application — software UI and SaaS products](#10-application--software-ui-and-saas-products)
11. [Application — marketing and social](#11-application--marketing-and-social)
12. [Application — print](#12-application--print)
13. [Imagery & photography](#13-imagery--photography)
14. [Microcopy & UX writing — the locked CTA system](#14-microcopy--ux-writing--the-locked-cta-system)
15. [Developer & AI-agent notes](#15-developer--ai-agent-notes)
16. [Governance](#16-governance)

---

## 1. Who this is for

This guideline is written for five audiences, in descending order of frequency:

- **Us.** Anyone on the Timberlea Consulting team who's writing, designing, or shipping something that carries our name. This is the daily reference.
- **Contractors and freelancers.** Designers, writers, or developers we bring in for a specific project. Hand them this document up front and the whole working relationship compresses by 30%.
- **Our partners.** When a partner wants to understand why we made a certain choice — why this color, why this voice, why this typeface — this is the explanation.
- **AI agents building on our behalf.** Claude, Cursor, and any future systems we use to produce work at scale need a machine-readable brand. This doc is written in markdown partly so agents can parse it cleanly.
- **Future Timberlea Consulting.** In two years when we've grown, when we have a SaaS product in market, when we have a team of seven, we should still be recognizable. This is the anchor.

---

## 2. Brand foundation

### 2.1 Why we exist

> **We help our partners do the things that inspire them.**

That's the line Sree has used to describe his work for years. Timberlea Consulting is the structure built around it. The "partners" are Canadian small and mid-sized businesses. The "things that inspire them" are almost never their technology — they're their customers, their patients, their craft, their teams, the reason they started the business in the first place. Our job is to make the technology recede so they can spend their time on the work that called them.

**Three why-statements, three audiences:**

- **Why — public face (homepage, About, LinkedIn):** *We help our partners do the things that inspire them.*
- **Why — sales/positioning (Services hero, proposals, sales decks):* *Enterprise technology decisions belong to small businesses too. We close that gap.*
- **Why — internal compass (proposal letters, "how we work" copy):** *Technology should give people more time and energy for the things they care about — not less.*

### 2.2 What we are

Timberlea Consulting is a **dual-track consultancy based in Halifax, Nova Scotia**. We do two things for Canadian small and mid-sized businesses:

1. **IT consulting** — practical advice and hands-on work on the systems, tools, and technology a business runs on. Think *Tech Advice on Retainer* (vCIO-on-retainer), AI starter plans, AI workflow review and build, Microsoft 365 automation plans, GitHub-Copilot-and-security setups for software teams, AI-search visibility, IT-process design.
2. **Website design and build** — fast, modern, accessible websites that turn visitors into customers. Three packages (Basic, Standard, Premier) plus Maintenance & Growth, Hosting & Domain Care, and Launch Content & Messaging add-ons.

The two tracks share a partner (the SMB owner or operator) and a core promise: **"You hire the founder. Not a firm."** Serious craft, plain English, people who answer the phone.

### 2.3 Positioning

Public homepage hero (unlocked from v2.1 on 2026-05-26 — see § 9.1):

> **AI, websites, and the tech help your business doesn't have *time* for.**

Founder tagline (small italic line directly under the H1, also opens the About page):

> *"I help my partners do the things that inspire them." — Sree*

Public homepage subhead:

> *For Canadian small and mid-sized businesses. Twenty years building technology for the government, BlackBerry, and banks. No junior staff — you work with me directly.*

Alternative tagline (for Web Design hero, campaign-level use, or where the audience expects a single-line promise):

> **Modern IT and web design, run by people who answer the phone.**

### 2.4 Who we're for

Our best-fit partner is:

- **Revenue:** ~$500K to $20M
- **Headcount:** **1 to 150** (this includes solopreneurs and micro-businesses — they're often the most underserved by big-firm consulting)
- Based in or near Atlantic Canada, but we serve Canada-wide
- Usually has no in-house IT person, or has one who's overloaded
- Has been burned by at least one agency or MSP before
- Values clarity over jargon, continuity over trend-chasing, and relationships over transactions

We're not for: venture-backed startups chasing hockey-stick growth, enterprises with a procurement department, or companies whose primary buying criterion is "cheapest."

### 2.5 Values — the six C's

> **Craft. Clarity. Commitment. Canadian. Care. Candour.**

**Craft.** We sweat the 5% nobody asks for. The tile that lines up. The button label that took twenty minutes. The work that still looks right in three years.

**Clarity.** No jargon. No "circle back." Plain English is the way we respect your time.

**Commitment.** Small-shop energy at any scale. We pick up the phone. We remember your dog's name. We finish what we start, on the day we said.

**Canadian.** Halifax is home. Atlantic Canada is the backyard. We work coast-to-coast in **Canadian dollars** (no exchange-rate surprises), with **Canadian data residency awareness**, **Canadian privacy and compliance context** (PIPEDA, provincial laws like Quebec's Law 25), and **Canadian SMB economics**. The technology questions don't change at provincial borders — but the regulatory, financial, and accountability context does. Local in-country, accountable in-country.

**Care.** We work with non-profits and community groups through a **capacity-bound program** — one reduced-fee or free project slot reserved per quarter. We pay attention to the people in the work — yours and ours. Outside the paid work we volunteer in our communities, but we'd rather live the ethic than list it. Giving back is structural here, not seasonal — and bounded enough to be sustainable.

**Candour.** We tell you when something isn't your strength. We tell you when something isn't ours. We tell you when the right answer is "wait" or "hire someone else for this part." Honesty is what makes the other five values worth anything.

### 2.6 Brand personality — Sree Roy

If Timberlea Consulting were a person, that person is Sree Roy. The persona is written in his own voice because — for now — Timberlea Consulting *is* him.

> *"I help my partners do the things that inspire them."*
>
> I've been describing my work that way for years. Timberlea Consulting is the structure I finally built around it.
>
> Twenty years building technology for places where it had to actually work — the federal government, BlackBerry, and banks. AI shipped into a 20,000-person workforce. Microsoft 365 Copilot rolled out to 500 users. GitHub Advanced Security and Copilot across a 100-developer organization. The judgment that comes from shipping things and living with the consequences — not from reading about them.
>
> Outside the paid work, I'm a parent who coaches his kids' soccer team, a community member of the IWK Health Children's Hospital Research Ethics Board, and earlier in my life a Big Brother through Big Brothers Big Sisters. Halifax-based.
>
> If a Timberlea Consulting email or page reads like a person trying to be useful, the voice is working. If it reads like an agency pitch, please tell me.
>
> — Sree

**Note for future growth:** "Timberlea Consulting is currently Sree" is honest and accurate. If a colleague is brought in down the road, the first-person voice may shift to a "we" that includes the original "I," or a separate Founder's Note may stand alongside a broader Practice description. The persona expands — it doesn't replace.

**Aspires to:** grounded · precise · warm · durable · quietly confident · curious · practical

**Actively avoids:** disruptive · cutting-edge · synergistic · world-class · game-changing · ninja · rockstar · 10x

### 2.7 On working with non-profits and community groups

We reserve **one reduced-fee or free project slot per quarter** for a non-profit or community group. The principle is simple: generosity that's bounded enough to be sustainable, and explicit enough to be honored. If a non-profit's budget doesn't fit our advertised pricing, we ask them to tell us what they're trying to do — if a quarterly slot is open, we work it out together. If the slot is taken, we recommend the smallest useful scope that fits, or point them to a community resource that does.

It aligns with our Care value and with the volunteer ethic Sree carries into every other part of his life. It is not a marketing tactic. The bounded program protects capacity, dignity, and clarity — for the non-profit and for us. We let the work speak for itself.

**The NGO welcome line — three approved variants** (use as appropriate to surface size):

- **Tight** (narrow card slots — Maintenance & Growth price row, Hosting & Domain Care price row, Services catch-all card):
  > *Run a non-profit or community group? One slot reserved per quarter — reach out.*

- **Standard** (most service blocks — Services Q-cards, FAQ-17, Web Design Basic/Standard/Premier package cards, Warm CTA on home, Launch content & messaging add-on):
  > *Run a non-profit or community group? We reserve one reduced-fee or free slot per quarter — tell us what you are working on.*

- **Long** (Contact page hero):
  > *Run a non-profit or community group? We reserve one reduced-fee or free slot per quarter for community work. If your budget doesn't fit our pricing, tell us what you are working on — we'll either fit you in this quarter or recommend the smallest useful scope that does.*

---

## 3. Voice & tone

The voice is **warm expert.** Think of a tradesperson explaining the work to a neighbour — someone who's been doing this a long time and cares how it turns out. They explain what they're doing and why. They tell you when you're about to make a mistake. They won't talk down to you and they won't puff themselves up. They have nothing to prove and a lot to deliver.

### 3.1 Eight core principles

1. **Plain language, always.** If a ten-year-old couldn't follow the sentence, rewrite it. This is not dumbing down — it's respecting the reader's time. (See the *cupcake-shop test* in § 3.5.)
2. **Specific over general.** Not "we boost performance," but "we got a 4.2-second page load down to 0.9s."
3. **Short sentences earn long ones.** A paragraph of crisp, short sentences gives a long sentence room to breathe and do work.
4. **Warm, not performative.** Contractions: yes. Exclamation marks and emoji-as-punctuation: no.
5. **Confidence without arrogance.** State what you know. Acknowledge what you don't. "We haven't worked in that industry before, but the underlying pattern is familiar" is better than pretending or apologizing.
6. **Honest about limits.** Tell the partner when something isn't your strength. Name who you'd refer them to instead. Trust compounds when you protect the partner from yourself.
7. **Generous as a default.** The free 30 minutes. The lead magnet. The NGO carve-out. The answer to a stranger's question. These aren't tactics — they're how we operate.
8. **Earn the maritime reference.** One per long-form piece. Two is over-rotated. Three is parody. (Visuals are unrestricted — the rule applies to copy only.)

### 3.2 The cupcake-shop test

The audience benchmark, set 2026-05-26 during the wireframe content audit:

> A "cupcake-shop owner" stands in for any small-business operator who runs a real business (cupcakes, accounting, a clinic, a yoga studio, a landscaping crew, a small law firm), uses Word/Gmail/Square (or Shopify/Squarespace), has *heard of* AI from the news but has never written a prompt, and has never said the words "vCIO," "Power Platform," "tenant," "FTE," "SOC 2," or "Shadow AI" out loud. They'll read three sentences before deciding whether we're worth a phone call.

A line **fails** the cupcake-shop test if the reader either:
1. Encounters a word they'd have to Google to understand, OR
2. Encounters a sentence whose meaning is wrong on first read (e.g., "shipping technology" → ships and trucks), OR
3. Stacks up so many technical-feeling words in one paragraph that they conclude "this isn't for me."

A line is **borderline** if the word is technical but the surrounding sentence does the explaining for them. The gold-standard inline pattern is *"Automatic security (the green padlock) — renewed automatically"* — name the technical term, define it in parens, move on.

### 3.3 Words we use

Yes to: **we, you, help, build, rebuild, ship, run, fix, measure, practical, plain, grounded, durable, quiet, careful, over time, in the long run, from here, from the ground up, worth doing right.**

Yes, carefully: **modern, serious, confident, rooted, honest, real** (earn these with specifics).

### 3.4 Words we don't use — the consolidated kill list

**Agency jargon:**
disruptive · cutting-edge · transformative · revolutionary · synergy · synergistic · leverage (as a verb) · best-in-class · world-class · enterprise-grade · game-changing · rockstar · ninja · guru · 10x · unlock · supercharge · empower · seamless · holistic · turnkey · next-gen · low-hanging fruit · move the needle · at the end of the day · absolutely · solutions (as a stand-in noun) · AI-powered

**"Senior"** — when describing Timberlea Consulting's judgment, expertise, insight, billing, rate, or work — use *practitioner*, *working*, *careful*, *real-world*, or a concrete time anchor like *"twenty years"* instead. Sree's day-job title at Health Canada is "Senior Technical Advisor" — that's a fact, not a brand descriptor.

**CTAs we don't use:**
Click here · Learn more (without a verb-and-object suffix) · Submit · OK · Get in touch (too vague — pick a specific verb) · Get started (mismatched with action) · Contact us (default, no verb-with-context)

**IT / AI / Microsoft-product jargon — handle with the inline-gloss pattern.** Per the 2026-05-26 wireframe audit, the following terms either get a plain-English replacement or an inline parenthetical definition the first time they appear on a page:

| Replace | With |
|---|---|
| Shipping technology / shipped (tech sense) | Building / launching / delivering |
| Production (AI/system sense) | Used live / used every day / in live use |
| Tenant (Microsoft) | Private Microsoft 365 workspace |
| Rollout | Launch |
| Onboarded | Trained / set up |
| Implement / implementation | Build / do the work |
| Engagement (consulting sense) | Project / service / arrangement |
| Advisory (as a noun) | Advice |
| Practice (consulting business) | Shop / business |
| Track (as in "two tracks") | Service / side of the business / kind of work |
| Stack | Set of tools |
| Platform (as in "the platform doesn't work") | Tool |
| Governance | Rules / oversight / guardrails |
| Scope / scoped | Plan / planned |
| Scope creep | Surprise add-ons |
| Vendor-neutral | Not tied to any vendor / no kickbacks |
| Production builds | Live, ready-to-use builds |
| Operational | Everyday / real-world |
| Triage (inbox sense) | Sorting / quick first review |
| Pipeline | Step-by-step process |
| End-to-end | Start to finish |
| Conversion-optimized | Designed to turn visitors into customers |
| Visibility (SEO sense) | Search ranking / getting found |
| Positioning | Messaging |
| Pillar article | Cornerstone blog post |
| Lead capture forms | Sign-up forms |
| Big Four / Big 4 firm | Big consulting firm |
| Enterprise technology / enterprise IT | Big-company technology |
| Enterprise craft | Big-company tech work |
| Practitioner judgement | Real-world judgment |
| Founder-delivered | No junior staff — you work with me directly |
| Cyber hygiene | Cybersecurity basics |
| Change management | Helping your team adopt new tools |
| Tribal knowledge | Knowledge that only lives in one person's head |
| Estate (of automations) | Set of automations |
| Runbook | "What to do when it breaks" guide |
| Go-live | Launch / launch day |
| Silos | Separate boxes / separate systems |
| Infrastructure | Tech systems / other tech systems |
| Self-assessment | Checklist |
| Front door (entry-point service) | First step |
| Roadmap | Plan |
| Prioritized roadmap | Plan with priorities |
| FTE / FTE-equivalent | The work of [X] full-time employees |
| CRM | Customer database / customer list |
| RPA | Automation |
| DDoS | Large cyberattack |
| SOC 2 / ISO 27001 | (keep + brief inline definition: "the standards called SOC 2 or ISO 27001") |
| PIPEDA | Canadian privacy law (PIPEDA) |
| NGO | Community group |
| Pro-bono | Free |
| MSP / Managed Services Provider | Managed IT-support company |
| AP clerk | Bill-paying clerk |
| IP (intellectual property in legal context) | Business secrets (consumer context) / IP (intellectual property — who owns it) (inline gloss in legal context) |
| SDLC | Software-development practices |
| ITSM | IT operations / IT-process |
| CIO | Tech chief |
| vCIO / Fractional vCIO | (see service rename in § 14) |
| Ad-hoc / DIY IT | DIY tech |
| Telecom | Phone companies (general) — or "BlackBerry" if naming Sree's specific employer |

**The kill list is enforced** by the `timberlea-tone-check.skill` scanner. If a phrase reads like it could go on a Big Four pitch deck unchanged, it goes in the kill list, not on a Timberlea Consulting surface.

### 3.5 Tone checklist v2.0 — the six checks

Run every piece of copy through these six checks before shipping:

1. **Would a small-business owner in Halifax understand this on a first read?** (The cupcake-shop test.)
2. Is there a number, a specific noun, or a concrete observation in the sentence — or only adjectives?
3. Did I use any word on the kill list?
4. Is there one — and only one — italic word per heading? (Hero H1, page H1s, and major H2s only.)
5. Would a tradesperson explaining the work to a neighbour say this — or does it read like a pitch deck?
6. **(Values-admiration check.)** Would this reflect the values we admire — purpose, generosity, honesty, hospitality? At least **two of those four** should land. If none do, the copy is craft-confident but values-empty — rewrite.

### 3.6 Voice by channel

Every channel has different constraints — length, formality, audience expectations — but the voice stays the same. Tone adjusts.

#### Website copy

Longer sentences are fine. The reader chose to be here. Sections can have a little breath. Show the work.

> **Example hero H1 (current home page):** AI, websites, and the tech help your business doesn't have *time* for.
>
> **Example subhead:** For Canadian small and mid-sized businesses. Twenty years building technology for the government, BlackBerry, and banks. No junior staff — you work with me directly.
>
> **Example CTA:** Book a free 30-min call.

#### LinkedIn posts

Open with a concrete observation or number. First two lines matter most (LinkedIn truncates). No emoji walls. No hashtag soup — one or two hashtags, placed at the end.

> **Example opener:** Most Halifax small-business owners I talk to are paying 3× what they should for hosting — and don't know it. Here's what's usually happening behind the scenes:
> [body of the post walks through the pattern, with specifics]

#### Twitter / X

Use when we have something short and concrete to say. Don't thread-spam. Threads are fine if there's a genuine multi-step argument, but the bar for "is this worth a thread" is high.

> **Example:** Rebuilt a partner's booking flow this week. Old flow: 4 screens, 3.8s total load. New flow: 1 screen, 0.6s. Booking completion: 3% → 7.5%. Same copy, same prices. Most of the fix was about *not* doing things.

#### Facebook

Use for local / community-oriented posts. Events, Halifax-specific content, partner stories (with permission). Slightly warmer than LinkedIn.

#### TikTok / short video

Talking-head or screen-record. Open with the specific thing you're about to show ("Here's how we cut this page load from 8s to 1s in 20 minutes"). Don't use trending audio unless it actually serves the point. Subtitle every video.

#### Support email / in-product

Warmer and quicker than other channels. It's fine to use the partner's first name, to say "caught your ticket," to start with "Hey" instead of "Hi" when the relationship warrants it.

> Hey Sarah — caught your ticket from this morning. Two quick things before I dig in: (1) can you confirm you're seeing this on mobile or desktop? (2) when did it start? If this weekend, I already have a suspicion. — Sree

#### Cold outreach

Personal, specific, short. No "I hope this finds you well." Mention one real thing about their business. Offer something, don't ask for a call.

> Hi James — I help run an IT and web design shop out of Halifax. Noticed your site's taking about 8s to load on mobile, mostly from an unoptimized hero image. Thought you'd want to know. Fix would take about 30 minutes if you'd like me to send over the specifics. No sales pitch — just a heads-up from another Canadian business. — Sree

#### Sales deck / proposal

Structured but never dry. Lead with the problem and the finding, not the company boilerplate. Specifics over adjectives.

#### Product UI / SaaS onboarding

See Section 14 (Microcopy). Short, warm, human. Say what just happened and what to do next. Never hide behind passive voice.

### 3.7 Partners, not clients

Use **"partners"** for Timberlea Consulting's relationships with the businesses we work with. Replace "client(s)" everywhere it refers to a Timberlea Consulting relationship.

**Exception:** keep whatever vocabulary the partner uses for *their* own customers — a law firm has clients; a clinic has patients; a co-op has members; a retailer has customers. We don't impose Timberlea Consulting vocabulary on them.

### 3.8 Always use the full company name

**"Timberlea Consulting."** Never shorten to "Timberlea" alone in any brand artifact, page copy, social post, proposal, or chat. The only sanctioned exception is the geographic reference *"Timberlea, Nova Scotia"* or *"the Timberlea neighbourhood"* — these refer to the place, not the company. The wordmark *"Timberlea Consulting."* with the teal period is full-name + brand mark; the period does not substitute for the word "Consulting." File-system paths (e.g., `Timberlea_Consulting/`, `timberlea/`) are technical identifiers, not brand references.

### 3.9 Don't name role models in client-facing brand artifacts

The role models who inspired the values (Sinek, Grant, Brown, Guidara) belong in private memory (`~/spaces/.../memory/user_values.md`), not in the brand bible, the website, or any external surface. Refer to "the values we admire" or paraphrase the underlying value (purpose, generosity, honesty, hospitality).

### 3.10 Spelling convention — US English

Use US spelling site-wide and in all marketing/brand artifacts. "Organization" not "organisation," "specialized" not "specialised," "judgment" not "judgement," "cataloging" not "cataloguing," "finalize" not "finalise," etc. (Set 2026-05-27.)

---

## 4. Wordmark & logo

The current wordmark is a typographic treatment — **TIMBERLEA** with the final A drawn as an evergreen pine, over **CONSULTING**. A separate **TC monogram** is used in compact contexts (favicons, social avatars, nav icons).

### 4.1 The hidden idea

Look at the wordmark. The final letter of TIMBERLEA isn't an A — it's a small evergreen pine. The name *Timberlea* literally means *timber + lea* — a woodland meadow. The tree is the name, drawn into the typography. FedEx-arrow cleverness, executed quietly.

### 4.2 Color on surface

- **On warm sand / plain white:** deep teal `#1A6B5C`
- **On midnight coastal / deep navy:** bright teal `#25C9B0`
- **Single-ink discipline:** never two colors, never a gradient on the mark, never any color outside this matrix.

### 4.3 Clear space & sizing

- **Full logo:** minimum clear space equals the cap height of the "T" on all sides. Minimum size 80px / 25mm wide.
- **Monogram:** minimum clear space equals the height of the C on all sides. Minimum size 16px (favicon), 24px in app contexts.
- Below 80px width, swap the full logo for the monogram.

### 4.4 Source files

- **Original Gemini exports** (hardcoded teal): `assets/brand/Logo/Timberlea_Brand_SVGs/Timberlea_Full_Logo_Vector.svg` and `Timberlea_Monogram_Vector.svg`
- **currentColor variants** (CSS-driven ink — preferred for web): same folder, suffixed `_currentColor.svg`. These are what the live wireframe and the brand bible HTML use.

### 4.5 Don'ts

Do **not**:

- Stretch, skew, or rotate the mark
- Recolor outside the deep / bright teal matrix
- Apply gradients, shadows, glows, or 3D effects
- Place the mark inside a container (box, shield, circle, badge)
- Reconstruct the wordmark in another typeface
- Modify the hidden pine in the A — it is the mark's signature

---

## 5. Color system

Timberlea Consulting runs a **two-mode color system**: **Coastal** (light) and **Midnight Coastal** (dark). Both are first-class. Neither is "the main one with the other as an afterthought." The site, the products, the marketing all support a user-controlled toggle plus respect for `prefers-color-scheme`.

The colors are **ocean metaphors in two states** — daylight on the harbour vs. bioluminescence at night. The light mode is warm, paper-cream, with a deep teal-green accent pulled from Atlantic kelp and spruce. The dark mode is a cool abyssal navy with a bright bioluminescent teal and seafoam highlight.

### 5.1 Coastal (light mode)

| Token | Hex | Purpose |
|---|---|---|
| `bg-primary` | `#F8F4EE` | Page background (warm paper cream) |
| `bg-secondary` | `#EFE9E0` | Section backgrounds, subtle contrast |
| `bg-card` | `#FFFFFF` | Cards, modals, raised surfaces |
| `bg-card-hover` | `#F5F0E8` | Card hover state |
| `accent` | `#1A6B5C` | **Primary accent** — CTAs, links, active states |
| `accent-2` | `#25927E` | Secondary accent — gradients, highlights |
| `accent-glow` | `rgba(26,107,92,0.12)` | Soft tint for hover backgrounds, glows |
| `text-primary` | `#0D0D0D` | Body text, headlines |
| `text-secondary` | `#404040` | Secondary text, descriptions |
| `text-muted` | `#6A7A88` | Captions, metadata, placeholders |
| `border` | `#D8D2C8` | Hairlines, dividers, input borders |
| `hero-bg-start` | `#061E2C` | Hero gradient start (deep harbour) |
| `hero-bg-mid` | `#0C3547` | Hero gradient middle |
| `hero-bg-end` | `#1A6B5C` | Hero gradient end (accent matches) |

**Hero background gradient:**
`linear-gradient(135deg, #061E2C 0%, #0C3547 50%, #1A6B5C 100%)`

### 5.2 Midnight Coastal (dark mode)

| Token | Hex | Purpose |
|---|---|---|
| `bg-primary` | `#02111E` | Page background (abyssal navy) |
| `bg-secondary` | `#061F33` | Section backgrounds |
| `bg-card` | `#0B2B44` | Cards, raised surfaces |
| `bg-card-hover` | `#0F3A58` | Card hover state |
| `accent` | `#25C9B0` | **Primary accent** (bioluminescent teal) |
| `accent-2` | `#7DE8D4` | Secondary accent (seafoam highlight) |
| `accent-glow` | `rgba(37,201,176,0.22)` | Soft glow on dark backgrounds |
| `text-primary` | `#EAF7F3` | Body text, headlines |
| `text-secondary` | `#B8D4CC` | Secondary text |
| `text-muted` | `#7A928C` | Captions, metadata |
| `border` | `#123048` | Dividers, input borders |
| `hero-bg-start` | `#020B14` | Hero gradient start (deeper than bg) |
| `hero-bg-mid` | `#061F33` | Hero gradient middle |
| `hero-bg-end` | `#0D3D4A` | Hero gradient end (teal undertone) |

**Hero background gradient:**
`linear-gradient(135deg, #020B14 0%, #061F33 45%, #0D3D4A 100%)`

### 5.3 Usage ratios

Across any composition, aim for roughly:

- **60% background** — `bg-primary` and `bg-secondary`
- **30% content / surface** — `bg-card`, `text-primary`, `border`
- **10% accent** — `accent`, `accent-2`, `accent-glow`

The accent should feel intentional, never ambient. A page where every other word is in brand-green is a page where nothing stands out.

### 5.4 Accessibility (WCAG)

All combinations shipped must pass **WCAG 2.1 AA** (4.5:1 for normal text, 3:1 for large text and UI components). We aspire to **AAA** (7:1) for primary text where feasible.

**Never** pair `accent` with `accent-2` directly as foreground/background. They're too close in luminance.

**Never** use `text-muted` for UI affordances that a keyboard or screen-reader user needs to find.

### 5.5 Mode-switching rules

- Default to **Coastal (light)** on first visit for marketing surfaces.
- Default to the **user's `prefers-color-scheme`** for product / SaaS surfaces (logged-in users).
- Always expose a visible toggle in the top-right of every screen that supports the system.
- Persist the choice in `localStorage` (key: `timberlea-theme`, values: `coastal` | `midnight-coastal` | `auto`).
- Smooth the transition with a 200ms CSS transition on `background-color` and `color` properties.

### 5.6 Neutral / status colors

| Token | Light | Dark | Use |
|---|---|---|---|
| `success` | `#1A6B5C` | `#25C9B0` | Success states (reuses accent) |
| `warning` | `#C08A3C` | `#E8B560` | Caution, non-blocking warnings |
| `error` | `#B84545` | `#EE8080` | Validation errors, destructive confirmations |
| `info` | `#3A5FA0` | `#7FA0E0` | Informational banners |

---

## 6. Typography

Two typefaces. **Source Serif 4** for display, **Inter** for body. That's it.

### 6.1 Source Serif 4 (display)

Used for: headlines, hero text, page titles, pull quotes, wordmark.

- **Weights used:** 400, 600, 700
- **Italics:** for one-word emphasis inside a headline (the `<em>` treatment)
- **Tracking:** -0.02em at sizes ≥ 32px
- **Fallback stack:** `'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif`

### 6.2 Inter (body)

Used for: body text, UI labels, navigation, buttons, forms, microcopy.

- **Weights used:** 300, 400, 500, 600, 700, 800
- **Tracking:** default at body sizes; +0.05em to +0.15em for all-caps micro-labels
- **Fallback stack:** `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`

### 6.3 Type scale (desktop baseline)

| Name | Size | Line-height | Weight | Family | Use |
|---|---|---|---|---|---|
| Display XL | 72px | 1.05 | 700 | Source Serif 4 | Hero H1 |
| Display L | 56px | 1.08 | 700 | Source Serif 4 | Section titles |
| Display M | 40px | 1.12 | 700 | Source Serif 4 | Sub-section titles |
| H1 | 36px | 1.15 | 700 | Source Serif 4 | Article titles |
| H2 | 28px | 1.25 | 600 | Source Serif 4 | Major headings |
| H3 | 22px | 1.35 | 600 | Source Serif 4 or Inter 700 | Minor headings |
| H4 | 18px | 1.4 | 600 | Inter | Card titles, labels |
| Body L | 18px | 1.65 | 400 | Inter | Hero subheadings, intro paragraphs |
| Body M | 16px | 1.65 | 400 | Inter | Default body text |
| Body S | 14px | 1.6 | 400 | Inter | Secondary text, captions |
| Micro | 12px | 1.5 | 600 (caps) | Inter | Section labels (letter-spacing 2.5px, uppercase) |

Mobile: scale Display and H tokens down to roughly 0.85× of desktop. Body tokens stay the same.

### 6.4 Rules

- **One serif, one sans. Never mix serifs.**
- **Italics for emphasis in display.** Use it for one word or phrase at a time, usually inside an `<em>` tag. Never italicize body paragraphs wholesale.
- **No underlines except for inline links.**
- **All-caps only for micro-labels.** 12px max.
- **Measure (line length) 50-75 characters for body copy.**
- **Paragraph spacing is 1em.** Don't use `<br>` between paragraphs.

### 6.5 Loading

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
```

For product/SaaS where we want to avoid CDN dependency, self-host the subset in WOFF2 format and reference via `@font-face`.

---

## 7. Layout & spacing

### 7.1 Spacing scale (8px base)

```
4  · micro (icon+label gap)
8  · xs   (tight paddings)
16 · s    (default small)
24 · m    (paragraph spacing, card padding)
32 · l    (section inner)
48 · xl   (between related sections)
64 · 2xl  (between major sections)
96 · 3xl  (hero sections, top-of-page breathing room)
128 · 4xl (rare; used in marketing "moment" breaks)
```

### 7.2 Grid

- **Content max-width:** 1200px
- **Article max-width:** 720px (one-column reading view)
- **Columns:** 12-column on desktop, 8 on tablet, 4 on mobile
- **Gutter:** 24px desktop, 16px mobile

### 7.3 Corner radius

```
0px   · full-bleed surfaces
4px   · small UI (inputs, small buttons)
8px   · default (buttons, inputs, small cards)
12px  · cards
16px  · large cards, hero panels
24px  · featured elements
9999px · pills (badges, avatars, round buttons)
```

### 7.4 Elevation (shadows)

Light mode:
```
e1: 0 1px 2px rgba(13, 13, 13, 0.05)
e2: 0 4px 12px rgba(13, 13, 13, 0.08)
e3: 0 12px 32px rgba(13, 13, 13, 0.12)
e4: 0 24px 64px rgba(13, 13, 13, 0.16)
```

Dark mode — barely visible; use a subtle accent glow instead:
```
e1: 0 0 0 1px rgba(37, 201, 176, 0.08)
e2: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(37, 201, 176, 0.1)
e3: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 32px rgba(37, 201, 176, 0.08)
```

---

## 8. Component tokens

### 8.1 Buttons

**Primary:**
- Background: gradient `accent → accent-2`
- Text: `bg-primary`
- Padding: 12px 24px
- Radius: 8px
- Font: Inter 600, 16px
- Hover: slight lift (`translateY(-1px)`), increased shadow

**Secondary:**
- Background: transparent
- Border: 1px solid `border`
- Text: `text-primary`
- Hover: border color → `accent`, text color → `accent`

**Tertiary / ghost:**
- Background: transparent, no border
- Text: `accent`, underline on hover

### 8.2 Cards

- Background: `bg-card`
- Border: 1px solid `border`
- Radius: 12px
- Padding: 32px (desktop) / 24px (mobile)
- Hover (if interactive): border color fades toward `accent`, elevation moves from e1 → e2

### 8.3 Forms

- Input background: `bg-card`
- Input border: 1px solid `border`
- Input padding: 12px 16px
- Input radius: 8px
- Focus: border → `accent`, 2px offset ring `rgba(accent, 0.15)`
- Label: Inter 500, 14px, `text-secondary`, 8px below label
- Help text: Inter 400, 13px, `text-muted`
- Error text: Inter 500, 13px, `error` color

### 8.4 Badges

- Padding: 4px 10px
- Radius: 9999px (pill)
- Font: Inter 600, 12px, +0.5px letter-spacing
- Background: `accent-glow`, color: `accent` for neutral/flagship

### 8.5 Navigation

- Height: 72px desktop, 64px mobile
- Background: `rgba(bg-primary, 0.94)` with `backdrop-filter: blur(12px)` when scrolled
- Link font: Inter 500, 15px
- Active state: underline using `accent`, 2px stroke, 4px below text

### 8.6 Theme toggle

- **Position:** top-right of every screen
- **Icon:** sun (light) / moon (dark)
- **Behavior:** toggles between Coastal and Midnight Coastal; `prefers-color-scheme: auto` available via dropdown
- **Persistence:** `localStorage['timberlea-theme']`
- **Transition:** 200ms `background-color` and `color`

---

## 9. Application — web

The live reference implementation is `timberlea-wireframe.html`. The wireframe content was audited and updated on 2026-05-26 / 2026-05-27 (see `marketing/wireframe-content-audit.md` and `marketing/wireframe-audit-decisions.md`).

### 9.1 Home page hero — locked v2.2 (2026-05-26)

> **Eyebrow:** `IT & web design · Halifax, NS`
>
> **H1:** *AI, websites, and the tech help your business doesn't have **time** for.*
>
> **Founder tagline** (small italic line under H1): *"I help my partners do the things that inspire them." — Sree*
>
> **Subhead:** For Canadian small and mid-sized businesses. Twenty years building technology for the government, BlackBerry, and banks. No junior staff — you work with me directly.
>
> **Primary CTA:** Book a free 30-min call
> **Secondary CTA:** See how we work
>
> **Italic emphasis:** *time* — single word, in accent teal.

**Hero history:**
- v1.0 (April 2026): "Modern IT and web design, run by people who answer the phone." — demoted to alternative tagline in v2.0.
- v2.1 LOCKED (May 2026): "AI, Microsoft, and IT leadership for businesses without an IT department." — unlocked 2026-05-26 because it failed the cupcake-shop test (lots of capital-T Tech jargon).
- v2.2 LOCKED (2026-05-26): current version above. Drops "Microsoft" and "IT leadership" for "websites" and "the tech help your business doesn't have time for." Subhead names BlackBerry directly instead of the more abstract "telecom."

### 9.2 Section patterns

- **Hero:** Display XL headline with one italic word in accent, supporting Body L subhead, founder tagline, one primary CTA, one secondary CTA.
- **Sections:** Every section leads with a Micro label (uppercase, accent color) above a Display M title.
- **Cards:** Use the card token — never freestyle borders or backgrounds.
- **Footer:** Dark (always — even in light mode, the footer stays in the dark palette's background).
- **NGO line:** Standard variant appears under every priced service block. Tight variant in narrow card slots. Long variant on Contact page.

### 9.3 Inline-gloss pattern (gold standard)

When a technical term is unavoidable, name it once with a parenthetical plain-English definition. Modelled on the Hosting & Domain Care line *"Automatic security (the green padlock) — renewed automatically."*

---

## 10. Application — software UI and SaaS products

Future Timberlea Consulting SaaS products inherit this brand. The translation:

### 10.1 Token format (CSS custom properties)

```css
:root {
  /* Coastal (light) — default */
  --bg-primary: #F8F4EE;
  --bg-secondary: #EFE9E0;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F5F0E8;
  --accent: #1A6B5C;
  --accent-2: #25927E;
  --accent-glow: rgba(26, 107, 92, 0.12);
  --text-primary: #0D0D0D;
  --text-secondary: #404040;
  --text-muted: #6A7A88;
  --border: #D8D2C8;
}

[data-theme="midnight-coastal"] {
  --bg-primary: #02111E;
  --bg-secondary: #061F33;
  --bg-card: #0B2B44;
  --bg-card-hover: #0F3A58;
  --accent: #25C9B0;
  --accent-2: #7DE8D4;
  --accent-glow: rgba(37, 201, 176, 0.22);
  --text-primary: #EAF7F3;
  --text-secondary: #B8D4CC;
  --text-muted: #7A928C;
  --border: #123048;
}
```

### 10.2 Tailwind config (excerpt)

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        bg: { primary: 'var(--bg-primary)', secondary: 'var(--bg-secondary)', card: 'var(--bg-card)', 'card-hover': 'var(--bg-card-hover)' },
        accent: { DEFAULT: 'var(--accent)', 2: 'var(--accent-2)', glow: 'var(--accent-glow)' },
        text: { primary: 'var(--text-primary)', secondary: 'var(--text-secondary)', muted: 'var(--text-muted)' },
        border: 'var(--border)',
      },
      fontFamily: {
        display: ['"Source Serif 4"', 'Georgia', 'serif'],
        body: ['Inter', 'system-ui', 'sans-serif'],
      },
      borderRadius: { none: '0', sm: '4px', DEFAULT: '8px', md: '12px', lg: '16px', xl: '24px', full: '9999px' },
    },
  },
};
```

### 10.3 Baseline accessibility

- Keyboard-complete navigation
- Focus-visible styles using the accent ring
- Screen-reader labels on every icon-only button
- `prefers-reduced-motion` respected
- Minimum 44×44px touch targets
- WCAG AA contrast
- Theme toggle exposed in the product chrome

---

## 11. Application — marketing and social

High-level rules:

- **Single visual identity across channels.**
- **Always sign work.** Every graphic, every video, ends with the wordmark.
- **Maritime references earn their keep.** One per piece in copy. Visuals are unrestricted.
- **No stock photos of people pointing at laptops.** (See Section 13.)

### 11.1 Email signature

```
Sree Roy
Timberlea Consulting · Halifax, Nova Scotia
sree@timberleaconsulting.ca · (902) ###-####
timberleaconsulting.ca
```

### 11.2 Case study format

Every case study follows the same spine:

1. **Partner one-line** (who, what business, what size)
2. **The situation** (what was happening before)
3. **What we did** (specific work, with specifics)
4. **The numbers** (before/after, with real data where permitted)
5. **What we learned** (honest reflection — one thing we'd do differently)
6. **Quote from the partner** (if permitted)

---

## 12. Application — print

### 12.1 Business card

- **Front:** Wordmark (centered, ~35mm wide) in primary on light (cream) or knockout on dark (abyssal navy). Tagline below in Inter 400 11pt: "Modern IT and web design, run by people who answer the phone." in `text-secondary`.
- **Back:** Name (Inter 700 14pt), role (Inter 400 11pt text-secondary), email, phone, URL. Accent line (1mm, accent color) across the top-right corner.
- **Stock:** Uncoated, 350gsm minimum.

### 12.2 Letterhead / invoice / proposal

- Wordmark top-left, 28mm wide
- Document title Display M, Source Serif 4
- Body Inter 400 11pt, 1.45 line-height
- Accent used only for: document heading, totals row on invoices, callouts
- Margin: 25mm all sides minimum

### 12.3 Pitch deck

- 16:9 slides
- One idea per slide, big
- Source Serif 4 for slide titles, Inter for body
- Section-break slides use the hero gradient as background with the wordmark bottom-left

---

## 13. Imagery & photography

### 13.1 Direction

The visual tone is **Atlantic, considered, quiet.** Not corporate stock. Not trend-chasing lifestyle.

Yes to:
- Halifax / Atlantic Canadian landscapes (harbour, coast, working waterfront)
- Working environments with real tools, real hands, real wear
- Architectural details: woodgrain, hammered metal, weathered surfaces
- Cool daylight and warm evening light
- Photography with grain and texture over digital polish

No to:
- Stock photos of people in suits shaking hands
- Laptop-and-coffee shots
- Multi-ethnic smiling team montages (be real, hire real)
- AI-generated hero images that look AI-generated
- Rendered 3D "abstract geometry" backgrounds

### 13.2 Treatment

- Slight desaturation (5-10%)
- Grain overlay at 2-4% opacity for print and marketing
- Duotone treatments using our palette are acceptable for illustrative use

---

## 14. Microcopy & UX writing — the locked CTA system

Small words, big difference. Every button label, error message, empty state, and confirmation dialog passes through the Warm Expert filter.

### 14.1 Button labels — general rules

- Use verbs. "Save changes" not "OK."
- Be specific. "Book a free 30-min call" not "Submit."
- Never use "Click here."

### 14.2 The locked CTA system — six canonical roles

Every CTA on every Timberlea Consulting surface MUST use a wording from the table below. No improvisation.

#### Role 1: Primary — "Ready to talk"

**Canonical:** `Book a free 30-min call`

| Surface | Approved wording |
|---|---|
| Top nav (sticky) | `Book a free 30-min call` |
| Hero primary button | `Book a free 30-min call` |
| Footer | `Book a free 30-min call` |
| Warm CTA block (first-person) | `Book my free 30-minute call` |
| Service page individual cards | `Discuss this engagement` (redirects to Contact form pre-filled) |

**Killed:** *Book a fit call*, *Get in touch*, *Schedule a call*, *Contact us*.

#### Role 2: Secondary — "Browse / learn"

**Canonical:** `See how we work`

| Surface | Approved wording |
|---|---|
| Hero secondary button | `See how we work` |
| About page eyebrow CTA | `Meet the founder` |

**Killed:** *Learn more*, *Read more*, *Click here*, *Get started*.

#### Role 3: Pillar / service-card — "Specific engagement preview"

Verb + context per card:

| Pillar card | CTA wording |
|---|---|
| AI advice | `See our AI work` |
| Microsoft 365 & automation | `See our Microsoft work` |
| Tech advice on retainer | `See our advisory work` |
| Website design & build | `See our web work` |

**Killed:** *Learn more →*, *Read about [X]*, *Find out more*.

#### Role 4: Soft engagement — "Low-commitment"

| Surface | Button | Sell line |
|---|---|---|
| Lead magnet (homepage "Is AI right for my business? checklist") | `Send it to me` | "We'll email it to you and won't follow up unless you ask." |
| Newsletter (footer) | `Subscribe` | "Monthly notes on tech, AI, and websites for small businesses — plain English, no fluff." |

**Killed:** *Sign up*, *Get started*, *Submit*.

#### Role 5: NGO-specific — three variants

See § 2.7 for the three approved wordings (tight, standard, long) and their placement matrix.

**Tone rule:** Sincere, not promotional. Repeated under every priced service block but not over-amplified elsewhere.

#### Role 6: Form-submit — "Send"

| Form | Button |
|---|---|
| Contact form (general inquiry) | `Send message` |
| Lead magnet form | `Send it to me` |
| Newsletter form | `Subscribe` |
| RSVP / event form (future) | `Save my spot` |

**Killed:** *Submit*, *OK*, *Send*.

### 14.3 Service names — the locked rename set (2026-05-26)

Per the wireframe content audit, the following service-name reform is applied site-wide:

| Old name | Canonical name |
|---|---|
| AI Readiness Assessment | **AI Starter Plan** |
| AI Workflow Audit | **AI Workflow Review** |
| AI Workflow Audit + Pilot / Workflow Audit + Pilot | **AI Workflow Review + Pilot** (or full: *AI Workflow Review + Safe First Automation Pilot*) |
| AI Workflow Implementation | **AI Workflow Build** |
| Fractional vCIO Retainer | **Tech Advice on Retainer** |
| Microsoft Power Platform Strategy & Advisory | **Microsoft 365 Automation Plan** |
| Microsoft Retainer | **Microsoft Retainer** (keep) |
| AI Visibility Engagement | **Show Up in AI Search** |
| GitHub Copilot & Security Rollout | **AI for software developers** (also appears as the body description "AI coding tools and security setups for software teams") |
| Basic / Standard / Premier Web Design | (keep) |
| Maintenance & Growth | (keep) |
| Hosting & Domain Care | (keep) |
| IT Audit & Governance Reviews | **Tech Health Check** |
| ITSM Process Design | **IT-process design** |
| AI Workshops | (keep) |

**Footer link variants** (question-style, frame each as the customer's actual question):

| Footer column | Links |
|---|---|
| IT Consulting | Where to start with AI · Choosing AI tools · Microsoft 365 automation · Tech advice on retainer · Tech health check · IT-process design |
| More Services | Website Design · AI for software developers · Microsoft dashboards & reports · Helping your team adopt new tools · Cybersecurity basics · AI Workshops |

**Contact form dropdown** (with non-profit option first per § 2.7):

- Select a service…
- Non-profit or community group
- Where to start with AI
- Choosing AI tools
- Microsoft 365 automation
- Tech advice on retainer
- Tech health check
- AI for software developers
- Website design
- Something else

### 14.4 Empty states

Format:

1. One sentence explaining what usually lives here.
2. One sentence pointing at the next action.
3. A primary button for the action.

> **Example:** No projects yet. Your projects and their current status will show up here. Start one when you're ready.
> [Button: Start a project]

### 14.5 Error messages

Be specific about what went wrong and what to do next. Never blame the user.

- **Bad:** "Invalid input."
- **Better:** "That email address isn't valid — usually this happens when there's an extra space or a missing '.com'."
- **Bad:** "Error 500."
- **Better:** "Something broke on our side. We've been notified. If this keeps happening, email sree@timberleaconsulting.ca."

### 14.6 Confirmations

- Don't over-celebrate. No "🎉" in our product.
- Do acknowledge what happened. "Changes saved." is enough.
- For destructive actions: state what's about to happen, in plain language, with a named button, and offer a clear way out.

> **Example:** "This will permanently delete 'Q2 Project Plan'. You can't undo this." [Button: Delete project] [Button: Cancel]

---

## 15. Developer & AI-agent notes

If you're an LLM, Claude agent, or developer picking up this brand to apply to a new surface, this is your TL;DR.

### 15.1 Canonical color tokens (JSON)

```json
{
  "theme": {
    "coastal": {
      "bg": { "primary": "#F8F4EE", "secondary": "#EFE9E0", "card": "#FFFFFF", "cardHover": "#F5F0E8" },
      "accent": { "primary": "#1A6B5C", "secondary": "#25927E", "glow": "rgba(26,107,92,0.12)" },
      "text": { "primary": "#0D0D0D", "secondary": "#404040", "muted": "#6A7A88" },
      "border": "#D8D2C8",
      "heroGradient": "linear-gradient(135deg, #061E2C 0%, #0C3547 50%, #1A6B5C 100%)"
    },
    "midnightCoastal": {
      "bg": { "primary": "#02111E", "secondary": "#061F33", "card": "#0B2B44", "cardHover": "#0F3A58" },
      "accent": { "primary": "#25C9B0", "secondary": "#7DE8D4", "glow": "rgba(37,201,176,0.22)" },
      "text": { "primary": "#EAF7F3", "secondary": "#B8D4CC", "muted": "#7A928C" },
      "border": "#123048",
      "heroGradient": "linear-gradient(135deg, #020B14 0%, #061F33 45%, #0D3D4A 100%)"
    }
  },
  "typography": {
    "display": { "family": "'Source Serif 4', Georgia, serif", "weights": [400, 600, 700] },
    "body": { "family": "'Inter', system-ui, sans-serif", "weights": [300, 400, 500, 600, 700, 800] }
  },
  "radius": { "sm": 4, "md": 8, "lg": 12, "xl": 16, "2xl": 24, "full": 9999 },
  "spacing": { "base": 8, "scale": [4, 8, 16, 24, 32, 48, 64, 96, 128] }
}
```

### 15.2 When generating new work

1. Start from the Coastal light theme.
2. Ensure the Midnight Coastal dark theme is reachable via toggle.
3. Never invent colors not in this token list.
4. Use Source Serif 4 for anything that's a title. Inter for everything else.
5. Apply the voice principles (§ 3) to every line of copy you write.
6. Run the cupcake-shop test (§ 3.2) on every sentence.
7. Use the locked CTA system (§ 14). No improvisation.
8. Use US spelling (§ 3.10).
9. Include the NGO line under every priced service block.
10. Do not use emoji in product UI.
11. Do not use stock photography of the archetypes listed in § 13.

### 15.3 Do not ship if

- The contrast ratio between any text and its background is below 4.5:1
- The layout breaks below 375px wide (iPhone SE)
- A keyboard user can't reach every action
- A screen reader reads an unlabeled icon
- An accessibility overlay widget is being used in place of real WCAG compliance (accessiBe, UserWay, AudioEye, EqualWeb, etc.)
- Any kill-list word from § 3.4 appears in the copy
- The CTA isn't from the locked system in § 14.2

---

## 16. Governance

### 16.1 Ownership

This brand is owned by Sree Roy / Timberlea Consulting. Updates happen through Pull Requests on the `timberlea-consulting-website` repo. The canonical version is whatever's on `main` of `marketing/BRAND_GUIDELINES.md`.

### 16.2 Versioning

Semantic versioning:
- **Major (2.0, 3.0):** voice, positioning, or core color system changes
- **Minor (2.1, 2.2):** new components, new application surfaces, expanded voice examples, microcopy reform
- **Patch (2.0.1):** typo fixes, clarifications, better examples

### 16.3 When to deviate

You can deviate for:
- A one-time campaign with a specific creative angle (must return to standard after)
- A platform constraint (e.g., TikTok's aggressive text overlays) — document the exception
- A partnership where we're co-branded (match the partner's system where ours conflicts)

You can't deviate for:
- Personal preference
- "I think this looks better"
- Trend-chasing

### 16.4 How to request a change

Open an issue on the repo titled `brand: <short description>`. Include: what you're proposing, why it's needed, what it breaks if we do it, what it breaks if we don't. Sree reviews.

### 16.5 Version history

| Version | Date | Notable changes |
|---|---|---|
| v1.0 | April 2026 | Initial draft. 4 C values (Craft, Clarity, Commitment, Canadian). Fictional craftsperson persona. Six voice principles. |
| v2.0 | May 2026 | Added Care + Candour for 6 C values. Persona rewritten to first-person Sree. Added Why-statement (3 options). Eight voice principles (added Honest about limits, Generous as a default). Consolidated kill list. NGO posture added. CTA system locked. Hero v2.1 LOCKED to "AI, Microsoft, and IT leadership for businesses without an IT department." |
| v2.1 | May 2026 (hero only) | Hero H1 inverted to gap-positioning per ChatGPT critique. LinkedIn line moved to small founder tagline under H1. |
| **v2.2** | **2026-05-26 / 2026-05-27** | **Wireframe content audit applied. Hero unlocked: new H1 "AI, websites, and the tech help your business doesn't have *time* for." Subhead names BlackBerry directly. Headcount 5–150 → 1–150. NGO line vocabulary refreshed (drops "NGO" and "pro-bono"). 8 service-name renames. Email .com → .ca. US spelling convention set. Cupcake-shop test added to voice section. Inline-gloss pattern named as gold standard. Consolidated all v2 proposal docs (`brand-v2-foundation.md`, `brand-v2-hero-cta.md`, `brand-voice-cta-audit.md`, `brand-v2-verification-report.md`) into this single canonical markdown. HTML brand bible (`timberlea-brand-guidelines.html`) becomes a display rendering, regenerated from this MD.** |

---

*End of Brand Guidelines v2.2 — Timberlea Consulting.*

*Drafted in Halifax. Reviewed on the water.*