Foundations

Typography

Carlito is the locked Novus face, metric-identical to Calibri, open-source, self-hosted by the kit so it renders the same on every platform. The stack falls back to Calibri, then system sans. No other typeface appears in Novus work.

<div>
  <p style="font-size:var(--text-display);line-height:var(--lh-display);font-weight:var(--weight-bold);margin:0">Aa Bb Cc 0123</p>
  <p class="muted" style="margin:0">Carlito 400 &amp; 700 · Latin · self-hosted woff2</p>
</div>

Type scale

One voice across the shell

In a portal the header, the side navigation and the page content are set in one family at one size. The header is never smaller than the content it frames, and headings stay close to body size so a screen reads as one document. This is a constitution rule (Principle IV) and the gates measure it on every build.

<div class="tablewrap">
<table class="table">
  <thead><tr><th>Role</th><th>Token</th><th class="num">Size</th><th class="num">Ratio to body</th></tr></thead>
  <tbody>
    <tr><td>Header, navigation, body, tables</td><td><code>--text-sm</code></td><td class="num">14px</td><td class="num">1.00x</td></tr>
    <tr><td>Page title</td><td><code>--text-xl</code></td><td class="num">24px</td><td class="num">1.71x</td></tr>
    <tr><td>Section heading</td><td><code>--text-lg</code></td><td class="num">20px</td><td class="num">1.43x</td></tr>
    <tr><td>Sub-heading</td><td><code>--text-md</code></td><td class="num">18px</td><td class="num">1.29x</td></tr>
    <tr><td>Secondary and captions</td><td><code>--text-xs</code></td><td class="num">12px</td><td class="num">0.86x</td></tr>
  </tbody>
</table>
</div>

• Page titles stay within 1.75 times body size, section headings within 1.45 times. Beyond that a screen stops reading as one document.
• KPI figures are data, not headings: they keep their display size and are exempt from the ratio.
• Marketing pages are not portals. The landing page keeps the display scale; the rule applies to consoles and the screens inside them.

Weights

Carlito ships two weights, Regular 400 and Bold 700. There is no Medium: a 500 renders as Regular and the kit's --weight-medium (600) renders as Bold. So the choice is always between two faces: menus are Regular, and only the selected item is Bold.

<div class="tablewrap">
<table class="table">
  <thead><tr><th>Weight</th><th>Token</th><th>Used for</th></tr></thead>
  <tbody>
    <tr><td style="font-weight:var(--weight-regular)">Regular 400</td><td><code>--weight-regular</code></td><td class="cell--wrap">Body copy, table cells, and every menu item that is not selected: side and top navigation, the nav bar, and menu group labels</td></tr>
    <tr><td style="font-weight:var(--weight-bold)">Bold 700</td><td><code>--weight-bold</code>, and <code>--weight-medium</code>, which renders the same</td><td class="cell--wrap">The selected menu item, headings, buttons, field labels, table headers, and the current breadcrumb</td></tr>
  </tbody>
</table>
</div>

• Menus are set in Regular, and only the selected item is Bold. A menu is a list people scan; Bold on every label turns it into a row of headings and leaves the selected item nothing to stand out with.
• The selected item carries Bold together with the accent colour, tint and edge, so it never relies on weight alone.
• Do not ask for 500 to get a Medium: there is no Medium face, and the text quietly renders as Regular.

Rules

• Weights: 400 regular, 700 bold; 600 falls back to 700, and menus are Regular with only the selected item Bold (see Weights above). Emphasis by weight, never italics or all-caps shouting.
• Body copy caps at ~68ch for readability (the kit sets this on paragraphs).
• Carlito covers Latin plus common punctuation; exotic Unicode symbols render as tofu, draw icons as inline SVG instead.
• Decks use a separate, larger slide scale (tokens.css §9), never on web pages.