Foundations
Color
The RVN palette: the Raffles brand ramp plus five semantic ramps (success, error, warning, pending, gray) each with a base and five light steps. These are the single source of truth every micro-frontend renders from.
Brand
The Raffles brand ramp runs from bright blue #0069ba down to navy #000080, with #1fba00 green as a sparing accent. Organisation priority order is #000080 → #0069ba → #1fba00. Use the brand ramp for chrome, links, focus rings and headings — not for status.
Primary (brand blue → navy)
Accent (green)
Semantic ramps
Each status has a base (darkest) plus light-1…light-5. The status badge uses light-2 for text and light-3 for the border (see Components → Badge). Click any chip to copy its value.
Success
Error
Warning
Pending (light blue)
Gray (neutral)
How to use
ACTIVE / SUBMITTED → success, PENDING / DRAFT / INACTIVE → pending, APPROVED / VALIDATED → info, REJECTED / FAILED → error, unknown → warning..badge-success/.badge-info/.badge-warning with different (fill) colours. Every MFE must use these exact hex values so a status column reads the same when embedded in the appshell. report-fe hardcodes the hex in its badge rules for this reason.Token source
Paste this block into your module’s assets/scss/layout.scss. In the design kit the same values are exposed as CSS custom properties (--rvn-success-2, …) in globals.css.
// assets/scss/layout.scss — the canonical token block (copy verbatim)
$color-rvn-success: #29702d;
$color-rvn-success-light-1: #3f8a44;
$color-rvn-success-light-2: #57a35c;
$color-rvn-success-light-3: #74b978;
$color-rvn-success-light-4: #a7d5a9;
$color-rvn-success-light-5: #d7f0d8;
$color-rvn-error: #c62828;
$color-rvn-error-light-1: #d84343;
$color-rvn-error-light-2: #e57373;
$color-rvn-error-light-3: #ef9a9a;
$color-rvn-error-light-4: #ffcdd2;
$color-rvn-error-light-5: #ffebee;
$color-rvn-warning: #ed6c02;
$color-rvn-warning-light-1: #f57c00;
$color-rvn-warning-light-2: #ff9800;
$color-rvn-warning-light-3: #ffb74d;
$color-rvn-warning-light-4: #ffe0b2;
$color-rvn-warning-light-5: #fff3e0;
$color-rvn-pending: #0288d1;
$color-rvn-pending-light-1: #039be5;
$color-rvn-pending-light-2: #29b6f6;
$color-rvn-pending-light-3: #4fc3f7;
$color-rvn-pending-light-4: #b3e5fc;
$color-rvn-pending-light-5: #e1f5fe;
$color-rvn-gray: #6c757d;
$color-rvn-gray-light-1: #868e96;
$color-rvn-gray-light-2: #adb5bd;
$color-rvn-gray-light-3: #ced4da;
$color-rvn-gray-light-4: #dee2e6;
$color-rvn-gray-light-5: #f8f9fa;
$banner-rvn-bg: hsl(212, 94%, 42%);
$banner-rvn-fg: hsl(212, 0%, 100%);
$banner-rvn-bg-light-1: hsl(212, 94%, 50%);
$banner-rvn-bg-light-2: hsl(212, 94%, 58%);
$banner-rvn-bg-light-3: hsl(212, 94%, 66%);
$banner-rvn-bg-light-4: hsl(212, 94%, 74%);