The whole palette, one decision already made.
Every color in every deliverable derives from these. No loose hex in component CSS. The --gold token holds the brand red (legacy name, kept to avoid churn). Four state aliases, two spring curves, and nothing new to pick, ever.
State aliases and springs
Aliases, not new colors. The palette stays closed. One documented exception: the Siri product material (the orb, the Siri Score gauge) carries its own quarantined colors from the live scan page. It appears in the report section below and never anywhere else.
Fraunces sets the tone. Inter does the work.
Fraunces (serif) for headlines and big display numbers. Inter (sans) for body and every small label. Fraunces is high-contrast and unreadable at 11px, so labels and eyebrows are always Inter, all-caps, tracked.
Your rooms are full of people who already know you.
When someone goes looking, who shows up first.
The technical side Google and AI trust
A plain look at one thing: when a homeowner asks Google or AI for a plumber, your name comes up first.
Every number here is sourced, and we show you how to check it yourself. No jargon, no vanity metrics, just what it costs and what fixes it.
Motion is state. Nothing moves without a reason.
Vol 1 faded everything up the same way. Vol 2 gives motion a job: every animation reports the state of a check, draws a trend, or lands a number. Two spring curves, four states, one rail. That is the whole vocabulary.
If motion carries no state and no number, it does not ship.
The four states
Plain words a client reads at a glance. Internally they mirror the live scan orb on the website (opening, active, resolving, resolved). Client-facing pages use only these four.
The agent line, live
One reusable row that talks like the system is working, because it is. Press the button to run the state cycle.
Vocabulary, complete
| Move | Curve | Duration | The job it does |
|---|---|---|---|
| Spring entrance | --spring | 240 to 420ms | Content lands with weight as it enters view |
| State flip | --spring | 300ms | A dot changes state with one small pulse |
| Count-up | expo ease-out | 900ms | A number arrives like a result, not a decoration |
| Chart draw | --settle | 1100ms | A trend arrives as a line being drawn |
| Row and cell resolve | --spring | 40 to 60ms stagger | Tables and map cells check in one by one |
| Orb breath | ease-in-out | 6s loop | The live product LISTENING state. Siri material only |
That is the entire list. The scan rail on the right edge is the seventh move: reading progress as a live check, linear because it tracks your scroll. Glows stay in brand hues at 35 percent opacity or less (the Siri material keeps its own product glow). Under reduced motion every animation stops and every state, number, and fully drawn chart stays visible.
The swarm, visible.
Seven AI platforms decide who gets named when a homeowner asks for help. The system works them as one crew around one business: yours. Watch them take formation. Click the formation to run it again.
The hive, connected.
The formation shows where you show up. This shows how you get there: six kinds of work, one business at the center, and every cell feeds the next call. Click the map to run it again.
Every number, one language.
Every chart we use to show a business its numbers, in one place. The network is live: data arrives on a wire, the station pulses, the number lands. Below it, eleven instruments, each answering one question an owner actually asks. Sample data throughout. Hover anything for its reading.
Calls · the phone line, instrumented
Profile · what Google shows, what people do
Search, AI, and the money
Five ways the swarm shows it is on.
Ambient motion, made legal. Each field below is a background animation with a job: it reports one operational state of the swarm, carries a plain word and a number, breathes at a calm four second floor, and renders still under reduced motion with nothing lost. At most one field per shipped page, never louder than the content. These five are the direction options for swarmsystem.ai.
The call: one quiet field, one loud one.
Heartbeat is the background: it can sit behind a whole page without shouting. Mission control is the hero moment: the room at work, front and center. The other three are section-scale material. Pair Heartbeat under the page with Mission control up top, and the site says what the product does before a single word is read.
The brand in motion. One report, assembled.
Everything above, doing a real job: the modules, charts, and readouts a client sees in a visibility report or a dashboard, ending on the Siri check from the live scan page. Sample data throughout. Hover any dot, bar, or map cell for its reading.
Dashboard vitals
The Siri check
The front door of the business, in the brand book so it lives in one place: the orb listens, Siri answers, the Siri Score says how ready the business is. Product material, ported from the live scan page.
Three of seven platforms name the business. Every miss is a homeowner who called someone else.
Fix the info layer, feed the profiles, publish proof. The June line above is what that looks like.
Every piece, rendered live.
Copy any block from the markup. They all run on the tokens above, so a brand change in :root updates everything. The chart, module, and Siri patterns live in the section above; these are the editorial pieces.
Metric row, numbers count up on arrival
Score meters, the verdict is the color
Cards (win / loss / warn tags)
Reviews are strong
The reputation is there. People who find you, choose you.
- 4.8 average across platforms
- Steady recent volume
Invisible to AI
When AI tools recommend a business, your name does not come up.
- 0 of 12 prompts named you
- Competitors named instead
Content has gone quiet
Google reads silence as inactivity. Freshness is decaying.
- No posts in 90 days
- Thin service pages
Callout
The search bar is being replaced by an answer.
Homeowners increasingly ask Google AI, ChatGPT, Gemini, and Siri who to call. Those tools name a short list. If you are not on it, the call never reaches you and you never see it happen.
Homeowners ask Google AI, ChatGPT, Gemini, and Siri who to call. If you are not on the short list, the call goes to the company that is. That is jobs lost without a trace.
Homeowners ask AI who to call. The tools read profiles, reviews, and pages to build the short list. The work on this page is how a business gets read and named.
Homeowners ask AI who to call. Test it yourself tonight: ask your phone for a plumber. If your name is not in the answer, that is the whole problem.
Split bar
Matrix, rows resolve like a running check
| Who does AI recommend? | ChatGPT | Gemini | Perplexity |
|---|---|---|---|
| Best plumber near meAustin | × | × | ~ |
| Emergency HVAC tonightAustin | × | ~ | × |
| Trusted electricianRound Rock | 1st | × | × |
90-day phases
Foundation
Profile, schema, and consistent info across the web. Get readable.
Coverage
Service and city pages that match how people actually search.
Authority
Citations and signals that move the AI visibility score off zero.
Numbered steps
- Run the scan. Measure where the business shows up today.
- Fix the foundation. Profile, schema, consistent info, indexing.
- Prove the lift. A before-and-after report in plain dollars.
CTA
See where you are being missed.
A plain-English look at your visibility across Google, Maps, and AI, with a real number attached.
Get your visibility roadmapWhat changed, and why.
Flip the versions in the corner control. v2 described the system. v3 behaves like it. v4 counts it. v5 turns the work into numbers you can watch arrive. Every change is proven by a live element on this page.
The crew is visible
Every section is checked by a worker that flies in, does the job, and moves on. In v2 the states flipped on their own. Now you watch the crew do it.
Self-healing, standing
Earlier volumes broke a chart on purpose so a worker could fix it on screen. Vol 6 retired the stunt. The swarm now finds and fixes faults before the page ever shows them, and the receipt below is the proof that stands.
The page grades itself
The footer check runs every time this page loads. Tokens, copy, and errors, counted live. If something is wrong, the page says so before you do.
It reads the room
MONEY, WORK, and TRUST read the same page three ways. Add your business name to the address and the report becomes yours.
Proof you can count
The workers grew wings and a ledger. The same fleet flies every check on this page: the section flips, the station docks, the formation lock. Each trip carries its job in plain words, the map above shows how the work becomes calls, and the receipt below counts every job as it lands. Swarming you can audit.
Numbers you can watch arrive
Every chart a client will ever see now lives here, in one language. The network above them is live: a data event lands on a wire, the station pulses, the number lands, and the fleet reads the instruments. Six feeds, eleven instruments, one business at the center. The receipt counts every pulse.
Ambient, under law
Background motion joined the brand the only way it could: as instrumentation. Five status fields report the swarm's operating states, one of them wired to this page's real job counter, all of them bounded, labeled, numbered, and calm. Two fixes sealed the craft on the way in: bars always render true, and every hexagon is perfectly filled.
The hexagon is the only hive reference and it is geometry, not decoration: the formation, the hive map, the bees, and every state dot on the page. Same four states, same plain words, same closed palette as v2.
Copy, fill, deploy.
For any new single-file HTML deliverable (report, pitch hub, landing page, dashboard module):
- Copy the fonts link + the canonical
:rootblock + the motion, chart, and module CSS (everything above the styleguide-only marker) into your new HTML, plus the components you need. The Siri material block and the two SVG gradient defs travel together, and only when the page shows the Siri check. - Copy the choreography script at the bottom of this file. It powers the reveals, the state dots, the count-ups, and the scan rail. Give each major section
data-scanand a state dot, add classcntto any number that should count up, and putdata-tipreadings on dots, bars, and cells. - Copy the V3 proof layer (the head param script, the V3 PROOF LAYER CSS block, and the V3 script at the very bottom) when the deliverable should behave like the product: visible workers, hex state dots, the self-audit receipt, and the version toggle. Mark every v3-only element with
data-v3. One rule hides them all in v2 mode. Lens readings go only in module footers, the hero subline, one callout, and the evolution cards, and they change the reading, never the data. - Copy the V4 fleet layer (the V4 FLEET LAYER CSS block plus the fleet parts of the bottom script) when the page should show the fleet: bee glyphs on the workers, job chips, the formation bonds, the hive map, and the jobs count on the receipt. Mark every v4-only element with
data-v4. Two rules hide them in v2 and v3 modes. Every v4 pixel must be a worker, a nerve, or a receipt. - Copy the V5 observatory layer (the V5 OBSERVATORY CSS block plus the v5 parts of the bottom script) when the page needs the analytics library: the constellation, the instrument modules, the hex ring, the hour row, the money ramp, and the pulse counts on the receipt. Mark every v5-only element with
data-v5. One rule hides them in every older mode. A pulse must be a data event that lands a number, and all of a page's numbers must trace to one dataset. Every v5 pixel must be a chart, a pulse, or a worker. - Charts are hand-built, never a library. Single series in brand red, smooth curve, hairline grid, one axis, labels in text tokens, a hidden text summary for screen readers, and status colors only with a number or word beside them. Sample data must be labeled sample.
- Fill in content. Lead with the outcome, tie every number to dollars, keep state words plain: WAITING, WORKING, DONE, LIVE. See
.claude/rules/content-style.md. Zero em dashes. - Keep it self-contained. No external CSS, no build step. Test 1440px and 390px, then check reduced motion: on macOS turn on Settings, Accessibility, Display, Reduce Motion (or use DevTools emulation) and confirm every state, number, chart, and the gauge are still visible with nothing animating.
- Deploy with
node scripts/netlify-deploy-static.cjs <dir> <name>.
This file is the source of truth. If the brand changes, update it and .claude/rules/visual-design.md first, then use it for new work. Shipped reports stay frozen.