brand book.
The complete Vibe Mode design system. Three pillar accents, one mono typeface, no rounded corners, CRT phosphor energy. This page is the live specification — every value here is the source of truth. The machine-readable spec lives in DESIGN.md, lintable with npx @google/design.md.
about
Vibe Mode is the visual identity for vibecoding.app — a directory of AI coding tools, agencies, and events for a Gen-Z developer audience. The audience lives in terminals, GitHub READMEs, Obsidian vaults, and the Claude Code CLI; the design speaks their visual language.
Terminal-native
Monospace everywhere. Section headers are written as // like a code comment. The SEO page is a manpage.
CRT atmosphere
Scanline overlay, scan-bar drift, chromatic-aberration on the wordmark, phosphor-green cursor. 1990s CRT seen through a 2026 OLED.
Card grammar
Editorial content uses a proper card with a hero zone, 20px padding, author chip footer. Data content (logs, tables) stays raw.
three pillars
The brand's primary information architecture. Every accent color, badge, and pillar glyph refers to one of these three. Do not introduce a fourth accent.
colors
Click any swatch to copy its hex. The palette is intentionally narrow: a near-black surface stack, a five-step text scale, and three pillar accents. No semantic colors (success / warning / error) — status is communicated through copy and the pillar accents only.
Do not blend pillar accents. Do not use them outside their pillar. The chromatic-aberration red and cyan used on the hero wordmark (#FF003C, #00F0FF) are decorative only and never appear in UI.
typography
One typeface: Geist Mono. If Geist Mono fails to load, fall back to JetBrains Mono then ui-monospace. Never mix in Inter, Geist Sans, Helvetica, or any proportional face.
→ 3 questions → 184 tools → 2 matches
spacing & layout
Spacing tokens are named by their role, not just by size. A `px-section` is always 32px because a section is always padded that way. Components consuming the wrong token are easy to catch in review.
| token | desktop | mobile | where |
|---|---|---|---|
px-section | 32px | 16px | horizontal padding of full-width sections |
py-section | 64px | 40px | vertical rhythm between sections |
py-hero | 112px | 48px | extra-tall hero block top padding |
card-pad | 20px | 16–20px | default card body padding |
card-pad-lg | 28px | 20px | reviews, featured tool |
gap-cards | 20px | 10–12px | gutter between cards in a grid |
gap-content | 16px | 12px | gutter inside a card row |
rounded | 0px (everything is square) | system-wide | |
motion & accessibility
Three named duration steps cover 95% of UI motion. Decorative CRT effects (scan drift, chromatic split, cursor blink) all freeze under `prefers-reduced-motion: reduce`.
| token | value | use |
|---|---|---|
duration-instant | 80ms | button press, link underline |
duration-fast | 140ms | hover, focus ring, badge swap |
duration-base | 220ms | card hover lift, panel reveal |
duration-slow | 420ms | section enter, modal in/out |
duration-crt | 6s | scan-bar drift loop (decorative only) |
duration-cursor | 1.0s | phosphor cursor blink loop |
ease-out | cubic-bezier(0.16, 1, 0.3, 1) | default UI |
contrast-target | WCAG 2.2 AA | linted in CI |
focus-ring | 2px lime · 2px offset · square | every interactive element |
logo system
The system has two logo registers. Compact lockup (mark + vibecoding.app wordmark) for nav bars, emails, footers — the mark is three ANSI shaded blocks (█ lime · ▒ magenta · ░ cyan), one per pillar, sitting flush. Hero wordmark ("vibe coding" giant, RGB-split, with a blinking lime cursor caret) for the homepage hero, social banners, and any place the brand needs to fill the room.
Geist Mono · 220px · weight 700 · tracking -0.04em · RGB-split offsets +2px cyan / -2px magenta behind white. Cursor caret is solid lime, sized to cap height, with a phosphor glow. In product it blinks at duration-cursor (1s). Never letter-space looser than -0.03em — the wordmark must feel dense.
favicon
Three blocks at favicon scale on the brand bg canvas. Falls back gracefully to "the lime block" at 16px when dither tiles alias out.
iconography
The icon system is built on three pillar shapes — down triangle, diamond, circle — each locked to its pillar color. They appear inline in nav (▼ /tools), as the icon on every pillar card, on social avatars, and wherever the brand needs a non-typographic mark. Secondary vocabularies: ASCII box-drawing for chrome, 1px stroked SVG for manpage-style technical diagrams only. No emoji. No Material / Heroicons / Feather / Lucide.
│ │
└─┘
pillar badges
cards
Editorial content uses cards. Data content (activity log, leaderboard, FAQ) does not. A card always has: hero zone (pillar-tinted) → 20px body padding → meta line → mono title (2–3 lines) → divider → author chip + arrow.
┌──────────────────────┐ │ [HERO ZONE 16:9] │ ← pillar tint ├──────────────────────┤ │ [badge] meta line │ │ │ │ CARD TITLE │ │ (2–3 line cap) │ │ │ │ ──────────────────── │ │ @author · role → │ └──────────────────────┘
do's and don'ts
One typeface across the whole system. The terminal grammar dies the moment a sans-serif appears.
Never. Not for product, not for marketing, not for "headings". Geist Mono is the system.
Zero radii. Every container, button, badge, input — sharp corners.
A single rounded corner pushes the aesthetic toward generic SaaS and breaks the terminal feel.
Lime stays in tools. Magenta stays in agencies. Cyan stays in events. The matcher CTA is lime because it routes to /tools.
No gradient-of-three. No "tools + events" combos. Pillars are siloed.
@media (prefers-reduced-motion: reduce) {
.crt-* { animation: none; }
}
Every CRT effect (scan drift, chromatic split, cursor blink) freezes.
Depth comes from pillar glow on glyphs, top accent lines, and the page vignette. No traditional drop shadows.
downloads
SVG sources. Rasterize to PNG via npx resvg-cli when a platform requires it (X, LinkedIn upload UIs prefer PNG).
| asset | file | use | |
|---|---|---|---|
| favicon | favicon.svg | browser tab · PWA | ↓ |
| wordmark · hero | wordmark-hero.svg | homepage hero · banners · OG cards | ↓ |
| logo · primary | logo-lockup.svg | in-product · dark bg | ↓ |
| logo · light bg | logo-lockup-flat.svg | email, print, partner pages | ↓ |
| logo · mark only | logo-mark.svg | compact nav, OG corner | ↓ |
| logo · email strip | logo-email-strip.svg | email signatures, inline footers | ↓ |
| profile picture | social-profile.svg | X + LinkedIn profile picture | ↓ |
| X header | social-x-banner.svg | X 1500×500 header | ↓ |
| LinkedIn cover | social-linkedin-banner.svg | LinkedIn 1584×396 cover | ↓ |
| portrait bg | author-portrait-bg.svg | author portrait background | ↓ |
| spec source | DESIGN.md | tokens · machine-readable | ↓ |
social assets
Profile picture is shared between X and LinkedIn. Banners are platform-specific (different aspect ratios). All composed from the same brand vocabulary as the rest of the system.