# WEF Brand Style Guide — "The Bioneer" Design System **Canonical reference** for all Wellness Elite Fitness (WEF) websites, documents, magazines, newsletters, one-pagers, decks, and member-facing materials. Derived from *The Bioneer · Vol. 1 Issue 1 · April 2026* (`wef-agency/output/bioneer/bioneer-vol1-issue1.html`) — the gold standard. Anything produced for WEF — or any WEF sub-brand (Bioneer, EWCP, kiosk, health, etc.) — **must** use this style. Do not invent colors, fonts, or spacing. Do not use Tailwind defaults, generic gradients, emoji, drop shadows outside those defined here, or modern "SaaS landing page" aesthetics. This is an editorial, print-magazine voice rendered digitally. --- ## 1. Design tokens Use these exact values. Never hard-code anything else. ```css :root { /* Color */ --cream: #F5F0E6; /* primary page background */ --cream-deep: #EDE6D4; /* subtle variation */ --ink: #1A1A18; /* body text, headlines */ --ink-soft: #1C1C1A; /* dark panels, dark pages, footer */ --gold: #B8943A; /* accents, CTAs, rules, italic emphasis */ --gold-light: #C9A84C; /* dark-page gold accents */ --gold-pale: rgba(184,148,58,0.25);/* borders, dividers */ --gold-wash: rgba(184,148,58,0.05);/* tinted backgrounds for cards */ /* Type */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'EB Garamond', Georgia, serif; } ``` **Google Fonts import (required in ``):** ```html ``` --- ## 2. Typography rules - **Display** (Playfair Display) → headlines, eyebrows, stat numbers, pullquotes, bylines, labels, CTAs, page numbers. Italic is used liberally and is a core brand signal. - **Body** (EB Garamond) → article paragraphs, longform prose, quotes, descriptions. - **No sans-serif.** Ever. WEF is serif-only. - **Italic gold emphasis** in titles is a brand signature: wrap the emphasized word in `` and color it `var(--gold)`. Example: `The Biohacker's Blueprint`. - **Letter-spacing** on eyebrows/labels/section markers: `0.18em`–`0.45em`, `text-transform: uppercase`, small size (9–11px). - **Drop caps** on the first paragraph of every article: 64px Playfair Display, gold, floated left. - **Line height:** body 1.65–1.85, display 0.95–1.35. - Body font sizes: article text 13–14px, pullquotes 22–26px, article titles 28–44px, cover masthead up to 96px. --- ## 3. Layout principles - **Page background** is always `--cream` (light) or `--ink-soft` (dark "inverted" pages — the `mag-dark` variant). - **Two-column article layout** (`column-count: 2; column-gap: 0.4in`) for longform prose. - **Generous margins:** 0.6–0.8in padding on print pages; roomy white space on web. - **Running heads** at the top of every magazine page: brand/section name left, date right, uppercase, 9px, gold, letter-spaced, underlined with a `--gold-pale` hairline. - **Page numbers** in gold Playfair at the bottom corner (alternating left/right). - **Rules & dividers** are always 1px `--gold-pale` — never black, never gray. - For web: reuse the same vocabulary but scale up type, relax column counts on narrow viewports. --- ## 4. Core component classes Every WEF HTML output should use these class names verbatim. They are defined in `templates/brand.css` and embedded in the magazine template. **Use `mag-*` for print/magazine-style layouts and `brand-*` for newsletter/email/web.** | Class | Purpose | |---|---| | `mag-page` | A letter-size page container with cream bg + cream padding. | | `mag-page mag-dark` | Inverted dark page — ink-soft bg, cream text, gold accents. | | `mag-running-head` | Top-of-page brand/date strip. | | `mag-page-number` + `.left`/`.right` | Corner page number. | | `mag-cover` | Full-bleed cover page. | | `mag-masthead` / `mag-masthead-article` | Italic serif title + small "The" above. | | `mag-article` | 2-column body with drop cap on first paragraph. | | `mag-article-eyebrow` | 10px gold uppercase kicker above title. | | `mag-article-title` | 44px Playfair title with italic gold ``. | | `mag-article-byline` | Italic byline with gold-pale bottom rule. | | `mag-pullquote` | Column-span quote block, 26px italic, gold top+bottom rules. | | `mag-pullquote-attr` | Attribution line inside pullquote. | | `mag-stat-row` + `mag-stat-pill` | Dark pill with gold number + cream label. For research stats. | | `mag-callout` | Gold-bordered, gold-washed call-out box (e.g. "The WEF Protocol"). | | `mag-callout-label` + `mag-callout-body` | Label + body inside callout. | | `mag-brief` | Numbered research brief row (gold italic number + title + PMID + body). | | `mag-toc-row` + `mag-toc-section` + `mag-toc-title` + `mag-toc-page` | Table of contents entry. | | `mag-service-row` + `mag-service-name` + `mag-service-desc` + `mag-service-access` | Services directory entry. | | `mag-tier` + `mag-tier-head` + `mag-tier-name` + `mag-tier-price` + `mag-tier-desc` | Membership/EWCP tier card. | | `mag-member-card` + `mag-member-name` + `mag-member-title` + `mag-member-quote` | Member spotlight card (gold wash, gold left border). | | `mag-cta-block` + `mag-cta-eyebrow` + `mag-cta-title` + `mag-cta-sub` | Center-aligned CTA with gold-pale top+bottom rules. | | `mag-hsa` | Small dark pill indicating HSA/FSA eligibility. | | `mag-closing` | Final-page flourish with large italic masthead. | For reusable CSS copy from the magazine's `