One system.
Every page.
Everything on this page is rendered from the same stylesheet as the live site, so what you see is what ships. Tokens, components, scenes, motion and voice, with the class names beside them. Download the brand file and an AI can produce GoodOps material that follows the same rules.
Nine colours. Four meanings.
Primitives first, then the four semantic colours every status dot, bar and badge uses. Components reference the token, never the hex.
Serif says it.
Sans explains it.
Headlines in the serif with tight tracking and one italic emphasis word in violet. Everything else in Inter. Numbers are serif, always.
Run the business.
Not the busywork.
One plan.
Everything on it.
Switched on is step one. Used is the job.
Most organizations don't need an AI strategy. They need someone to make AI actually work: in the inbox, the meetings, the books, the onboarding, the phones.
'Iowan Old Style', Palatino, 'Book Antiqua', Georgia, serifInter, -apple-system, 'Segoe UI', Arial, sans-serifButtons & links.
Yellow is the one primary action on a page. Navy for everything else. Outline on dark or busy surfaces. The arrow always points up-right.
Hover: translateY(-2px) + shadow. Focus: 2px violet outline, 3px offset.Pills, chips, badges.
Small type that carries state. Pills for availability, chips for facts, verdicts for picks, the score badge for AI readiness.
Green ≥ 8, yellow < 6, navy between.Four cards do all the work.
The door card for the three ways in, the module card for the library, the tool card for the directory, and the white panel for anything with data in it.
Good instincts.
Even better evidence.
Where AI will earn its place and where the foundations need work first.
Fixed feeagreed before we startVoice Memory
Meetings & callsEvery meeting, call and all-hands in one memory your team can ask. To-dos and briefs flow out on their own.
Recap, decisions and actions inside Teams, under the tenant's consent and retention policy.
Pick the suite your email already lives in and then actually configure it. One pick per category, the reasoning open.
Cards lift 2–4px on hover. Borders are --line; the pick gets a 2px violet border.Every illustration is a scene.
No stock, no 3D. A backdrop with one rounded corner blown out, two or three tilted cards with real-looking content, one pin, optionally the lens. Same kit on every hero.
Five lenses. Evidence beside each.
One approval route. One owner.
Receipts & Expenses fixes the money half in six weeks. Ready now.
The kit
.art-backdrop — lilac-to-yellow gradient, dotted, one 180–250px corner.scard — white card, 1–4° tilt, real content (a name, a number, a time).scard.find — the navy conclusion card, yellow for the verdict words.art-pin — floating label: who does what.lens2 / .lens — the magnifier: evidence, looking closely.art-id — the FIG. 01 caption. Every scene gets one.Bars, scores, posture.
Readiness bars tell a story with a state word, not a percentage. Sub-scores drill down. Posture rows carry a tag. Leaderboards rank.
The roadmap, the chat, the tiers.
Three bigger composites: the quarterly roadmap board, the ask-us-anything channel, and the tier table. Each is the product made visible.
| Starter$495 / month | Smart$995 / month | Growth$2,295 / month | |
|---|---|---|---|
| Hours included | 1 hour | 5 hours | 20 hours |
| Response time | Best effort | Next day | Same day |
Status colours come from the semantic tokens: live, building, decide.Nav, bands, close.
The sticky nav with two-column dropdowns is at the top of this page. Below: the dark proof band, the wordmark strip and the yellow finale that closes every page.
"They've been key in helping us onboard and offboard employees, purchase and manage devices, build out SOPs."Dan WormaldFounder, Leading Edge Electric
.tools-band · wordmarks, never logos
Text wordmarks keep the strip quiet and load-free.
Use AI.
Don't become
an AI company.
Every page ends here. Yellow, one button, one line of reassurance.
Book a 30-minute callA conversation about your organization.
Not a demo of software.
Fields, consent, accordion.
One form style everywhere. Preview mode is stated, never hidden. FAQs are native details elements so they work without JavaScript.
Is this the real FAQ component?
Yes. A native details element with the plus icon drawn in CSS, so it works with JavaScript off and reads correctly to screen readers.
Why is preview mode shown so plainly?
Because pretending a form works when it doesn't is the kind of thing GoodOps fixes for clients. Honesty is a component.
.callout — for the one caveat that must be read: scores are provisional, prices are ranges, referral fees exist.
One stroke weight. Inline SVG.
Every icon is a symbol in the page, 1.6px stroke, currentColor. Tool marks are simplified monochrome glyphs, never vendor logos.
i-arrowi-checki-stari-peoplei-locki-pathi-filei-eyei-charti-phonei-chati-receipti-cardi-calendari-repeati-banki-licencei-shieldi-cloudi-laptopi-maili-slacki-msi-hubspoti-asanai-zoomi-floati-dexti-expensifyi-plootoi-harvesti-toggli-clockifyi-stripei-hubdoci-docusigni-dattoi-backblazei-humii-pipedrivei-knowbe4i-bambooAdd a symbol to SYMBOLS in build_site.py; it is available on every page.Motion explains.
It never decorates.
Four kinds of movement on the site, each with a reason. All of them pause with the toggle in the nav and resolve to a finished state under prefers-reduced-motion.
Reveal
Sections rise 14px and fade in once on intersection, .7s, ease cubic-bezier(.22,1,.36,1). Text is never delayed more than one beat.
Loops
The homepage week-sorts-itself loop (18s) and the roadmap promotions (14s). They show the product happening. One per page, maximum.
Hover reveals
Module hand-off lines on the hub, drawn with stroke-dashoffset. Information that appears when you ask for it.
Counters & flips
Stats count up once in view; module heroes flip from Today to With once at 2.3s, then hand control to the visitor.
Parallax, cursor followers, animated gradients, page transitions, hover tilt on every card.How GoodOps sounds.
Short declaratives. The owner's problem in the owner's words, then the fix. A name, a time, a number. One emphasis word per headline.
Say organization, not company. Non-profits are clients. The one exception is the line "Use AI. Don't become an AI company."
Your brand,
written so AI
can follow it.
This page and its design.md are what the Design System Audit builds for clients: one source of truth that people, agencies and AI tools all produce from.
The Design System AuditCAD 3,500, fixed. Two weeks.
Credited against the build.