01 · Brand
The mark.
Identity as gesture.
A single continuous stroke drawn with a 28-unit stroke weight and round linecap. It required 401 variations before it felt inevitable. It scales from favicon to billboard without modification.
Usage contexts
Wordmark
Horizontal lockup
Scale reference
02 · Colour
The Ube palette.
Chosen by users.
11 stops from near-white to deep plum. 500 is the primary — expressive without being aggressive. Zero hardcoded values in components; everything derives from this scale via CSS custom properties.
Accent scale — Ube
Semantic tokens — dark mode
Other palettes tested (500-stop comparison)
03 · Type
The type system.
Four families, three roles. Fraunces for editorial warmth. Gen Interface JP for every UI surface. Source Sans 3 for user-written posts. Source Serif 4 italic for AI-generated system content. Geist Mono for code and labels.
You just need to find it.
[data-theme="ube"] {
--a-50: #f5f0f8; /* surface tint */
--a-500: #9b6fc4; /* primary */
--a-950: #22182e; /* deep */
}
/* → same structure × 22 palettes */
04 · Icons
The icon set.
23 interface icons, all stroked at 2px with round linecaps. No fills. Consistent optical weight at 24×24. Hover to preview the brand-colour state.
05 · Components
The building blocks.
Every component derives its colour from the accent scale. Swap the theme, everything updates. The social feed introduces platform badges and The Bubble — Mima-specific primitives.
Button — variants
Button — sizes & icons
Input
Topic tags — variants
Platform badges
Post card
The Bubble — harassment filter
Bottom navigation bar
06 · Application
The product.
Where your people are.
News wall: AI-clustered topics from your connected networks. Bluesky, X, Telegram, Discord, and Signal — unified under one browser-substrate layer. Your data stays local.