--- version: 1.0 name: Vibe Mode v3 description: > vibecoding.app v3 — the canonical site design. A dark, mono-only terminal aesthetic with CRT scanlines, dithered colored overlays on monochrome imagery, and a strict three-pillar accent system. /v3 is the reference implementation; this spec governs every other route. colors: # Surfaces bg: "#0A0A0B" surface: "#0E0E12" surface-2: "#13131A" border: "#1A1A1F" border-alt: "#26262E" border-faint: "#1F1F24" # Text text: "#EDEDEE" text-strong: "#CFCFD4" text-dim: "#A8A8B0" text-muted: "#8B8B94" text-faint: "#52525B" text-ghost: "#3A3A44" # Pillar accents — the only accent colors allowed in the system. # tools → lime (default CTA). agencies → magenta. events → cyan. accent-tools: "#B8FF35" accent-agencies: "#FF3AA0" accent-events: "#7AF0FF" # Severity (extends agencies-magenta family) severity-critical: "#FF3AA0" severity-high: "#FF9A35" # CRT chromatic-aberration layers (decorative only, never UI surfaces) crt-red: "#FF003C" crt-cyan: "#00F0FF" # Terminal window chrome (activity log title bar only) win-close: "#FF5F57" win-min: "#FEBC2E" win-max: "#28C840" typography: hero-display: fontFamily: Geist Mono fontSize: 7.75rem fontWeight: "700" lineHeight: "0.94" letterSpacing: "-0.04em" h1: fontFamily: Geist Mono fontSize: 2.75rem fontWeight: "700" lineHeight: "1.05" letterSpacing: "-0.02em" h2: fontFamily: Geist Mono fontSize: 1.75rem fontWeight: "700" lineHeight: "1.15" letterSpacing: "-0.02em" h3: fontFamily: Geist Mono fontSize: 1.375rem fontWeight: "600" lineHeight: "1.15" letterSpacing: "-0.02em" h4: fontFamily: Geist Mono fontSize: 1.125rem fontWeight: "600" lineHeight: "1.2" letterSpacing: "-0.01em" body: fontFamily: Geist Mono fontSize: 0.875rem fontWeight: "400" lineHeight: "1.7" body-sm: fontFamily: Geist Mono fontSize: 0.8125rem fontWeight: "400" lineHeight: "1.55" caption: fontFamily: Geist Mono fontSize: 0.75rem fontWeight: "400" lineHeight: "1.5" label-uppercase: fontFamily: Geist Mono fontSize: 0.625rem fontWeight: "600" lineHeight: "1.0" letterSpacing: "0.15em" mono-meta: fontFamily: Geist Mono fontSize: 0.6875rem fontWeight: "400" lineHeight: "1.4" spacing: none: "0" xs: "4px" sm: "8px" md: "16px" lg: "24px" xl: "32px" rounding: # Sharp by default. Only status dots use `full`. none: "0" full: "9999px" components: page-root: description: Outermost page wrapper, black bg, mono font, CRT layers stacked behind content background: bg color: text card: description: Standard card surface background: surface border: border-alt radius: none card-featured: description: Highlight card for paid/affiliate placements with FEATURED badge top-left of hero background: surface border: border-alt panel: description: Top-bordered panel for hub sections background: surface border: border section-label: description: Mono `// section · topic` comment placed above every section heading color: text-faint section-heading: description: Section title, lowercase, ends in a period color: text fontFamily: Geist Mono button-primary: description: Lime CTA, black text, bold, sharp corners background: accent-tools color: bg radius: none button-secondary: description: Outlined accent button; default lime border + lime text, magenta on hover background: bg color: accent-tools border: accent-tools radius: none button-ghost: description: Thin border inline icon button background: bg border: border color: text radius: none badge-uppercase: description: Mono uppercase token chip with accent border + tint color: accent-tools background: surface radius: none badge-solid: description: Filled accent chip used for FEATURED top-left of hero panels background: accent-tools color: bg radius: none pricing-chip: description: Tool pricing label (FREE / FREEMIUM / PAID) in lime color: accent-tools border: accent-tools radius: none pillar-tools-glyph: description: SVG triangle glyph for /tools pillar with drop-shadow glow color: accent-tools pillar-agencies-glyph: description: SVG diamond glyph for /agencies pillar with drop-shadow glow color: accent-agencies pillar-events-glyph: description: SVG circle glyph for /events pillar with drop-shadow glow color: accent-events navbar: description: Top status bar with brand + slash-prefixed nav + right cluster (online, search, subscribe, submit) background: bg color: text-dim border: border ansi-cursor-glyph: description: Three-bar lime/magenta/cyan glyph that sits before the wordmark color: accent-tools hero: description: H1 with chromatic aberration and a trailing blinking lime block cursor color: text background: bg blinking-cursor: description: Lime block cursor blink, animation crt-cursor 1s steps(2 end) infinite background: accent-tools search-trigger: description: CLI-style search button with `$` prefix and ⌘K hint chip, opens Cmd+K palette background: surface border: border-alt color: text-muted command-palette-dark: description: Dark variant of the cmdk modal background: surface border: border-alt color: text site-strip: description: Sitewide pillar + freshness strip mounted below the Navbar on every route background: bg border: border color: text crt-image: description: B/W image with colored pixel-dither overlay in pillar accent, mix-blend lighten background: bg activity-log: description: Terminal-styled feed with traffic-light title bar, mono row grid, kind glyph + verb + title + meta background: surface border: border-alt color: text freshness: description: Five counters (last deployed, tools, articles, agencies, events) in horizontal tiles or vertical stack background: surface border: border-faint color: text footer: description: 6-column SEO link surface with mono lime links and bottom strip background: bg color: text-dim border: border newsletter-section: description: Full-width newsletter card with lime radial wash, manpage-style headline, input + lime CTA background: surface border: border-alt color: text newsletter-popup: description: Slide-in popup variant of the newsletter card with dismiss control background: surface border: border-alt color: text reading-list: description: 3 featured posts on top (CRT hero) + archive line items with tiny thumbnails background: surface border: border-alt color: text tool-card: description: Vertical tool card. Hero with FEATURED badge + centered logo on light tile, body has logo chip before name, pricing chip, mono description, category + read-review link background: surface border: border-alt color: text manpage: description: Editorial section with TOC sidebar + body with VIBECODING(1) header and lime section headings background: surface border: border-alt color: text pillar-cards: description: Three side-by-side hero pillar cards with SVG glyphs, lowercase name, path, count, arrow background: bg border: border color: text pillar-panels: description: Three pillar columns under `// section · browse · vibecoding.app` with top tools/agencies/events and accent CTAs background: bg border: border color: text faq: description: Two-column Q/A card grid using `?` (lime) for questions and `>` (faint) for answers; re-emits FAQPage JSON-LD background: surface border: border-alt color: text --- # Vibe Mode v3 — Design Reference `/v3` is the canonical reference implementation. Every other route on the site migrates to match this spec. ## Tone Dark, mono, terminal-grammar. Confidently understated. All section headings are lowercase and end in a period. Section comments use the double-slash mono prefix: `// section · live · activity`. Avoid em-dashes and en-dashes in prose (see code-quality rules). Use commas, colons, semicolons, or split into two sentences. Exception: identifiers like `mar.05 to may.12` for date ranges. ## Three-pillar accent system | Pillar | Color | Glyph | Path | Use cases | |-----------|-----------|-------------|------------|--------------------------------------------------------| | tools | `#B8FF35` | triangle | /tools | Primary CTA, reviews, tool metadata, /tools/* links | | agencies | `#FF3AA0` | diamond | /agencies | Agency CTA, vibe debugging, fix layer, severity flags | | events | `#7AF0FF` | circle | /events | Event CTA, guides, info, secondary "what's happening" | Every interactive accent on the site uses one of these three. No new accents. Severity high (`#FF9A35`) extends the magenta family for warning chips only. ## Type ramp Display 124 → h1 44 → h2 28 → h3 22 → h4 18 → body 14 → body-sm 13 → caption 12 → label 10. All Geist Mono. Letter spacing tightens on big display (`-0.04em`), expands on uppercase labels (`0.15em`). ## Image treatment Every photographic / brand image in a card hero gets the CRT image treatment: `crt.crtImage` + one of `crtImageLime` / `crtImageMagenta` / `crtImageCyan`. The image desaturates to B/W with boosted contrast, then a 5x5px colored-dot pattern in the accent is layered with `mix-blend-mode: lighten` so the dot colors stay vibrant against the monochrome below. Do not apply CRT when the image content is itself text (e.g. a tweet screenshot, a manpage). Use clean `object-contain` or `object-cover` with `objectPosition` to crop to the readable portion. ## Sharp corners Border-radius is forbidden on cards, panels, buttons, badges, chips, inputs. The only rounded elements on the site are status dots, the SVG event circle glyph, and the macOS terminal traffic-light chrome on the activity log title bar. ## Component recipes (verbatim Tailwind) Standard card: ``` border border-[#26262E] bg-[#0E0E12] ``` Hover-bordered card: ``` group block border border-[#26262E] bg-[#0E0E12] hover:border-[#B8FF35] ``` Hero panel with CRT lime: ``` relative aspect-[16/9] w-full overflow-hidden border-b border-[#26262E] bg-[#0A0A0B] ${crt.crtImage} ${crt.crtImageLime} ``` Section label: ``` text-[11px] text-[#52525B] mb-4 font-mono ``` Section heading: ``` text-[28px] font-bold tracking-[-0.02em] text-[#EDEDEE] style={{ fontFamily: "'Geist Mono', monospace" }} ``` Primary button (lime): ``` bg-[#B8FF35] text-[#0A0A0B] font-bold flex items-center justify-between px-4 py-2.5 text-[12px] ``` Secondary button (lime to magenta): ``` px-2.5 py-1 border border-[#B8FF35] text-[#B8FF35] hover:border-[#FF3AA0] hover:text-[#FF3AA0] transition-colors ``` Uppercase badge (inline-styled per accent): ``` text-[10px] uppercase tracking-[0.14em] px-2 py-1 inline-block font-mono style={{ color: accent, background: `${accent}10`, border: `1px solid ${accent}40` }} ``` Pillar glyph (24×24 SVG): ```jsx {shape === "triangle" && } {shape === "diamond" && } {shape === "circle" && } ``` ## File-level rules 1. Forbidden imports on dark surfaces: shadcn `Card`, `Badge`, `Button` from `@/components/ui/*` (they ship with rounded corners and light-mode defaults). Use raw Tailwind class strings matching the recipes above, or the v3 component recipes documented here. 2. Forbidden styles on dark surfaces: `bg-white`, `text-gray-*`, `text-purple-*`, `rounded-*` (except `rounded-full` for status dots), `prose` without `prose-invert`, soft drop shadows. 3. Required on every section: a `// section · {topic}` label immediately before the section heading. 4. Required for tool cards: a logo chip in the card body before the tool name, regardless of whether the hero panel already shows the logo. 5. Required for featured/paid placements: a FEATURED badge in the accent color of the relevant pillar. Never label as "PAID PLACEMENT" — features are paid or affiliate; we don't disclose which on the card. 6. No fabricated metrics: don't display subscriber counts, community vote totals, or G2-style ratings unless the data is real and sourced. Use pricing chips and category labels as honest substitutes. ## Reference files - `src/components/v3/HeroV3.tsx` — hero, navbar, pillar cards, search trigger, blinking cursor - `src/components/v3/PillarPanelsV3.tsx` — pillar panels with real data + logos - `src/components/v3/FeaturedToolV3.tsx` — 2-column editors pick - `src/components/v3/ToolsV3.tsx` — 3×2 featured tools grid - `src/components/v3/ActivityLogV3.tsx` — terminal activity log - `src/components/v3/FreshnessProofV3.tsx` — counters (horizontal + embedded vertical) - `src/components/v3/FaqV3.tsx` — Q/A grid + JSON-LD - `src/components/v3/FooterV3.tsx` — full SEO link surface - `src/components/v3/WhatIsVibeCodingV3.tsx` — manpage editorial layout - `src/components/v3/ReviewsV3.tsx` — testimonial cards - `src/components/site/SiteStrip.tsx` — sitewide pillar + freshness strip - `src/styles/crt.module.css` — CRT scanlines, dither, chromatic-aberration text, blinking cursor keyframe