NumericaBrand kit
Version 1

Numerica brand kit

One home for the logo, colours and fonts, and the shared look of Numerica's internal tools.

tokens.json numerica.css

Use it

Every file sits under a version, and a published version never changes.

A page links the stylesheet, puts class="nb" on its body, and takes the logo and icons from the same version:

<link rel="stylesheet" href="https://brand.numerica.in/v1/numerica.css">
<link rel="icon" href="https://brand.numerica.in/v1/favicon/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="https://brand.numerica.in/v1/favicon/favicon-32.png">
<link rel="apple-touch-icon" href="https://brand.numerica.in/v1/favicon/apple-touch-icon.png">
...
<body class="nb">

Add data-theme="auto" to the html element to follow the system's dark mode; without it a page stays light. An email takes the logo as https://brand.numerica.in/v1/logo/numerica-full-560.png at width="280". A PDF or an app package never loads the kit live: it keeps a copy of the version's files and checks them against SHA256SUMS.txt.

Colour

Read from tokens.json; in CSS each is var(--nb-<scale>-<step>).

Loading the tokens...

Type

Inter on screens. DM Sans and DM Serif Display in documents.

Inter: page headings

Inter: body text and tables, 14 px. 0123456789

--nb-font-ui

DM Serif Display

DM Sans: invoices, statements and agreements.

Dancing Script

--nb-font-display, --nb-font-document, --nb-font-signature

Components

Each with the markup that makes it.

Masthead

NumericaEngagement bot
someone@numerica.in
Shadow mode: nothing is sent
Markup 
<header class="nb-mast"><div class="nb-mast-bar">
  <a class="nb-brand" href="/"><img src="https://brand.numerica.in/v1/logo/numerica-full-560.png" alt="Numerica"><span class="nb-app">Engagement bot</span></a>
  <nav class="nb-nav"><a href="/items" aria-current="page">Items</a> ...</nav>
  <div class="nb-user"><span>someone@numerica.in</span></div>
</div></header>
<div class="nb-banner">Shadow mode: nothing is sent</div>   (optional; --info, --bad)

Page heading

Items

Client emails and calls waiting on a consultant.

ExportNew item
Markup 
<main class="nb-main">   (nb-main--narrow for forms)
  <div class="nb-page-head">
    <div><h1>Items</h1><p class="nb-sub">...</p></div>
    <div class="nb-actions"><a class="nb-btn nb-btn--primary" href="...">New item</a></div>
  </div>
  <section class="nb-section"><div class="nb-section-head"><h2>...</h2><p>...</p></div> ... </section>

Stat tiles

Open now
14
3 high urgency
Median first response
42 min
last 30 days
Within target
91%
target 85%
Breached
2
Markup 
<div class="nb-stats">
  <div class="nb-stat"><div class="nb-stat-label">Open now</div><div class="nb-stat-value">14</div><div class="nb-stat-note">3 high urgency</div></div>
</div>   (value colours: nb-good, nb-warn, nb-bad)

Tabs, filters, table and pagination

Clear
ReceivedClientAskStatusWaiting
12 Oct 09:14Acme IndustriesIFRS 17 data request for Q3Open high1 h 05
12 Oct 08:51Brightline LtdRevised ESOP valuationReplied0 h 22
11 Oct 17:30Coral BankGratuity report sign-offWaiting on client review15 h 44
Markup 
<nav class="nb-tabs"><a href="?tab=open" aria-current="page">Open <span class="nb-count">14</span></a> ...</nav>
<form class="nb-filters"><select>...</select> <button class="nb-btn nb-btn--primary">Filter</button></form>
<div class="nb-table-wrap"><table class="nb-table">   (nb-table--compact for dense tables)
  <thead><tr><th>Client</th><th class="num">Waiting</th></tr></thead>
  <tbody><tr><td>...</td><td class="num">...</td></tr></tbody>
  (nothing to show: <tr><td class="nb-empty" colspan="5">Nothing here.</td></tr>)
</table></div>
<nav class="nb-pager" aria-label="Pages"><span class="nb-pager-info">1-50 of 212</span>
  <div class="nb-pager-links"><a aria-disabled="true">Previous</a><span aria-current="page">1</span><a href="?page=2">2</a>
  <span class="nb-pager-gap">&hellip;</span> <a href="?page=2" rel="next">Next</a></div></nav>

Panels, key and value rows, badges

Service

running
Uptime
3 d 4 h
Calls since restart
128
Scheduled shutdown
off

Badges

neutral blue done waiting failed

neutral open done waiting failed

Markup 
<div class="nb-grid">
  <div class="nb-panel"><div class="nb-panel-head"><h3>Service</h3><span class="nb-badge nb-badge--good">running</span></div>
    <dl class="nb-dl"><div><dt>Uptime</dt><dd>3 d 4 h</dd></div></dl></div>
</div>
<span class="nb-badge nb-badge--warn">waiting</span>   <span class="nb-dot nb-dot--good"></span>done

Forms, buttons and notes

Saved. The new greeting is used from the next call.
Someone else saved this page while you were editing it. Reload to see their change.

Spoken when a call is answered.

Markup 
<div class="nb-note nb-note--good">Saved.</div>   (--info, --good, --warn, --bad)
<div class="nb-field"><label for="g">Greeting</label><input id="g" type="text"><p class="nb-hint">...</p></div>
<label class="nb-check"><input type="checkbox"> Transfer technical questions</label>
<div class="nb-form-row"><button class="nb-btn nb-btn--primary">Save</button>
  <button class="nb-btn nb-btn--danger">Reset</button> <button class="nb-btn nb-btn--quiet">Cancel</button></div>