Skip to main content

Woodstock Vitamins

Design System — Style Guide

Reference: wv-tokens.css + wv-typography.css + style.css  ·  CSS prefix: wv-  ·  Updated April 2026

Colors — wv-tokens.css

Core Palette

Background
#F8F5EC
--wv-color-background
Surface
#DDDEC7
--wv-color-surface
Surface 2
#95967D
--wv-color-surface-2
Text Primary
#2A2B14
--wv-color-text-primary
Text Secondary
#555543
--wv-color-text-secondary
Placeholder
#D9D9D9
--wv-color-placeholder

Olive / Green — ATC & Stars

Olive / ATC
#939740
--wv-color-accent
Olive Dark
#767933
--wv-color-olive-dark
Star Empty
#BEC18C
--wv-color-star-empty

UI & Functional

Border
#DDDEC7
--wv-color-border
Badge Purple
#9B8FB3
--wv-color-badge-purple
Badge BG
#767933
--wv-color-badge-bg
Card BG
#FFFFFF
--wv-color-card-bg
Warning
#C3200B
--wv-color-warning
Overlay
rgba(0,0,0,0.5)
--wv-color-overlay
Text Inverse
#F8F5EC
--wv-color-text-inverse
ATC Hover
#7a7e32
--wv-color-atc-hover
Green
#008000
--wv-color-green
Amber
#C77700
--wv-color-amber
Mist
#B2B9C0
--wv-color-mist

First5 Product Accents

Omega
#E37769
--wv-color-omega-main
Probiotic
#89AEBE
--wv-color-probiotic-main
Collagen
#4A6FAE
--wv-color-collagen-main
Calcium
#CEA233
--wv-color-calcium-main
Multi
#7E4752
--wv-color-multi-main

Quiz Accents

Coral / Quiz
#B65F54
--wv-color-quiz
Coral Hover
#A35349
--wv-color-quiz-hover

Typography

Font Families

General Grotesque
Light 300
Regular 400
Demi 600
Bold 700
--wv-font-primary
Grotesque Mono
Regular 400
Demi 500
--wv-font-mono
Office Times Round
--wv-font-serif

Heading Classes — wv-typography.css

All classes: line-height 1 · letter-spacing -0.03em · font-family General Grotesque (unless noted)

.wv-h1 Light 300 · 70px
Page Title
.wv-h2 Regular 400 · 40px
Section Heading
.wv-h3 Light 300 · 40px
Subsection / Card Heading
.wv-h4 Bold 700 · 50px
Product names, bold callouts
Product Title
.wv-h5 Regular 400 · 24px
Policy sections, paragraph headings
Definitions
.wv-h6 Demi 600 · 16px
Tab Label · Policy Section · Compact Heading
.wv-h-serif Office Times Round
Regular 400 · 55px
Quiz card, display contexts
Serif Heading
.wv-h-quiz Office Times Round
Regular 400 · 48px
Quiz card headings
Take the Quiz
.wv-h-serif-sm Office Times Round
Regular 400 · 36px · -0.03em
Blockquotes, smaller serif display
Ideas are tested in real life, refined over time.
.wv-h-serif-lg Office Times Round
Regular 400 · 80px · -0.03em
1px outside stroke (accent)
Brand-led display headings (Comparison Table "Woodstock")
Woodstock

Body Classes

All body classes use line-height: 1.5 (WCAG 1.4.12 minimum for readability)

.wv-body-lg Regular 400 · 18px

Most people are supplementing wrong. The answer isn't more — it's the right five. Dr. Neal built the First5 to address the gaps missing from even the best diets.

.wv-body Regular 400 · 14px
Policies, descriptions, form help text

These Terms of Service constitute a legally binding agreement made between you, whether personally or on behalf of an entity, and Woodstock Vitamins, concerning your access to and use of the woodstockvitamins.com website.

.wv-body-bold Demi 600 · 18px
Inline emphasis, callout text
Emphasized callout text within body copy.
.wv-body-sm Regular 400 · 12px
Captions, disclaimers, small notes

Free shipping on orders over $60. Subscription orders ship automatically.

.wv-prose Regular 400 · rich content (added v4)
Long-form article body + policy lists — consistent paragraph & list spacing

A prose wrapper for rich content: paragraphs, lists, and inline emphasis inherit consistent spacing and type.

  • Foundation-first nutrition
  • The First5 framework

Label Classes

.wv-label-reg Regular 400 · 12px
text-transform: uppercase
.wv-label is obsolete alias
Trust Bar · Status Pill · Table Header
.wv-label-small Grotesque Mono
Regular 400 · 12px
TOC default links, sidebar nav
Definitions  ·  Data We Collect  ·  How We Use It
.wv-label-small--active Grotesque Mono
Regular 400 · 12px
+ underline
TOC active link
Data We Collect
.wv-label-nav Demi 600 · 15px
Page nav headers, breadcrumbs
On This Page  ·  Last Updated
.wv-label-btn Regular 400 · 15px
text-transform: uppercase
ATC buttons, primary CTAs
Add to Cart  ·  Shop the First5
.wv-label-legal General Grotesque Regular 400 · 11px
letter-spacing: -0.03em
FDA: override to font-weight 700
FDA 21 CFR 101.93(e) requires boldface
†These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure, or prevent any disease.
.wv-prose Body copy wrapper — lists, links, paragraphs
Applied to editor content containers

Sample paragraph text showing spacing.

  • First bullet item
  • Second bullet item
  • Third bullet item
  1. First numbered item
  2. Second numbered item

Font Sizes — per-class tokens (--wv-fs-*)

Designer values are PX (rem shown at the 16px root — pixel-identical at default zoom). Mobile-first: scaling classes step up at 768px (tablet) → 1280px (desktop); locked classes hold one size at every viewport.

Scaling — mobile → tablet → desktop

--wv-fs-h146px / 2.875rem → 60px / 3.75rem → 70px / 4.375rem.wv-h1
--wv-fs-h226px / 1.625rem → 34px / 2.125rem → 40px / 2.5rem.wv-h2
--wv-fs-h326px / 1.625rem → 34px / 2.125rem → 40px / 2.5rem.wv-h3
--wv-fs-h433px / 2.0625rem → 43px / 2.6875rem → 50px / 3.125rem.wv-h4
--wv-fs-h520px / 1.25rem → 22px / 1.375rem → 24px / 1.5rem.wv-h5
--wv-fs-h-serif36px / 2.25rem → 47px / 2.9375rem → 55px / 3.4375rem.wv-h-serif
--wv-fs-h-serif-lg52px / 3.25rem → 68px / 4.25rem → 80px / 5rem.wv-h-serif-lg
--wv-fs-h-serif-sm23px / 1.4375rem → 31px / 1.9375rem → 36px / 2.25rem.wv-h-serif-sm
--wv-fs-h-quiz31px / 1.9375rem → 41px / 2.5625rem → 48px / 3rem.wv-h-quiz

Locked — single size at every viewport

--wv-fs-h616px / 1rem.wv-h6
--wv-fs-body-lg18px / 1.125rem.wv-body-lg
--wv-fs-body14px / 0.875rem.wv-body
--wv-fs-body-bold18px / 1.125rem.wv-body-bold
--wv-fs-body-sm12px / 0.75rem.wv-body-sm
--wv-fs-label-nav15px / 0.9375rem.wv-label-nav
--wv-fs-label-btn15px / 0.9375rem.wv-label-btn
--wv-fs-label-reg12px / 0.75rem.wv-label-reg / .wv-label
--wv-fs-label-small12px / 0.75rem.wv-label-small
--wv-fs-label-legal11px / 0.6875rem — FDA minimum (21 CFR 101.93).wv-label-legal

Legacy — --wv-text-* (general scale; prefer the per-class --wv-fs-* tokens)

--wv-text-xs11px / 0.6875rem
--wv-text-label12px / 0.75rem
--wv-text-sm15px / 0.9375rem
--wv-text-base16px / 1rem
--wv-text-md18px / 1.125rem
--wv-text-lg21px / 1.3125rem
--wv-text-xl27px / 1.6875rem

Spacing — Confirmed Usage Values

Base unit: TBD (fill in from Figma tokens). Values below are confirmed from style.css usage.

7px — card image-to-info gap (wv-card)
10px — card action bottom offset
12px — shop cats gap, toolbar icon gap
16px — mega menu section bottom margin, card info padding
20px — mega first5 hero bottom margin
24px — trust bar gap, section mobile padding
26px — product grid gap (--wv-grid-gap)
32px — shop toolbar to grid margin
40px — mega menu column gap, section header bottom
48px — shop load more top margin
60px — first5 section top padding
80px — container padding (--wv-container-padding), footer padding

Border Radius

0
Sharp
15px
--wv-radius-sm
inputs, cards
16px
--wv-radius-md
cards, dropdowns
20px
--wv-radius-lg
large cards, quiz CTA
999px
--wv-radius-pill
buttons, qty, badges

Shadows

--wv-shadow-sm
0 1px 3px rgba(0,0,0,0.08)
Cards at rest, header
--wv-shadow-md
0 4px 12px rgba(0,0,0,0.1)
Elevated cards, dropdowns
--wv-shadow-lifted
9px 10px 8px 4px rgba(0,0,0,0.18)
Raised card elements (Comparison Table)
--wv-shadow-card
0 4px 4px 0 rgba(0,0,0,0.25)
Product Card image/info, Ingredient Card

Layout Widths

Max-width tiers — outer frame down to the article reading column. Pick the tier per surface (see CSS RULES). Bars are scaled to the 1440 outer frame.

--wv-container-max · 1440px — outer artboard / full-bleed frame (header, footer, page wrapper)
--wv-page-content-max · 1280px — default section content (mid tier)
--wv-page-content-tight · 1024px — tighter reading column (Learn Hub)
--wv-content-max · 768px — article body / long-form reading column

Transitions

--wv-transition-fast 150ms ease — hover state flips (TOC links, small UI)
--wv-transition-base 200ms ease — nav links, buttons, icons (most interactions)
--wv-transition-slow 300ms ease — mobile menu slide-in, newsletter reveal
Mega menu 220ms ease — transform + opacity + visibility

Buttons & CTAs

.wv-section-pill Surface fill · no stroke · pill · uppercase
Used: section heading labels (About, marketing pages)
Font: .wv-label-btn (15px · 400 · -0.03em · uppercase)
Padding: 6px 27px · radius: --wv-radius-lg (20px)
Our Approach
bg: --wv-color-surface #DDDEC7
.wv-section-pill--light Background fill · no stroke · pill · uppercase
Used: sections with surface/dark backgrounds
Same specs as .wv-section-pill, lighter fill
Why Woodstock
bg: --wv-color-background #F8F5EC
.wv-btn-quiz Coral · pill · uppercase
Used: header quiz pill
Font: --wv-font-primary · 11px · 500 · 0.08em
hover: --wv-color-quiz-hover #A35349
.wv-card__atc Olive · pill · 112×44
Used: product card ATC
Font: .wv-label-btn (15px · 400 · uppercase)
hover: --wv-color-atc-hover
.wv-first5__btn-primary Dark text BG · sharp · uppercase
Used: First5 section CTA
Font: --wv-font-primary · --wv-text-sm (15px) · 600 · 0.06em
Shop the First5 hover: --wv-color-accent (olive)
.wv-first5__btn-outline Transparent · bordered · sharp
Used: First5 section secondary CTA
Font: --wv-font-primary · --wv-text-sm (15px) · 600 · 0.06em
Learn More hover: fills dark text color
.wv-hero__cta Olive · sharp · uppercase
Used: hero primary CTA
Font: --wv-font-primary · --wv-text-sm (15px) · 600 · 0.06em
Shop the First5 hover: --wv-color-text-primary (dark)

Large Buttons (55px · 10px radius · 30px padding)

.wv-lg__btn-quiz Coral · rounded · uppercase
Used: quiz CTA (large contexts)
Font: .wv-label-btn (15px · 400 · -0.03em)
Height: 55px · radius: 10px · padding: 0 30px
Take the Quiz → hover: --wv-color-quiz-hover #A35349
.wv-lg__btn-outline Dark text stroke · no fill · rounded
Used: secondary CTA (large contexts)
Same font specs as .wv-lg__btn-quiz
Shop the First5 hover: fills dark, text inverts
.wv-lg__btn-primary Dark text fill · rounded
Used: primary CTA on light backgrounds
Same font specs as .wv-lg__btn-quiz
Read Dr. Neal's Story hover: --wv-color-accent (olive)
.wv-lg__btn-cta Olive fill · rounded
Used: shop/product CTA (large contexts)
Same font specs as .wv-lg__btn-quiz
Shop the First5 hover: --wv-color-text-primary (dark)
.wv-arrow-btn — default
Circle · bordered · 35px
Dark text-primary stroke + arrow · transparent fill
Hover: dark fill, cream arrow
Modifiers: --prev, --next
Render via get_template_part('parts/arrow-btn', null, ['dir' => 'prev'])
Lives in frozen wv-components.css (v41). Long line-arrow icon is canonical.
var(--wv-color-text-primary)
.wv-arrow-btn[disabled] — disabled state
Placeholder grey stroke + arrow · transparent fill
No hover transition · cursor: default
Render via get_template_part('parts/arrow-btn', null, ['dir' => 'prev', 'disabled' => true])
Use when carousel reaches the edge of its scroll range.
var(--wv-color-placeholder)
.wv-arrow-btn--reversed — over imagery / dark bg
Card-bg (white) stroke + arrow · transparent fill
Hover: white fill, dark text-primary arrow
Render via 'class' => 'wv-arrow-btn--reversed'
Demo cell is darkened so the white-on-dark arrows are visible.
var(--wv-color-card-bg)

Pills, Badges & Tags

Category pills .wv-shop-cats__pill
55px tall · uppercase
Active: filled dark
Font: --wv-font-primary · --wv-text-sm (15px) · 500 · 0.04em
Shop All First5 Gut
Count pill .wv-card__count-pill
115×44px · pill border
Variable: + chevron
Font: --wv-font-mono · --wv-text-label (12px) · 500
1 oz variable (chevron) · simple (no chevron)
Cart badge .wv-cart-badge
18px circle · olive BG
Font: --wv-font-primary · 10px · 700
3
Star rating .wv-card__stars
Filled: --wv-color-olive-dark
Empty: --wv-color-star-empty
Review count: --wv-font-mono · --wv-text-label (12px) · 400
142 Reviews
Price states .wv-card__price variants
Regular: strikethrough muted
Sale: coral terracotta
Font: --wv-font-primary · 20px · 700 (price) · 14px · 300 (strikethrough)
$34.99    $34.99 $29.74

Form Elements

Email input .wv-email-input
Field: 43px · radius 22px
Button: 44px · olive · radius 22px
Font: --wv-font-mono · 16px · 400
Placeholder: --wv-color-text-secondary

Highlight box .wv-pol-highlight
cream-dark BG · 8px radius
Font: --wv-font-primary · 13px · 400 · lh 1.7
Plain language summary: We only share your data with trusted partners who help us run this website and fulfill your orders.
Notice box .wv-pol-notice
coral-light BG · coral border
Font: --wv-font-primary · 13px · 400 · lh 1.7
Important: California residents have additional rights under CCPA. See Section 8 for details.

Breakpoints

Mobile — 375px+ — max-width: 767px — base styles
Tablet — 768px–1279px — min-width: 768px
Desktop — 1280px+ — min-width: 1280px
Wide — 1536px+ — min-width: 1536px

Rule: mobile-first CSS — base styles for mobile, min-width queries for larger screens.

Layout Tokens

--wv-container-max 1440px — matches Figma artboard width
--wv-header-padding 80px desktop · 40px tablet · 16px mobile
--wv-grid-gap 26px — product grid column gap
--wv-grid-gap-sm 16px — mobile grid gap
--wv-header-height 81px desktop · 48px mobile
--wv-leading-tight 1.0 — headings (hero, shop, first5)
--wv-leading-normal 1.52 — body text
--wv-leading-loose 1.8 — small body, descriptions
--wv-tracking-tight -0.03em — headings
--wv-tracking-normal 0em — default
--wv-tracking-wide 0.14em — eyebrow labels, uppercase nav
Product grid repeat(4, 288px) desktop · 26px gap
Mega menu grid 1.15fr 1fr 1fr · 40px gap · max-width 960px
All layout method CSS Flexbox or Grid — no frameworks

†These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure, or prevent any disease.

Bold weight 700 required — FDA 21 CFR 101.93(e) — use .wv-label-legal + font-weight:700

WV Style Guide · wv-tokens.css + wv-typography.css + style.css · wv- prefix · April 2026