# Standard Systems — Brand Guide (v1, 2026-09-30)

Give this folder (`BRAND.md` + `brand.css` + `starter.html`) to every agent. Any tool, dashboard, landing page, chat flow or email it builds must follow it so everything looks like one product. The look is derived from lemonade.com: white space, one loud cobalt, one font, soft shadows, pill buttons, conversational copy.

## 1. The look in one sentence
**White page. Black Lato type. One cobalt. Rounded, soft, friendly. Talks like a text message.**

## 2. Colors — use exactly these hex values
| Token | Hex | Use |
|---|---|---|
| `--accent` | `#1f4bff` | THE brand color. Primary buttons, links, active states, progress bars, kickers, stat numbers, confetti. |
| `--accent-hover` | `#173fde` | Button hover |
| `--accent-active` | `#1234b8` | Button pressed |
| `--accent-50/100/200/300` | `#f3f6ff` `#e3e9ff` `#c9d4ff` `#a9bbff` | Tints: selected cards, flagged cards, hero backgrounds, active nav item |
| `--ink` | `#282828` | Headlines, body text, "me" bubbles |
| `--ink-2` | `#4a4a4a` | Secondary text, chat prompts, card body |
| `--ink-3` | `#7b7b7b` | Captions, labels, footer, small print |
| `--gray` | `#b7b7b7` | Disabled, typing dots |
| `--gray-2` | `#dadada` | Borders on inputs / answer cards |
| `--gray-3` | `#ececec` | Hairlines, dividers, card borders |
| `--bg` | `#f7f7f7` | Alternating section backgrounds, app-shell main area, "me" bubble |
| Accents | teal `#2ad5bd` · red `#f7274a` · yellow `#ffe071` · orange `#ffb01c` | Status dots, error text, warnings, confetti. Never as a primary. |

Rules: cobalt is the only saturated color on a screen. No gradients. No purple, no navy, no glow. Backgrounds are white or `#f7f7f7` — nothing darker except the cobalt CTA band. Dark mode does not exist.

## 3. Typography
- **Font: Lato** (Google Fonts) — `'Lato','Helvetica Neue',Arial,sans-serif`. Weights 400 / 700 / 900 only. Nothing else, ever (no serif, no mono in UI).
- H1 `clamp(40px, 6.2vw, 72px)` 900 · H2 `clamp(30px, 4vw, 46px)` 900 · H3 24px 900 · body 18px 400 (17px mobile) · captions 15px · labels 13px 900 uppercase, letter-spacing `.12em`.
- Line-height 1.12 on headings, 1.5 on body. Letter-spacing `-.01em` on headings.
- Headlines are sentence case, punchy, numbers-first: "−$350K in labor. +32.5% in sales. Zero agencies." Never Title Case.

## 4. Shape and depth
- Radii: buttons **pill (999px)** · cards 16px · answer cards 12px · inputs none (underline only) · chat bubbles 22px · avatars circle.
- Shadows: `0 2px 12px rgba(0,0,0,.08)` (cards) · `0 4px 18px rgba(0,0,0,.08)` (answer cards) · `0 12px 40px rgba(0,0,0,.12)` (quote/modal) · `0 6px 24px rgba(31,75,255,.15)` (cobalt hover glow on answer cards only).
- Borders: 1px `#ececec` on cards, 1px `#dadada` on inputs/answer cards, 2px cobalt on selected/flagged.

## 5. Components (all in `brand.css`)
| Class | What | Rule |
|---|---|---|
| `.btn` | Cobalt pill, 56px tall, white 700 text | One primary per view. Label is a verb: "Check our prices", "Approve", "Book my install call". |
| `.btn.ghost` | White pill, gray border | Secondary. |
| `.btn.white` | White pill, cobalt text | Only on the cobalt band. |
| `.opt` | White bordered answer card, centered 22px 700 text | Chat choices. Stack vertically, max-width 380px, 14px gap. Selected = cobalt border + `#f3f6ff`. |
| `.chip` | Pill toggle | Multi-select. |
| `.msg` / `.msg.me` | Agent line (left, ink-2, 24px 700) / user reply (right, gray bubble) | Agent text is NOT in a bubble — plain bold text on white. Only the user's replies get a bubble. |
| `.typing` | Three bouncing gray dots in a white pill | Show 450ms + 12ms/char before every agent line, max 1.4s. |
| `.field` | Uppercase 13px label + underlined 26px input; cobalt underline on focus; red on error | Never boxed inputs. |
| `.prog` | 4px cobalt progress bar at top | Every multi-step flow has one. |
| `.card` / `.card.flag` | White card / cobalt-bordered flagged card | Flag the hero item only. |
| `.stat` | Huge cobalt number + gray label | Max 4 per row, 2 on mobile. |
| `.kicker` | 13px cobalt uppercase label above H2 | |
| `.badge` / `.tag` | Cobalt pill label / gray outline pill | |
| `.table` | White table, gray uppercase headers | |
| `nav.top` | 72px sticky white nav: logo · links · cobalt CTA right | |
| `.shell` | App layout: 240px white sidebar + `#f7f7f7` main, `.kpis` row of `.kpi` tiles | Use for every internal tool. Active nav item = `#e3e9ff` bg + cobalt text. |
| `.status` | Dot + text (teal ok / orange warn / red bad) | System health. |

## 5b. Confidentiality strip — REQUIRED on every page
Every page, tool, dashboard, deck and PDF carries this line at the very top (above the nav) and again in the footer:

**FOR VERIFIED PARTNERS ONLY · CONFIDENTIAL & DO NOT DISTRIBUTE**

Markup: `<div class="confid">For Verified Partners Only · Confidential &amp; Do Not Distribute</div>` as the first child of `<body>`; `<div class="confid-foot">…</div>` at the top of the footer legal block. Style: ink `#282828` bar, white 11px 900 uppercase, `.18em` tracking, centered. Swap "Partners" for the audience when scoped ("For Verified Investors Only", "For Verified Dealers Only") — never remove it.

## 5c. Hero video + agent map
The home hero is a looping DOM animation (`hero-anim.js`): scene 1 an AI chat bubble types "Welcome to Standard Systems & Automation." + two lines; scene 2 six agent cards pop in one by one and each "takes over" a lane (ads, dialing, inbox, follow-up, numbers, orders); scene 3 cuts to a revenue chart drawing upward ($390K → $1.92M, +391%). White card, 16:10, cobalt line. The product film `video/hero.mp4` is kept as an alternate (16:9, autoplay · muted · loop · playsinline, poster `video/hero-poster.jpg`, 24px radius, `--shadow-lg`). The agent map below is still available for tools/status views: an animated constellation (`agent-map.js`): dark `#15161d→#232433` rounded canvas, one large cobalt "CEO Agent" node at the centre, ~20 smaller glowing nodes (teal/blue/green/yellow/orange/red/cobalt) with Lato labels, faint links + packets flowing to the centre, drifting dust clusters and soft stars. It is the ONE place a dark background is allowed. Node names are generic roles (Scout, Forge, Pilot, Harvest, Dialer, Desk, Ledger…) — never real agent or company names. Reuse it for "system status" views in tools.

## 5c2. Company mark — the Circuit S (chosen 2026-09-30)
**Standard Systems & Automation LLC** = the S drawn as a circuit trace: one continuous cobalt path (stroke 22 on the 200 grid: top bar → left bend → middle bar → right bend → bottom bar) with two ink terminal dots (r 13) at the ends and a gold `#ffd23f` node (r 10) at the centre. On the cobalt app tile the whole mark is white (`ssa-app-icon.svg`, the canonical icon); `ssa-app-icon-accent.svg` keeps the gold node. Files in `img/brand/`: `ssa-mark.svg` (color), `-ink`, `-white`, `ssa-app-icon.svg`, `ssa-app-icon-accent.svg`, `ssa-favicon.svg`, lockups `ssa-lockup-light/-dark/-nav.png`. Wordmark: Lato 900 "Standard" ink / "Systems" cobalt, "& AUTOMATION LLC" 14px tracked. Nav = app-icon tile at 36px + "Standard Systems & Automation" ("& Automation" in cobalt; drops to "Standard Systems" under 900px). The CEO agent is always described as: "runs every tool autonomously, and lets you customize any tool, change any code, or build anything your company needs." Min size 20px. Never stretch, outline, add gradients, or break the trace.

## 5d. Product marks
**Creative Engine = the CE monogram** (chosen 2026-09-30). A heavy cobalt C (24-unit stroke on a 200 grid, mouth open to the right, ~80°) wrapping an ink E made of three rounded bars (64/50/64 × 18, rx 9); the middle bar is orange `#ff5a1f` — the spark. Flat. No tile, shadow or gradient on the mark itself. Files in `img/brand/`: `creative-engine-mark.svg` (web, spark pulses), `-static.svg`, `-ink.svg`, `-white.svg`, `creative-engine-app-icon.svg` (white on cobalt tile, r=46/200) + `-light.svg`, `favicon.svg`, PNG-1024 exports, `creative-engine-lockup-light/-dark/-inline.png`. Wordmark: Lato 900 "Creative" ink / "Engine" cobalt (both white on cobalt). Min size 24px. Creative Engine is proprietary — never screenshot it; use the mark.
**The family (Adobe-style, generated by `make-marks.py` → `img/brand/marks/`):** CE Creative Engine (orange `#ff5a1f`) · RB Reporting & Briefs (sky `#5ec8ff`) · CC Command Center (yellow `#ffd23f`) · LD Leads & Dialer (green `#00c26e`) · SD Service Desk (red `#f7274a`) · AS Ad Studio (teal `#2ad5bd`) · BA Business Audit (amber `#ffb01c`) · MS MAS CRM Shell (periwinkle `#7c9bff`) · CA CEO Agent (yellow `#ffd23f`, C + A + star). **Every other tool has a generic two-letter mark** (primary cobalt letter + smaller ink letter + accent dot): MA Meta autopilot · FP Funnel Planner · EB Email blast · LS Lead scraper · BK Outbound SDR & booking agents · CD Call Desk · PB Pre-call briefs · FU Follow-ups · FD Fulfillment · FB Fraud bot · IS Inventory & stock · DB Daily briefs · CB Company brain · WB Website builder · LP Landing pages · SF Storefront systems · US Upsell suite · AF Affiliates & codes · RL Reliability layer. Full sheet: `img/brand/marks/`. Rule: same 200 grid, cobalt primary letter stroke 24, ink secondary letter/glyph stroke 20 (bars 18 tall, rx 9), exactly one accent element. Each ships as `<slug>.svg`, `-ink`, `-white`, `-app-icon` (white on cobalt tile), `-app-icon-light`. New product → add a `draw` lambda to `make-marks.py`, re-run, done. Use the mark wherever the product is named (price strips, category headers, tool cards, decks).

## 6. Motion
- Reveal on scroll: fade + 18px rise, 0.6s ease (`.rv` → `.rv.in`).
- Chat lines: fade + 12px rise, 0.35s. Answer cards stagger 80ms each.
- Page transition into a chat: cobalt circle expands from the button (0.55s) then navigates.
- Completion moments: confetti in cobalt/teal/yellow/orange/red, 70 pieces, 2.6s. Use once per flow, at the payoff.
- Hover: buttons darken, cards lift 4px. Nothing spins, pulses or glows continuously.
- Respect `prefers-reduced-motion`.

## 7. Layout
- Max content width 1160px, 24px gutters. Sections 80px vertical padding, alternating white / `#f7f7f7`. Hero: 2-column (copy left, image right), stacks on mobile.
- Mobile-first: everything must work at 390px. Sticky bottom CTA bar on phones. Sidebar collapses. 44px minimum tap targets.

## 8. Voice and copy
- Talk like a text message from a sharp friend: short lines, contractions, second person. "Hey there! I'll help you get a price in no time."
- Headline formula: lead with the numbers → one-line what-it-is → cobalt CTA. ("−$350K in labor. +32.5% in sales. Zero agencies." / "One named AI operator runs your marketing, leads, sales, service and reporting." / "Check our prices"). Results always come before the pitch. Tagline: "The AI that actually works."
- CTAs always say what happens: "Check our prices", "See if you're a fit", "Book my install call". Never "Submit", "Learn more", "Click here".
- Proof is specific numbers, not adjectives: "24 static ads a day", "12,000+ leads per scrape", "$350M+ portfolio", "15,000+ creatives shipped by AI", "$1.2M paid to 3 agencies, then fired", "−$350K a year in labor", "+32.5% average monthly sales before vs. after", "4.9× monthly revenue — $390K/mo for the first 10 months → $1.92M/mo every month for the past year (+391%)".
- Company name is **Standard Systems** (full: Standard Systems & Automation). The AI is "your CEO agent" / "the operator". The product tiers: Creative Engine (flagship), category bundles, MAS suite (Maximum Agentic System), CEO agent platform (premium).
- **Never name our operating companies or the individual agents in anything client-facing.** Say "a D2C sports brand", "an investment fund", "our own companies". No client logos or real names without sign-off.
- Small print: pricing is "From $X" and "final number comes out of the chat"; results are "company-reported".

## 9. Chat flow pattern (the me.lemonade.com clone)
1. Top bar: back chevron · cobalt progress bar · "Help". No nav.
2. Avatar (52px circle) + agent label + subtitle "AI · Standard Systems".
3. Agent speaks in 1–2 short lines at a time, typing dots before each.
4. One question per step. Answers are `.opt` cards, `.chip` multi-select, or one `.field` input. Enter submits.
5. User's answer echoes right-aligned as `.msg.me`; the controls disappear.
6. Inline validation in red under the field; never a modal.
7. A "reviewing…" beat (1.5s) before the payoff.
8. Payoff card (`.card` with `--shadow-lg`): kicker, title, big price/result, checklist with cobalt ✓, one cobalt CTA + one ghost.
9. Confetti once. Persist state to localStorage so "My Account" can replay it.

## 10. Do / Don't
- DO keep one cobalt thing per screen that's obviously the next step.
- DO use real product photos or flat illustrations on white; placeholders are dashed cobalt outlines until then.
- DON'T use gradients, glassmorphism, dark backgrounds, neon, drop-shadow text, purple, emoji in headings.
- DON'T mix fonts or add icon packs with outlines heavier than 2px.
- DON'T write "AI-powered", "revolutionary", "seamless", "leverage".

## 11. How to apply (for agents)
1. Copy `brand.css` into the project and link it first. Override nothing; add page-specific CSS after it.
2. Start every new tool from `starter.html` (app shell + KPI tiles + chat pattern already wired).
3. Before shipping, check: Lato only · cobalt `#1f4bff` only accent · pill buttons · white/`#f7f7f7` backgrounds · works at 390px · copy passes §8.
4. Reference build: `~/standard-systems-site/` (home, chat, products, offers, what-we-do) — copy patterns from there.