---
title: Brand Guidelines
description: Logo usage, color palette, typography, voice and tone for VibeCoder Heretic. The shared visual and verbal language behind every Heretic surface.
canonical: https://giglabo.com/brand
locale: en
---
# Brand Guidelines
> Markdown twin of https://giglabo.com/brand
> Fetch this instead of the HTML page: same content, a fraction of the bytes.
> Site structure and the full page list for agents: https://giglabo.com/llms.txt
Logo usage, color palette, typography, voice and tone for VibeCoder Heretic. The shared visual and verbal language behind every Heretic surface.
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.
| Do | Don't |
|----|-------|
| "Run agents on your own box." | "Leverage cloud-native AI synergy." |
| "This breaks under load — here's why." | "Industry-leading reliability." |
| "Pick Postgres. SQLite is for dev." | "Best-in-class data layer." |
## Logo & Wordmark
The Heretic mark uses the flame glyph paired with the **VibeCoder Heretic** wordmark.
Mark · 34px (UI)
Mark · 256px (favicon, social)
Mark · 1024px (master)
**Lockup** — the mark sits to the left of the wordmark *VibeCoder* ``Heretic`` 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](https://giglabo.com/favicon-256x256.png)
- [PNG · 512px](https://giglabo.com/assets/images/favicon-512x512.png)
- [PNG · 1024px (master)](https://giglabo.com/assets/images/favicon-1024x1024.png)
- [ICO · favicon](https://giglabo.com/favicon.ico)
## 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
| Token | Light | Dark | Usage |
|-------|-------|------|-------|
| `--color-brand-violet` | `#8b5cf6` | `#8b5cf6` | Primary brand |
| `--color-brand-purple` | `#7c3aed` | `#7c3aed` | Accent default |
| `--color-brand-purple-dark` | `#6d28d9` | `#6d28d9` | Accent hover |
| `--color-brand-pink` | `#ec4899` | `#ec4899` | Highlight |
| `--color-brand-orange` | `#f97316` | `#f97316` | Warm accent |
### 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 `` 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](https://giglabo.com/brand/stickers).
## Iconography
Heretic uses [Lucide](https://lucide.dev) 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.
> **Note: Single source of truth**
>
> The technical implementation of these tokens lives in `src/styles/theme.css` and `src/components/layout/SetPageTheme.tsx`. If this page and the code disagree, the code wins — and this page should be updated to match.
## Contact
Questions, corrections, or a new use case that needs guidance? [Reach out](https://giglabo.com/contact-i3kpgwz0jwyw02y004zaqxle).
## Related
- HTML version of this page: https://giglabo.com/brand
- Site map for agents: https://giglabo.com/llms.txt