# runnn.ing — brand system Spoken: **"running."** Written: always lowercase, always with the dot — `runnn.ing`. Trading name in contracts and invoices: **Runnn**. --- ## 1. The idea "Running" carries two meanings, and the studio is both of them: - **We run** — we sprint, we do it for you, you don't have to. - **We keep it running** — we build it, then we operate it, month after month. That is already the positioning ("built and run by one studio"). The name just says it out loud. Everything else in this system falls out of those two readings. **Why three n's.** `runnn` + `.ing` is what makes the domain read as the word. The two extra n's aren't a typo to apologise for — they're the same letter caught three times mid-stride. A motion trail, spelled. That single move is the whole identity, which is why the mark is literally those three n's. ### Lines | Use | Line | |---|---| | Primary | **We run. You don't have to.** | | Sign-off / short | **Everything, running.** | | Ops & retainer side | **Built by us. Run by us.** | | Hero rewrite | Your whole digital operation — we runnn it. | --- ## 2. The green dot rule The period in `runnn.ing` is **Runnn Green**. It is a status light. > **Green means it's running.** That is the one rule that ties the logo, the product UI and the status page together. Hold it strictly: - Green is only ever used for *live, working, up, shipped, on*. - Nothing decorative is green. No green buttons, no green headings, no green charts. - When something is down, the dot goes grey — including the one in the logo on the incident page. That is the entire design of `not.runnn.ing`. Because the rule is scarce, the green actually means something when it appears. --- ## 3. Services — the six things we run **The naming rule: every service is a verb in the present continuous.** Nothing here is finished; it's all still going. A new service is just a new `-ing` word, so the system scales without a meeting. | Was | Runnn name | Lives at | What it is | |---|---|---|---| | AI Services | **Thinking** | `thinking.runnn.ing` | Models, agents and copilots that do the work, not the talking | | Software Development | **Building** | `building.runnn.ing` | Platforms, apps, and the plumbing underneath them | | UI/UX Design | **Drawing** | `drawing.runnn.ing` | Interfaces people actually get through | | Media Production | **Shooting** | `shooting.runnn.ing` | Film, motion and stills that carry the brand | | Automation Retainers | **Keeping** | `keeping.runnn.ing` | Your ops automated — then kept alive, month to month | | Local AI Projects | **Housing** | `housing.runnn.ing` | AI on your own hardware. Nothing leaves the building | **Keeping owns the green.** It's the service that keeps the dot green, so it gets the brand colour. That's not decoration — it's the argument for the retainer. ### Service colours Subordinate to ink and paper. One per service, used as an accent only. | Service | Hex | | |---|---|---| | Thinking | `#6D5CF7` | violet | | Building | `#3B82F6` | blue | | Drawing | `#F5A524` | amber | | Shooting | `#E0473A` | red | | Keeping | `#12E27A` | Runnn Green | | Housing | `#78716C` | stone — on-prem is metal in a rack, not a gradient | --- ## 4. Sentence domains The `.ing` hack keeps paying out. Each of these reads as a phrase, and each one is a real page. This is the cheapest marketing the brand will ever get. | Domain | Page | |---|---| | `start.runnn.ing` | The CTA. Onboarding, first contact. | | `up.runnn.ing` | **Client portal** — "up and running" | | `keep.runnn.ing` | Retainer signup and renewal | | `still.runnn.ing` | Case studies — *shipped 2021, still running* | | `now.runnn.ing` | Live status page. All green. | | `not.runnn.ing` | The incident page. Dot goes grey. | | `worth.runnn.ing` | Pricing | | `who.runnn.ing` | About, the team | | `we.runnn.ing` | Careers | | `stop.runnn.ing` | Unsubscribe (and it should be genuinely easy) | | `ops.runnn.ing` | Internal admin panel | Register the root plus wildcard DNS and these cost nothing extra. --- ## 5. Plans The running metaphor already names the two commercial shapes, and it maps one-to-one onto what's in `Pricing.tsx` today. | Now | Becomes | Stays | |---|---|---| | Project | **Sprint** | A defined build, delivered end to end | | Retainer | **Marathon** | An embedded digital team, month to month | --- ## 6. Voice Present tense. Verb first. Short. - **Do:** "We run your ops." / "It's live." / "We shot it, we cut it, it's up." - **Don't:** "We can help you with…" / "Solutions for…" / "Leveraging…" The name is a verb. Write like it. --- ## 7. Logo Drawn from scratch as geometric monoline paths — no font dependency, so the files render identically everywhere and can be scaled to any size. Construction: single stroke weight throughout, round caps and joins, circular bowls, single-storey `g`. The mark is the three n's, leaned 8° forward, with the trail fading behind the direction of travel. ### Files | File | Use | |---|---| | `logo-wordmark.svg` | **Primary logo.** Default in every context. | | `logo-wordmark-reversed.svg` | On ink or photography | | `logo-mark.svg` | Avatars, app icon, stamps, anywhere the name is already present | | `logo-mark-reversed.svg` | Same, on dark | | `logo-lockup.svg` | Wide headers, letterhead, invoice footers | | `logo-lockup-reversed.svg` | Same, on dark | | `logo-wordmark-mono.svg` / `logo-mark-mono.svg` | One colour, inherits `currentColor`. Trail is solid — foil, engraving and embroidery can't hold opacity. | | `app-icon.svg` | 512pt app / PWA icon | | `favicon.svg` | Browser tab, 32px and up | | `favicon-small.svg` | 16–24px. One stride and the dot; the trail turns to mush below 24px. | ### Rules - The wordmark is the logo. The mark is a shorthand for when the name is already on the page — don't lead with it. - Clear space on all sides = the height of one `n`. - Minimum wordmark width: 90px on screen, 24mm in print. - Never set the name in a system font as a stand-in for the logo. - Never recolour the wordmark's period to anything but Runnn Green or, on the incident page only, `#78716C`. - Never add a second green element next to the logo. The dot is the green. ### Motion The one animation the brand owns: the three n's fade in left to right over ~240ms, trailing edge first, as if the word is arriving at speed. Use it once per page load, on the header. Never loop it. --- ## 8. Colour and type | Token | Hex | | |---|---|---| | Ink | `#0B0D10` | text, dark surfaces, the logo | | Paper | `#F7F6F3` | light surfaces | | Runnn Green | `#12E27A` | live only — see §2 | | Trail | Ink @ 30% / 58% | the logo trail, and hairline rules | **Type.** The logotype is geometric monoline, so pair it with a geometric grotesk and keep the body text plainer: - Display / headings — **Poppins** (free) or **General Sans** / **Circular** if licensed. The single-storey `g` and circular bowls match the logo's construction. - Body — **Inter**. More texture, better at small sizes, doesn't compete. - Numerals in the panel — **JetBrains Mono**, tabular. --- ## 9. Where these files live | Path | What it is | |---|---| | `brand/` | Source of truth. Edit the artwork here. | | `public/brand/` | The served copy — same SVGs, plus rendered PNGs and `runnn-brand-kit.zip`. This is what `/brand` links to. | | `src/lib/brand.ts` | The brand *as data* — service names, accents, domains, the asset list. The site, the panel and `/brand` all read it, so a name changes in one place. | | `src/components/brand/Logo.tsx` | The logo as a component. Stroke is `currentColor`, so it works on paper and on ink without a second file. | **After editing artwork in `brand/`:** copy the SVGs to `public/brand/`, re-render the PNGs, and rebuild the zip. Nothing does this automatically — the files are small and change rarely, and a build step that silently regenerates a logo is worse than a two-line note. The public page at **`/brand`** is the version anyone outside the repo should use. Send that link rather than a file.