Appearance
Brand Guide
Internal governance document — authored and maintained by the CEO. Visual identity tokens derived from the Kendo app codebase (~/Code/kendo/frontend/src/shared/styles/kendo.css). Voice and tone principles established during initial brand definition.
Brand Identity
Name: Kendo Tagline: "The issue tracker that lives in your terminal."
Status: In active development
Other tagline candidates:
- "Project management, sharpened."
- "Ship software, not status updates."
Logo
Clean typographic wordmark — "kendo." in lowercase with a red period. No illustration, no icon. The red accent does the heavy lifting.
The red period (.) is non-negotiable — no version exists without it.
Variants
| Tier | Mark | Font | Weight | Size | Context |
|---|---|---|---|---|---|
| Full | kendo.dev | Sora | 500 | 42px | Landing page, external marketing. ".dev" uses weight 300 at ~60% font-size in --text-muted |
| Standard | kendo. | Sora | 500 | 16px | In-app sidebar, nav header. Most common variant |
| Compact | k. | Sora | 600 | 18px | Collapsed sidebar, favicon. Heavier weight for readability at small size |
In all variants the period is rendered in --kendo-red.
Voice & Tone
Principles
- Direct — Say it in fewer words. No filler, no corporate speak, no "leverage synergies."
- Technical but accessible — We talk to developers, but we don't gatekeep. A PM should understand our copy too.
- Confident, not arrogant — We know we're good. We don't need to trash competitors to prove it.
- Dry wit welcome — A bit of personality is good. Forced humor is not.
Do
- Use short sentences
- Use active voice
- Be specific ("saves 2 hours per sprint" not "increases productivity")
- Reference real developer pain points
- Speak like a technical coworker, not a marketing department
Don't
- Use buzzwords: "revolutionary", "game-changing", "next-gen", "leverage"
- Overpromise AI capabilities — be factual about what agents can and can't do
- Use exclamation marks in product copy (one per page max)
- Talk down to the reader
- Use "we're excited to announce" — just announce it
Tone by Channel
| Channel | Tone |
|---|---|
| Twitter/X | Punchy, opinionated, slightly provocative. Short threads ok. |
| Bluesky | Conversational, authentic, community-oriented. Share insights, invite discussion. Less promotional, more human. |
| Professional but not corporate. Show the builder journey. | |
| Changelog | Matter-of-fact. What changed, why, how it affects you. |
| Blog | Thoughtful, in-depth. Share real decisions and trade-offs. |
| Docs | Clear, scannable. No personality needed — just accuracy. |
| Support | Empathetic, fast, solution-oriented. |
Visual Identity
(Design values derived from the Kendo app codebase — see kendo/frontend/src/shared/styles/kendo.css and Figma source files.)
Brand Color
Kendo Red (#c8553a) is the only primary accent color. It's used for CTAs, active states, the logo period, and navigation highlights. No other brand colors exist — the rest of the palette is neutral surfaces and text.
| Token | Value | Usage |
|---|---|---|
--kendo-red | #c8553a | Primary accent — buttons, active nav, logo period |
--kendo-red-light | #e8734f | Hover state |
--kendo-red-dark | #a3412b | Pressed/active state |
--kendo-red-subtle | rgba(200,85,58,0.1) | Background tint for active elements |
Surface & Text Colors (Dark Mode — Default)
| Token | Value | Usage |
|---|---|---|
--bg | #09090e | Page background (darkest) |
--surface-1 | #111116 | Subtle raised layers, same value as --surface-raised |
--surface | #1c1c22 | Cards, nav, panels. Same value as --surface-header |
--surface-2 | #262630 | Board cards, hover states |
--surface-3 | #30303b | Inputs, dropdowns |
--border | #363640 | Default borders |
--border-light | #46464f | Hover borders |
--text | #e8e8ec | Primary text |
--text-dim | #a0a0aa | Secondary text |
--text-muted | #8e8e98 | Tertiary/placeholder text (light mode: #706a64) |
Semantic Colors
Used for status indicators, alerts, and badges. Never used as brand colors.
| Token | Value | Usage |
|---|---|---|
--success | #2ea043 | Done, completed, green indicators |
--warning | #d29922 | In progress, caution, yellow indicators |
--danger | #da3633 | Errors, cancelled, destructive actions |
--info | #388bfd | Informational, review states |
Each has a *-subtle variant at rgba(..., 0.1) for background tints.
Tint System
Used for enum badges (status, type, priority). Auto-adapts to light/dark mode.
| Tint | Color | Background | Border |
|---|---|---|---|
| Gray | #9ca3af | rgba(156, 163, 175, 0.15) | rgba(156, 163, 175, 0.3) |
| Green | #4ade80 | rgba(74, 222, 128, 0.15) | rgba(74, 222, 128, 0.3) |
| Blue | #60a5fa | rgba(96, 165, 250, 0.15) | rgba(96, 165, 250, 0.3) |
| Red | #f87171 | rgba(248, 113, 113, 0.15) | rgba(248, 113, 113, 0.3) |
| Purple | #c084fc | rgba(192, 132, 252, 0.15) | rgba(192, 132, 252, 0.3) |
| Yellow | #facc15 | rgba(250, 204, 21, 0.15) | rgba(250, 204, 21, 0.3) |
| Orange | #fb923c | rgba(251, 146, 60, 0.15) | rgba(251, 146, 60, 0.3) |
| Teal | #2dd4bf | rgba(45, 212, 191, 0.15) | rgba(45, 212, 191, 0.3) |
| Pink | #f472b6 | rgba(244, 114, 182, 0.15) | rgba(244, 114, 182, 0.3) |
| Indigo | #818cf8 | rgba(129, 140, 248, 0.15) | rgba(129, 140, 248, 0.3) |
Status & Priority Colors
Default lanes are configurable per project. These are the shipped defaults:
| Status | Color | Visual |
|---|---|---|
| To Do | Red tint | Red dot |
| In Progress | Yellow tint | Yellow dot |
| In Review | Blue tint | Blue dot |
| Done | Green tint | Green dot |
| Priority | Icon | Icon Color | Badge Tint |
|---|---|---|---|
| Highest | ChevronsUp | Red | Purple |
| High | ChevronUp | Red (75% opacity) | Red |
| Medium | Equals | Orange | Yellow |
| Low | ChevronDown | Blue | Blue |
| Lowest | ChevronsDown | Blue (60% opacity) | Green |
Typography
| Use | Font | Weight | Size |
|---|---|---|---|
| All UI text & headings | Sora | 300–700 | 0.6875–2.5rem |
| Code, counters, labels | JetBrains Mono | 400–600 | 0.58–0.875rem |
Google Fonts: Sora:wght@300;400;500;600;700 + JetBrains Mono:wght@400;500;600
Weight scale (Sora)
| Weight | Name | Usage |
|---|---|---|
| 300 | Light | Decorative subtitles, logo ".dev" suffix |
| 400 | Regular | Body text, descriptions, badge content |
| 500 | Medium | Labels, active nav items, emphasis |
| 600 | Semibold | Page titles, buttons, section headers |
| 700 | Bold | Large brand headings (rare) |
Size scale
| Token | Size | Usage |
|---|---|---|
--text-xs | 0.6875rem (11px) | Badges, metadata, fine print |
--text-sm | 0.75rem (12px) | Labels, descriptions, form errors |
--text-base | 0.8125rem (13px) | Body text, inputs, select entries |
--text-nav | 0.82rem (~13.1px) | Navigation, toast titles |
--text-md | 0.875rem (14px) | Section labels, prominent body text |
--text-lg | 1rem (16px) | Subheadings, emphasis |
--text-xl | 1.25rem (20px) | Page section titles |
--text-2xl | 1.5rem (24px) | Page titles |
--text-3xl | 2rem (32px) | Hero/display text |
--text-4xl | 2.5rem (40px) | Pricing display numbers |
Icons
- Library: Font Awesome (Pro + Free — duotone, light, regular, solid styles)
- Wrapper:
@fortawesome/vue-fontawesomecomponent - Sizes: 14px (inline), 16px (nav/sidebar), 20px (page headers)
- Color: Inherits from parent via
color: currentColor - Rule: No emojis as icons — always use proper Font Awesome icons
Spacing
| Value | Name | Usage |
|---|---|---|
| 2px | Micro | Inline icon gaps |
| 4px | Tight | Icon-to-text, badge padding-y |
| 6px | Compact | Pill padding, small gaps |
| 8px | Base | Nav item gaps, list gaps |
| 12px | Comfortable | Input padding, card internal |
| 16px | Standard | Card padding, modal sections |
| 20px | Large | Modal body, spacious sections |
| 24px | XL | Page horizontal padding |
| 32px | XXL | Section vertical spacing |
Border Radius
| Token | Value | Usage |
|---|---|---|
--radius-sm | 6px | Inputs, buttons, small elements |
--radius-md | 10px | Cards, toasts, panels |
--radius-lg | 14px | Modals, table containers |
Shadows
Shadows are only used on floating elements (modals, dropdowns, popovers). Never on cards or buttons.
| Token | Value | Usage |
|---|---|---|
--shadow-sm | 0 2px 8px rgba(0,0,0,0.2) | Toasts, tooltips |
--shadow-md | 0 8px 32px rgba(0,0,0,0.3) | Dropdowns, popovers |
--shadow-lg | 0 20px 80px rgba(0,0,0,0.4) | Modals |
Design Principles
- Dense and compact — Information-rich, not spacious. Every pixel earns its place.
- Dark-first — Dark mode is the primary experience. Light mode is supported but secondary.
- Surface layering over borders — Use surface contrast to create depth (e.g., board cards on lanes). Prefer fewer borders, not more.
- No shadows on cards — Shadows are reserved for floating layers (modals, dropdowns). Cards use surface contrast and borders.
- Subtle, not flashy — Animations are functional (transitions, not celebrations). Red accent is used sparingly for emphasis.
- One accent color — Kendo Red is the only brand color. Everything else is neutral.
- Always use CSS custom properties — Never hardcode hex values in components.
Brand Language — Kendo Martial Art Theme
The product is named after a Japanese martial art. The landing page uses this as a subtle structural metaphor. This gives Kendo a distinctive voice that no other PM tool has — lean into it, but don't overdo it.
How it's used on the landing page
| Generic term | Kendo term | Where it's used |
|---|---|---|
| Section | Form | Page sections are numbered "First Form", "Second Form", etc. |
| FAQ | "Before you step into the dojo" | FAQ section header |
| Features | "The full arsenal" | Features section subtitle |
| Workflow | "One flow" | Final CTA: "Your board, your terminal, one flow" |
Extended vocabulary (available for future use)
| Kendo term | Meaning | Potential use |
|---|---|---|
| Dojo | Training hall | Onboarding, getting started |
| Kata | Practiced forms | Structured workflows, templates |
| Stance | Ready position | Getting started guide, setup |
| Waza | Technique | New features, changelog entries |
| Keiko | Practice/training | Documentation, tutorials |
Rules
- Use for structure and headers, not body copy. "First Form" as a section label works. "Execute your waza against the backlog" does not.
- Never explain the metaphor. If someone doesn't know kendo, the terms should still read as clean labels. "The full arsenal" works whether you know kendo or not.
- Keep body copy developer-friendly. The martial art theme is flavor, not the main course. Feature descriptions should be clear and technical.
- Don't use it in docs. Documentation should be plain and accurate. No personality needed.
Competitor References
When discussing competitors, follow these rules. For detailed competitive analysis, see competitors.md and the marketing strategy.
- Never disparage by name in public content — Compare on features and philosophy, not insults
- Jira — Position against complexity and bloat. "You shouldn't need a certification to manage tasks."
- Linear — Respect the design, differentiate on AI-native and MCP integration. "Beautiful, but we go further."
- Asana — Position against enterprise focus. "Built for developers, not project managers."
- GitHub Issues — Respect simplicity, differentiate on structure. "When issues alone aren't enough."
Related
- mission.md — Vision and beliefs that shape this brand
- product-overview.md — What we're actually building
- marketing-strategy.md — Messaging framework, SWOT, competitive positioning
- go-to-market.md — Channel strategy, launch roadmap, pricing
- ../shared/glossary.md — Kendo-specific terminology (includes kendo-red, MCP server, etc.)
- ../shared/competitors.md — Full competitive landscape for positioning
- quality-standards.md — Output quality checklists for non-code work