Best Practices

Do's

• ✅ Use CSS custom properties for all colors and spacing
• ✅ Follow the grid layout system for consistent spacing
• ✅ Use semantic HTML elements
• ✅ Maintain heading hierarchy (one H1 per page)
• ✅ Use monospace font for technical/metadata content

Don't's

• ❌ Don't use arbitrary color values—use design tokens
• ❌ Don't skip heading levels (H1 → H3)
• ❌ Don't use multiple H1s on a single page
• ❌ Don't override font families without good reason
• ❌ Don't create layouts outside the grid system