A dark, code-forward identity where one electric sky-cyan carries a restrained gray palette under enormous, feather-light Inter set with aggressively tight tracking.
Inter does all of it. Hierarchy is built from size and negative tracking, not weight — the bigger the type, the tighter the letter-spacing.
Raised gray-800 cards lift off the black canvas with a 1px inset white highlight instead of a drop shadow; floating demo cards earn a deep, soft shadow.
Built on Tailwind's own 4px base unit, stepping 4 / 8 / 12 / 16 / 24 / 32 / 48.
Two personalities: fully-rounded pills for interactive chrome, calm 8–16px corners for containers and media.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Hero display drops to ~48px; grids collapse to one column; nav hides behind a menu. |
| Tablet | 768–1023px | Demo grids become two columns; all pill chrome stays unchanged. |
| Laptop | 1024–1279px | Four-column demo grids return; 40px gutters restored. |
| Desktop | ≥ 1280px | Centered ~1200px column; the hero headline runs at full size. |
The hero type is the load-bearing element — it scales hardest while the body and lede hold steady. Dark canvas, white type, one cyan, and confident negative space stay constant at every breakpoint.
Demonstration of the pricing pattern in the brand's dark, pill-forward style — sample content.
Dense, quiet table styling on a gray-900 header band — sample content.
| ID | Component | Category | Status | Updated |
|---|---|---|---|---|
| #4821 | Hero sections | Marketing | Stable | 2d ago |
| #4820 | Pricing tables | Marketing | Stable | 4d ago |
| #4819 | Command palette | Application | Beta | 1w ago |
| #4818 | Data grids | Application | Beta | 1w ago |
| #4817 | Auth forms | Application | Stable | 2w ago |
Account screens in the dark, pill-forward style — sample content.