# Robutlers — Brand Guidelines v1.1

**Last updated:** April 17, 2026 (mark direction locked)
**Maintained by:** Zach (Vursu Labs)
**Domain:** robutlers.com
**Parent brand:** Vursu Labs (Robutlers is the consumer-facing product; Vursu is the B2B platform)

---

## 1. What Robutlers Is

Robutlers is a personal AI knowledge brain. It interviews you over time, captures structured knowledge about your life (preferences, people, places, routines, possessions), and makes that knowledge portable to any AI tool through MCP (Model Context Protocol).

**One-liner:** Your AI doesn't know who you are. Robutlers fixes that.

**Category:** Personal AI / Consumer knowledge management / MCP-native memory layer.

**Relationship to Vursu:** Robutlers is the B2C product; Vursu is the B2B Knowledge Operating System for SMBs. They share a parent (Vursu Labs) but are visually and tonally distinct — Vursu is operator-serious; Robutlers is human-warm.

---

## 2. Brand Positioning

### The insight
Every AI tool starts from zero with you. You re-explain your diet, your smart home, your allergies, your team, your taste — every single conversation. The model is smart. It just doesn't know *you*.

### The promise
A private, always-on knowledge layer that knows you — and is portable to every AI tool you use.

### The target user
- Uses Claude / ChatGPT / Gemini daily (or wants to)
- Has tried note-taking apps, "second brain" systems, or custom GPTs
- Is frustrated by the friction of re-explaining themselves
- Values privacy and ownership of personal data
- Comfortable with the phrase "MCP" or willing to learn what it unlocks

### What Robutlers is NOT
- Not a note-taking app (users don't type; Robutlers asks)
- Not a CRM
- Not a productivity tool
- Not Vursu (Vursu is for your business; Robutlers is for you)
- Not a chatbot you talk to for answers — it's a brain you talk to so *other* AI tools can answer better

---

## 3. Voice & Tone

### Core voice attributes
- **Warm, not cutesy.** A good butler is discreet, attentive, and smart — not a cartoon.
- **Curious, not interrogative.** We ask because we genuinely want to know, not to extract data.
- **Confident, not boastful.** We know why this matters. We don't oversell.
- **Plain-spoken, not jargon-heavy.** "Your brain" beats "structured knowledge graph" every time in user-facing copy.
- **Private by default.** Every mention of data reinforces that it's *yours*.

### Voice examples

✅ **On-brand:**
- "Your AI doesn't know who you are. Robutlers fixes that."
- "It asks. You answer. It remembers forever."
- "Your brain, your data."
- "The context layer your AI is missing."

❌ **Off-brand:**
- "Revolutionize your AI workflow with our cutting-edge knowledge graph platform."
- "Unlock unprecedented AI personalization."
- "Hey bestie! 💅 Your AI called, it wants to know YOU!"

### Tone shifts by surface
- **Landing page:** Confident, declarative, minimal hedging.
- **Onboarding / interview:** Warm, conversational, curious. The product literally talks — this is where the butler personality lives.
- **Docs / MCP integration:** Clear, technical, low-adjective.
- **Social (@vursubuilds / Robutlers posts):** Honest, build-in-public, observation-forward.

---

## 4. Naming & Wordmark

### The name
**Robutlers** — always one word, capital R, lowercase rest. Never:
- ❌ RoButlers
- ❌ ROBUTLERS in running copy (all-caps is allowed only in stylized display contexts)
- ❌ Ro-Butlers
- ❌ Ro Butlers
- ❌ Robutler (singular) unless specifically referring to a single instance/agent

### Etymology note
Robot + Butlers. Pronounced *roh-butt-lers* (like "robot" + "butlers" mashed together). This is intentional and should not be over-explained — the name works harder when people figure it out themselves.

### Wordmark typography
- **Font:** JetBrains Mono (the site's `--font-heading` variable)
- **Weight:** 700 (bold)
- **Tracking:** Tight, but readable — no extra letter-spacing for the wordmark
- **Case:** Title case ("Robutlers") for the wordmark; all-lowercase acceptable in very restrained display contexts
- **Color:** Primary navy `#1A365D` on light backgrounds; white `#FFFFFF` on dark; accent orange `#FF8C00` only for emphasis or hover states — never the default wordmark color

---

## 5. Color System

All hex values below are pulled directly from the live robutlers.com stylesheet. CSS variable names match what's in the codebase.

### Primary brand colors

| Token | Hex | Role |
|---|---|---|
| `--color-text-primary` / `--color-navy-500` | `#1A365D` | **Primary navy.** The dominant brand color. Used for wordmark, headlines, body text, structural elements, and the front layer of the stacked mark. |
| `--color-accent` | `#FF8C00` | **Accent orange.** The energetic counterpoint. Used for CTAs, links, emphasis, and brand highlights. Use sparingly — its impact comes from scarcity. |
| `--color-white` | `#FFFFFF` | **White.** Primary surface and wordmark color on dark backgrounds. |

### Navy stack ramp (for the mark)

These three values make the stacked R read as depth. They are official palette tokens, not one-offs.

| Token | Hex | Role |
|---|---|---|
| `--color-navy-500` | `#1A365D` | Mark front layer (same as primary navy) |
| `--color-navy-300` | `#5A7192` | Mark middle layer |
| `--color-navy-100` | `#A8B6C8` | Mark back layer |

### Support colors

| Token | Hex | Role |
|---|---|---|
| `--color-accent-glow` | `#FFF0DC` | Soft peach/cream. Background glow for accent elements, subtle highlights. |
| `--color-bg-deep` | `#F8F9FA` | Off-white page background. Slightly warmer than pure white. |
| `--color-bg-card` | `#FFFFFF` | Card/panel surfaces. |
| `--color-bg-hover` | `#EBF8FF` | Very pale blue for interactive hover states. |
| `--color-bg-input` | `#F0F2F5` | Input field fill. |
| `--color-text-muted` | `#A0AEC0` | Secondary/helper text. |

### Semantic colors

| Token | Hex | Role |
|---|---|---|
| `--color-success` | `#2D8A4E` | Success states, confirmations, positive indicators. |
| Success bg | `#E8F5EC` | Success background fill. |
| Error | `#FB2C36` / `#FF6568` | Error text / softer error text. |
| Error bg | `#FDE8E8` / `#F8D7D7` / `#F0BFBF` | Error backgrounds, escalating severity. |

### Color usage rules

- **Navy-dominant hierarchy.** Navy is the workhorse — roughly 60–70% of any composition. Orange is the accent — roughly 5–10%. White/neutral fills the rest.
- **Never put orange on navy for body text.** Contrast is fine but it's visually loud and burns retention. Reserve that pairing for badges, single buttons, or highlight moments.
- **Accent glow is not orange.** `#FFF0DC` is the *halo* around orange, not a substitute for it.
- **Don't invent new colors.** If a color isn't in this table, it doesn't exist in Robutlers. Extend the system by asking what role a color needs to play, then reusing or defining an official token.

---

## 6. Typography

### Typefaces

| Role | Family | Source | Fallback stack |
|---|---|---|---|
| Headings / display / wordmark | **JetBrains Mono** | Google Fonts | `"JetBrains Mono", "Roboto Mono", monospace` |
| Body / UI | **Inter** | Google Fonts | `Inter, system-ui, sans-serif` |
| Code / technical / MCP query blocks | **JetBrains Mono** | Google Fonts | `"JetBrains Mono", monospace` |

### Why JetBrains Mono for headings
The monospaced heading is a deliberate signal: Robutlers is a developer-adjacent consumer product. It says "technical, precise, structured" without being cold. It also visually separates Robutlers from Vursu (which uses a conventional sans-serif for display).

### Weights in use
- 500 (medium)
- 600 (semibold)
- 700 (bold)

### Type pairing rules
- Headlines: JetBrains Mono 700, navy `#1A365D`, tight tracking.
- Body: Inter 400–500, navy `#1A365D` at full opacity or slightly reduced.
- Muted / helper text: Inter 400–500, `#A0AEC0`.
- Inline code / keywords / tool names: JetBrains Mono, same size as surrounding body.
- Never use JetBrains Mono for long-form body copy. Monospace loses readability past a sentence or two.

---

## 7. Logo System — What Exists, What's Missing

### What currently exists (as of this doc)
- A wordmark: the text "Robutlers" in the heading font
- A mark: a shield-and-keyhole symbol **→ being replaced**

### What you need — the full logo kit

Below is the complete asset list Robutlers should have. Items marked 🔴 are **missing or need to be created/replaced**. Hand this list to the other AI along with the design direction.

#### 7.1 Primary logo (horizontal lockup)
🔴 **Wordmark + mark, side-by-side**, mark to the left of the text
- Navy version (`#1A365D` mark and wordmark on light backgrounds)
- White version (both mark and wordmark in white, for dark backgrounds)
- Black version (`#000000` solid, for single-color print)
- Reversed/knockout version (for use over photography or busy backgrounds)

#### 7.2 Stacked logo (vertical lockup)
🔴 **Mark above, wordmark below**, for square formats, avatars, and app icons
- Same four color treatments as above

#### 7.3 Wordmark-only
🔴 **Text alone, no mark**, for cases where the mark is too small to read or already present nearby
- Navy, white, black versions

#### 7.4 Mark-only (the symbol alone)
🔴 **The new Robutlers mark**, standalone — this is the asset you're about to commission
- Navy (`#1A365D`)
- White
- Black
- Orange (`#FF8C00`) — for special/highlight usage only
- Inverted / outline version (for knockouts)

#### 7.5 Favicon / app icon set
🔴 Missing — every size below needs to exist:
- `favicon.ico` — 16×16, 32×32, 48×48 multi-size
- `favicon-16x16.png`, `favicon-32x32.png`
- `apple-touch-icon.png` — 180×180, solid background (cannot be transparent for iOS)
- `android-chrome-192x192.png`, `android-chrome-512x512.png`
- `safari-pinned-tab.svg` — monochrome SVG
- `site.webmanifest` — PWA manifest referencing the icons
- Optional: maskable icon for Android PWA (512×512 with safe zone)

#### 7.6 Social / OG image
🔴 Missing:
- `og-image.png` — 1200×630, used for Twitter/X, LinkedIn, Facebook, iMessage link previews
- Square social avatar — 400×400, for Instagram, LinkedIn company page, X profile
- Optional: LinkedIn banner (1584×396), X header (1500×500)

#### 7.7 Motion / animated mark
🔴 Nice-to-have (not urgent):
- Animated SVG or Lottie of the mark doing a subtle "thinking" or "pulse" loop for loading states and hero sections

#### 7.8 Mark construction rules (to give the designer)
- **Clear space:** Minimum clear space around the mark = the height of the "R" in the wordmark, on all sides
- **Minimum size:** Mark should never be smaller than 16×16px on screen or 0.25" in print
- **Don't:** stretch, rotate, recolor with unapproved colors, add drop shadows, outline, place on low-contrast backgrounds, combine with other marks, or re-crop

---

## 8. The Robutlers Mark — Locked Direction

The mark is a **stacked monogram R** — three layered Rs in graduated navy tones offset down-and-to-the-right, creating a sense of accumulated depth. The stack visually echoes the product's core behavior: **layers of memory accumulating over time**. Each conversation adds a layer to your brain; the mark embodies that.

### Conceptual meaning
- Each layer = a moment of knowledge captured
- The stack growing back-to-front = context compounding
- The shadow falling forward = history informing the present
- Heavy, geometric R = confident, substantial, present

### Construction specs

**Letterform**
- Typeface: **Inter Black** (weight 900)
- Chosen for geometric clarity, heavy presence, and deliberate kinship with JetBrains Mono (both designed by Rasmus Andersson) — the wordmark and mark share a design lineage without being the same font
- The R must be the uppercase Inter Black R specifically — not a custom drawn variant in v1

**Stack**
- Exactly **3 layers**
- Each layer offset from the one behind it by a consistent **x+3, y+3** ratio (at reference size) — shadow cascades down-and-right
- At 180px type size, that means ~8px offsets between layers
- Scale offsets proportionally: roughly 4–5% of the cap height

**Color ramp (front to back)**
| Layer | Hex | Purpose |
|---|---|---|
| Front (Layer 1) | `#1A365D` | Primary navy — full presence |
| Middle (Layer 2) | `#5A7192` | Midtone — 50% depth into the navy family |
| Back (Layer 3) | `#A8B6C8` | Light navy-gray — receding depth |

These three values are derived from `#1A365D` and are part of the extended Robutlers palette — add them as official tokens: `--color-navy-500` (front), `--color-navy-300` (middle), `--color-navy-100` (back).

### Scale behavior

| Size | Treatment |
|---|---|
| 128px+ (hero) | Full 3-layer stack |
| 64px | Full 3-layer stack, offsets tighten |
| 32px | Full 3-layer stack, offsets at minimum readable ratio |
| 24px and below | **Single solid R in primary navy** — stacking becomes muddy |
| 16px (favicon) | Single solid R, may require slight weight adjustment for legibility |

**Rule:** The solid single-layer R is not a compromise — it's the compressed form of the mark. Both expressions are official.

### Reversed / on-dark treatment

When placed on navy (`#1A365D`) or dark backgrounds:
- Front layer: `#FFFFFF` (white)
- Middle layer: `#A8B6C8` (back-color in light mode becomes middle here)
- Back layer: `#5A7192`

This preserves the sense of depth on dark surfaces while keeping the front layer as the strongest focal point.

### Clear space and sizing
- **Clear space:** Minimum clear space around the full stacked mark = height of the front R's counter (the enclosed hollow of the R) on all sides
- **Minimum size for stacked version:** 32×32px
- **Minimum size for solid version:** 16×16px

### Don'ts
- Don't change the stack direction (always down-right)
- Don't add more than 3 layers
- Don't apply gradients to individual layers (flat fills only)
- Don't use orange (`#FF8C00`) for any layer — the mark stays in the navy family
- Don't stretch the R, rotate it, or modify the letterform
- Don't outline or stroke the layers
- Don't add drop shadows, blur, or any other effects — the stack *is* the depth
- Don't place the stacked version on busy photography — use the solid version or put the stacked mark on a solid color panel

---

## 9. Iconography & Illustration

### Feature icons
The site currently uses emoji (🎮 🔌 📤 📝) as feature icons. This is intentional — it's fast, human, and reinforces the casual-but-capable tone. If/when these get replaced with custom icons:
- Single-line, geometric, 24×24 base grid
- Navy stroke on light, white stroke on dark
- No fills unless the shape requires it
- Match the mono-heading energy: slightly technical, slightly warm

### Illustration style
Robutlers doesn't currently use illustrations. If added:
- Flat, geometric, minimal palette (navy + orange + accent-glow + white)
- Human presence is fine but stylized — never photo-realistic
- Avoid the "corporate Memphis" blob-person trope

---

## 10. UI / Component Guidance

### Surfaces
- **Deep background:** `#F8F9FA` (page)
- **Card:** `#FFFFFF` with subtle border or light shadow
- **Input:** `#F0F2F5` fill, navy text, orange focus ring

### Buttons
- **Primary CTA:** Orange fill `#FF8C00`, white text, JetBrains Mono or Inter semibold
- **Secondary:** Navy outline, navy text, transparent fill
- **Tertiary / link:** Navy or orange text, underline on hover

### Borders & radii
- Radii on the live site are moderate (rounded, not pill) — match what's in the codebase rather than inventing new values
- Borders should be low-contrast: `#E4E8EE` or similar

### Shadows
- Keep shadows subtle. Robutlers reads as confident and calm — not floaty.

---

## 11. Copy Conventions

### Product name usage
- First mention in any doc: **Robutlers**
- Subsequent mentions: Robutlers (never shorten to "Robut" or "RB")
- Possessive: Robutlers' (e.g., "Robutlers' MCP integration")
- Your own brain inside Robutlers: **"your brain"** (lowercase, possessive) — this is the product's pet term for the user's knowledge graph. Avoid "knowledge graph" or "vault" in user-facing copy.

### Terminology
| Say this | Not this |
|---|---|
| Your brain | Your knowledge base, your vault, your data |
| Interview | Questionnaire, form, survey |
| Capture | Ingest, record, log |
| Share a segment | Share a category, share a folder |
| Connect to an AI tool | Integrate, plug in, hook up |
| MCP | Model Context Protocol (spell out once per doc, then abbreviate) |

### Capitalization
- Sentence case for UI and headlines. Title Case only for proper nouns and the wordmark.
- Never all-caps in body copy (OK in small stylized labels like `→ GET ACCESS`).

---

## 12. Brand Relationship: Robutlers vs. Vursu

| | **Robutlers** | **Vursu** |
|---|---|---|
| Audience | Individuals (B2C) | SMBs / operators (B2B) |
| Primary color | Navy `#1A365D` | Teal `#0D9488` |
| Accent | Orange `#FF8C00` | (TBD per Vursu brand doc) |
| Heading font | JetBrains Mono (mono) | Sans-serif |
| Voice | Warm, curious, butler-attentive | Operator-direct, systems-minded |
| Pet term | "your brain" | "knowledge OS" |

**Key rule:** Never co-brand Robutlers and Vursu in the same lockup except on the "Made by Vursu Labs" footer signature. They share DNA; they don't share a logo.

---

## 13. Asset Inventory Checklist

A single checklist to run through when commissioning the new mark and filling gaps.

### Logos
- [ ] Primary horizontal lockup — navy
- [ ] Primary horizontal lockup — white
- [ ] Primary horizontal lockup — black
- [ ] Primary horizontal lockup — reversed/knockout
- [ ] Stacked vertical lockup — navy
- [ ] Stacked vertical lockup — white
- [ ] Stacked vertical lockup — black
- [ ] Wordmark-only — navy
- [ ] Wordmark-only — white
- [ ] Wordmark-only — black
- [ ] Mark-only — navy
- [ ] Mark-only — white
- [ ] Mark-only — black
- [ ] Mark-only — orange (special use)
- [ ] Mark-only — outline/inverted

### File formats (for each logo above)
- [ ] SVG (vector, for web and scaling)
- [ ] PNG @ 1x, 2x, 3x with transparent background
- [ ] PDF (for print)

### Favicons & app icons
- [ ] favicon.ico (multi-size)
- [ ] favicon-16x16.png
- [ ] favicon-32x32.png
- [ ] apple-touch-icon.png (180×180, solid bg)
- [ ] android-chrome-192x192.png
- [ ] android-chrome-512x512.png
- [ ] safari-pinned-tab.svg (monochrome)
- [ ] site.webmanifest
- [ ] Maskable PWA icon (optional)

### Social
- [ ] og-image.png (1200×630)
- [ ] Square social avatar (400×400)
- [ ] LinkedIn banner (1584×396) *(optional)*
- [ ] X/Twitter header (1500×500) *(optional)*

### Motion *(optional, later)*
- [ ] Animated mark (Lottie or SVG)

### Typography files
- [ ] Inter — via Google Fonts (no file hosting needed)
- [ ] JetBrains Mono — via Google Fonts (no file hosting needed)
- [ ] Webfont fallbacks documented in CSS

### Documentation
- [x] Brand guidelines (this doc)
- [ ] README in assets repo with logo usage DOs and DON'Ts
- [ ] Press kit ZIP (hosted link for press/partners)

---

## 14. Handoff Notes for the Logo AI

The mark direction is **locked** (Section 8). Your job is to produce **production-ready vector files** matching the spec — not to re-design.

Paste this at the top of your prompt to the logo AI:

> **Task:** Produce production-ready logo files for Robutlers based on the locked mark direction below.
>
> **The mark is a 3-layer stacked monogram R.** Letterform: Inter Black (weight 900), uppercase R. The three layers are offset down-and-to-the-right from each other by ~4–5% of cap height, with no overlap effects — just flat navy layers stacked in depth.
>
> **Layer colors (front → back):**
> - Front: `#1A365D`
> - Middle: `#5A7192`
> - Back: `#A8B6C8`
>
> **Reversed on navy:** Front `#FFFFFF`, Middle `#A8B6C8`, Back `#5A7192`.
>
> **Wordmark:** The word "Robutlers" set in JetBrains Mono Bold (700), color `#1A365D` (or white on dark). Title case only. Kerning default — do not track out.
>
> **Deliverables needed:**
> 1. Mark-only SVG — stacked 3-layer version (navy palette)
> 2. Mark-only SVG — solid single-layer version, `#1A365D`
> 3. Mark-only SVG — reversed on navy (stacked version adapted for dark bg)
> 4. Mark-only SVG — white single-color (for knockout use)
> 5. Mark-only SVG — black single-color (for single-color print)
> 6. Horizontal lockup SVG — stacked mark on left, "Robutlers" wordmark on right, proportions and baseline alignment per Section 8 clear-space rules
> 7. Horizontal lockup SVG — reversed (on navy)
> 8. Stacked/vertical lockup SVG — mark above, wordmark below, centered
> 9. Wordmark-only SVG — navy and white variants
> 10. Favicon set: solid single-layer R in navy, exported at 16×16, 32×32, 48×48, 180×180 (apple-touch-icon with solid navy `#1A365D` background, white R), 192×192, 512×512
> 11. OG image: 1200×630 PNG, navy `#F8F9FA` background, stacked mark left-aligned, wordmark beside it, tagline "Your AI doesn't know who you are. Robutlers fixes that." in JetBrains Mono below
>
> **For each SVG, use the actual Inter Black glyph path for the R** — do not approximate with generic sans-serif. If Inter Black is unavailable, use a heavy geometric sans (Helvetica Neue Black, Neue Haas Grotesk Display 95, or similar) and flag the substitution.
>
> **Reference Section 5 for exact hex values, Section 6 for typography, Section 7.8 for clear space and sizing, and Section 8 for all mark construction rules.**

---

*End of Robutlers Brand Guidelines v1.1.*