A flat, high-contrast developer brand on a paper-white canvas and charcoal bands, where a hot orange-to-amber CTA and a confetti of pink, green and blue accents bring play to an engineering-precise system.
Three families, three jobs: Rotonto (shown as Fredoka) for rounded display, Aeonik (shown as Inter) for body, and JetBrains Mono for terminal-style eyebrow labels.
Flat cards bounded by a 1px hairline and rounded at 14–28px — no drop shadows anywhere in the system.
A 7px-derived doubling rhythm — 7 / 14 / 28 / 56 / 112px — that mirrors the radius tiers and gives layouts their blocky, modular feel.
Confidently round, from a barely-there 2px up to a 112px button pill and a full 9999px on chips and icon controls.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Grids collapse to a single column; display headline steps down to ~42px. |
| Tablet | 768–1023px | Four-up card grids become two-up; pricing and auth stack. |
| Laptop | 1024–1279px | Full four-column grids return; centred 1200px column with gutters. |
| Desktop | ≥ 1280px | Maximum width holds; charcoal/white banding stays the organising structure. |
Note: The charcoal-and-white horizontal banding is the constant at every breakpoint — content reflows inside the bands rather than the band structure changing.
Sample tiers rendered in the Mux system — note the gradient CTA reserved for the featured (dark) plan.
Asset list pattern — mono column headers, hairline row separators, pill status chips.
| ID | Asset | Duration | Status | When |
|---|---|---|---|---|
| ax9f…21c | keynote-final.mp4 | 42:18 | Ready | 2m ago |
| bd72…8e0 | product-demo.mov | 06:55 | Ready | 1h ago |
| c1a4…f93 | webinar-stream.ts | 1:12:40 | Encoding | 3h ago |
| d8e0…44b | onboarding-clip.mp4 | 02:09 | Ready | yesterday |
| e5c9…07a | livestream-vod.mp4 | 58:31 | Encoding | yesterday |
Sign-in and account creation rendered in the Mux system — flat hairline cards, mono labels, gradient primary action.