# GoodOps design system · design.md

Machine-readable brand file for people and AI. Everything an assistant, a designer or a freelancer needs to produce something that looks and sounds like GoodOps. Source of truth is the site stylesheet; this file mirrors it.

## Positioning

- GoodOps is the AI agency for organizations that run on operations.
- Line: **AI that shows up on a Tuesday.** The promise is a weekday, not a transformation.
- Three things we sell: Diagnostics (the picture, with evidence) → Fractional AI + Ops (the retainer that runs the roadmap and answers the team) → Modules (one problem each, fixed properly).
- Audience, stated publicly: organizations that have outgrown "someone will sort it". Never state headcount ranges in public copy.
- Say **organization**, not company (non-profits are clients).

## Voice

- Short declaratives. Sentence fragments are fine. One idea per sentence.
- Lead with the problem in the owner's words ("Thursday's hours, logged Friday, from memory."), then the fix.
- Concrete over abstract: a time, a name, a number. Northwind Studio, Priya, 212 meetings, 4-minute restore.
- Emphasis word in italic serif, one per headline, violet.
- Prices in CAD, as ranges, "fixed after a 30-minute call". Never per-employee pricing.
- Disclose referral fees every time tools are recommended.
- Never: "leverage", "seamless", "cutting-edge", "synergy", "solutions" as a noun, exclamation marks.

## Colour

- `--navy` #09054d — Ink. Headlines, primary buttons, dark panels.
- `--violet` #6733ff — Accent. Emphasis words, links, active states, the lens.
- `--yellow` #fdff65 — Signal. Primary CTA, star tags, status in dark panels.
- `--paper` #f7f7f2 — Page background. Never pure white behind type.
- `--white` #ffffff — Cards and panels on paper.
- `--ink` #17153b — Body text on light surfaces.
- `--muted` #68667e — Secondary text, captions, metadata.
- `--line` #dbdbe3 — Hairlines, card borders, table rules.
- `--lilac` #e8e2ff — Soft highlight: callouts, booking box, hover fills.

Semantic:

- live: #3fbf7f — Shipped, available now, passing.
- building: #6733ff — In progress, being built.
- decide: #d9b227 — Needs a decision, watching, developing.
- risk: #a12a2a — Migrate, data-residency flag, wait.

## Type

- Display: 'Iowan Old Style', Palatino, 'Book Antiqua', Georgia, serif — Display. Headlines, numbers, pull quotes. Tight tracking, italic for the emphasis word.
- Text: Inter, -apple-system, 'Segoe UI', Arial, sans-serif — Everything else. Body, UI, labels, eyebrows.
- Scale: h1 clamp(56–100px) / h2 clamp(40–62px) / h3 24–30px / body 13.5px / small 11–12px / eyebrow 9–10px uppercase, .14em tracking.

## Radius, motion, layout

- radius.pill: 100px
- radius.card: 16–20px
- radius.panel: 22px
- radius.band: 22px (dark sections)
- radius.backdrop: 35px / 250px (the asymmetric hero backdrop)
- motion.ease: cubic-bezier(.22,1,.36,1)
- motion.reveal: opacity + 14px rise, .7s, once, on intersection
- motion.hero-loop: 18s, six beats, pauses with the toggle, static end-state under reduced-motion
- motion.hover: translateY(-2 to -4px) + shadow, .3s
- layout.wrap: max 1440px, gutter clamp(22px, 5.6vw, 100px)
- layout.breakpoints: 980px (two-column → one), 600px (compact)
- layout.nav: 86px, sticky, blurs on scroll
- layout.section-rhythm: 90px between sections, 40px after a hero

## Components (class names in the stylesheet)

- Buttons: `.btn` (navy), `.btn.yellow` (primary CTA), `.btn.outline`, `.btn.small`, `.text-link` (underlined, arrow).
- Labels: `.eyebrow` (tick + uppercase), `.status-pill` / `.status-pill.soon`, `.chip`, `.chip.ca`, `.verdict`, `.air` (score badge), `.star-tag`.
- Cards: `.tdoor` (door card, `.star` for navy), `.mod-card` (module, `.live`), `.tool-card` (`.pick`), `.panel` (white panel with eyebrow), `.scard` (scene card), `.art-pin` (floating pin), `.ov` (oversight tile).
- Scenes: `.art-backdrop` + `.scard`/`.art-pin`/`.lens2` compose every hero and spotlight illustration. Asymmetric backdrop, tilted cards, one lens.
- Data: `.readiness .row` (bar + state), `.score` (sub-score bar), `.leaderboard .lb-row`, `.posture .row`, `.tier-table`.
- Boards: `.rm-board` (roadmap: lanes × now/next/later), `.anim` (homepage hero loop), `.chatpanel` (ask-us-anything).
- Structure: `.navbar` + `.nav-drop` dropdowns, `.footer` three columns, `.finale` yellow close, `.proof` navy band, `.tools-band` wordmarks, `.faq-section` with `<details>`.
- Forms: `.lead-form` fields, `.consent`, `.form-notice` (preview mode), `.book-box`.

## Modules (for AI drafting)

- 01 Voice Memory (onetime) — Meetings & calls. Every meeting, call and all-hands in one memory your team can ask. To-dos and briefs flow out on their own.
- 02 Receipts & Expenses (onetime) — Receipts, expenses, approvals. Every receipt matched to the card, approved on a phone, and in the books before month-end. No shoebox, no reply-all.
- 03 Time Tracking (onetime) — Hours, budgets, utilisation. Hours that log themselves from the calendar and the work, budgets that warn before they blow, and timesheets nobody dreads.
- 04 Invoicing (onetime) — Monthly billing on autopilot. Invoices drafted on the 1st from hours and retainers, sent after one approval, chased automatically, reconciled when paid.
- 05 AI, Switched On Properly (onetime) — Copilot or Gemini, rolled out right. The AI you already pay for, actually working: rolled out with rules, grounded in your files, and trained on real work. Three workflows live in four weeks.
- 06 Quote to Kickoff (onetime) — Proposals, e-sign, deposit, start. Proposals drafted from your past work, signed online, deposit invoiced and the project created the moment the client says yes. Days, not weeks.
- 07 One Client Record (onetime) — CRM cleaned, renewals caught. Every client in one clean record across your CRM, ledger and inbox. Duplicates gone, owners named, renewals triggered before they lapse.
- 08 Flowing Documents (recurring) — Statements, licences, insurance. Bank statements, licences, insurance, payroll filings: one view of every document, where it lives, and where it needs to go next.
- 09 Backups (recurring) — The whole organization, restorable. Every file, mailbox, chat and system backed up, tested quarterly, and restorable in minutes. The whole organization, not just the server.
- 10 Employee Onboarding (recurring) — Day one, planned. Offer to day one without the scramble: accounts, laptop, paperwork and a plan, all ready the night before. HRIS activation when you're ready.
- 11 Protected Workplace (recurring) — MFA, devices, email, people. The five security basics every insurer now asks for, done properly: MFA, password manager, device protection, trusted email, and a team that spots the phish.

## Diagnostics

- The AI & Operations Diagnostic — the picture, with evidence. Fixed fee, 2–3 weeks.
- Knowledge Diagnostic — where the answers live; powered by Pilot. CAD 3,500, 2 weeks.
- IT + AI Security Assessment — the five insurer questions plus where your data goes. CAD 3,500, 2 weeks.
- Design System Diagnostic — is your brand ready for AI to use it? CAD 3,500, 2 weeks.
- 360 Diagnostic — the whole organization, live. Coming soon.

## Retainer tiers (CAD / month)

- Starter $495 · Smart $995 · Growth $2,295 · Full $24,000. Every module eligible on every tier. Ask-us-anything channel on every tier.

## Rules for AI producing GoodOps material

1. Use these tokens and class names; do not invent colours or fonts.
2. One italic emphasis word per headline, in violet.
3. Illustrations are scenes: backdrop, two or three tilted cards, one pin, optional lens. Never stock photos, never generic 3D.
4. Every claim gets a number, a name or a source. If none exists, cut the claim.
5. Prices as CAD ranges. Disclose referral fees.
6. Respect reduced-motion; motion explains, never decorates.