Mobayilo

@mobayilo — themes · ui · auth-magic-link

One system, eleven inks.

Tokens and components shared across Academy, Bento, Network, and Umuzika. Plain CSS, zero drift. Every color on this page is a live token — including the ink poured below.

Press / to re-ink the page with the next theme.

background#0B1220
panel-soft#131C2E
panel#1A2438
accent-washrgba(34, 197, 94, 0.16)
accent#22C55E
accent-strong#4ADE80
foreground#F8FAFC
@mobayilo/themes

Color is poured, not chipped.

Active theme: mobayilo — each token at the scale it plays on a real page.
background — page ground#0B1220
panel — raised surface#1A2438
panel-soft — recessed surface#131C2E
line#2C3B55 — the token that owns every hairline
foreground — ink#F8FAFC
muted — secondary ink#94A3B8
muted-soft — tertiary ink#64748B
accent — the brand moment#22C55E
accent-strong — hover & emphasis#4ADE80
accent-wash — tint for chips & fillsrgba(34, 197, 94, 0.16)
chip-background — chip ground#1A2438

All 11 themes — click to switch, hover to preview

--mo-text-*

Type set at true size.

Cormorant Garamond for display and headings, Inconsolata for everything else.

display · 3.5rem / 1.05 · 700

Academy, Bento, Network & Umuzika

h1 · 2.5rem / 1.15 · 700

Consistent building blocks

h2 · 2rem / 1.2 · 600

Built once, reused everywhere

h3 · 1.375rem / 1.35 · 600

Same auth, same theming, every project

body-lg · 1.125rem / 1.55 · 400

Eleven themes, one component library, zero drift.

body · 1rem / 1.6 · 400

Import the stylesheet, wrap your app in ThemeProvider, and go.

caption · 0.8125rem / 1.4 · 500

SHARED ACROSS ACADEMY, BENTO, NETWORK & UMUZIKA

--mo-space-* · --mo-radius-* · --mo-shadow-*

Geometry you can measure by eye.

Spacing — 4px base

xs · 4
sm · 8
md · 12
lg · 16
xl · 24
2xl · 32
3xl · 48
4xl · 64

Radius & elevation

sm · 8
md · 16
lg · 24
full
shadow-sm
shadow-md
shadow-lg
@mobayilo/ui

Exhibits keep their borders.

Components sit directly on a shifted ground — the only boxes here are the components themselves.

Buttons

Badges & tags

DeployedPreviewFailingNew themeAcademyBento

Inputs & controls

Avatars & projects

ACBTNWUM

Nine active projects, one shared component library.

Card

Academy

Cohort-based courses, built on the same auth and theming as every project.

12 modules · magic-link sign-in · ZeptoMail delivery

Dialog

Form

This URL is unreachable.

Selection & progress

0 – 300s

Alerts & notifications

Deploy complete

umuzika-saas · production · 42s

Approaching rate limit

ZeptoMail: 82% of daily sends used.

Build failed

network-mobayilo · typecheck exited 1.

New theme available

rose pine dawn just landed in @mobayilo/themes.

Sign-in — magic link + Google

Sign in

Passwordless everywhere — Better Auth magic link, ZeptoMail delivery.

or

Entry card — mytrip & umuzika

JapanApr 2024

Suizen-ji and a castle reborn. Kumamoto surprised me — Suizen-ji Jōju-en is a strolling garden that miniaturises the old Tōkaidō road, including a little Mt Fuji of clipped grass.

  • Suizen-ji Jōju-en
  • Kumamoto Castle
  • Sakuranobaba Jōsaien

Family Library42 min

Slow starts and old favorites — the playlist that plays every Sunday before church, curated from three generations of the family's history.

  • Amahoro — Kizito
  • Umva — Bushali
  • Ikaze — The Ben