One shared theme, one set of tokens, one component vocabulary — so every micro-frontend on the RVN platform looks and behaves the same. Foundations, live components, and screen patterns, with copy-paste code.
How to use this kit
Three ways teams consume the design kit across the micro-frontends.
Copy the token layer (assets/scss/layout.scss $color-rvn-* + globals) into your module — the single source of truth for colour, spacing and type.
Reuse the shared components — Badge, AppActionBar, AppSearchBar, AppFormFooter, the azure sidebar — from the recipes here.
Compose screens with the List and Detail patterns so every management page stacks the same way.
Foundations
Colour ramps, typography, spacing, radius and elevation tokens
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.
The RVN type system: a global Segoe UI / Arial stack, a 40→16px heading scale at weight 500, and 13px weight-400 body text for every table, form label and input across the MFEs.
The Bootstrap-derived spacing scale (4px steps), the per-component border-radius scale (6 / 8 / 10px), the box-shadow depths, the fixed sidebar/header dimensions, and the responsive breakpoints every micro-frontend lays out against.
Components
Live Ant Design widgets styled with the RVN tokens
The AntD Button in house dress — .btn-ant-primary paints Save/primary actions with the 310deg navy gradient, .opacity-8 dims Cancel, and every button is fixed at 30px tall by the global .ant-btn rule.
AntD Card is the wrapper for create/edit forms, list-page filter blocks and dashboard KPI tiles — a styled title slot, default border, and a 12px body-padding override that the sticky form footer depends on.
Vertical AntD forms with colon-suffixed 13px labels, the required asterisk reversed to sit after the label, and Save/Cancel pinned in the sticky AppFormFooter.
The outline status pill used in every table status column. A base .badge-rvn shape class plus one .badge-<status> colour class — always both, as a compound selector so it beats Bootstrap.
AppBreadcrumb — the AntD breadcrumb trail at the top of every page: prior crumbs link back, the current page renders in primary text, a Divider follows it, and both hide on mobile where the header shows the page name instead.
AppDividerBar — a house section divider that separates stacked sections down a page, with an optional title and a right-aligned action group on the divider line. Built on the same divider convention as the Action Bar.
The azure-sidebar rail — a white collapsible Sider (228px expanded, 42px collapsed) with a branded 42px header, 34px azure-selected menu rows, module-scoped brand colour, and a mobile drawer variant.
The 40px fixed top app bar from header-fe, exposed as the MFE remote rvn_mfe_header/Header — brand-blue bar with hamburger and app/page title on the left, language selector, notifications and user menu on the right.
Patterns
Whole-screen recipes: list pages and detail pages
AppActionBar — the top toolbar for list pages: two house dividers wrapping a space-between Row of small Create / Refresh / Delete buttons, identical across every module.
AppSearchBar — the list-page filter strip: a keyword input, Popover-backed filter tags, and an Add-filters dropdown held in one flex shell with exactly one fixed gap.
AppFormFooter — the sticky Save/Cancel bar pinned to the bottom of every create/edit form, with primary actions on the left and optional extra actions pushed right.
The management/list page recipe. Every list page stacks the same way: breadcrumb → action bar → search bar → table. Only the buttons, filters and columns differ.
The create/edit screen recipe: breadcrumb → vertical Form in a Card → sticky AppFormFooter with a btn-ant-primary Save and an opacity-8 Cancel.