Creating documents with Notion's design
This skill governs only how the document looks. The outline, sections,
and flow are decided by the content and the request — no particular document
format (proposal, etc.) is imposed. Instead, every document is rendered with
the blocks and design language Notion provides.
1. Header area (required)
- Page icon: one emoji matching the document's topic, large, above the title (Notion page icon)
- Title: a short noun phrase
- Meta line: date · author · 1–2 tag pills
- A thin divider below the meta line
2. Notion block dictionary — pick the block that fits the content
| Content |
Block |
| Key takeaway, the one line to emphasize |
Callout (blue 💡) |
| Reference, supplementary info |
Callout (gray) |
| Done, success, what went well |
Callout (green ✅) |
| Caution, constraints |
Callout (yellow ⚠️) |
| Warning, incident, risk |
Callout (red 🚨) |
| Opening of a long document (4+ h2s) |
Table of contents (toc) |
| Parent document, location context |
breadcrumb |
| Comparable, listable facts |
simple table |
| Two chunks that belong side by side |
2-column layout |
| Long details or logs that break the flow |
<details> toggle |
| Tasks, progress |
checkbox list (done items get strikethrough) |
| Code |
code block + class="language-<lang>" syntax highlighting (required) |
| One striking sentence |
quote (bold left bar) |
| Introducing an external link |
bookmark card |
| A single call-to-action link |
button block (btn) |
| Word-level emphasis |
bold, inline code, Notion text colors (t-blue etc., 5 colors) |
Never use blocks as decoration — only when they match a purpose in this table.
3. Visual style
HTML documents MUST start from the template.html skeleton in this skill's
directory. Do not write new CSS; use the template's classes as they are. The
template's palette and dimensions are Notion's actual design-token values
(see the comment next to each value). Core rules:
- 720px content width, centered, generous whitespace — measured values as-is
- Text color
#2C2C2B, 16px/1.5, white background, minimal decoration. No shadows, gradients, or heavy background colors
- Rounded corners use only the
--radius (10px) token — shared by callouts, bookmarks, and code blocks
- Colors come only from the template's tokens (5 callout colors, 5 text colors,
--tok-* code tokens) — no new colors
- Light/dark palettes are built in as CSS tokens and follow the viewer's theme automatically
- Code highlighting is handled by the Prism scripts at the bottom of the template — just add the
language-* class
- Korean line breaking (
word-break: keep-all) and print/PDF rules
(@media print) are already in the template — do not add your own. The dark
palette is wrapped in @media screen, so printing automatically falls back
to light
For Markdown documents, apply the same sensibility: emoji + title (h1), a meta
line, callouts as > emoji **Title** — body quotes, tasks as - [ ]
checklists, code in language-tagged fences.
4. Verify after writing
After writing an HTML document, check it with lint.py from this skill's directory.
python3 <skill directory>/lint.py doc.html
css-drift — you modified the template's <style>. Restore it and change only the bodyunknown-class — you invented a class. Pick one from the block dictionary in section 2inline-style · raw-color — you styled or colored the body directly. Use template classes instead
5. Interaction with other skills
- When publishing as an Artifact, also load
artifact-design as required, but
this skill's style tokens take precedence (take only the technical
requirements — responsiveness, dark mode — from artifact-design)
- If charts are included, follow the
dataviz skill's color and mark rules, but keep the layout inside this template
1---2name: notion-doc3description: Notion design skill that MUST be used whenever creating documents. When the user asks for a document, report, summary, meeting notes, or review write-up in HTML/Markdown, load this skill first. The content decides the document's structure and outline; this skill only governs the Notion blocks (callouts, toggles, tables, checklists, code, columns, etc.) and visual style.4---56# Creating documents with Notion's design78**This skill governs only how the document *looks*.** The outline, sections,9and flow are decided by the content and the request — no particular document10format (proposal, etc.) is imposed. Instead, every document is rendered with11the blocks and design language Notion provides.1213## 1. Header area (required)14151. **Page icon**: one emoji matching the document's topic, large, above the title (Notion page icon)162. **Title**: a short noun phrase173. **Meta line**: date · author · 1–2 tag pills184. A thin divider below the meta line1920## 2. Notion block dictionary — pick the block that fits the content2122| Content | Block |23|---|---|24| Key takeaway, the one line to emphasize | Callout (blue 💡) |25| Reference, supplementary info | Callout (gray) |26| Done, success, what went well | Callout (green ✅) |27| Caution, constraints | Callout (yellow ⚠️) |28| Warning, incident, risk | Callout (red 🚨) |29| Opening of a long document (4+ h2s) | Table of contents (`toc`) |30| Parent document, location context | breadcrumb |31| Comparable, listable facts | simple table |32| Two chunks that belong side by side | 2-column layout |33| Long details or logs that break the flow | `<details>` toggle |34| Tasks, progress | checkbox list (done items get strikethrough) |35| Code | code block + `class="language-<lang>"` syntax highlighting (required) |36| One striking sentence | quote (bold left bar) |37| Introducing an external link | bookmark card |38| A single call-to-action link | button block (`btn`) |39| Word-level emphasis | **bold**, inline code, Notion text colors (`t-blue` etc., 5 colors) |4041Never use blocks as decoration — only when they match a purpose in this table.4243## 3. Visual style4445**HTML documents MUST start from the `template.html` skeleton in this skill's46directory.** Do not write new CSS; use the template's classes as they are. The47template's palette and dimensions are Notion's actual design-token values48(see the comment next to each value). Core rules:4950- 720px content width, centered, generous whitespace — measured values as-is51- Text color `#2C2C2B`, 16px/1.5, white background, minimal decoration. No shadows, gradients, or heavy background colors52- Rounded corners use only the `--radius` (10px) token — shared by callouts, bookmarks, and code blocks53- Colors come only from the template's tokens (5 callout colors, 5 text colors, `--tok-*` code tokens) — no new colors54- Light/dark palettes are built in as CSS tokens and follow the viewer's theme automatically55- Code highlighting is handled by the Prism scripts at the bottom of the template — just add the `language-*` class56- Korean line breaking (`word-break: keep-all`) and print/PDF rules57 (`@media print`) are already in the template — do not add your own. The dark58 palette is wrapped in `@media screen`, so printing automatically falls back59 to light6061For Markdown documents, apply the same sensibility: emoji + title (h1), a meta62line, callouts as `> emoji **Title** — body` quotes, tasks as `- [ ]`63checklists, code in language-tagged fences.6465## 4. Verify after writing6667After writing an HTML document, check it with `lint.py` from this skill's directory.6869```bash70python3 <skill directory>/lint.py doc.html71```7273- `css-drift` — you modified the template's `<style>`. Restore it and change only the body74- `unknown-class` — you invented a class. Pick one from the block dictionary in section 275- `inline-style` · `raw-color` — you styled or colored the body directly. Use template classes instead7677## 5. Interaction with other skills7879- When publishing as an Artifact, also load `artifact-design` as required, but80 **this skill's style tokens take precedence** (take only the technical81 requirements — responsiveness, dark mode — from artifact-design)82- If charts are included, follow the `dataviz` skill's color and mark rules, but keep the layout inside this template
heyman333