Color rules, typography scale, badge system, hero patterns, and page type classification for all secondary pages.
The entire secondary page system runs on two accents. The choice is determined by page type — not personal preference.
#C0392B regardless of page type. Amber never appears on a buy/CTA button.
#fde8e6 — too pinkish. Use rgba(26,26,24,0.07) for neutral badge/pill backgrounds.rgba(192,57,43,0.04–0.08) as standalone section background — looks pinkish. Use var(--off-white).Two fonts only. Playfair Display for display/headings. DM Sans for everything else. Never mix on the same element type.
All eyebrows are DM Sans, weight 700, uppercase, amber #D4860A. Size and tracking vary by context. Never below 10px. Never grey — eyebrows are always amber on secondary pages.
#D4860A on secondary pages. Never grey, never red.Two distinct badge families, used in different contexts. Editorial badges are text-only and flow inline with card copy on storytelling pages. Product Card badges use a tinted fill so they read against product imagery on PLP and grid layouts. Never mix the two systems on the same page.
Used on HOF timelines, buyer guides, vintage price labels, and program/transactional pages. No fill. Inline display, flowing with card content.
Used on PLP product cards and any grid layout where badges must read against product imagery. Four canonical names — never invent new ones. Two visual styles: Tinted (default, strongest visibility) and Outline (lighter weight — use when imagery is busy or you want a quieter signal). 10px/700/0.10em tracking, 2px corner radius.
/* Base + 4 names (tinted by default) */
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; padding:3px 8px; border-radius:2px; width:fit-content; }
.badge-new { background:rgba(26,26,24,0.07); color:var(--near-black); }
.badge-vintage { background:var(--amber-bg); color:var(--amber); }
.badge-bestseller { background:rgba(192,57,43,0.08); color:var(--vk-red); }
.badge-featured { background:rgba(26,26,24,0.07); color:var(--near-black); }
/* Outline modifier — stack on any name: */
.badge--outline { background:transparent; border:1px solid currentColor; padding:2px 7px; }
.badge--outline.badge-new { color:var(--near-black); border-color:rgba(26,26,24,0.30); }
.badge--outline.badge-vintage { color:var(--amber); border-color:rgba(212,134,10,0.45); }
.badge--outline.badge-bestseller { color:var(--vk-red); border-color:rgba(192,57,43,0.40); }
.badge--outline.badge-featured { color:var(--near-black); border-color:rgba(26,26,24,0.30); }
Every secondary page header uses one of these four hero families. Hero 2 has 5 right-panel variants. All variants below are light — dark heroes are reserved for category PLPs and brand spotlights only (see Page Layouts).
background:#EDE8E2 · eyebrow, H1, body, CTAsbackground:#fff · stats grid, photo, or feature listgrid-template-columns:1fr 1fr;min-height:560pxmicrophones-plp-default.html (default · dark) · microphones-plp-spotlight.html (spotlight · dark) · microphones-plp-editorial.html (editorial · light)
background:#EDE8E2 · eyebrow, H1, intro, year/topology spec strip, CTAsbackground:#fff · product photo with horizontal padding — image graphic ends flush with the bottom of the hero.object-fit:contain · height:460–520pxbackground:#EDE8E2 panel.#EDE8E2.object-fit:cover on product shots with white backgrounds — use contain.Locked rule: ALL secondary pages use amber #D4860A as their accent — eyebrows, page CTAs, accent lines, step indicators. Red #C0392B is reserved for core ecommerce screens only (homepage, category, product, cart, checkout) and shared nav chrome (mega menu, "Talk to an Expert" button, cart badge). Form focus borders stay red on all pages per design system rule.
Content-first pages. Goal is to educate and build trust. The purchase happens at Vintage King but the decision is made here.
Action-first pages. Goal is form submission, quote request, or direct purchase. Every element drives toward one CTA. Same amber accent — only the form focus border stays red.
Required on every page. Fixed to the bottom of the viewport. Dark background, red CTA, ghost secondary link.
position:fixed;bottom:0;left:0;right:0;z-index:500 · Add height:68px spacer div before closing wrapper to prevent content overlap.
One container width. One vertical rhythm. Used by every secondary page, the demo dashboard, and this style guide.
.sg-wrap pattern: max-width:1160px;margin:0 auto;padding:0 40pxmax-width:820pxmax-width:520px for body copy
padding:64px 0padding:96px 0 (taller for impact)padding:24px 0
border-bottom:1px solid rgba(26,26,24,0.08)gap:1px;background:rgba(26,26,24,0.08) with white cards inside.White inputs on light backgrounds. Always red focus border (locked design system rule, regardless of page accent). Labels above inputs, never inside.
background:#fff · border:1px solid rgba(26,26,24,0.18) · padding:12px 14px · font-size:14px · border-radius:3pxborder:2px solid var(--vk-red) + reduce padding by 1px to keep dimensions stable. Always red — locked rule.border-color:#C0392B · text:#C0392B + warning glyph. Never red background fill.Three repeatable strip patterns. Every secondary page uses at least one. Always 3-up on desktop, stack on mobile.
padding:24px 32px · 32px amber circle icon · 14px headline / 12px sub · 3-up grid, gap 24pxbackground:#F5E6C8 · border-left:3px solid #D4860A · padding:18px 28px · Playfair stat + DM Sans bodyOne card pattern across the entire system: white card on a 1px hairline grid. Used on demo dashboard, this style guide, and every secondary page. Replaces traditional gutter-spaced cards.
background:rgba(26,26,24,0.08) · display:grid · gap:1px · border:1px solid rgba(26,26,24,0.08) · border-radius:4px · overflow:hiddenbackground:#fff · padding:28px 28px 24px (compact: 20px 20px 18px)var(--off-white) on entire card. CTA text → near-black + arrow translate.Build the page with placeholders at production dimensions. Swap to real photo when VK photographer delivers. Never delay a page waiting on photography.
background:var(--off-white) · border:1px solid rgba(26,26,24,0.08) · min-height: matches final image dim520–640pxmin-height:560px460–520px280px260px · aspect-ratio 3/4520px320px · Timeline cards: 360px300px
object-fit:cover for full-bleed/environmental shots. object-fit:contain for product shots on white seamless.CB2 reference: one message per zone, white space as a feature. Sentence-case headings. Direct, expert, never salesy.
los-angeles.html-style location pages are cancelled. Use "Talk to an Expert" + video chat / callback / live chat instead.
Restraint. Editorial pages don't bounce, fade, or parallax. Motion is a quiet confirmation, not a feature.
transition:all 0.15s ease-outtransition:transform 0.3s ease-outtransition:opacity 0.2s ease-outease-in-out (feels sluggish).
@media (prefers-reduced-motion:reduce). Disable transforms, fades over 0.1s, and any auto-playing animation. Keep critical state changes (focus, error) instant.
Every page needs at least one JSON-LD block — for Google SGE, AI agents (ChatGPT/Perplexity/Claude), and search ranking. Paste-ready snippets below. Replace bracketed values per page.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Service",
"name": "[Service Name]",
"provider": {"@type": "Organization", "name": "Vintage King Audio", "url": "https://vintageking.com"},
"areaServed": "United States",
"description": "[140–160 char description]",
"serviceType": "[Trade-In | Studio Installation | Consultation]"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{"@type": "Question", "name": "[Question]?", "acceptedAnswer": {"@type": "Answer", "text": "[Answer]"}},
{"@type": "Question", "name": "[Question]?", "acceptedAnswer": {"@type": "Answer", "text": "[Answer]"}}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "[How to Trade Your Gear]",
"step": [
{"@type": "HowToStep", "name": "Submit", "text": "[Step 1 description]"},
{"@type": "HowToStep", "name": "Quote", "text": "[Step 2 description]"},
{"@type": "HowToStep", "name": "Ship", "text": "[Step 3 description]"}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "[Article Title]",
"author": {"@type": "Organization", "name": "Vintage King Audio"},
"publisher": {"@type": "Organization", "name": "Vintage King Audio", "url": "https://vintageking.com"},
"datePublished": "2026-04-18",
"description": "[140–160 char description]"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "JobPosting",
"title": "[Position Title]",
"hiringOrganization": {"@type": "Organization", "name": "Vintage King Audio"},
"employmentType": "FULL_TIME",
"datePosted": "2026-04-18",
"description": "[140–160 char description]"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "[Gear Name]",
"brand": {"@type": "Brand", "name": "[Brand]"},
"description": "[140–160 char description]",
"category": "Pro Audio Equipment"
}
</script>
[Page Name] — [Benefit Hook] | Vintage King<p> gets class="speakable" for Google SGEStatus: Desktop-first build. Mobile pass happens after all desktop pages are complete and approved. This section locks the rules so mobile pass is consistent when it runs.
≥980px — full layout, all multi-col grids700–979px — 3-col grids → 2-col, hero stays 50/50<700px — everything stacks 1-col, hero text above imagepadding:12px 20px on mobile
WCAG 2.2 AA target across the entire system. Everything below is a hard requirement, not a goal.
rgba(26,26,24,0.7)+ = 8.9:1 ✓outline:2px solid var(--vk-red); outline-offset:2pxoutline:none without replacement
<header> <nav> <main> <footer><h1> per page (hero headline)<p>: class="speakable" (Google SGE)alt="" (descriptive, or empty for decorative)<label for="">aria-label="..."role="menu" + arrow-key navHard rules. If you see one of these in a build, fix it before push. No exceptions, no "but it looks better with..."
#fde8e6 — pinkish on uncalibrated screensrgba(192,57,43,0.04–0.08) as standalone bg — pinkish&) in any visible UI text — HARD RULE. Always write the word "and". Applies to titles, eyebrows, body copy, buttons, badges, labels, meta tags, tooltips. Only exceptions: brand names that use it in their legal mark (none currently in scope) and inside <code> examples& or "; type the literal character or word