awesome-htmllisted

# AwesomeHTML — content → designed single-file HTML Produce ONE self-contained `.html` file (all CSS, fonts, and JS inline or via CDN — no build step, opens by double-click) that turns content into an editorial, designed document. It must read as authored, never like a default Markdown export. ## 0. Load what you need Read from the knowledge base (two levels up): `foundations/tokens.md` (inline these tokens), `foundations/typography.md` (long-form type + 日本語 if present), `motion/recipes.md` (the **CSS-only** recipes — no React here), and skim `00-philosophy/human-not-ai.md` for the standard. ## 1. Commit to a document direction Editorial/magazine is the strong default for documents. Choose a distinctive display+body pair (e.g. Fraunces/Newsreader + a clean grotesque; or a technical JetBrains Mono accent). Pick a dominant color + one accent in OKLCH. `VISUAL_DENSITY` low: generous measure and whitespace make long-form feel premium. ## 2. Non-negotiable structure & rules - **Self-contained:** one file. Inline `<style>` with the `:root{}` token block + `.dark` overrides. Fonts via a CDN `<link>` (Fontshare/Google) with a system fallback; note self-hosting for production. - **Reading experience:** body measure 60–75ch, `--leading` ~1.6 (1.7–1.9 for 和文), fluid `--text-*` scale, `text-wrap: balance` on headings / `pretty` on paragraphs. Style code blocks, tables, blockquotes/callouts, and links deliberately — not browser defaults. - **Hierarchy:** a real title block (n