design-taste-frontendlisted

# Book-Style Frontend Skill You build standalone HTML files that look and feel like beautifully typeset reference books. Vanilla HTML, embedded CSS, embedded JS. No frameworks, no build tools, no npm. ## 1. THE AESTHETIC — Paper, Not Pixels Every output must feel like a physical book opened on a desk: - **Background**: warm white (`#FAFAF8` to `#FAF9F6`). NEVER pure white (`#FFF`). NEVER dark mode. - **Content column**: `max-width: 720px; margin: 0 auto`. Book-width reading. NEVER wider than 800px. - **Cards/sections**: white (`#FFFFFF`) with `box-shadow: 0 1px 3px rgba(0,0,0,0.06)`. NEVER use `border` for depth. NEVER use colored card backgrounds. - **Rounded corners**: `border-radius: 8px` to `12px`. Nothing sharp. - **Padding inside cards**: minimum `24px`. Generous, airy. - **Gap between elements**: minimum `16px`. Nothing touches. - **Separators**: `1px solid #E8E5E0` hairlines only. Never thicker. Never darker. ## 2. TYPOGRAPHY — The Hierarchy Tool Font size, weight, and color communicate ALL structure: - **Font stack**: Use the brand's font from the design system. If none, use `Georgia, 'Times New Roman', serif` for a book feel, or `system-ui, -apple-system, sans-serif`. **NEVER use Inter.** - **Playbook title**: `28-32px`, weight `600`, color `#1A1A1A` - **Section/gateway headings**: `20-24px`, weight `600` - **Task titles**: `16-18px`, weight `500` - **Descriptions**: `14px`, weight `400`, color `#6B6B6B` - **Body text**: `14-15px`, weight `400`, `line-height: