Foundations · from tokens.json
Tokens are the only colours, fonts and sizes an app uses.
Use the semantic token (bg-primary, text-muted-foreground, bg-success-subtle text-success), never a hex value or a Tailwind palette colour. Switch the theme at the top right to see each one in Light, Dark and High contrast.
Colour
| Token | light | dark | High contrast | Usage |
|---|---|---|---|---|
| navy-950 | #0b1220 | #0b1220 | #0b1220 | Brand navy. Document cover, title slides, app sidebar. The jengacore ground. |
| navy-900 | #151b29 | #151b29 | #151b29 | Raised navy: cards on dark slides, cards in the dark app theme. |
| navy-700 | #373d48 | #373d48 | #373d48 | Hairline borders on navy grounds (dark slides, dark theme cards). Decorative only, 1.6:1 on navy-900. |
| forest-900 | #023020 | #023020 | #023020 | Deep forest. Table header rows, closing slide ground, strongest green. White text on it: 14.5:1. |
| forest-600 | #1a6b4a | #1a6b4a | #1a6b4a | THE brand green. Section numbers, headings rules, links, primary buttons, diagram accent. 6.5:1 on white. |
| forest-50 | #e7f4ec | #e7f4ec | #e7f4ec | Mint tint. Table zebra rows, highlighted cards, diagram control-point fill. |
| emerald-400 | #34d399 | #34d399 | #34d399 | Bright emerald. Accent text on navy (title slide highlight word, eyebrows on dark). 9.7:1 on navy-950. Never on white (1.9:1). |
| ink-900 | #1a1a1a | #1a1a1a | #1a1a1a | Body text in documents and slides. |
| grey-500 | #6b6b6b | #6b6b6b | #6b6b6b | Secondary text: running headers, captions, slide body copy. 5.3:1 on white. |
| grey-400 | #8a8a8a | #8a8a8a | #8a8a8a | Diagram 'people' stroke; control borders on white (3.4:1). |
| grey-200 | #e8e8e8 | #e8e8e8 | #e8e8e8 | Hairlines: card borders, table outer border, slide card borders. Light text on navy slides. |
| white | #ffffff | #ffffff | #ffffff | Paper, slide ground, text on navy and forest. |
| note-red | #b30000 | #b30000 | #b30000 | Internal TEAM NOTE text in drafts only. Must never ship in an issued document. 7.2:1 on white. |
| link-blue | #3451c7 | #3451c7 | #3451c7 | Diagram network/ingress edges and edge labels (PULL 443, VPN 443). 6.7:1 on white. |
| product-mulisa | #6d5bd0 | #a99cf0 | #a99cf0 | Mulisa signature: wordmark dot, app tile dot, active nav marker. Never for status or buttons. |
| product-msingi | #0f8a8a | #3cc9c4 | #3cc9c4 | Msingi signature: wordmark dot, app tile dot, active nav marker. 4.2:1 on white, so dot/marker only, never body text. |
| product-finance | #a87a1c | #e0b44f | #e0b44f | Finance Portal signature: wordmark dot, tile, nav marker. 3.8:1 on white: marks only, never text. |
| product-disputes | #a43f7c | #e58ac0 | #e58ac0 | Disputes signature: wordmark dot, tile, nav marker. |
| background | #ffffff | #0b1220 | #ffffff | Page ground behind content. Documents, slides, app content area. |
| foreground | {ink-900} | #e8e8e8 | #0b0b0b | Default text on background, card, canvas. 17:1 light, 15:1 dark. |
| canvas | #f6f7f6 | #0b1220 | #ffffff | App workspace behind cards (dashboards, tables). Slightly off-white so white cards read without shadows. |
| card | #ffffff | #151b29 | #ffffff | Card, panel, table container surface. |
| card-foreground | {foreground} | #e8e8e8 | #0b0b0b | Text on card. |
| popover | #ffffff | #151b29 | #ffffff | Menus, popovers, comboboxes, toasts. |
| popover-foreground | {foreground} | #e8e8e8 | #0b0b0b | Text on popover. |
| primary | {forest-600} | {emerald-400} | #0e4d33 | Primary action fill (one per view), links, focus ring, selected state. Dark theme swaps to emerald with navy text. |
| primary-foreground | #ffffff | {navy-950} | #ffffff | Text/icons on primary. 6.5:1 light, 9.7:1 dark. |
| secondary | {forest-50} | #16352a | #e7f4ec | Secondary button fill, selected row, soft brand highlight. |
| secondary-foreground | {forest-900} | #c9f2de | #023020 | Text on secondary. 12.8:1 light. |
| muted | #f1f3f1 | #1b2232 | #f1f3f1 | Sunken fills: table header in apps, input addons, skeletons, code blocks. |
| muted-foreground | {grey-500} | #9ba3b0 | #3d3d3d | Secondary text on background, card, canvas and muted (≥4.7:1 light, ≥6.7:1 dark). |
| accent | #eef4f0 | #1f2738 | #e8efea | Hover fill for rows, menu items, ghost buttons. |
| accent-foreground | {foreground} | #e8e8e8 | #0b0b0b | Text on accent. |
| border | {grey-200} | #2a3242 | #6b6b6b | Hairline dividers and card borders (decorative, never the only boundary of a control). |
| input | {grey-400} | #657083 | #1a1a1a | Borders of inputs, selects, checkboxes: ≥3:1 on card in both themes. |
| ring | {forest-600} | {emerald-400} | #0e4d33 | 2px focus ring, offset 2px. ≥3:1 on every surface. |
| destructive | {note-red} | #f87171 | #9a0000 | Destructive buttons, error text, failed status. Pair with an icon and a word. |
| destructive-foreground | #ffffff | {navy-950} | #ffffff | Text on destructive. |
| destructive-subtle | #fbeaea | #3a1a1f | #fbeaea | Error badge and alert ground. |
| success | {forest-600} | {emerald-400} | #004a73 | Success / settled / cleared status text and icon. Same hue as brand green: always with ✓ icon + word. High contrast theme: blue (#004a73), so success and error never rely on red vs green. |
| success-subtle | {forest-50} | #14302a | #e6f1f8 | Success badge and alert ground. |
| warning | #a15c00 | #fbbf24 | #6b3d00 | Warning / pending / near-limit status text and icon. 5.2:1 on white. |
| warning-subtle | #fdf3e1 | #33280f | #fdf3e1 | Warning badge and alert ground. |
| info | {link-blue} | #8ea2f0 | #2a2f8f | Informational status, external links in apps. |
| info-subtle | #eef1fc | #1c2340 | #eef1fc | Info badge and alert ground. |
| table-head | {forest-900} | #0f2a20 | #023020 | Document table header row (with white text). In apps use `muted` instead. |
| table-head-foreground | #ffffff | #e8e8e8 | #ffffff | Text on table-head. |
| table-stripe | {forest-50} | #17201d | #f1f3f1 | Document table zebra rows. Apps: no zebra, row hover with `accent`. |
| sidebar | {navy-950} | #080d18 | #000000 | App sidebar ground (navy in BOTH themes: the brand anchor of every product). |
| sidebar-foreground | #c8cdd6 | #c8cdd6 | #ffffff | Nav labels on sidebar. 11.7:1. |
| sidebar-primary | {emerald-400} | {emerald-400} | #6ee7b7 | Active nav item text/icon on sidebar. |
| sidebar-accent | #151d2e | #151d2e | #1a2232 | Active and hover nav item fill on sidebar. |
| sidebar-border | {navy-700} | #1f2738 | #8a8a8a | Dividers inside the sidebar. |
| chart-1 | {forest-600} | {emerald-400} | #0e4d33 | First series / 'our' series. |
| chart-2 | {link-blue} | #8ea2f0 | #2a2f8f | Second series. |
| chart-3 | #c2830a | #fbbf24 | #8a5300 | Third series (amber). |
| chart-4 | #7d8696 | #9ba3b0 | #3d3d3d | Fourth series / baseline, previous period. |
| chart-5 | #a43f7c | #e58ac0 | #7a1f5c | Fifth series (use sparingly). |
Type
Jost for the interface and text; Bricolage Grotesque (font-display) only for wordmarks, KPI numbers and diagram titles; Geist Mono (font-mono) for IDs, message types, eyebrows and table headers.
Brand
wordmark · 48px/1 · 600
jengacore.
display-xl · 56px/1.05 · 600
Marketing hero, microsite headline
diagram-title · 28px/1.15 · 600
Title above a proposal diagram (sentence that states the claim)
kpi · 32px/1.1 · 600
1,284,330
Application
app-title · 24px/32px · 600
Page title, one per page
app-heading · 18px/26px · 600
Section heading inside a page
app-card-title · 15px/22px · 600
Card and dialog titles
app-body · 14px/20px · 400
Default UI text, table cells
app-body-strong · 14px/20px · 500
Emphasised cell values, button labels
app-small · 13px/18px · 400
Helper text, metadata, timestamps
app-label · 12px/16px · 500
Form labels, table column headers (sentence case)
Data & labels
eyebrow · 11px/16px · 500
Uppercase eyebrow above titles, group labels in diagrams and app section kickers
data-mono · 13px/18px · 400
tx_01J9ZK4Q7MXH3V
diagram-meta · 8px/12px · 400
Diagram node subtitles and edge labels (SVG at 800 viewBox)
Spacing
| space-1 | 4px | Icon-to-label gap, badge padding-y. |
| space-2 | 8px | Diagram grid unit; gaps inside controls. |
| space-3 | 12px | Input/button padding-x (sm), table cell padding-x. |
| space-4 | 16px | Card padding (compact), form field gap. |
| space-5 | 20px | Card padding (default). |
| space-6 | 24px | Gap between cards; page gutter (desktop). |
| space-8 | 32px | Section gap inside a page. |
| space-12 | 48px | Slide and page margins (scaled). |
| space-16 | 64px | Slide outer margin at 1280×720. |
Radius
| radius-xs | 2px | Diagram tag chips (VM, x3), table container, kbd. |
| radius-sm | 4px | Badges, checkboxes, inner diagram nodes, ID chips. |
| radius-md | 6px | Buttons, inputs, diagram nodes, slide cards. The default. |
| radius-lg | 8px | Cards, dialogs, diagram group frames. |
| radius-full | 9999px | Avatars, status dots, pill toggles. |
Stroke
| stroke-hairline | 0.8px | Diagram group frames, legend rule, cover diagonal lines (0.3pt in print). |
| stroke-node | 1px | Diagram node borders, card borders, input borders. |
| stroke-edge | 1.2px | Diagram arrows (solid = request/instruction, dashed 4,3 = response/statement). |
| stroke-rule | 2px | Heading rule under document H1 (1.2pt) and the wordmark underline. |
Motion
One curve, ease-jc = cubic-bezier(.2, .8, .2, 1). duration-fast 120ms for hover and press, duration-base 180ms for toggles and menus, duration-enter 320ms for panels and page enter, animate-fill 900ms for meters on first paint. Only the live dot and the SLA-breach tick loop. Never animate money. Reduced motion switches it all off.