A — Start here
Page Layouts (NEW)
Every layout pattern in one place · 4 light heroes · 2 dark heroes · 4 PLP variants · body modules · when-to-use rules · live demo links. Open this first to see what's possible.
Layouts catalog
Open first
Style Guide
Design rules · color tokens · typography · spacing · accent rules · no-go list · JSON-LD library · GEO and AI agent guidance.
Rules
Read second
Page Templates Guide
Agency hand-off · 3 hero variants (A · B · C) · 2 body modules (Big · Dual) · 2 strips (trust · explore) · color tokens · decision rules
Hand-off
Read third
A2 — Category PLP demos (3 canonical + 1 under team review)
Microphones — PLP Default (dark strip)
Dark band hero · no image · headline + lede + 2 CTAs · pill filter row + inline quick filters · 3-up product grid · trust strip. Default for all category landings.
Dark Strip
Default
Microphones — PLP Spotlight (featured + co-op)
Dark 50/50 hero · co-op pill · big featured photo right · single featured item meta · pill filter row + inline quick filters · 3-up grid. Brand spotlight / partner weeks.
Featured + Co-op
Spotlight
Microphones — PLP Spotlight Compact Under Review
Same content as Spotlight — hero shrunk to ~440px so pill filters land above the fold on standard laptops. Team A/B against Spotlight large — pick one within the week.
Spotlight (compact)
Review
Microphones — PLP Editorial (light six-grid)
Hero 2 with Product Grid right side · 6 curated picks · curator notes 3-up · dark process strip · CTA back to full catalog. Opt-in — drops, campaigns, staff picks.
Six-Grid (light)
Editorial
A3 — PLP typography labs
Font comparison — PLP grid vs featured row
Side-by-side title treatments: DM Sans 14 (grid) vs Playfair 17 (featured row) vs Playfair 15 trial · long-title stress test · pricing locked to DM Sans
Lab
Typography
Header — 3 retail stacks (PLP extract)
Full topbar + main nav cloned from microphones-plp-default.html · Roboto / Inter / Source Sans 3 · no edits to source pages
Lab
Typography
Spotlight Compact PLP — full page × 3 retail fonts
Copy of microphones-plp-spotlight-compact.html · side-by-side Roboto / Inter / Source Sans 3 · source file not modified
Lab
Typography
Hero — Spotlight Compact × 3 retail fonts (full width)
Dark 50/50 hero only (not nav) from spotlight compact · Roboto / Inter / Source Sans 3 · real 1280px / 440px min-height
Lab
Typography
CORE — Prototype pages (vintage-king-redesign repo)
Homepage
Hero · The Short List tabs · Rare Gear vintage section · Co-op blocks · footer. Core conversion screen.
Light · core
Core
Locked repo ·
Live demo ↗
Category (core)
Original category page in the prototype with the dark band hero. Source for the new dark PLP variants in A2.
Dark band · core
Core
Locked repo ·
Live demo ↗
Product (PDP)
Product detail page · gallery · specs · buy box · related products.
Light · core
Core
Locked repo ·
Live demo ↗
FAQ
FAQ accordion + JSON-LD FAQPage · contact CTA.
Light · core
Core
Locked repo ·
Live demo ↗
Demo Deals
Demo gear deals page. Specials, condition badges, save percentages.
Light · core
Core
Locked repo ·
Live demo ↗
Sell or Trade
3-way header toggle · credential bar · gear submission form · seller proof.
Light · core
Core
Locked repo ·
Live demo ↗
Studio Installations
Project cards · dark caption · process · CTA. v2.64 rebuilt.
Light · core
Core
Locked repo ·
Live demo ↗
Tech Shop
VK Tech Shop · restoration · calibration · in-house bench services.
Light · core
Core
Locked repo ·
Live demo ↗
Financing
Section 179 · Trade Program tabs · 0% financing.
Light · core
Core
Locked repo ·
Live demo ↗
Open Box
Editorial 2x2 · product grid · buyer strip · ghost CTAs. Excluded from mega-menu.
Light · core
Core
Locked repo ·
Live demo ↗
Mega Menu
Standalone mega-menu lab · 6 parent categories · Ask hover dropdown · co-op blocks.
Demo · core
Core
Locked repo ·
Live demo ↗
Microphones Filters / PLP Lab
Live filter / PLP demo from the mega-menu folder. Reference for the dark PLP variants in A2.
Dark · core
Core
Locked repo ·
Live demo ↗
B — Company and brand
About VK
v1 built (50/50). v2 added: Hero 1 Big Photo pattern · same content body · placeholder for VK photography
Hero 1 · Big Photo
High
Hall of Fame
Built · 3 categories, 13 inductees, ledger layout, engineer quotes, shop cards, nominate form
Dark + gear
High
Make Your Mark
Light amber hero · 2-card panoramic · 33-episode grid · submission form · confidence strip
Light / amber
High
PLAYBACK Magazine
Light amber hero · staggered cover mockup · JS flipbook viewer · 3-card feature strip · 7 issue grid · subscribe form · quote rail
Light / amber
High
Careers
Light amber hero · stats block · 4-card culture strip · Audio Consultant role + apply sidebar · open resume CTA · JobPosting JSON-LD
Light / amber
High
Style Guide
Design system reference · color rules · typography scale · badge system · hero patterns · page type classification · download/print PDF
Light / amber
Ref
Studio Professionals
T1 dark · segment strip · 6-card benefits grid · eligibility + quotes · apply form · Service JSON-LD
Dark / red
High
Trade Program
Light hero · stats 2x2 · 3-step process · pro-tip stack bar · 4-col what we buy · trade form · HowTo JSON-LD
Light / red
High
Meet Our Audio Consultants
Light hero · 4-consultant profiles · how it works · quote rail · contact form · FAQ JSON-LD
Light / red
Medium
Vintage King Los Angeles
/los-angeles
Cancelled — VK has no physical locations
Cancelled
—
Cancelled
25 Years of Pro Audio
Light hero · 4-stat anniversary bar · 4-era timeline · 6 milestones grid · 2 founder quotes · CTA — anniversary editorial
Light / amber
Low
C — Gear heritage and Hall of Fame deep pages
HOF — Neve 1073
Light hero · editorial history · versions grid · studio timeline · specs table · shop CTA · Product + Article JSON-LD
Light / amber
Medium
HOF — Neve 1073 Buyer's Guide
Full guide · real AMS Neve photos · Marinair + LO1166 story · official specs · 8078 console history · AIR Studios · Electric Lady · FAQ JSON-LD
Light / amber
Medium
HOF — Neve 1073 Guide v2 (Editorial)
Full-width editorial · no sidebar · stat bar · 3 studio cards (Electric Lady, AIR Montserrat, Criteria) in asymmetric 2+1 grid · sticky shop bar · Explore More section · amber + red accent mix
Light / amber
Medium
HOF — Fairchild 660/670
Full editorial · light hero · 6-stat bar · 3 studio cards (Abbey Road, Van Gelder, Olmsted) · Abbey Road rack photo · time-constants table · records list · Pete Townshend + Armando Avila quotes · Which Fairchild? decision guide (5 scenarios) · 6-card alternatives grid · FAQ · sticky shop bar · 2 real Wikipedia photos
Light / amber
Medium
HOF — Teletronix LA-2A
Full editorial · light hero · 6-stat bar · T4 cell SVG explainer (dark section) · 7-version timeline · 3 studio cards (Sound City, PatchWerk, Conway) · rack photo · records list · Jim Scott + Putnam Jr. quotes · Which LA-2A? 6-option guide · FAQ · sticky bar · 2 real PatchWerk Wikipedia photos
Light / amber
Medium
HOF — Neumann U47/U48
Full editorial · split hero · 6-stat bar · dark anatomy section (VF14/M7/transformer/grille) with tube photo · 5-entry variants timeline · 3 studio cards (Capitol/Sinatra, Abbey Road/Beatles, Van Gelder/Blue Note) · records list · Mike Nehra + Ryan McGuire VK quotes · 6-option buyer guide ($439–$9,995) · 6-question FAQ · sticky bar · 2 real Wikipedia photos
Light / amber
Medium
HOF — UREI 1176
Full editorial · split hero · 4-stat bar · 8 revisions timeline (A-H) · Michael Brauer quote · spec table · revision summary cards · buyer guide · FAQ · sticky bar
Light / amber
Medium
HOF — Neve 1081
Light hero · stat bar · history block · 3 versions · 3 records · spec table · sticky shop bar · Product + Article JSON-LD
Light / amber
Low
HOF — Telefunken ELA-M 251
Light hero · stat bar · history block · variants timeline · 3 records · spec table · sticky shop bar · Product + Article JSON-LD
Light / amber
Low
HOF — Neumann U67
Full editorial · split hero · 4-stat bar · 9 engineering advances · variants timeline (M269, M367, SM69) · records list · Ryan McGuire quote · buyer guide · FAQ · sticky bar
Light / amber
Medium
HOF — Neumann U47 FET
Light hero · stat bar · solid-state successor story · variants · records · spec table · sticky shop bar · Product + Article JSON-LD
Light / amber
Low
HOF — Coles 4038
Light hero · stat bar · BBC ribbon history · 3 versions · 3 records · spec table · sticky shop bar · Product + Article JSON-LD
Light / amber
Low
HOF — TAB/Telefunken V72/V76
Light hero · stat bar · German broadcast history · variants · records · spec table · sticky shop bar · Product + Article JSON-LD
Light / amber
Low
HOF — Universal Audio 175B
Light hero · stat bar · Putnam origin story · variants · records · spec table · sticky shop bar · Product + Article JSON-LD
Light / amber
Low
Neumann Mic Comparison
Light hero · stat bar · comparison table (U47/U67/U87/M149/TLM170/TLM103) · 6 mic sections · decision guide · dark quote · FAQ · Article + Product JSON-LD
Light / amber
Medium
D — Studios by VK
Classic Studios Gone Modern
Light hero · stat bar · 6 studio project cards · gear categories · buyer guides · how-to guides · contact CTA · Article + Service JSON-LD
Light / amber
Medium
Recording and Mixing at Home
Light hero · 3 budget tiers · 6 studio stories · gear categories · buyer guides · how-to guides · contact CTA · Article + HowTo JSON-LD
Light / amber
Medium
Multi-Room Recording Studios
Light hero · 4-stat install bar · 5 capability cards · 3-step process · 3 project showcases · contact form · FAQ · sticky bar · Service + FAQPage JSON-LD
Light / amber
Low
E — Commerce support
Section 179
Light hero · $1.22M/100%/Dec 31 stats · 3-step how-it-works · 6-item who qualifies · 8-item equipment grid · FAQ · sticky bar · HowTo + FAQPage JSON-LD
Light / red
Medium
VK Credit Card
Light hero · 3-step apply flow · 5 financing tiers (6–48mo) · Synchrony prequalify · dark promo section · benefits grid · FAQ · sticky bar · Service + FAQPage JSON-LD
Light / amber
Medium
Avid Pro Tools Trade-In
Light hero · 4-stat eligibility bar · 3-step process · what qualifies grid · trade-in form · sticky bar · HowTo + Service JSON-LD
Light / amber
Low
Avid S4 Control Surface Guide
Light hero · stat bar · 4 configurations · feature cards · spec table · contact form · Article + Product JSON-LD
Light / amber
Low
Avid S6 Control Surface Guide
Light hero · stat bar · 4 configurations · feature cards · spec table · contact form · Article + Product JSON-LD
Light / amber
Low
F — Specialty programs
Live Sound / House of Worship
Light hero · services grid · 3-step process · gear categories · product cards · testimonial · case studies · FAQ · Service + FAQPage JSON-LD
Light / amber
Medium
Universal Audio Promotions
Light hero · current promo strip · featured deals grid · plugin bundles · interface offers · CTA · Offer JSON-LD
Light / amber
Low
UA Apollo X
Light hero · 4-stat bar · 5 model lineup · feature grid · spec table · CTA · Product + Article JSON-LD
Light / amber
Low
G — Seasonal and campaign (template once, deploy per campaign)
Black Friday — Microphones
Campaign template · light hero · countdown stat strip · 6 deal cards · category grid · CTA · Offer JSON-LD
Light / amber
Low
New at NAMM — Microphones
Campaign template · light hero · NAMM stat bar · 6 release cards · category grid · CTA · Article JSON-LD
Light / amber
Low
Back to School
Campaign template · light hero · student stat bar · 6 starter bundles · category grid · CTA · Offer JSON-LD
Light / amber
Low
H — Help and policy (shared minimal template)
Shipping Policy
Light hero · clear policy sections (rates, timing, intl, oversized, returns) · contact strip · FAQPage JSON-LD
Light / amber
Low
Returns
Light hero · 30-day window · what's eligible · how to start · refunds timing · contact strip · FAQPage JSON-LD
Light / amber
Low
VK Warranty
Light hero · +1 year stats · 3-tier coverage grid · ADH by Extend (6-item grid) · used warranty tiers · FAQ · sticky bar · Service + FAQPage JSON-LD
Light / red
Medium
Privacy Policy
Light hero · data collection, use, sharing, rights, contact sections · plain-language · contact strip
Light / amber
Low
“In this repo” = standalone HTML file in this project (not the live main demo).