| name | html-doc-style |
| description | House style for generated HTML documents. Use whenever the user asks to generate, write, or update an HTML document (guides, architecture docs, requests, reports, walkthroughs). Applies the warm-paper palette and panel/callout/TOC structure from the Loop architecture doc, in a compact form with ui-sans-serif as the default font. |
HTML document house style
When the user asks for an HTML document, produce a single self-contained file
(inline <style>, no CDN, no external assets) using the palette and building
blocks below. This is the compact variant of _apps/MobileCRM/_documentation/architecture.html.
Rules
- Self-contained — one
.html file, all CSS inline in <head>. Never reference CDNs.
- Font —
ui-sans-serif first: font: 14px/1.55 ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
- Compact — tighter spacing than the original (values below are already compacted; don't inflate them).
- Structure — hero header → TOC (for 6+ sections) → numbered
h2 sections → footer. Use panels/grids for parallel content, callouts for warnings/principles, tables for enumerable facts.
- Tone — professional, plain English unless the user asks for a technical register.
- Page title pattern:
<Project> — <Doc title>; eyebrow line above the h1 for org/project context.
CSS template (copy, then trim unused blocks)
:root {
--bg: #fafaf7; --panel: #ffffff; --ink: #1a1a1a; --muted: #6b6b6b;
--rule: #e5e3dd; --accent: #2d5f8b; --accent-soft: #eaf1f7;
--ok: #2f7a3a; --warn: #b25e1f; --code-bg: #f4f2ec;
--shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink);
font: 14px/1.55 ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
padding: 32px 20px 64px; }
.page { max-width: 960px; margin: 0 auto; }
header.hero { margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
header.hero .eyebrow { text-transform: uppercase; letter-spacing: 1.4px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
header.hero h1 { margin: 4px 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
header.hero .sub { color: var(--muted); max-width: 720px; font-size: 14.5px; }
header.hero .meta { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
header.hero .meta span + span::before { content: " · "; }
h2 { font-size: 19px; margin: 36px 0 10px; letter-spacing: -0.3px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); }
h3 { font-size: 14.5px; margin: 18px 0 6px; }
p, ul, ol { margin: 0 0 10px; }
ul, ol { padding-left: 20px; }
li { margin-bottom: 3px; }
code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px;
font: 12px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px;
padding: 14px 18px; box-shadow: var(--shadow); margin: 10px 0; }
.panel h3 { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.callout { border-left: 3px solid var(--accent); background: var(--accent-soft);
padding: 10px 14px; border-radius: 4px; margin: 12px 0; font-size: 13.5px; }
.callout.warn { border-left-color: var(--warn); background: #fcefe1; }
.callout.ok { border-left-color: var(--ok); background: #e9f3ea; }
.toc { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px;
padding: 12px 18px; margin-bottom: 24px; font-size: 13px; }
.toc h3 { margin: 0 0 5px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
.toc ol { columns: 2; column-gap: 28px; margin: 0; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--accent); }
table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); }
td code { font-size: 11.5px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600; }
.tag.ok { background: #e6f1e6; color: var(--ok); }
.tag.warn { background: #fcefe1; color: var(--warn); }
.tag.info { background: var(--accent-soft); color: var(--accent); }
.step { display: flex; gap: 12px; margin: 10px 0; }
.step .n { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--accent);
color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.step .b { flex: 1; }
blockquote { margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--rule); color: var(--muted); font-style: italic; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }
Skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project — Doc Title</title>
<style></style>
</head>
<body>
<div class="page">
<header class="hero">
<div class="eyebrow">Org · Project</div>
<h1>Doc Title</h1>
<p class="sub">One-paragraph summary of what this document covers and for whom.</p>
<div class="meta"><span>Version 1.0</span><span>Audience: …</span><span>Last updated YYYY-MM-DD</span></div>
</header>
<nav class="toc"><h3>Contents</h3><ol>
<li><a href="#s1">Section one</a></li>
</ol></nav>
<h2 id="s1">1. Section one</h2>
<p>…</p>
<hr/>
<p style="font-size:11px;color:var(--muted);text-align:center;">© YYYY · internal documentation</p>
</div>
</body>
</html>
When to use which block
| Content | Block |
|---|
| Warning / risk / pending decision | .callout.warn |
| Design principle / key insight | .callout |
| Confirmed / safe / success | .callout.ok |
| 2–3 parallel concepts | .grid-2 / .grid-3 of .panel |
| Enumerable facts, configs, statuses | table (+ .tag for status pills) |
| Sequential instructions | .step rows |
| Status chips inside tables | .tag.ok / .tag.warn / .tag.info |
