Initial commit: 79+ design patterns, LLM prompts, and assets

concepts/typography-scale.md

@@ -0,0 +1,49 @@
+---
+title: Typography Scale & System
+description: Building a consistent typographic scale for web interfaces.
+tags: [typography, scale, system, fonts, sizing]
+---
+
+# Typography Scale & System
+
+## Type Scale (1.25 ratio)
+
+| Name | Size | Weight | Line-height | Use |
+|------|------|--------|-------------|-----|
+| xs | 12px | 400 | 1.5 | Captions, labels |
+| sm | 14px | 400 | 1.5 | Small text, form labels |
+| base | 16px | 400 | 1.6 | Body text |
+| lg | 18px | 400 | 1.6 | Subtitles, lead text |
+| xl | 20px | 600 | 1.4 | Small headings |
+| 2xl | 24px | 600 | 1.3 | Section headings |
+| 3xl | 30px | 700 | 1.2 | Page titles |
+| 4xl | 36px | 700 | 1.2 | Hero titles |
+| 5xl | 48px | 800 | 1.1 | Display titles |
+| 6xl | 64px | 800 | 1.1 | Hero display |
+
+## CSS Implementation
+
+```css
+:root {
+  --font-sans: 'Inter', -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  --font-scale: 1.25;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+}
+```
+
+## Font Pairing Rules
+
+1. **Contrast is key** — Sans-serif + Sans-serif (different weights)
+2. **Max 2 fonts** — One display, one body
+3. **Prefer system fonts** — Faster rendering, native feel
+4. **Test at actual sizes** — Not just in design tools
+
+## Anti-Patterns
+- Never use more than 2 type families
+- Never set line-height below 1.4 for body text
+- Never use font size below 14px
+- Never ignore `font-display: swap`