Brand Guidelines

These guidelines describe the shared visual and verbal language behind every Heretic surface — product, marketing site, docs, and community. Use them whenever you build something that carries the Heretic name.

Brand Story

VibeCoder Heretic is for developers who refuse to hand their code, data, and craft over to a SaaS. We treat AI agents as power tools — fast, autonomous, and owned by you. Self-hosted by default. Opinionated, not precious.

One-line pitch: AI coding agents on your PC or server.

Voice & Tone

• Direct, not corporate. Short sentences. Strong verbs. No buzzword salad.
• Pragmatic, not preachy. Show the tradeoff, then a recommendation.
• Confident, not arrogant. We have opinions and we explain them.
• Heretical, not edgy. Push back on defaults — but only when we have a better answer.

Logo & Wordmark

The Heretic mark uses the flame glyph paired with the VibeCoder Heretic wordmark.

Lockup — the mark sits to the left of the wordmark VibeCoder <gradient>Heretic</gradient> with a gap of about half the mark's height. The "Heretic" half of the wordmark always carries the brand gradient.

Rules

• Maintain clear space of at least the height of the flame around the mark.
• Don't recolor, rotate, stretch, or add effects (drop shadows, gradients) to the logo.
• On dark backgrounds, use the light variant. On light backgrounds, use the dark variant.
• Minimum size: 24px tall for the glyph, 120px wide for the lockup.

Downloads

• PNG · 256px
• PNG · 512px
• PNG · 1024px (master)
• ICO · favicon

Color System

Heretic uses a token-based color system with semantic CSS variables. Hardcoded hex values are reserved for the brand palette below — everything else should reference tokens.

Brand Palette

Semantic Tokens

Always prefer semantic tokens (text-foreground, bg-background, bg-card, text-muted-foreground, --color-accent, --color-accent-hover) over raw hex. They adapt automatically to light/dark mode and to per-page theme overrides.

Page Themes

The site supports per-page accent themes that swap the accent palette without changing brand identity:

• Default — violet/purple (the canonical Heretic look)
• Green — used across /education
• Blue — calm, technical contexts
• Orange — used across /heretic/newsletter

Apply with <SetPageTheme theme="green" /> at the top of an MDX page. See src/styles/theme.css for the full token map.

Typography

• UI & body: the system font stack (Tailwind default) — fast, neutral, readable on any OS.
• Headings: same stack, weight 600–700.
• Code & terminal: monospace stack.
• Sizing: use clamp() for headings (mobile minimum 24–28px). Body text text-base sm:text-lg.

Don't introduce new font families without a strong reason — every added font costs render time and visual coherence.

Stickers & Mascots

Heretic has a growing family of cat-based stickers used in marketing, community channels, and product surfaces. They are not a replacement for the logo — use them for personality, not for identity.

• Common Heretic Cats — the canonical cat illustrations. Safe to use anywhere on the site, in slides, and in print.
• Telegram Cats — the Telegram-optimized sticker pack (transparent PNG, 512×512, white outline) for use inside Telegram chats and channels.

See the full library, usage rules, and downloads on the Stickers page.

Iconography

Heretic uses Lucide icons throughout the UI. Stroke width 1.5–2. Match the surrounding text color via currentColor rather than hardcoding fills.

Imagery

• Prefer screenshots of the actual product over stock illustrations.
• OG images are pre-generated PNGs in public/images/, not dynamic API routes.
• When generating decorative imagery, lean into a dark, code-adjacent aesthetic — terminals, IDE surfaces, abstract gradients in the brand palette.

Writing Style

• Sentence case for headings (Brand guidelines, not Brand Guidelines) — except top-level page titles.
• Use bold for the one thing in a paragraph that matters most. Don't bold for decoration.
• Code, env vars, file paths, and CLI flags go in inline code.
• Lists earn their bullets — three short paragraphs often beat a ten-item list.

Naming

• Product: VibeCoder Heretic (full), Heretic (short, contextual).
• Don't capitalize "the" in front: write Heretic, not The Heretic.
• Code identifiers: heretic-* (kebab-case) for packages and apps, Heretic* (PascalCase) for TypeScript classes/components.

Contact

Questions, corrections, or a new use case that needs guidance? Reach out.