The complete visual and structural standard for all Dynery internal documents. Every doc should feel like it belongs to the same system.
Every internal document — sprint briefs, strategy docs, creator framework materials, loyalty architecture, investment memos — must use this system. Consistency across documents is not aesthetic preference; it signals that the team operates with the same discipline it asks of restaurant partners and creators.
Dynery uses a fixed three-font stack. No other fonts are permitted in internal documents.
| Element | Font | Size / weight / color |
|---|---|---|
| Hero h1 | Playfair Display | clamp(28px, 4.4vw, 54px) · 900 · #ffffff |
| Hero h1 accent | Playfair Display italic | Same size · 700i · #3d9e8e (teal-light) |
| Hero subtitle | Playfair Display italic | 17px · 400i · rgba(245,240,232,.66) |
| Section h2 | Playfair Display | clamp(22px, 2.6vw, 34px) · 700 · #1a1310 |
| Section h2 em | Playfair Display italic | Same · 700i · #2a7c6f (teal) |
| Card / subsection h3 | Playfair Display | 20px · 700 · #1a1310 |
| Body paragraph | Libre Franklin | 16–17px · 400 · #1a1310 · lh 1.7 |
| Intro / lead text | Libre Franklin | 15px · 400 · #6b6259 · lh 1.82 |
| Callout text | Libre Franklin | 15px · 400 · #1a1310 |
| Section eyebrow (.kk) | DM Mono | 10px · 400 · .26em spacing · uppercase · teal/gold/rust |
| Hero breadcrumb | DM Mono | 10px · 400 · .26em spacing · #e8b96a |
| Hero metadata | DM Mono | 10px · 400 · .14em spacing · rgba(232,185,106,.7) |
| Badges / pills | DM Mono | 9px · 400 · .1em spacing · uppercase |
| Footer | DM Mono | 10px · 400 · .1em spacing · rgba(245,240,232,.42) |
https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700&family=Libre+Franklin:wght@300;400;500;600;700&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap
Six semantic colors plus a neutral stack. Never introduce colors outside this palette in internal documents.
Every internal document opens with this hero. It is the single most important consistency signal in the system. Do not use any other header treatment.
| Property | Value | Notes |
|---|---|---|
| Background | #1a1310 (--ink) | Solid dark base, not gradient |
| Overlay | Dual radial gradient | Teal at 78% 20% (28% opacity) + Gold at 8% 85% (16% opacity) |
| Padding | 84px 56px 72px | Generous — the hero must breathe |
| Breadcrumb (.hvol) | DM Mono, 10px, .26em, gold-light | FORMAT: "Dynery · [Pillar] · [Doc type] · [Date]" |
| h1 | Playfair Display, 900, white | At least one word must be italic in teal-light (#3d9e8e) |
| Subtitle (.hero-sub) | Playfair Display italic, 17px, 66% white | One sentence. Operational description only. |
| Metadata (.hero-meta) | DM Mono, 10px, gold-light 70% | Issued · Owner · Relates to |
Every hero h1 must have at least one word or phrase wrapped in <em> to render in teal-light italic. This is the single visual signature that makes Dynery documents immediately recognizable. Examples: "Market Readiness", "Believes", "coordination, discovery, and transaction".
All callout blocks use the same structural pattern — a left border strip with a colored background tint. Three semantic variants. Nothing else.
Use for: key insights, strategic conclusions, investor-facing narrative, positive forward statements. Border: #2a7c6f · Background: rgba(42,124,111,.06)
Use for: important caveats, sequencing notes, strategic priorities, CEO direction. Border: #c9923a · Background: rgba(201,146,58,.07)
Use for: risks, warnings, downgrade paths, open blockers, unresolved decisions. Border: #b84c2e · Background: rgba(184,76,46,.06)
.cal-t { background: rgba(42,124,111,.06); border: 1px solid rgba(42,124,111,.22); border-left: 3px solid #2a7c6f; padding: 16px 20px; }
.cal-g { background: rgba(201,146,58,.07); border: 1px solid rgba(201,146,58,.25); border-left: 3px solid #c9923a; padding: 16px 20px; }
.cal-r { background: rgba(184,76,46,.06); border: 1px solid rgba(184,76,46,.22); border-left: 3px solid #b84c2e; padding: 16px 20px; }
.cal-label { font-family: 'DM Mono'; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 7px; }
These are the building blocks available to every internal document. Use them as specified — do not modify color, font, or structural logic.
Open list with teal dot markers and hairline row dividers. No container box. No background color.
DM Mono, 9px, uppercase. Four semantic variants. Border-style only — no filled backgrounds.
Reserved for sprint themes and primary CEO directives only. Do not use for general content.
Stability fixes that do not support this deadline are deprioritized. Investor proof comes from live transactions — not a polished dashboard alone.
DM Mono, 10px, .26em letter-spacing, uppercase. Always placed directly above h2. Three color variants: TEAL (default) · GOLD (narrative) · RUST (risk)
| Type | Location | Naming pattern |
|---|---|---|
| Doctrine | Strategy & Ideation | dynery-[topic]-doctrine.html · Doc 32+ |
| Operational Summary | Strategy & Ideation | dynery-[topic]-ops.html · Doc 30+ |
| Principles | Strategy & Ideation | dynery-[topic]-principles.html · Doc 31+ |
| Sprint Brief | Strategy & Ideation | dynery-sprint-brief.html |
| Strategy | Pillar → Strategy | dynery-[topic]-strategy.html |
| Style Guide | Strategy & Ideation | dynery-style-guide.html · This document |
Copy this skeleton for every new internal document. Replace placeholder text. Do not change structural CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynery — [Document Title]</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,
wght@0,700;0,900;1,400;1,700&family=Libre+Franklin:wght@300;400;500;600;700
&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
<style>
/* [paste full shared CSS here — see any existing doc] */
</style>
</head>
<body>
<div class="bc-bar">
<a class="bc-back" href="/">← Back to Index</a>
<span class="bc-sep">/</span>
<span class="bc-crumb">[Pillar]</span>
<span class="bc-sep">/</span>
<span class="bc-crumb active">[Document Title]</span>
</div>
<div class="hero">
<div class="hvol">Dynery · [Pillar] · [Doc Type] · [Month Year]</div>
<h1>[Title with <em>italic accent</em>]</h1>
<p class="hero-sub">[One sentence operational description.]</p>
<div class="hero-meta">
<span>Issued [Date]</span>
<span>Owner <strong>[Name, Title]</strong></span>
</div>
</div>
<nav class="toc">
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
</nav>
<section id="section1">
<div class="w">
<div class="kk">Section label</div>
<h2>Heading with <em>accent</em></h2>
<p class="intro">Lead paragraph...</p>
</div>
</section>
<div class="doc-footer">
<span>Dynery Internal · [Pillar] · [Document Title]</span>
<span>[Month Year]</span>
</div>
</body>
</html>