Mobayilo
Foundations & components

The Mobayilo design system.

One set of tokens and components for every Mobayilo product — Academy, Bento, Network, Umuzika, and the rest. Ten themes, plain CSS, zero drift between projects.

Browse componentsJump to tokens
01

Color

Active theme: mobayilo · switch with the picker in the header, or press "/"
background#0F172A
panel#1E293B
panel-soft#162032
line#253346
line-strong#22C55E
foreground#F1F5F9
muted#94A3B8
muted-soft#64748B
accent#22C55E
accent-strong#4ADE80
chip-background#1E293B
chip-foreground#4ADE80

All 11 themes — click to switch, hover to preview

02

Typography

Cormorant Garamond for headings, Inconsolata for everything else
displayThe Mobayilo design system
h1Consistent building blocks
h2Built once, reused everywhere
h3Same auth, same theming, every project
body-lgTen themes, one component library, zero drift.
bodyImport the stylesheet, wrap your app in ThemeProvider, and go.
captionSHARED ACROSS ACADEMY, BENTO, NETWORK & UMUZIKA
05

Components

Built from the tokens above