| name | notion-html-docs |
| description | Use when generating single-page HTML documents that look like Notion pages — academic deliverables, research briefs, ecosystem maps, competitive analyses, or any professional document needing Notion-style typography, callouts, tables, and CSS-only diagrams |
Notion HTML Document System
Overview
Generate self-contained, single-page HTML documents styled as Notion pages with CSS-only diagram components. No external dependencies. No JavaScript. No SVG coordinates. Print-ready via @media print.
Core principle: Content dictates layout. Diagrams use CSS Grid/Flexbox, never SVG coordinate placement. Typography and color follow Notion's native palette exactly.
When to Use
- Academic deliverables (SCAD Capstone, course assignments)
- Research briefs, updated briefs, ecosystem maps
- Competitive analysis documents
- Stakeholder agreements, partnership documents
- Any professional single-page HTML that needs Notion's clean aesthetic
- When the user asks for "Notion style" or references the 757/797 document format
Document Skeleton
Every document follows this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Document Title}</title>
<style>
</style>
</head>
<body>
<div class="notion-cover"></div>
<div class="notion-page">
<div class="notion-icon">{emoji}</div>
<div class="notion-title">{Title}</div>
<div class="notion-subtitle">{Subtitle — project name, context}</div>
<div class="notion-props">
<div class="notion-prop">
<span class="notion-prop__label">{Label}</span>
<span class="notion-prop__value">{Value or tags}</span>
</div>
</div>
<hr>
</div>
</body>
</html>
Design Tokens
Typography
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
"Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
font-family: "SFMono-Regular", Menlo, Consolas, monospace;
| Element | Size | Weight | Line-height |
|---|
.notion-title | 40px | 700 | 1.2 |
| h1 | 30px | 700 | 1.2 |
| h2 | 24px | 600 | 1.3 |
| h3 | 20px | 600 | 1.3 |
| Body text (p) | 16px | 400 | 1.7 |
| Table text | 14px | 400 | 1.5 |
| Labels/meta | 12px | 400 | — |
| Diagram labels | 10-13px | 600 | 1.3 |
| Uppercase labels | 10px | 700 | — |
Color Palette (Notion-native)
| Role | Background | Border/Text | CSS |
|---|
| Body text | — | rgb(55,53,47) | Default text |
| Secondary text | — | rgba(55,53,47,.5) | Subtitles, meta |
| Border | — | rgb(233,233,231) | Dividers, table borders |
| Background gray | rgb(247,246,243) | — | Table headers, neutral cards |
| Blue (core/brand) | rgb(231,243,248) | rgb(35,131,226) | Highlights, 30X brand |
| Green (positive) | rgb(219,237,219) | rgb(180,220,180) | Success, completed |
| Yellow (insight) | rgb(251,243,219) | rgb(253,236,200) | Callouts, customer |
| Red (risk/break) | rgb(255,226,221) | rgb(93,23,21) | Broken pipelines, risk |
| Purple (trust/L4) | rgb(232,222,238) | rgb(65,36,84) | Org trust, premium |
| Gray tag | rgb(227,226,224) | rgba(55,53,47,.6) | Neutral tags |
| Blue tag | rgb(211,229,239) | rgb(24,51,71) | Category tags |
Layout
.notion-page { max-width: 900px; margin: 0 auto; padding: 80px 96px 120px; }
@media (max-width: 768px) { .notion-page { padding: 40px 16px 80px; } }
Text Components
Callout
<div class="callout callout--yellow">
<div class="callout__icon">💡</div>
<div class="callout__body"><strong>Key insight.</strong> Supporting text.</div>
</div>
Variants: callout--yellow, callout--blue, callout--red, callout--gray
Table (Notion-style)
<table class="nt">
<thead><tr><th>Col A</th><th>Col B</th></tr></thead>
<tbody><tr><td>Data</td><td>Data</td></tr></tbody>
</table>
Multi-column Layout
<div class="cols">
<div>Column 1 content</div>
<div>Column 2 content</div>
</div>
Tags (inline)
<span class="tag tag--blue">Label</span>
<span class="tag tag--green">Done</span>
<span class="tag tag--red">Risk</span>
<span class="tag tag--purple">L4</span>
<span class="tag tag--yellow">Insight</span>
<span class="tag tag--gray">Neutral</span>
Quote
<div class="quote">
"Quoted text here"
<cite>— Source Name</cite>
</div>
Toggle (details/summary)
<details class="notion-toggle">
<summary>Click to expand</summary>
<div class="notion-toggle__content">Hidden content</div>
</details>
Diagram Components (CSS-only)
Rule: All diagrams use CSS Grid or Flexbox. Never SVG coordinates. Never absolute positioning for layout (only for dot overlays on quadrants).
Force Field (3×3 Grid)
Center = customer/subject. Four sides = forces acting on them. Corners empty.
<div class="force-field">
<div class="ff-cell ff-corner"></div>
<div class="ff-cell ff-top">
<div class="ff-label">PRESSURE FROM ABOVE</div>
<div class="ff-title">Title</div>
<div class="ff-sub">Description</div>
</div>
<div class="ff-cell ff-corner"></div>
<div class="ff-cell ff-left"></div>
<div class="ff-cell ff-center"></div>
<div class="ff-cell ff-right"></div>
<div class="ff-cell ff-corner"></div>
<div class="ff-cell ff-bottom"></div>
<div class="ff-cell ff-corner"></div>
</div>
Pipeline Flow
Linear process with steps, breaks (✕), and arrows (→).
<div class="pipeline">
<div class="pipe-step pipe-step--ok">
<div class="pipe-step__name">Step 1</div>
<div class="pipe-step__meta">Detail</div>
</div>
<div class="pipe-arrow">→</div>
<div class="pipe-step pipe-step--broken">
<div class="pipe-step__name">Broken Step</div>
</div>
<div class="pipe-break">✕</div>
<div class="pipe-step pipe-step--core">
<div class="pipe-step__name">Core Step</div>
</div>
</div>
Variants: pipe-step--ok (green), pipe-step--broken (red), pipe-step--core (blue border), pipe-step--neutral (gray)
Layer Stack
Vertical stack of layers, each with label + badge.
<div class="layer-stack">
<div class="layer layer--l3">
<div class="layer__main">
<div class="layer__label">LAYER 3</div>
<div class="layer__title">Title</div>
<div class="layer__desc">Description</div>
</div>
<div class="layer__badge">Badge text</div>
</div>
</div>
Quadrant Chart (2×2 Grid + Dots)
<div class="quad">
<div class="quad__bg" style="position:absolute;inset:0;display:grid;
grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr">
<div class="quad__cell quad__cell--highlight">
<span class="quad__cell-label">Top-Left</span>
</div>
<div class="quad__cell"><span class="quad__cell-label">Top-Right</span></div>
<div class="quad__cell"><span class="quad__cell-label">Bottom-Left</span></div>
<div class="quad__cell"><span class="quad__cell-label">Bottom-Right</span></div>
</div>
<div class="quad__ax" style="bottom:8px;right:12px">High X →</div>
<div class="quad__ax" style="top:8px;left:12px">↑ High Y</div>
<div class="quad__dot" style="left:78%;top:12%;background:rgb(231,243,248);
border-color:rgb(35,131,226)"></div>
<div class="quad__dot-tip" style="left:64%;top:6%;color:rgb(35,131,226)">
Label</div>
</div>
Beachhead Flow
Horizontal sequence of expansion nodes.
<div class="bh-flow">
<div class="bh-node bh-node--primary">
<div class="bh-node__label">BEACHHEAD</div>
<div class="bh-node__title">First Market</div>
<div class="bh-node__sub">Detail</div>
</div>
<div class="bh-arrow">→</div>
<div class="bh-node bh-node--secondary"></div>
<div class="bh-arrow">→</div>
<div class="bh-node bh-node--tertiary"></div>
</div>
Trust Timeline (4-phase)
<div class="trust-tl">
<div class="trust-tl__phase trust-tl__phase--l1">
<div class="trust-tl__layer">L1 SELF</div>
<div class="trust-tl__title">Title</div>
<div class="trust-tl__desc">Description</div>
<div class="trust-tl__feels">Metric</div>
</div>
</div>
Stat Row
<div class="stat-row">
<div class="stat-row__item">
<div class="stat-row__num">45%</div>
<div class="stat-row__label">Description</div>
<div class="stat-row__source">Source 2025</div>
</div>
</div>
Price Ladder
<div class="price-ladder">
<div class="price-ladder__rung price-ladder__rung--free">
<div class="price-ladder__name">Free Tier</div>
<div class="price-ladder__price">Free</div>
<div class="price-ladder__note">Limitations</div>
</div>
<div class="price-ladder__arrow">→</div>
<div class="price-ladder__rung price-ladder__rung--30x"></div>
<div class="price-ladder__arrow">→</div>
<div class="price-ladder__rung price-ladder__rung--high"></div>
</div>
Market Stat Blocks
<div class="market-stat">
<div class="market-stat__block">
<div class="market-stat__num market-stat__num--blue">$5.2B</div>
<div class="market-stat__label">Market description</div>
<div class="market-stat__sub">Source</div>
</div>
</div>
Color variants: --blue, --green, --red, --yellow
Logic Chain
<div class="logic-chain">
<div class="logic-step">
<div class="logic-step__num">1</div>
<div class="logic-step__body">
<div class="logic-step__claim">Claim statement</div>
<div class="logic-step__evidence">Supporting evidence</div>
</div>
</div>
<div class="logic-step logic-step--conclusion">
<div class="logic-step__num">∴</div>
<div class="logic-step__body">
<div class="logic-step__claim">Conclusion</div>
</div>
</div>
</div>
Tool Chaos Grid
<div class="tool-chaos">
<div class="tool-chaos__item"><strong>Tool Name</strong><br>
<span style="color:rgba(55,53,47,.4)">category</span></div>
<div class="tool-chaos__item tool-chaos__item--orphan">
<strong>Disconnected</strong></div>
</div>
Adoption Spectrum
<div class="spectrum">
<div class="spectrum__row">
<div class="spectrum__seg" style="width:75%;background:rgb(200,186,216)">75%</div>
<div class="spectrum__seg" style="width:17%;background:rgb(130,100,160)">17%</div>
<div class="spectrum__seg" style="width:8%;background:rgb(65,36,84)">6%</div>
</div>
<div class="spectrum__label">
<span><strong>75%</strong> broad definition</span>
<span><strong>6%</strong> fully embedded</span>
</div>
</div>
Marketing Funnel Grid
<div class="funnel">
<div class="funnel__row">
<div class="funnel__head">Column A</div>
<div class="funnel__head">Column B</div>
</div>
<div class="funnel__row">
<div class="funnel__stage"><span class="funnel__stage-icon">🎯</span>Stage</div>
<div class="funnel__cell funnel__cell--red">Broken</div>
<div class="funnel__cell funnel__cell--green">Fixed</div>
</div>
</div>
Comparison Bar Chart
<div class="comp-bar">
<div class="comp-row">
<div class="comp-row__name">Item</div>
<div class="comp-row__bar-wrap">
<div class="comp-row__bar" style="width:85%;background:rgb(35,131,226)"></div>
</div>
<div class="comp-row__val">85%</div>
</div>
</div>
Print Support
Every document must include print styles:
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
@media print {
.notion-page { padding: 32px 48px !important; max-width: 100%; }
.notion-cover, .notion-icon { display: none !important; }
.notion-title { font-size: 28px !important; margin-top: 0 !important; }
h1 { font-size: 22px !important; page-break-before: always; }
h1:first-of-type { page-break-before: avoid; }
h1, h2, h3 { page-break-after: avoid; }
table, .callout, .cols, .force-field, .pipeline, .layer-stack,
.quad, .bh-flow, .trust-tl, .funnel, .logic-chain, .tool-chaos,
.stat-row, .spectrum, .price-ladder, .market-stat, .quote
{ page-break-inside: avoid; }
}
Design Principles
- Content-First — content decides layout. One core message per section.
- Evidence is Visual — numbers are the star. Use
SFMono for data. Diagrams only when data can't be text.
- Earned Complexity — complex visuals only for complex content. Simple logic = simple typography.
- Notion Restraint — whitespace is a design element. Don't explain the obvious.
- Information Density ~90% — dense but not bloated. One concept appears once, never repeated across sections.
- Incremental — updated documents are deltas, not full rebuilds. Reference prior work, don't restate.
Anti-Patterns
| Don't | Do Instead |
|---|
| SVG with hardcoded coordinates | CSS Grid/Flexbox components |
| External CSS/JS dependencies | Self-contained <style> block |
| Bullet point walls (McKinsey deck) | Callouts, tables, diagrams |
| Repeating concepts across sections | State once, reference elsewhere |
| Student-report tone (over-explaining) | Confident, evidence-backed assertions |
| Decorative diagrams | Only diagrams that convey unreplaceable insight |
Quick Reference: Complete CSS
The full base CSS for all components is in notion-base.css in this directory. Copy it as-is into the <style> block, then add document-specific diagram styles as needed.
Reference Documents
Production examples in reference/ — read these when you need to match tone, density, or visual rhythm. All three use Notion style.
| File | Type | Key Features |
|---|
reference/EcoSystemMap.html | ★ Gold standard | Force field, pipeline, quadrant, price ladder, beachhead flow, trust timeline, spectrum, stat row, funnel, logic chain, tool chaos, market stat, comp bar — every diagram component in production. 1106 lines. |
reference/UpdatedBrief-v5.html | Research brief (delta) | .notion-table, .notion-callout, .notion-toggle, tags — text-heavy with tables as primary structure. Shows text-to-diagram ratio for academic briefs. 531 lines. |
reference/ProductDiscovery.html | Discovery brief | Uses notion-base.css verbatim + extends with hmw-item (How Might We list), action-list (numbered actions), seg-card (segment cards). Shows how to add custom components on top of the base system. 878 lines. |
How to Use References
- Starting a new document: Read
EcoSystemMap.html for full component vocabulary
- Extending the system: Read
ProductDiscovery.html for how to add new components that stay visually consistent
- Text-heavy briefs: Read
UpdatedBrief-v5.html for table/callout/toggle patterns
- Checking your work: Compare your output against the closest reference — same fonts, colors, spacing, component structure
Do NOT read all references for every document. Pick the one closest to your target format.
Extending with New Diagram Types
When you need a diagram component not listed above:
- Use CSS Grid or Flexbox — never SVG coordinates
- Follow the naming convention:
.component-name, .component-name__part, .component-name--variant
- Use only colors from the Notion palette above
- Add
page-break-inside: avoid in the print block
- Keep border-radius at 4-8px (Notion standard)
