Bumi Design System
Bumi (Indonesian for "Earth") is the design system powering every RetailOS application --- from the POS terminal in a Jakarta storefront to the HO Finance portal in a corporate office.
Design Philosophy
Bumi is warm, grounded, premium, and quietly confident. Inspired by the Solarpulse aesthetic --- floating containers, serif titles, restrained color --- it rejects the cold, clinical defaults of generic UI frameworks and replaces them with something that feels distinctly Indonesian and intentionally crafted.
Our software should feel like walking into a well-lit store: welcoming, organized, and trustworthy.
Core Principles
| Principle | Indonesian | Summary |
|---|---|---|
| Warmth over coldness | Kehangatan | Warm backgrounds, warm shadows, warm borders. No blue-gray defaults. |
| Restraint over excess | Kesederhanaan | Green for primary actions only. Everything else is warm neutrals. |
| Clarity over decoration | Kejelasan | Serif titles for weight, monospace for data, generous whitespace. |
| Indonesian character | Karakter | Plus Jakarta Sans, isometric illustrations, Indonesian conventions. |
| Consistency across platforms | Konsistensi | Same tokens across web, mobile, POS. Unified visual language. |
Quick Links
Foundation
- Design Principles --- The five pillars of Bumi
- Colors --- Brand palette, neutrals, semantics, dark mode
- Typography --- Font families, scale, weights, spacing
- Spacing --- Base unit, scale, component padding, border radius
- Elevation --- Shadow levels, backdrop blur, dark mode depth
- Motion --- Duration, easing, hover effects, page transitions
- Iconography --- Icon libraries, sizes, stroke widths
- Illustration --- Isometric style, color palette, size guide
Layout
- Floating Shell --- The signature RetailOS app container
- Sidebar --- Navigation structure and states
- Bottom Tabs --- Mobile tab navigation pattern
- Page Header --- Title, breadcrumb, and action bar
- Responsive --- Breakpoints, adaptive layout rules
Who This Is For
- Frontend engineers building new views or components
- Mobile developers implementing screens in stock-app or customer-app
- Designers creating mockups that align with production
- New team members getting up to speed on visual standards
What This Is Not
Bumi is not a component library. It is the foundation on which components are built. For component-level documentation, see the individual app repos and their Storybook instances.