Design Principles
Bumi is built on five principles, each named in Indonesian to reinforce that this is our design system --- born from the needs of Indonesian retail, not imported from Silicon Valley defaults.
Visual Comparison: Generic vs Bumi
The 5 Principles at a Glance
never cold gray
a feature
hierarchy
identity
every platform
1. Kehangatan (Warmth)
Our interfaces use warm tones everywhere. This is the single most visible departure from generic UI kits.
| Element | Bumi (Warm) | Generic (Cold) |
|---|---|---|
| Page background | #FAFAF7 | #F5F5F5 |
| Card border | #E5E2DB | #E5E7EB |
| Inset background | #F3F1EC | #F3F4F6 |
| Shadow color | rgba(0,0,0,0.04) | rgba(0,0,0,0.1) |
| Hover state | #EDEAE3 | #F9FAFB |
Why warmth matters
Retail staff spend 8--10 hours a day looking at these screens. Warm tones reduce eye strain, feel more inviting, and align with the physical warmth of a well-lit Indonesian store.
- Backgrounds are always warm-tinted, never pure gray
- Shadows use low opacity with neutral black, never colored
- Borders lean toward tan/stone, never blue-gray
- Hover states darken warmly, never cool
2. Kesederhanaan (Simplicity)
Restraint is a feature. Color is used sparingly and intentionally.
The green rule: Our brand green (#2D6B4A) appears in exactly five contexts:
- Primary action buttons (filled)
- Active navigation indicators
- Checkmarks and success states
- Links (text only)
- Brand logo
Everything else --- headers, borders, backgrounds, secondary buttons --- uses warm neutrals. There is no gradient, no secondary brand color in the UI, and absolutely no rainbow dashboards.
DON'T
Never use green for decorative purposes. A card border should never be green. A section header should never be green. If you're reaching for green, ask yourself: is this a primary action?
3. Kejelasan (Clarity)
Every element must communicate its purpose immediately.
Typography creates hierarchy:
- Serif titles (Lora) signal "this is the page topic" --- editorial weight
- Monospace text (JetBrains Mono) signals "this is precise data" --- prices, IDs, timestamps
- Sans-serif body (Inter) signals "this is readable content" --- descriptions, instructions
Whitespace creates breathing room:
- 32px between content sections
- 48px between major page regions
- 20px padding inside cards
- Never stack elements without spacing
Data presentation:
- Right-align numbers in tables
- Use monospace for all numerical data
- Thousands separators for all numbers above 999
- Indonesian Rupiah format:
Rp 1.250.000
4. Karakter (Character)
This design system has a point of view. It is not a shadcn reskin.
Typography identity: Plus Jakarta Sans is our heading typeface. It was designed by Tokotype, an Indonesian type foundry. Using an Indonesian-designed typeface is a deliberate statement about where this product comes from.
Illustration identity: Our illustrations use an isometric 3D style with earth tones --- forest green, warm sand, muted sage. They depict Indonesian retail contexts: POS terminals, warehouses, store shelves, delivery bikes.
Language conventions:
- UI labels can be in Bahasa Indonesia (the product is for Indonesian users)
- Technical documentation is in English (the development team is multilingual)
- Number formatting follows Indonesian conventions (period for thousands, comma for decimals)
- Date formatting:
DD MMM YYYY(e.g.,22 Mar 2026)
5. Konsistensi (Consistency)
A customer scanning items on the POS, a warehouse worker checking stock on mobile, and a finance manager reviewing reports on desktop should all feel like they are using the same product.
Shared across all platforms:
- Color tokens (identical hex values)
- Typography scale (proportionally adapted)
- Spacing units (4px base)
- Shadow levels
- Border radius values
- Icon style (outlined, consistent stroke width)
Platform-appropriate implementation:
- Web uses CSS custom properties and Tailwind
- Mobile uses React Native StyleSheet with shared token constants
- POS uses the same web stack but optimized for touch and fixed-size screens
The consistency test
If you screenshot a card component from the POS app and place it next to the same card from the web portal, they should look like siblings --- not strangers.