Void Video — Style Guide & Implementation Brief

Overview

The homepage is a standalone Vue component using VitePress layout: page (no sidebar, no docs chrome). It links INTO the VitePress docs for Guide, Settings, etc. The docs pages use standard VitePress theming. This guide covers the homepage design system.

Visual reference: See void_color_palette.svg for the complete color swatch sheet with all values, gradients, borders, tags, and usage rules rendered visually.

---

Brand Identity

Void Video is a software-based video processor for home cinema enthusiasts. The name references the absolute black of a dedicated theater room (JVC projectors, velvet walls, "black hole" rooms). The logo is a front-on black hole with concentric blue-purple accretion rings and a bold white "V" at center.

Tone: Technical but approachable. Cinema-grade quality without pretension. Think: the intersection of a high-end AV forum post and a clean product page.

Audience: Home theater enthusiasts who own projectors, understand HDMI signal chains, and want the best possible picture quality. They know what HDR tone mapping means. Don't dumb it down, but don't gatekeep either.

---

Color Palette

CSS Variables

:root {
  /* Backgrounds — darkest to lightest */
  --bg-deep:        #04060a;    /* Hero background */
  --bg-primary:     #0c0e14;    /* Main section background */
  --bg-card:        #10121a;    /* Card / visual box background */
  --bg-elevated:    #14161e;    /* Elevated surfaces (step cards) */

  /* Accent spectrum — purple outer → cyan inner (like the logo's accretion ring) */
  --purple-deep:    #2a1870;
  --purple-mid:     #5a48a0;
  --purple-light:   #7c68c0;
  --cyan-primary:   #4fc3f7;    /* PRIMARY ACCENT — links, highlights, photon ring */
  --cyan-light:     #80dcff;    /* Hover states */
  --cyan-bright:    #c0eeff;    /* Active glow */
  --purple-accent:  #7c4dff;    /* Secondary accent */

  /* Text hierarchy */
  --text-primary:   #f0f2f8;    /* Headlines */
  --text-secondary: #b0b8cc;    /* Subheadings */
  --text-body:      #8a90a4;    /* Body paragraphs */
  --text-muted:     #6a7088;    /* Card descriptions */
  --text-dim:       #3a4060;    /* Captions, hints */

  /* Borders */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-accent:  rgba(79, 195, 247, 0.1);
  --border-hover:   rgba(79, 195, 247, 0.3);

  /* Feature tag colors */
  --tag-gold:       #f4a842;
  --tag-green:      #80e0a0;
  --tag-cyan:       #4fc3f7;

  /* Status */
  --led-green:      #76ff03;
}

Key gradients

• Primary button: linear-gradient(135deg, #2979ff, #7c4dff)
• Button hover: linear-gradient(135deg, #4fc3f7, #2979ff)
• Hero text ("Home Cinema"): linear-gradient(135deg, #4fc3f7, #2979ff, #7c4dff) with -webkit-background-clip: text

Rules

• Page background is always --bg-deep or --bg-primary. NEVER white or light.
• Cards use --bg-card with border: 1px solid var(--border-subtle)
• Interactive visual boxes: --bg-card with border: 1px solid var(--border-accent)
• The only white (#fff) elements: the V in the logo, hero headline text, and the V's stroke in diagrams

---

Typography

Fonts

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Role	Font	Weight	Size	Color	Extra
Hero headline	DM Sans	800	48px	--text-primary	letter-spacing: -1px
Section title	DM Sans	700	32px	--text-primary
Feature heading	DM Sans	700	24px	--text-primary
Card title	DM Sans	700	14px	--text-primary
Body text	DM Sans	400	15px	--text-body	line-height: 1.75
Card description	DM Sans	400	12-13px	--text-muted	line-height: 1.6
Section label	JetBrains Mono	500	11px	--cyan-primary	uppercase, letter-spacing: 3px
Feature tag	JetBrains Mono	500	11px	varies	uppercase, letter-spacing: 1px
Hint / caption	JetBrains Mono	400	9-10px	--text-dim	letter-spacing: 2px
Stat number	JetBrains Mono	700	18-20px	varies
Button label	DM Sans	700	14-15px	#fff

Rules

• Never use Inter, Roboto, Arial, or system fonts
• JetBrains Mono is ONLY for labels, tags, captions, stats, and technical identifiers — never for body text
• All JetBrains Mono text is uppercase and letter-spaced

---

Layout

Container

• Max width: 960px, centered with margin: 0 auto
• Horizontal padding: 24px
• Section vertical padding: 80px

Section pattern

Each section follows:

<SectionLabel>    ← JetBrains Mono, 11px, cyan, uppercase, centered
<SectionTitle>    ← DM Sans, 32px, 700, centered, mb 48px
<content>         ← Grid or prose

Grid patterns

• Hero features: 2-column grid (1fr 1fr), gap 40px, alternating text/visual sides
• Secondary features: 4-column grid, gap 14px
• Install steps: 4-column grid, gap 14px

Border radius scale

• Visual boxes / section containers: 16px
• Cards: 14px
• Buttons: 10px
• Tags: 8px
• Feature pills: 20px (full round)
• Logo icon: 28-34px

---

Homepage Section Order

1. Hero (full viewport height)

• Animated canvas background (scan lines, perspective grid, floating particles)
• Logo icon (56px)
• Brand name: JetBrains Mono, 12px, cyan, uppercase, letter-spacing 5px
• Headline: "State-of-the-Art" / "Home Cinema" (gradient text) / "Video Processing"
• Subline: "Uncompromised picture quality..." paragraph
• Two CTAs: "Join the Beta" (filled gradient) + "Get Started →" (ghost)
• Feature pills row: HDR Tone Mapping, 4K Scaling, Geometric Correction, CIH Support, Gamut Mapping

2. Features

• Section label: "FEATURES"
• Section title: "Every pixel, perfected"
• Hero Feature A — HDR Tone Mapping (text left, visual right)
  • "HERO FEATURE" tag in gold (#f4a842)
  • Interactive before/after canvas slider (tone-mapped sunset vs clipped)
  • Hint: "← Drag the slider to compare"
• Hero Feature B — Geometric Correction (visual left, text right)
  • "HERO FEATURE" tag in green (#80e0a0)
  • Click-to-toggle canvas (distorted grid ↔ corrected grid)
  • Hint: "Click to toggle correction →"
• Hero Feature C — CIH & Lens Correction (text left, visual right)
  • "HERO FEATURE" tag in cyan (#4fc3f7)
  • Aspect ratio button row (2.39:1, 2.00:1, 1.85:1, 16:9, 4:3) + Lens toggle
  • Stat cards: "5 Aspect ratios" / "0px Height lost" / "Auto Lens detect"
• Secondary features grid (4 columns)
  • Video Scaling, Gamut Mapping, Aspect Ratio Control, Display Management
  • Each: custom SVG icon (52px) + title + description
  • Hover: background shifts to rgba(79,195,247,0.06), border to --border-hover

3. How It Works

• Section label: "HOW IT WORKS"
• Section title: "Simple setup, powerful processing"
• Intro paragraph (centered, max 600px)
• System flow diagram — the detailed SVG with Source → Capture Card → Void Video → Video Card → Display
  • Wrapped in visual box (--bg-card, border-accent, 16px radius)
  • The SVG viewBox is 0 0 1100 280, full width
• 4-step install grid:
  • Step 1: Install Card (PCIe icon, "Add capture card to PCIe slot")
  • Step 2: Connect HDMI (cable icon, "Route HDMI from AVR to capture card")
  • Step 3: Install Software (Void Video icon, "Download and configure")
  • Step 4: Connect Display (projector icon, "GPU output to display")
  • Each step: numbered circle (gradient fill, bold number), icon, title, description, technical note

4. CTA / Beta section (optional)

• Repeat "Join the Beta" with more detail about what beta access includes

5. Footer

• Logo icon (24px) + "Void Video" text
• Copyright: JetBrains Mono, 11px, --text-dim
• Optional: links to docs, community

---

Interactive Visuals — Implementation Notes

All three hero feature visuals use HTML <canvas> elements drawn with 2D context. They should be implemented as Vue composables or sub-components.

HDR Tone Mapping Canvas

• Draws a sunset scene (sky gradient, sun, mountains, water reflection)
• Left half: tone-mapped (preserved highlights, visible shadow detail, tree silhouettes)
• Right half: clipped (blown-out white sun, crushed black shadows)
• Draggable slider divider with white handle
• Labels: "Void Video" (left, cyan) and "Clipped" (right, warm)
• Canvas size: 560×280, responsive via CSS width: 100%

Geometric Correction Canvas

• 8×5 grid with bilinear interpolation between 4 corner points
• Uncorrected: corners are offset, plus barrel/pincushion distortion
• Corrected: perfect rectangle
• Animated transition (lerp at 0.08 speed)
• Click to toggle between states
• Status label: "Corrected" (green) / "Distorted" (warm)
• Canvas size: 560×280

CIH & Lens Correction Canvas

• Simulated film content (sky, ground, horizon glow, building silhouettes)
• Constant height maintained across aspect ratios — width changes, height stays locked
• Black masking bars on sides for narrower ratios
• "CONSTANT HEIGHT" vertical label on left edge
• Lens distortion: horizontal barrel effect on content slices
• Controls below canvas: 5 aspect ratio buttons + lens correction toggle
• Canvas size: 620×320

---

System Flow SVG

Use the detailed hardware illustration SVG (viewBox 0 0 1100 280) with:

• Source: blue gradient play button (100×100, rx 18)
• Capture card: green PCB with chip, fan, bracket, gold PCIe connector
• Void Video: purple-bordered processor box with chip die, pins on all 4 sides, play symbol, curved flow arrows, "VOID VIDEO" / "PROCESSING" text
• Video card: dual-fan GPU with shroud, fan blades, green accent bar, bracket, output ports
• Display: projector body with multi-ring lens (cyan glow), vents, LED, feet
• Arrows: cyan (#4fc3f7) with arrowhead markers between each element
• All labels: DM Sans, 13-14px, --text-secondary

---

Buttons

Primary (filled)

.btn-primary {
  background: linear-gradient(135deg, #2979ff, #7c4dff);
  border: none;
  border-radius: 10px;
  padding: 13px 30px;
  font: 700 14px 'DM Sans';
  color: #fff;
  box-shadow: 0 2px 12px rgba(41,121,255,0.2);
  transition: all 0.3s;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4fc3f7, #2979ff);
  box-shadow: 0 4px 24px rgba(41,121,255,0.4);
}

Secondary (ghost)

.btn-secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 13px 30px;
  font: 600 14px 'DM Sans';
  color: #8a90a4;
  transition: all 0.3s;
}
.btn-secondary:hover {
  background: rgba(79,195,247,0.1);
  border-color: rgba(79,195,247,0.3);
  color: #4fc3f7;
}

---

Cards

Feature card (secondary)

.feature-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 24px 18px;
  transition: all 0.3s;
}
.feature-card:hover {
  background: rgba(79,195,247,0.06);
  border-color: var(--border-hover);
}

Step card

.step-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
}

Step number: 32px circle, gradient fill, bold 14px number in --bg-deep color.

---

VitePress Integration Notes

Homepage setup

In index.md or index.vue:

---
layout: page
---

This removes the sidebar and gives a blank canvas. Then use a custom Vue component:

<script setup>
import VoidHome from './components/VoidHome.vue'
</script>
<VoidHome />

Navigation

The VitePress nav should link to:

• Features → anchor #features on homepage
• How It Works → anchor #how-it-works on homepage
• Guide → /guide/ (VitePress docs)
• Settings → /settings/video/ (VitePress docs)
• Download → /download.html

Theme customization

Override VitePress CSS variables to match the palette:

:root {
  --vp-c-brand: #4fc3f7;
  --vp-c-brand-light: #80dcff;
  --vp-c-brand-dark: #2979ff;
  --vp-c-bg: #0c0e14;
  --vp-c-bg-soft: #10121a;
  --vp-c-bg-mute: #14161e;
  --vp-c-text-1: #f0f2f8;
  --vp-c-text-2: #8a90a4;
  --vp-c-text-3: #6a7088;
}

This keeps the docs pages consistent with the homepage palette even though they use standard VitePress layout.

---

Asset Inventory

All assets have been created and are available:

• void_logo_icon.svg / .png — Icon only (favicon, nav)
• void_logo_full.svg / .png — Full wordmark
• void_logo_blue.svg / .png — Logo concept sheet (V1/V2/V3 variations)
• void_system_flow.svg / .png — Detailed hardware system flow diagram
• void_av_setup.svg / .png — Full AV chain diagram (sources → AVR → Void Video → display)
• void_install_steps.svg / .png — 4-step getting started graphic
• void_full_landing.jsx — Complete homepage reference (React, needs Vue conversion)
• void_features_section.jsx — Features section with interactive canvases
• void_cih_hero.jsx — CIH & Lens Correction hero feature
• void_hero_banner.jsx — Hero banner with animated background

The React components need conversion to Vue 3 Composition API (<script setup>) with ref(), onMounted(), onUnmounted(), and template refs for canvases.