Lumotia/docs/brand/magnotia-brand-guidelines.md

# Magnotia — Brand Guidelines

**Version:** 1.1
**Date:** 2026/03/21
**Source:** Brand Forge — six-phase visual identity development

---

## 1. Brand Foundation

**Purpose:** Magnotia exists because the tools meant to organise your thoughts demand more mental energy than the thoughts themselves.

**Essence:** Clarity without friction.

**Archetype:** Sage (primary) + Magician (secondary)

**Voice sliders:**
- Formal 3 ↔ Casual **7**
- Serious **5** ↔ Funny 5
- Respectful **5** ↔ Irreverent 5
- Enthusiastic 3 ↔ Matter-of-fact **7**

**We Are / We Are Not:**

| We are | We are not |
|---|---|
| Astute | Rambling |
| Concise | Rude |
| Direct | Dishonest |
| Listening | Judging |
| Peace | Static |

**Tenets:**
1. "How can I make this person feel seen and heard?"
2. "Does this add or remove complexity from daily life?"
3. "Is this scientifically backed? Is it respectful? Is it honest?"
4. "Is the message clear and unambiguous?"
5. Integrity, honour, respect.
6. Progressive disclosure — never show the full complexity.
7. Build the ecosystem.

---

## 2. Brand Marks

### Primary: Wordmark

**"Magnotia"** set in Instrument Serif Italic, 400 weight, amber (#e8a87c on dark / #b87a4a on light).

**Usage:**
- The wordmark is the primary brand identifier across all contexts
- Always italic — the italic-only choice gives it a handwritten, personal quality
- Minimum size: 18px digital
- Clear space: half the cap-height of the "K" on all sides
- Accompanied by tagline "Think out loud" in Lexend 400, `--text-tertiary`, when space permits

**Don'ts:**
- Never set the wordmark in Lexend or any other font
- Never use Instrument Serif for anything other than the wordmark and marketing display
- Never use the wordmark in upright (roman) — always italic
- Never stretch, rotate, add shadows, or apply effects
- Never place on a busy or low-contrast background

### Secondary: Waveform Mark

A minimal abstracted waveform — three vertical bars of asymmetric heights in amber. Used where the wordmark won't fit.

**Variants:**
- **Static:** Three bars, amber (#e8a87c), asymmetric heights. Favicon, system tray, social profile picture
- **Animated (recording):** Gentle amplitude pulse, 2s cycle, ease-in-out. Amplitude clamped to a gentle visual range regardless of input level — status indicator, not a VU meter. Disabled when `prefers-reduced-motion: reduce` is active

**Proportions:**
- Three bars, left to right: 60% height, 100% height, 40% height
- Bar width: 20% of total mark width
- Gap between bars: 15% of total mark width
- Rounded terminals (radius = half bar width) — consistent with Lucide icon language
- At 16×16px: bars are 3px wide, 1px gap between, heights 6px / 10px / 4px (centred vertically)
- At 512×512px: bars are 96px wide, 48px gap, heights 192px / 320px / 128px

**Sizing:** Must remain legible at 16×16px (favicon) and scale cleanly to 512×512px (app store)

**Note:** The CORBEL fox mark is not a Magnotia asset. Never use the fox on Magnotia materials.

---

## 3. Colour System

### Design Tokens — Dark Theme (Primary)

#### Surfaces

| Token | Hex | Usage |
|---|---|---|
| `--bg` | #0f0e0c | Primary background (60%) |
| `--bg-elevated` | #171614 | Elevated panels, popovers |
| `--bg-card` | #1b1a17 | Content containers, cards |
| `--bg-input` | #151412 | Input fields |
| `--sidebar` | #13120f | Navigation surface |

#### Text

| Token | Hex | Min size | Usage |
|---|---|---|---|
| `--text` | #f0ece4 | 12px | Primary text — AAA on all surfaces |
| `--text-secondary` | #9a9486 | 12px | Supporting text — AA on all surfaces |
| `--text-tertiary` | #716b60 | 18px bold / 24px regular | Labels, captions, metadata — large text only |

#### Accent

| Token | Hex | Usage |
|---|---|---|
| `--accent` | #e8a87c | Primary accent — CTAs, active states, brand moments |
| `--accent-hover` | #d4976a | Interactive hover state |
| `--accent-subtle` | #e8a87c10 | Tinted backgrounds, selected states |
| `--accent-glow` | #e8a87c25 | Selection highlights, focus rings |

#### Borders & Interactive

| Token | Hex | Usage |
|---|---|---|
| `--border` | #2c2923 | Primary borders |
| `--border-subtle` | #221f1b | Subtle dividers |
| `--nav-active` | #201e1a | Active navigation state |
| `--hover` | #1e1c18 | Hover states |

#### Semantic

| Token | Hex | Usage |
|---|---|---|
| `--success` | #7ec89a | Positive states, completion |
| `--danger` | #e87171 | Errors, recording active, destructive actions |
| `--warning` | #e8c86e | Loading, caution states |

#### Sensory Zones

| Token | Hex | Purpose |
|---|---|---|
| `--zone-cave` | #1a2a2e | Deep focus — cool teal tint |
| `--zone-energy` | #2a2520 | Collaboration — warm neutral |
| `--zone-reset` | #1e2420 | Relaxation — muted sage |

Zone transitions: 300–500ms cross-fade, disabled when `prefers-reduced-motion: reduce`.

### Design Tokens — Light Theme

#### Surfaces

| Token | Hex |
|---|---|
| `--bg` | #faf8f5 |
| `--bg-elevated` | #f3f0eb |
| `--bg-card` | #ffffff |
| `--bg-input` | #f0ede8 |
| `--sidebar` | #f5f2ed |

#### Text

| Token | Hex |
|---|---|
| `--text` | #1a1816 |
| `--text-secondary` | #5c574d |
| `--text-tertiary` | #8a8578 |

#### Accent

| Token | Hex | Note |
|---|---|---|
| `--accent` | #b87a4a | Darkened from legacy #d4956a for contrast compliance |
| `--accent-hover` | #a06b3e | |
| `--accent-subtle` | #b87a4a10 | |
| `--accent-glow` | #b87a4a20 | |

#### Semantic

| Token | Hex |
|---|---|
| `--success` | #3d8a5a |
| `--danger` | #c44d4d |
| `--warning` | #b89a3e |

#### Sensory Zones (Light)

| Token | Hex |
|---|---|
| `--zone-cave` | #e8f0f2 |
| `--zone-energy` | #f5f0e8 |
| `--zone-reset` | #edf2ea |

### Colour Rules

1. **Never** pure black (#000000) on pure white (#FFFFFF) — causes halation for neurodivergent users
2. **Amber accent is always meaningful** — signals interactivity, recording state, or brand identity. Never decorative
3. **Tertiary text is large text only** — minimum 18px bold or 24px regular
4. **Grain texture** at 2.5% opacity (dark) / 1.5% opacity (light)
5. **All neutrals carry a warm amber undertone** for palette cohesion
6. **60-30-10 rule:** 60% surface, 30% elevated surfaces, 10% amber accent

---

## 4. Typography

### Font Stack

| Role | Font | Source | Licence |
|---|---|---|---|
| **Display** | Instrument Serif Italic | Google Fonts | OFL |
| **UI / Body** | Lexend (variable, 300–700) | Google Fonts | OFL |
| **Mono** | JetBrains Mono | JetBrains | OFL |

```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&family=Lexend:wdth,wght@75..125,300..700&display=swap');

:root {
  --font-ui: "Lexend", system-ui, sans-serif;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
}
```

### Why Lexend

Lexend was designed by Bonnie Shaver-Troup specifically to improve reading proficiency for people with reading difficulties. It is a variable font with adjustable width axis, enabling users to dynamically adapt letter spacing to their own fluctuating visual-perceptual thresholds — a direct requirement from the Magnotia design principles. High x-height, generous spacing, optimised letterforms.

User-selectable alternatives in settings: Atkinson Hyperlegible Next, OpenDyslexic.

### Type Scale

Base: 16px. Ratio: 1.250 (Major Third).

| Label | Size | Weight | Line Height | Usage |
|---|---|---|---|---|
| Caption | 12px | 400 | 1.4 | Metadata, version numbers, tertiary labels. **Note:** 12px is the absolute floor — test on 1366×768 displays before locking in. ADHD users on budget laptops are a real segment. Consider bumping to 13px if legibility is marginal on low-DPI hardware |
| Small | 13px | 400–500 | 1.5 | Button text, status indicators, badges |
| Body Small | 13px | 400 | 1.5 | Secondary UI text, settings descriptions |
| Body | 16px | 400 | 1.5 | Base body text, primary UI text |
| Body Large | 18px | 400 | 1.6 | Lead paragraphs, onboarding text |
| Transcript | 16–24px | 400 | 1.85 | Transcript reading (user-adjustable) |
| H4 | 18px | 600 | 1.3 | Subsection headings, card titles |
| H3 | 21px | 600 | 1.3 | Section headings |
| H2 | 26px | 600 | 1.2 | Page titles |
| H1 | 32px | 700 | 1.15 | Hero text (marketing only) |
| Display | 26px | 400 italic | 1.1 | Wordmark (Instrument Serif only) |

### Typography Rules

**Do:**
- Minimum 16px for all body text
- 1.5× line spacing minimum for body
- Left-aligned only — never centred or justified for body copy
- Maximum 75-character line width
- Sentence case for headings — never all-caps for extended text
- Offer user-adjustable letter spacing via Lexend's variable width axis

**Never:**
- Never use Instrument Serif for body or UI text — display/brand only
- Never use italic for extended reading
- Never go below 12px for any text
- Never use more than 3 weights on a single screen
- Never use decorative or script fonts anywhere

### Accessibility Typography Features

| Feature | Default | User-adjustable |
|---|---|---|
| Font family | Lexend | Lexend / Atkinson Hyperlegible Next / OpenDyslexic |
| Font size (transcript) | 16px | 16–24px slider |
| Letter spacing | Default | Adjustable via Lexend variable axis |
| Line height | 1.5 (UI) / 1.85 (transcript) | 1.3–2.2 range |
| Bionic reading | Off | Toggle |
| Reduce motion | Follows system | Override toggle |

### Bionic Reading

Optional mode that bolds the first 1–3 letters of each word (typically half the word length, rounded up for short words) to create fixation points at word onset:

```
Standard:  The quick brown fox jumps over the lazy dog
Bionic:    The quick brown fox jumps over the lazy dog
           ^^  ^^^   ^^^   ^^  ^^^   ^^   ^^  ^^  ^^
```

Off by default. User-controlled toggle in settings.

### Fallback Stacks

| Context | Primary | Fallback |
|---|---|---|
| App (Tauri) | Lexend (bundled) | system-ui, sans-serif |
| Marketing site | Lexend (Google Fonts) | system-ui, sans-serif |
| Documents | Lexend (if installed) | Calibri, Segoe UI |
| Email | system-ui | Arial, Helvetica |

---

## 5. Imagery & Illustration

### Photography Brief

**Subjects:** Textured surfaces (wood grain, concrete, weathered stone, warm-lit materials), architecture (brutalist, human-centred), close-up material photography. App screenshots on the warm dark UI.

**Human element:** Hands only — writing, holding a coffee, interacting with physical objects. Never face-to-camera. Never screens or devices. Let screenshot treatments handle product demonstration.

**Mood:** Warm colour temperature, natural light, soft and directional, low-to-medium contrast. "Late afternoon through a window."

**Off-limits:** AI-generated people, stock photos of people at screens, cold/clinical environments, anything resembling a SaaS landing page hero.

**Stock sources:** Unsplash or Pexels, curated into a single reference library of 20–30 images. The warm grain wash treatment unifies material from either source.

### Image Treatments

**Primary — Warm Grain Wash:**
- Shift colour temperature toward amber (#e8a87c)
- Grain texture overlay at 2–3% opacity
- Slight vignette (10–15%)
- Applied to all texture and architecture photography

**Secondary — Amber Duotone (high-impact moments only):**
- Shadows: #0f0e0c
- Highlights: #e8a87c
- For hero sections, social feature images, milestone announcements

**Rules:**
- Never apply colour treatments over hands/human elements
- Screenshots are shown untreated — the UI is already brand-aligned
- Textures and architecture always receive warm grain wash at minimum

### Illustration Approach

Magnotia does not use traditional illustration. Visual communication beyond photography uses:
- Abstract waveform/sound ripple motifs in amber
- Geometric line work — 2px stroke, amber on dark surfaces
- Data visualisation-style graphics for explaining features

**Constraints:** Brand colours only. 2px stroke. No characters, mascots, or anthropomorphised elements. No gradients — flat colour with opacity variations.

### Empty States

Empty states are high-emotion moments for neurodivergent users — blank screens trigger freeze response.

| State | Treatment |
|---|---|
| First launch | Faint ambient waveform in `--accent-subtle`. Single action: press the record button |
| Empty transcript | Waveform motif + "Press record or Ctrl+Shift+R" |
| Empty task list | "Tasks will appear here when Magnotia finds them in your transcripts" |
| Empty history | "Your transcriptions will be saved here" |
| Failed transcription | "Something went wrong with that transcription. Your audio is saved — try again when you're ready." Clear recovery path, never blame the user. This is the highest-emotion failure state in the app |

**Principle:** Ambient presence, not demanding call to action. "I'm here when you're ready."

### Iconography

**Library:** Lucide Icons — open source, MIT licence, 2px stroke, rounded terminals.

**Rules:**
- Every icon MUST be paired with a literal text label
- No standalone icons without labels
- Colour: `--text-tertiary` default, `--accent` when active
- Size: 16px (navigation), 20px (feature areas), 24px (primary actions)
- Never modify Lucide icons

**Core Set:**

| Function | Icon | Label |
|---|---|---|
| Dictation | `mic` | Dictation |
| Files | `file-text` | Files |
| Tasks | `square-check` | Tasks |
| History | `clock` | History |
| Settings | `settings` | Settings |
| Record | `circle` | Record |
| Stop | `square` | Stop |
| Copy | `copy` | Copy |
| Export | `download` | Export |
| Clear | `x` | Clear |
| Save | `save` | Save |
| Collapse | `chevron-left` | Collapse |
| Expand | `chevron-right` | Expand |

### AI Imagery Policy

- **Never** AI-generated images of people
- AI textures, patterns, and backgrounds acceptable if run through brand treatment
- AI waveform visualisations acceptable for marketing
- Disclose AI generation where audience would reasonably expect to know

---

## 6. Motion & Animation

**Personality:** Slow, calm, deliberate. Elderflower, not espresso.

| Property | Value |
|---|---|
| Default easing | ease-out — cubic-bezier(0.2, 0.8, 0.2, 1) |
| UI transitions | 150–200ms |
| Decorative motion | 300–500ms |
| Zone transitions | 300–500ms cross-fade |
| Wordmark animation | Fade-in, 400ms |
| Waveform mark (recording) | Amplitude pulse, 2s cycle, ease-in-out, clamped range |
| Reduced motion | All animations → instant or single-frame |

**Never:** Bounce effects, screen shake, slide-from-offscreen, auto-playing content, aggressive attention-grabbing animation.

**Reduced motion implementation:**
```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## 7. Social & Content

### Platform Priority

| Tier | Platform | Role |
|---|---|---|
| Primary | Reddit | Community participation, dev logs |
| Secondary | Twitter/X | Build-in-public, feature GIFs |
| Tertiary | YouTube | Milestone content only |
| Passive | Mastodon | Cross-post from X |
| Never | LinkedIn | Wrong audience, wrong culture |

### Key Subreddits

r/ADHD, r/productivity, r/neurodiversity, r/selfhosted, r/IndieDev, r/SomebodyMakeThis

**Reddit rule:** "If a post would work without mentioning Magnotia at all, it's a good post."

### Social Templates (Canva Brand Kit)

Four templates, dark background (#0f0e0c), grain overlay, Lexend body, amber accent:

1. **Dev Log Card** — 1200×675 (X) / 1200×900 (Reddit)
2. **Feature Screenshot Frame** — 1200×675
3. **Quote/Text Post** — 1200×1200
4. **Announcement** — 1200×675

**Layout rules:** 60px padding, wordmark bottom-left (small, amber), Lexend only in templates, grain at 2.5%.

### Content Voice

At pre-launch: Jake's voice, not a brand voice. Direct, honest, no filter. Authenticity IS the brand for a solo founder.

---

## 8. Voice & Tone Guide

### Core Voice

"We sound like peace, not like static."

Magnotia speaks the way a thoughtful friend listens — calm, direct, never judgmental. The brand voice is astute, concise, and matter-of-fact. It never rambles, never condescends, never performs enthusiasm it doesn't feel.

### Catchphrase

**"Talk now, think later."**

### Tone by Context

| Context | Tone adjustment |
|---|---|
| Onboarding | Warm, encouraging, extremely simple. One instruction at a time |
| Error messages | Calm, informative, solution-first. Never blame the user |
| Marketing | Direct, occasionally provocative. Anti-subscription, pro-ownership |
| Reddit/community | Jake's natural voice. Honest, self-deprecating, never promotional |
| Feature descriptions | Matter-of-fact, benefit-led, no jargon. "Magnotia does X so you can Y" |
| Empty states | Gentle, ambient, patient. "I'm here when you're ready" |

### Tone by Audience

The Brand Platform (`magnotia-brand-platform.md`, Section 17) contains a full Messaging Architecture with primary/supporting messages, anticipated objections, and persuasive responses for each audience. The voice flexes as follows:

| Audience | Tone shift | Key emphasis |
|---|---|---|
| **Neurodivergent individuals** | Warm, peer-to-peer, no clinical language | The problem you live with. We built this for the same reason |
| **Writers & power users** | Slightly more technical, feature-aware | What it adds to your existing workflow. Respect their expertise |
| **Privacy-conscious professionals** | Evidence-led, sceptical-friendly | Architectural transparency. Respect their distrust — it's earned |

### Example Copy

**Onboarding:**
> Press the button. Start talking. That's it. Magnotia handles the rest.

**Error message:**
> Recording interrupted — looks like the microphone disconnected. Your transcript up to this point is saved. Plug back in and pick up where you left off.

**Marketing (social):**
> Your brain had 47 ideas on the drive home. By the time you found a pen, you remembered 3. Magnotia catches all 47. Locally. No subscription. No cloud. Just you and your thoughts.

**Empty state:**
> Tasks will appear here when Magnotia finds them in your transcripts.

**Feature description:**
> Magnotia transcribes your voice on your device. Nothing leaves your machine. No internet required.

### Words to Use / Words to Avoid

| Use | Avoid |
|---|---|
| Capture | Productivity hack |
| Clarity | Optimise |
| Your device | The cloud |
| Lifetime | Subscribe |
| Brain dump | Workflow |
| Think out loud | Leverage |
| Thoughts | Data points |
| Simple | Easy (implies judgement about difficulty) |

---

## 9. Touchpoint Priority

### Tier 1 — Build Now

| Touchpoint | Impact | Why |
|---|---|---|
| **The app itself** | 10 | The app IS the brand. Every design decision in these guidelines lives or dies here |
| **Landing page** | 9 | Single well-designed page. Dark, warm, app screenshots, clear value prop, download CTA |
| **GitHub/Gitea README** | 8 | For the self-hosted/privacy crowd. Technical credibility, screenshots, honest tone |

### Tier 2 — Build for Launch

| Touchpoint | Impact | Why |
|---|---|---|
| **Social templates** | 7 | The 4-template Canva kit from Phase 5 |
| **Demo video** | 7 | Single 2-minute "why I built this" + product demo |
| **Reddit launch post** | 8 | One shot — needs to be templated before launch day |

### Tier 3 — Build When Needed

| Touchpoint | Impact | Why |
|---|---|---|
| **Email capture / newsletter** | 5 | When there's an audience to nurture |
| **Documentation site** | 5 | When the product is complex enough to need it |
| **App store listing** | 6 | When distribution moves beyond direct download |

### Reddit Launch Post Template

Impact 8, one shot. Use this structure for the primary launch post (r/ADHD or r/selfhosted depending on angle).

**Title format:** "I built [thing] because [personal problem]" — never "Introducing..." or "Check out..."

**Post anatomy (target: 400–600 words):**

| Section | Word count | Content |
|---|---|---|
| **1. The problem** | 80–100 | Your lived experience. The paralysis, the stasis, the tools that made it worse. First person, specific, emotional. This is the hook — if this doesn't resonate, they stop reading |
| **2. The journey** | 80–100 | How you got from frustration to building. The DND transcriber, seeing Whispr's price, realising local transcription was possible. Include a doubt or false start — "I nearly didn't..." |
| **3. What I built** | 100–150 | What Magnotia actually does, in plain language. Voice capture, local transcription, automatic task extraction. Lead with the mechanism, not the features. Screenshots here (2–3 max, warm dark UI) |
| **4. The principles** | 60–80 | Local-first, lifetime licence, no subscription, no data leaves your device. These are the lines that get upvoted. State them plainly |
| **5. What's next** | 40–60 | Where you're headed, what feedback you want. End with a specific question — "What would make this useful for you?" drives comments |

**Tone:** Jake's natural voice. Self-deprecating where genuine. Never promotional. Never "we" — always "I."

**Checklist before posting:**
- [ ] Read the subreddit rules — some ban self-promotion entirely
- [ ] Check the subreddit's recent posts — is now a good time or is there drama?
- [ ] Screenshots are high-quality, warm dark UI visible, no marketing polish
- [ ] The post works as a story even if the reader never clicks the link
- [ ] No "please upvote" or engagement bait
- [ ] Link to download/repo is present but not the focus
- [ ] Flair is correct for the subreddit

**Anti-patterns (will get you killed on Reddit):**
- "We're excited to announce..." — corporate speak, instant downvote
- Posting in multiple subreddits simultaneously — looks like spam
- Responding to criticism defensively — thank them, note it, move on
- Linking to a landing page instead of the actual product
- Astroturfing with alt accounts

### Launch Day Sequence (All Platforms)

| Order | Platform | Asset | Timing |
|---|---|---|---|
| 1 | YouTube | "Why I built this" demo (2 min) | Upload morning, unlisted until step 3 |
| 2 | Twitter/X | Launch thread (problem → product → principles → link) | Post, pin to profile |
| 3 | Reddit | Primary launch post (r/ADHD or r/selfhosted) | Post after X thread is live, include YouTube link |
| 4 | Reddit | Secondary post (alternate subreddit, different angle) | 24–48 hours after primary |
| 5 | Mastodon | Cross-post from X | Same day as X |

---

## 10. Maintenance

**Monthly:** Review social templates — cohesive feed? Any drift?

**Quarterly:** Review guidelines against actual output. Update guidelines to match reality, not the other way around.

**Annually:** Full brand review. Run a fresh visual audit (Phase 1). Check competitive landscape. Does the white space position still hold?

**Signals to upgrade:**
- Materials don't match the quality of the product
- Competitors have visually overtaken you
- You're spending more time on design than a freelancer would cost
- The guidelines don't cover scenarios you're actually encountering

---

## Appendix: Designer Briefing Template

When commissioning external design work, provide:

1. **This document** — the complete brand guidelines
2. **The Brand Platform** (`magnotia-brand-platform.md`) — strategic context
3. **Specific deliverable** — what you need, in what format, by when
4. **"We Are / We Are Not" table** — from Section 1
5. **Anti-references** — Notion (too much going on), Tiimo (values betrayal), generic SaaS (white/blue/FAANG)
6. **Inspiration references** — The Barbican, Amsterdam urban design, Muji, Nujabes album art
7. **Budget and timeline**

---

*This is a living document. The brand is not the guidelines — the brand is every interaction filtered through them. Consistency compounds.*