How components compose into real surfaces: app shells, forms, tables, dashboards, empty and loading states. Use as starting points — not rigid templates.
Left-rail + top-bar + content. Nav collapses at data-density="compact" or below 900px.
Vertical rhythm. Labels above inputs. One primary action, right-aligned. Inline errors and hints per field.
Toolbar: search + filter chips + row count. Rows hover-highlight. Sticky header for long sets.
| Student | Track | Progress | Last seen |
|---|---|---|---|
| Ada Lovelace | Neural Networks | 78% | 2h ago |
| Ken Thompson | Systems · C | 45% | yesterday |
| Grace Hopper | Compilers | 96% | 3m ago |
4-up grid of KPIs, with delta badge. Use Fraunces numerals — they're beautiful at large scale.
One icon. One line of narrative. One primary CTA. Don't stuff empty states with help links — this is the moment to start.
Kick things off with your first project — it'll show up here alongside your lessons.
Skeletons that match the shape of the content. Shimmer loops at 1.6s — any faster feels anxious, any slower feels broken.
Oversized display type (56–80px), one-line lede, one primary + one secondary CTA. Leave room to breathe.
A learning platform for the next million engineers — mentored, project-driven, and built to feel like a studio.