The canonical visual reference for every Dynery document, interface, and publication. All 17 documents in the library conform to this specification. This document is the lock — nothing diverges from what is written here.
Every color used across every Dynery document is drawn from this palette. No hex values appear in document CSS directly — all colors reference a CSS variable. No additional colors are introduced without updating this style guide and the :root block in every document.
| Variable | Role | Typical usage |
|---|---|---|
| --ink | Primary text, dark backgrounds, hero sections | Body text, section headers, dark UI surfaces |
| --paper | Primary background — the page itself | body background, hero text on dark |
| --cream | Secondary surface — slightly warmer than paper | Table headers, TOC bar, callout backgrounds |
| --section-bg | Tertiary surface — lightest warm neutral | Table cell backgrounds, card fills, grid cells |
| --border | All dividers and outlines | 1px solid var(--border) on every border |
| --muted | Secondary text, labels, captions | DM Mono labels, intro paragraphs, footers |
| --teal | Primary brand accent — action, emphasis, headings | h2 headings, left-border callouts, section labels, links |
| --teal-light | Lighter teal — hero text accents, dark backgrounds | em tags in hero h1, vol labels on dark, code syntax |
| --gold | Secondary accent — warmth, warnings, quotes | Pull quotes, gold callouts, operator-tier labels |
| --gold-light | Lighter gold — hero metadata, dark surface accents | hmeta spans in hero, footer strong tags, summary labels |
| --rust | Tertiary accent — urgency, P0 priority, warnings | Rust callouts, P0 badges, mandatory labels |
The Dynery type system pairs an editorial serif (Playfair Display) for display and headings, a literary serif (Spectral) for body text, and a precise monospace (DM Mono) for labels, metadata, and code. Each has a single role and does not cross into another's territory.
| Size | Weight | Font | Role |
|---|---|---|---|
| clamp(26–50px) | 900 | Playfair Display | Hero h1 — document title |
| clamp(20–32px) | 700 | Playfair Display | Section h2 heading |
| 18–20px | 700 | Playfair Display | h3 subsection, feature name, card title |
| 16px | 400 | Spectral | Primary body text — line-height 1.78 |
| 14px | 400 | Spectral (italic) | Section intro paragraph — muted color |
| 13px | 400 | Spectral | Table body, callout text, secondary body |
| 16–18px (italic) | 400 | Spectral | Pull quotes — teal or gold color |
| 10px | 400 | DM Mono | Section kicker — letter-spacing .26em, uppercase |
| 10px | 400 | DM Mono | TOC links, table headers — letter-spacing .1em |
| 9px | 400–700 | DM Mono | Badges, status tags — uppercase, letter-spacing .1em |
This is the locked :root block. It goes at the top of the <style> tag in every Dynery HTML document. The variable names are locked. The hex values are locked. Nothing is added, removed, or renamed without updating this style guide and all 17 documents simultaneously.
:root { --ink: #1a1310; /* Primary text, dark surfaces */ --paper: #f5f0e8; /* Page background */ --cream: #ede8dc; /* Secondary surface — TOC, table headers */ --teal: #2a7c6f; /* Primary brand accent */ --teal-light: #3d9e8e; /* Teal on dark backgrounds */ --gold: #c9923a; /* Secondary accent */ --gold-light: #e8b96a; /* Gold on dark backgrounds */ --rust: #b84c2e; /* Urgency, mandatory, P0 */ --muted: #7a6e61; /* Secondary text, labels */ --border: #d4cfc3; /* All dividers and outlines */ --section-bg: #faf7f2; /* Tertiary surface — card fills */ }
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Mono:ital,wght@0,300;0,400;1,300&family=Spectral:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet">
::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 3px; }
| Deprecated | Correct replacement | Status |
|---|---|---|
| --tl | --teal-light | Removed from all documents |
| --gl | --gold-light | Removed from all documents |
| --bg | --section-bg | Removed from all documents |
/* Hero always: background ink, radial gradient overlay, sticky TOC below */ .hero { background: var(--ink); padding: 72px 56px 64px; position: relative; overflow: hidden; } .hero::before { background: radial-gradient(ellipse at 78% 20%, rgba(42,124,111,.25) 0%, transparent 55%), radial-gradient(ellipse at 8% 85%, rgba(201,146,58,.14) 0%, transparent 50%); } .hvol { font-family: 'DM Mono'; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); } .hero h1 { font-family: 'Playfair Display'; font-weight: 900; color: var(--paper); } .hero h1 em { color: var(--teal-light); font-style: italic; } .hero-sub { font-family: 'Spectral'; font-style: italic; color: rgba(245,240,232,.62); }
<!-- Every section: kicker → h2 → intro → content → rule --> <section id="section-name"> <div class="w"> <div class="kk">Section Kicker Label</div> <h2>Section Heading — <em>Italic Accent</em></h2> <p class="intro">Introduction paragraph — Spectral 14px muted.</p> <!-- Content --> </div> </section> /* Section CSS */ section { padding: 52px 0 44px; border-bottom: 1px solid var(--border); } .w { max-width: 1060px; margin: 0 auto; padding: 0 56px; } .kk { font-family: 'DM Mono'; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; } h2 { font-family: 'Playfair Display'; font-weight: 700; margin-bottom: 18px; } h2 em { font-style: italic; color: var(--teal); } .intro { font-size: 14px; color: var(--muted); max-width: 720px; line-height: 1.82; }
.toc { background: var(--cream); border-bottom: 1px solid var(--border); padding: 0 56px; display: flex; overflow-x: auto; position: sticky; top: 0; z-index: 100; } .toc a { font-family: 'DM Mono'; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 12px 12px; border-bottom: 2px solid transparent; white-space: nowrap; } .toc a:hover { color: var(--teal); border-color: var(--teal); }
.footer { background: var(--ink); color: rgba(245,240,232,.38); font-family: 'DM Mono'; font-size: 10px; letter-spacing: .1em; padding: 20px 56px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .footer strong { color: var(--teal-light); font-weight: 400; } <!-- Footer content pattern --> <div class="footer"> <span><strong>Document Title</strong> · April 2026 · Confidential · Dynery</span> <span>Wale Martins, CEO · Quyen Phan, COO · Brian Baldridge, Chief Loyalty & Growth Officer · Mark Hadland, Chief Experience Officer (Advisor)</span> </div>
| Rule | Requirement |
|---|---|
| :root variables | All 11 variables used verbatim. No hex values in CSS rules directly. No additional color variables without updating all documents. |
| Font loading | The exact Google Fonts URL in the <head> of every document. All three families (Playfair Display, DM Mono, Spectral) always loaded together — never individually. |
| Playfair Display | Display and headings only — h1, h2, h3, pull quotes, card titles, featured names. Never body copy. |
| Spectral | Body copy and intro text only — paragraphs, introductions, callout text. Never headings or labels. |
| DM Mono | Labels, kickers, metadata, badges, code, table headers, footer. Never headings or body copy. |
| Section kicker (.kk) | DM Mono, 10px, letter-spacing .26em, text-transform uppercase, color var(--teal). Every section begins with this before the h2. |
| Hero structure | Background var(--ink). Radial gradient overlay (teal at 78%/20%, gold at 8%/85%). .hvol in DM Mono gold-light. h1 in Playfair 900 weight white with em in teal-light. Hero-sub in Spectral italic muted. |
| TOC bar | Background var(--cream). Position sticky, top 0, z-index 100. Immediately after hero. DM Mono 10px links. Active/hover: color teal, border-bottom 2px solid teal. |
| Footer attribution | Must include: "Wale Martins, CEO · Quyen Phan, COO · Brian Baldridge, Chief Loyalty & Growth Officer · Mark Hadland, Chief Experience Officer (Advisor)" — exact order, exact punctuation. |
| Scrollbar | Width/height 5px. Track var(--cream). Thumb var(--teal), border-radius 3px. Present in every document. |
| Responsive | Mobile breakpoint at 768px: hero/toc/w padding-left/right 20px. Grid layouts collapse to 1 or 2 columns as appropriate. |
| Background pattern | body background is var(--paper). Hero background is var(--ink). Section background is var(--section-bg). Cream is for TOC, table headers, secondary surfaces only. |
As of April 2, 2026, all 17 numbered documents in the Dynery library have been audited and confirmed conformant to this style guide. The three deprecated variable names (--tl, --gl, --bg) have been removed from all documents and replaced with the canonical names.
| # | Document | Status |
|---|---|---|
| 1.0 | dynery_competitive_analysis | ✓ Conformant — reference document |
| 2.0 | dynery_vision_expansion_vol2 | ✓ Conformant |
| 3.0 | dynery_expansion_vol3 | ✓ Conformant |
| 4.0 | dynery_story_exit_intelligence | ✓ Conformant |
| 5.0 | restaurant_tech_landscape | ✓ Conformant |
| 6.0 | beli_vs_dynery_comparison | ✓ Conformant |
| 7.0 | dynery_competitive_matrix | ✓ Conformant |
| 8.0 | dynery_legends_partner_report | ✓ Conformant |
| 9.0 | dynery_mews_partner_report | ✓ Conformant |
| 10.0 | dynery_complete_vision_and_roadmap | ✓ Conformant |
| 11.0 | dynery_founder_lens_analysis | ✓ Conformant — updated April 2, 2026 |
| 12.0 | dynery_fee_model_and_roi | ✓ Conformant — updated April 2, 2026 |
| 13.0 | dynery_vignette_distribution_portfolio | ✓ Conformant — updated April 2, 2026 |
| 14.0 | dynery_competitive_analysis_fee_elgaucho | ✓ Conformant — updated April 2, 2026 |
| 15.0 | dynery_product_roadmap_1louder | ✓ Conformant — updated April 2, 2026 |
| 16.0 | dynery_capability_cost_model | ✓ Conformant — updated April 2, 2026 |
| 17.0 | dynery_brand_language_reference | ✓ Conformant — updated April 2, 2026 |