A comprehensive guide to the design system, including typography, components, form elements, and patterns used throughout the site.
| Title | Status | Date | Views |
|---|---|---|---|
| Building AI-Powered Business Tools | Mar 15, 2026 | 2,847 | |
| The Case for Variable Fonts | Mar 8, 2026 | 1,923 | |
| Design Systems That Scale | Mar 1, 2026 | — | |
| Typography on the Modern Web | Feb 22, 2026 | 3,102 | |
| From Figma to Code | Feb 15, 2026 | 1,456 |
For rows with mixed-size content, stack the display element above its metadata. Uses the same border and hover treatment as the table.
| Token | Value | Pixels | Grid |
|---|---|---|---|
| --text-xs | 0.75rem | 12px | 2×8 |
| --text-sm | 0.875rem | 14px | 3×8 |
| --text-base | 1rem | 16px | 4×8 |
| --text-lg | 1.125rem | 18px | 3×8 |
| --text-xl | 1.25rem | 20px | 4×8 |
| --text-2xl | 1.5rem | 24px | 4×8 |
| --text-3xl | 1.75rem | 28px | 5×8 |
| Product | Price | Sales | Revenue |
|---|---|---|---|
| Super Life | $29 | 847 | $24,563 |
| Super Work | $29 | 623 | $18,067 |
| Super Budget | $19 | 1,204 | $22,876 |
| Super Goals | $19 | 956 | $18,164 |
The second row has data-state="selected" applied, showing the subtle accent highlight.