Web CSS Tokens
Complete CSS custom properties for all RetailOS web portals. Copy this into your app's globals.css to get the full Bumi token set.
Usage
Add this to your app's root CSS file (e.g., globals.css or app.css):
css
@import url('https://fonts.googleapis.com/css2?family=Lora:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');Then apply the tokens via CSS custom properties on :root.
Complete Token File
css
/* ==========================================================
Bumi Design System — CSS Tokens v1.0.0
RetailOS · March 2026
========================================================== */
:root {
/* --------------------------------------------------------
COLOR — Brand
-------------------------------------------------------- */
--color-brand: #2D6B4A;
--color-brand-hover: #245A3E;
--color-brand-light: #E8F0EC;
--color-brand-subtle: #F0F5F2;
/* --------------------------------------------------------
COLOR — Semantic
-------------------------------------------------------- */
--color-success: #2D7D46;
--color-warning: #D4910A;
--color-danger: #C4463A;
--color-danger-hover: #A93B30;
--color-danger-light: #FCEAE8;
--color-info: #2563EB;
/* --------------------------------------------------------
COLOR — Neutral Surfaces
-------------------------------------------------------- */
--color-bg-body: #FAFAF7;
--color-bg-card: #FFFFFF;
--color-bg-inset: #F3F1EC;
--color-bg-hover: #EDEAE3;
/* --------------------------------------------------------
COLOR — Borders
-------------------------------------------------------- */
--color-border: #E5E2DB;
--color-border-strong: #D4D0C8;
/* --------------------------------------------------------
COLOR — Text
-------------------------------------------------------- */
--color-text-1: #1A1816;
--color-text-2: #57534E;
--color-text-3: #A8A29E;
/* --------------------------------------------------------
COLOR — Semantic Soft Backgrounds
-------------------------------------------------------- */
--color-success-soft: #E8F0EC;
--color-warning-soft: #FEF3C7;
--color-danger-soft: #FCEAE8;
--color-info-soft: #DBEAFE;
/* --------------------------------------------------------
TYPOGRAPHY — Font Families
-------------------------------------------------------- */
--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--font-display: 'Lora', Georgia, serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* --------------------------------------------------------
TYPOGRAPHY — Font Sizes
-------------------------------------------------------- */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.8125rem; /* 13px */
--text-base: 0.875rem; /* 14px */
--text-lg: 1rem; /* 16px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.75rem; /* 28px — stat card values */
--text-4xl: 2.25rem; /* 36px — page titles */
/* --------------------------------------------------------
TYPOGRAPHY — Font Weights
-------------------------------------------------------- */
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
/* --------------------------------------------------------
TYPOGRAPHY — Line Heights
-------------------------------------------------------- */
--leading-tight: 1.2;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
/* --------------------------------------------------------
TYPOGRAPHY — Letter Spacing
-------------------------------------------------------- */
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.05em;
/* --------------------------------------------------------
SPACING
-------------------------------------------------------- */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* --------------------------------------------------------
BORDER RADIUS
-------------------------------------------------------- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* --------------------------------------------------------
SHADOWS (warm-tinted)
-------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(28, 24, 20, 0.04);
--shadow-sm: 0 1px 3px rgba(28, 24, 20, 0.06), 0 1px 2px rgba(28, 24, 20, 0.04);
--shadow-md: 0 4px 6px rgba(28, 24, 20, 0.06), 0 2px 4px rgba(28, 24, 20, 0.04);
--shadow-lg: 0 10px 15px rgba(28, 24, 20, 0.06), 0 4px 6px rgba(28, 24, 20, 0.04);
--shadow-xl: 0 20px 25px rgba(28, 24, 20, 0.08), 0 8px 10px rgba(28, 24, 20, 0.04);
--shadow-float: 0 24px 48px rgba(28, 24, 20, 0.12);
/* --------------------------------------------------------
TRANSITIONS
-------------------------------------------------------- */
--duration-fast: 100ms;
--duration-normal: 150ms;
--duration-slow: 300ms;
--duration-slower: 500ms;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* --------------------------------------------------------
Z-INDEX
-------------------------------------------------------- */
--z-dropdown: 50;
--z-sticky: 100;
--z-modal-backdrop: 200;
--z-modal: 300;
--z-popover: 400;
--z-toast: 500;
--z-tooltip: 600;
/* --------------------------------------------------------
LAYOUT
-------------------------------------------------------- */
--sidebar-width: 240px;
--sidebar-collapsed-width: 64px;
--header-height: 56px;
--shell-padding: 12px;
--shell-radius: 20px;
--content-max-width: 1280px;
}Dark Mode Tokens
css
[data-theme='dark'] {
--color-brand: #4A9E72;
--color-brand-hover: #3D8A62;
--color-brand-light: #1A3328;
--color-brand-subtle: #162A22;
--color-success: #4A9E72;
--color-warning: #E8A820;
--color-danger: #E05A4E;
--color-danger-hover: #C9463B;
--color-danger-light: #3D1F1C;
--color-info: #4A8AFF;
--color-bg-body: #1C1A17;
--color-bg-card: #262420;
--color-bg-inset: #2E2C28;
--color-bg-hover: #363330;
--color-border: #3D3A35;
--color-border-strong: #4A4640;
--color-text-1: #F5F3EF;
--color-text-2: #B5B0A8;
--color-text-3: #6E6A64;
--color-success-soft: #1A3328;
--color-warning-soft: #3D2E0A;
--color-danger-soft: #3D1F1C;
--color-info-soft: #1A2744;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.2);
--shadow-float: 0 24px 48px rgba(0, 0, 0, 0.4);
}Tailwind CSS Integration
Map tokens to Tailwind utility classes in tailwind.config.ts:
ts
import type { Config } from 'tailwindcss'
export default {
theme: {
extend: {
colors: {
brand: 'var(--color-brand)',
'brand-hover': 'var(--color-brand-hover)',
'brand-light': 'var(--color-brand-light)',
success: 'var(--color-success)',
warning: 'var(--color-warning)',
danger: 'var(--color-danger)',
info: 'var(--color-info)',
'bg-body': 'var(--color-bg-body)',
'bg-card': 'var(--color-bg-card)',
'bg-inset': 'var(--color-bg-inset)',
'bg-hover': 'var(--color-bg-hover)',
border: 'var(--color-border)',
'border-strong': 'var(--color-border-strong)',
'text-1': 'var(--color-text-1)',
'text-2': 'var(--color-text-2)',
'text-3': 'var(--color-text-3)',
},
fontFamily: {
sans: ['var(--font-sans)'],
display: ['var(--font-display)'],
mono: ['var(--font-mono)'],
},
borderRadius: {
sm: 'var(--radius-sm)',
md: 'var(--radius-md)',
lg: 'var(--radius-lg)',
xl: 'var(--radius-xl)',
'2xl': 'var(--radius-2xl)',
},
boxShadow: {
xs: 'var(--shadow-xs)',
sm: 'var(--shadow-sm)',
md: 'var(--shadow-md)',
lg: 'var(--shadow-lg)',
xl: 'var(--shadow-xl)',
float: 'var(--shadow-float)',
},
},
},
} satisfies ConfigCopy-paste ready
This entire token file is designed to be dropped directly into any RetailOS web portal. All portals share the same base --- per-app accent overrides are handled separately (see Per-App Themes).