01 · Brand
The mark.
Identity as gesture.
One continuous stroke with a 28-unit weight and round linecap. It took 401 variations to reach the final form. The mark scales from favicon to billboard without changes.
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 with distinct roles. Fraunces adds editorial warmth. Gen Interface JP covers every UI surface. Source Sans 3 is for user-written posts. Source Serif 4 italic is for AI-generated system content. Geist Mono is 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 gets its colour from the accent scale. Change the theme and everything updates. The social feed adds two Mima-specific elements: platform badges and The Bubble.
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 with AI-grouped topics from your connected networks. Bluesky, X, Telegram, Discord, and Signal appear in one browser-based layer. Your data stays local.