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

Kon — Brand Guidelines

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

---

1. Brand Foundation

Purpose: Kon 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

"Kon" 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 Kon asset. Never use the fox on Kon 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

@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 Kon 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

Kon 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 Kon 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:

@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 Kon 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."

Kon 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. "Kon does X so you can Y"
Empty states	Gentle, ambient, patient. "I'm here when you're ready"

Tone by Audience

The Brand Platform (kon-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. Kon 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. Kon catches all 47. Locally. No subscription. No cloud. Just you and your thoughts.

Empty state:

Tasks will appear here when Kon finds them in your transcripts.

Feature description:

Kon 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 Kon 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 (kon-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.