Dos and Don'ts

Common patterns and anti-patterns when building with the Bumi design system. Follow these rules to maintain visual consistency across all RetailOS applications.

Color Usage

DO: Use green only for primary actions

Green (#2D6B4A) should appear only in primary buttons, active navigation, links, checkmarks, and toggle switches. Everything else uses warm neutrals.

<!-- DO -->
<button class="bg-brand text-white">Simpan</button>
<span class="text-brand underline">Lihat detail</span>

<!-- DON'T -->
<div class="bg-brand/10 border-brand">  <!-- green card border -->
<h2 class="text-brand">Judul Section</h2>  <!-- green heading -->

DO: Use warm neutrals for surfaces

Background colors should always be warm (#FAFAF7, #F3F1EC, #EDEAE3).

Don't use cold grays

These cold gray values should never appear in a Bumi interface:

• #F5F5F5 (cold gray)
• #E5E7EB (Tailwind gray-200)
• #F3F4F6 (Tailwind gray-100)
• #6B7280 (Tailwind gray-500)

Use their warm equivalents instead: #FAFAF7, #E5E2DB, #F3F1EC, #57534E.

Typography

DO: Use serif (Lora) for page titles only

The serif font is reserved for top-level page titles and stat card values. It creates visual hierarchy.

<!-- DO -->
<h1 class="font-display text-4xl">Dashboard</h1>
<span class="font-display text-3xl font-extrabold">Rp 14.230.000</span>

<!-- DON'T -->
<label class="font-display">Nama Produk</label>  <!-- serif on label -->
<p class="font-display">Silakan scan barcode...</p>  <!-- serif on body -->

DO: Use monospace for numbers and data

Monospace (JetBrains Mono) ensures numerical alignment in tables, timestamps, and financial data.

<!-- DO -->
<td class="font-mono">Rp 1.450.000</td>
<span class="font-mono text-xs">22 Mar, 14:32</span>
<code class="font-mono">TXN-20260322-0042</code>

<!-- DON'T -->
<p class="font-mono">Selamat datang di RetailOS</p>  <!-- mono for prose -->
<h3 class="font-mono">Ringkasan Penjualan</h3>  <!-- mono for heading -->

Layout

DO: Keep the floating shell on desktop

The floating shell (12px inset from viewport, 20px border-radius) is the signature Bumi layout. Never remove it.

/* DO */
body { padding: 12px; background: #1C1A17; }
.shell { border-radius: 20px; overflow: hidden; }

/* DON'T */
body { padding: 0; }  /* edge-to-edge, no shell */

DO: Use slide-over sheets for forms

Complex forms (more than 3 fields) should open in a right-side slide-over sheet, not a centered modal.

DO:                           DON'T:
+--------+----------+        +--------+-------+
|        |  Sheet   |        |  +----------+  |
| Main   |  (form)  |        |  |  Modal   |  |
| Content|          |        |  | (form)   |  |
|        |          |        |  +----------+  |
+--------+----------+        +--------+-------+

Centered modals are acceptable only for simple confirmations (1--2 actions, no form fields).

Cards & Surfaces

DON'T: Add heavy shadows to cards

Cards use a 1px border (#E5E2DB), not a shadow. Shadows are reserved for floating elements (dropdowns, modals, tooltips).

<!-- DO -->
<div class="border border-border rounded-xl">...</div>

<!-- DON'T -->
<div class="shadow-lg rounded-xl">...</div>  <!-- cards don't float -->

DO: Use 1px dividers between joined elements

When elements are grouped (stat cards, action bars), use 1px internal dividers, not gaps or separate borders.

Tables

DO: Show status with tiny dots in dense tables

When a table has more than 10 visible rows, replace full badge pills with 6px status dots to save space.

<!-- DO (dense tables) -->
<td><span class="w-1.5 h-1.5 rounded-full bg-success inline-block"></span></td>

<!-- DON'T (dense tables) -->
<td><span class="px-2 py-0.5 rounded-full bg-green-50 text-green-700 text-xs">Active</span></td>

Full badges are fine in tables with fewer than 10 rows.

DON'T: Center-align text columns

Text columns are always left-aligned. Only amount/number columns are right-aligned. Never center-align anything.

<!-- DO -->
<th class="text-left">Produk</th>
<th class="text-right">Jumlah</th>

<!-- DON'T -->
<th class="text-center">Produk</th>  <!-- never center -->

Illustrations

DO: Use isometric illustrations for empty states

Empty states and onboarding screens use the Bumi isometric illustration style --- 30-degree angles, warm palette, simple geometry.

DON'T: Use emoji or cartoon illustrations

Emoji and cartoon-style illustrations break the premium, grounded Bumi aesthetic.

DO:  [isometric shelf illustration]
     "Belum ada produk"

DON'T:  :-/ emoji
        "Belum ada produk"

Buttons

DO: Use the correct button hierarchy

Level	Style	Usage
Primary	Green filled	One per screen section, main action
Secondary	Gray outline/ghost	Supporting actions
Destructive	Red text (ghost)	Delete, reject, remove
Link	Green text, no border	Inline navigation

DON'T: Put two primary buttons together

Only one primary (green filled) button should be visible in any section. If you need two actions, make one secondary.

<!-- DO -->
<button class="bg-brand text-white">Simpan</button>
<button class="text-2 hover:text-1">Batal</button>

<!-- DON'T -->
<button class="bg-brand text-white">Simpan</button>
<button class="bg-brand text-white">Simpan & Tutup</button>  <!-- two primaries -->

Icons

DO: Use consistent icon size per context

Context	Size	Stroke
Sidebar nav	20px	1.5px
Inline with text	16px	1.5px
Button icon	16px	2px
Empty state	48px	1px
Stat card change	14px	2px

DON'T: Mix icon libraries

Use Lucide exclusively. Never mix with Heroicons, FontAwesome, or Material Icons in the same application.

Spacing

DO: Use the 4px base unit

All spacing should be multiples of 4px: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.

DON'T: Use arbitrary spacing values

/* DO */
padding: 16px;
gap: 12px;
margin-bottom: 24px;

/* DON'T */
padding: 15px;   /* not on 4px grid */
gap: 10px;       /* not on 4px grid */
margin-bottom: 18px;  /* not on 4px grid */

Motion

DO: Keep animations subtle

Hover effects: 150ms. Page transitions: 300ms. Never exceed 500ms for any UI animation.

DON'T: Use bounce or elastic easing for UI controls

Bounce easing is only acceptable for the member card tilt effect. Everything else uses ease or ease-out.

/* DO */
transition: all 150ms ease;

/* DON'T */
transition: all 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);  /* bouncy */

Quick reference

Print this page and keep it next to your monitor while building. After a few weeks, these rules become second nature.