Foundations
Typography
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.
Type scale
Headings come from the Bootstrap variables in @rvn/shared-styles: a 1rem (16px) base multiplied up to 40px, all at weight 500 with line-height 1.2. The rendered face is 'Segoe UI', Arial, sans-serif because every MFE’s App.css sets the family globally.
Heading scale (h1–h6)
Live specimens at the exact production sizes.
/* @rvn/shared-styles — bootstrap/_variables.scss (typography base) */
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-size-base: 1rem !default; /* 16px */
$font-size-sm: $font-size-base * .875 !default; /* 14px */
$font-size-lg: $font-size-base * 1.25 !default; /* 20px */
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
$line-height-base: 1.5 !default;
$line-height-sm: 1.25 !default;
$line-height-lg: 2 !default;
$h1-font-size: $font-size-base * 2.5 !default; /* 40px */
$h2-font-size: $font-size-base * 2 !default; /* 32px */
$h3-font-size: $font-size-base * 1.75 !default; /* 28px */
$h4-font-size: $font-size-base * 1.5 !default; /* 24px */
$h5-font-size: $font-size-base * 1.25 !default; /* 20px */
$h6-font-size: $font-size-base !default; /* 16px */
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;Body & UI text
The working text size across the platform is 13px at weight 400 — table headers, table cells, form labels and inputs all sit here. Modal titles and collapse headers step up to 14px. This is what makes a rate table in rate-fe read identically to a user list in administrator-fe.
UI text samples
The four text roles you will actually type into, at their exact production metrics.
.font-size-13 utility instead of an inline style — it carries !important so it also wins inside AntD components.Tokens
The complete set of typography values in production. Nothing outside this table should appear in a module’s CSS.
| Name | Type | Default | Description |
|---|---|---|---|
font-family | global (App.css *) | 'Segoe UI', Arial, sans-serif | Applied to every element via the universal selector in each MFE’s App.css. This wins over the longer Bootstrap stack. |
font-size-base | size | 1rem (16px) | Bootstrap base size the heading scale multiplies from. |
font-size-13 | size / utility class | 13px | The working text size: table headers, table cells, form labels and inputs. Also available as the .font-size-13 utility (!important). |
font-size-14 | size | 14px | Modal titles (.ant-modal-title) and collapse headers (.ant-collapse). |
font-weight (body) | weight | 400 | Body, table and form text — including table headers, which are forced to 400. |
font-weight (headings) | weight | 500 | h1–h6 heading weight; cascades into modal titles and collapse headers via AntD. |
line-height (body) | ratio | 1.5 | Bootstrap $line-height-base for body content. |
line-height (headings) | ratio | 1.2 | $headings-line-height for h1–h6. |
line-height (inputs) | ratio | 1.5714285714285714 | AntD input default — not 1.5. Kept verbatim in the .ant-input override. |
menu item height | size | 34px | 26px | Sidebar menu items are 34px tall with matching line-height; nested/mobile inline menus drop to 26px. |
letter-spacing | tracking | none (-0.02em) | No global letter-spacing. The only exception is the authentication-fe landing-page h1 at -0.02em. |
App.css overrides
Every MFE carries this block in src/assets/css/App.css. The !important flags are deliberate — AntD sets its own sizes at higher specificity, so the 13px table/input overrides need them to hold. Copy it verbatim into a new module.
/* App.css overrides — canonical across appshell-fe, administrator-fe, header-fe,
rate-fe, reference-fe, racar-fe, authentication-fe */
* {
font-family: 'Segoe UI', Arial, sans-serif;
}
.ant-table .ant-table-thead > tr > th {
font-weight: 400 !important;
font-size: 13px !important;
}
.ant-table-wrapper .ant-table-cell,
.ant-table-wrapper .ant-table-thead > tr > th,
.ant-table-wrapper .ant-table-tbody > tr > td {
padding: 4px 6px !important;
font-size: 13px !important;
}
.ant-form-item .ant-form-item-label > label {
font-size: 13px;
font-weight: 400;
}
.ant-input {
font-size: 13px !important;
line-height: 1.5714285714285714;
}
.ant-modal .ant-modal-title {
font-size: 14px;
}
.ant-collapse {
font-size: 14px;
}
.font-size-13 {
font-size: 13px !important;
}Divergences
report-fe uses the extended system stack (system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) instead of the plain 'Segoe UI', Arial, sans-serif, colours all headings #162e66 with margin-top: 0, and adds an 11px badge pill style not present elsewhere. Do not copy these into other modules.authentication-fe landing page applies letter-spacing: -0.02em to its h1 headline, and the header-fe notification badge uses a custom 10px / 700 weight — both are one-off component styles, not part of the scale.