Colors
Color Palette
Deep indigo as the primary brand color communicates trust, depth, and sophistication. The vibrant teal accent is the signature highlight, used for metrics, CTAs, and interactive emphasis.
Brand
#120a4d#20127cAccents
#0bd2a2#fa8b45#dd2c8dNeutrals
#111827#1f2937#4b5563#6b7280#9ca3af#d1d5db#e5e7eb#f3f4f6#f5f5f5#ffffffSemantic
#22c55e#ef4444#fa8b45#0bd2a2Typography
Type Scale
The typeface is Inter, a clean variable font designed for screens. Body text is 16px with relaxed line-height. Headings use extrabold to bold weights with tight leading.
Heading 1 — 48px desktop / 36px mobile
h1 · --nm-fs-5xl / --nm-fs-4xl · weight: 800Heading 2 — 36px desktop / 30px mobile
h2 · --nm-fs-4xl / --nm-fs-3xl · weight: 700Heading 3 — 30px desktop / 24px mobile
h3 · --nm-fs-3xl / --nm-fs-2xl · weight: 600Heading 4 — 20px
h4 · --nm-fs-xl · weight: 600Heading 5 — 18px
h5 · --nm-fs-lg · weight: 500Heading 6 — 14px Uppercase
h6 · --nm-fs-sm · weight: 600 · uppercase · tracking-widerBody — 16px / 1.625 line-height. Noumena Digital develops the Noumena Protocol Language for modeling and automating multi-party agreements across financial services and energy markets.
p · --nm-fs-base · --nm-lh-relaxedLead text — 20px. Used for hero subheadings and introductory paragraphs.
.nm-lead · --nm-fs-xlOverline Text
.nm-overline · teal · uppercase · tracking-wider · 14px semiboldInline code elements use the monospace stack.
Spacing
Spacing Scale
A consistent spacing scale based on 4px increments. All values in rem.
Border Radius
Rounded corners are prevalent. Cards typically use radius-xl (16px) or radius-2xl (24px) for a modern, approachable feel.
Components
Buttons
Semibold, rounded, with smooth transitions. Primary is deep indigo; secondary is an outline that fills on hover. The teal accent variant works well for positive actions.
Variants — Light Background
Sizes
With Arrow
Disabled
Variants — Dark Background
Form Inputs
Clean bordered inputs with an indigo focus ring. The focus state adds a subtle brand-colored box shadow.
Checkbox
Custom checkboxes built on native <input type="checkbox">. No JavaScript required — the CSS :checked pseudo-class drives all state changes.
States
In a form group
Radio
Mutually exclusive selection within a group. Styled using native <input type="radio"> and the CSS :checked pseudo-class — no JavaScript required.
States
Radio group
Toggle
Binary on/off control implemented as a styled <input type="checkbox">. Fully keyboard-accessible and screen-reader friendly. No JavaScript required.
States
In a settings list
Cards
Rounded corners (16px), subtle borders, and hover elevation. The elevated variant adds a shadow lift. Glass cards are for dark/gradient backgrounds.
Standard Cards
NPL Platform
Model multi-party agreements with the Noumena Protocol Language and automate their lifecycle.
Protocol Engine
Execute agreement logic across parties with a decentralized runtime that ensures consistency.
Enterprise Ready
SOC 2 compliant infrastructure with role-based access, audit trails, and SSO integration.
Elevated Cards
Energy
Automate peer-to-peer energy trading and grid balancing agreements.
Finance
Streamline securities lending, repo agreements, and trade settlement.
Insurance
Digitise policy lifecycle management and parametric claim processing.
Glass Cards (Glassmorphism)
3-5x
Faster time-to-market for agreement-centric products.
90%
Reduction in manual reconciliation effort.
24/7
Automated execution with full audit trail.
Stats / Metrics
Large teal numbers with descriptive labels. Perfect for KPIs and impact sections.
Alerts
Rounded alerts with translucent backgrounds and subtle borders.
Badges
Code Block
Dark background with teal-colored syntax for NPL code samples and developer documentation.
protocol[p] MasterAgreement(
val party: Party,
val counterparty: Party,
val effectiveDate: DateTime
) {
initial state created;
state active;
state terminated;
};
Table
| Protocol | Parties | Status | Created |
|---|---|---|---|
| MasterAgreement-001 | E.ON, CKW | Active | 2026-01-15 |
| EnergyTrade-042 | Swisscom, N-Ergie | Active | 2026-02-01 |
| RepoAgreement-007 | AllUnity, 21X | Pending | 2026-02-18 |
Section Backgrounds
Three background variants to create visual rhythm across pages.
Light Section
Uses .nm-section--light for the soft gray background (#f5f5f5).
Dark Section
Uses .nm-section--dark for the near-black background (#111827) with light text.
Gradient Section
Uses .nm-section--gradient for the signature gray-900 to indigo gradient. The primary hero treatment.
Layout
Page Layout
This section describes the intended page structure in framework-agnostic terms. Implement it using whatever technology stack is appropriate — Tailwind, MUI, plain CSS, etc. The header and footer on this page are the live visual reference. The source HTML and CSS of this page (styleguide/index.html and styleguide/components.css) are the canonical implementation — read them directly to understand the exact markup structure, class names, and styles to mimic, then adapt to your own framework.
Light & Dark Mode
This design system supports both a light mode (default) and a dark mode. The toggle button in the top-right of the header switches between them. The chosen mode is persisted to localStorage under the key nm-theme and restored on the next page load via an inline <script> in <head> — this prevents a flash of the wrong theme before CSS renders.
The mechanism is intentionally simple: toggling dark mode adds data-theme="dark" to the <html> element; removing it reverts to light. All adaptive colors are defined as semantic surface tokens (e.g. --nm-surface-page, --nm-surface-text, --nm-surface-border) in tokens.css. Their values are overridden inside the [data-theme="dark"] block — no component CSS needs to know about themes at all. Elements that are intentionally always dark (footer, code blocks, gradient sections) continue to use raw palette tokens directly and are therefore unaffected by the theme switch.
When building a new page or component: use semantic surface tokens for any color that should adapt, and raw palette tokens for any color that should stay fixed regardless of mode. Read tokens.css for the full list of both.
Overall Structure
Every page is a full-height vertical stack with three regions in order: a sticky header at the top, a main content area that grows to fill all remaining space, and a footer anchored to the bottom. The body should never be shorter than the viewport — the footer must never float in the middle of a short page.
Content Width
All content is horizontally centred with a maximum width of 1280 px. Horizontal padding should scale with the viewport: 16 px on mobile (below 640 px), 24 px from 640 px, and 32 px from 1024 px. Apply this consistently as a wrapper inside every section — do not hardcode widths on individual elements.
Header & Navigation
The header is a slim white bar with a subtle bottom border. It sticks to the top of the viewport at a high z-index so it remains visible while the page scrolls. Inside, the layout is a single horizontal row with three parts:
- Logo — left-aligned, roughly 14 px tall, links to the home page.
- Nav links — right-aligned, pill-shaped text links. Each gets a subtle rounded background with the brand primary colour on hover. The current/active page uses a light-tinted primary background. These links are hidden below 640 px.
- Burger icon — a three-line icon button, shown only below 640 px. Tapping it reveals the nav in a dropdown that overlays the page content directly below the header without pushing anything down. Tapping a link, tapping the burger again, or clicking outside should all close the menu. See the working implementation on this page for reference.
Footer
The footer sits on a near-black background (#111827) with generous top padding. It is divided into two layers:
- Column grid — stacked on mobile, three equal columns on screens 640 px and wider. The first column is the brand column: the logo (apply brightness/invert filtering so it is visible on the dark background), a short tagline below it, and social icon links (GitHub, LinkedIn) below that. The remaining columns are simple link lists — each starts with a small uppercase label (e.g. "Resources", "Company") followed by muted links that brighten to white on hover.
- Bottom bar — separated from the grid by a top border. Copyright text on the left, legal links (Privacy, Impressum, etc.) on the right. Both use small, low-contrast text. Stacked on mobile, side by side on wider screens.
Usage Guidelines
Design Principles
Deep Indigo Identity
The primary brand color (#120a4d) anchors all key UI elements. It pairs with the teal accent (#0bd2a2) for interactive highlights and metric callouts. Orange and pink are reserved for secondary emphasis.
Modern & Approachable
Large border-radius values (12-24px on cards), generous spacing, and smooth 200ms transitions create a contemporary, friendly feel despite the enterprise positioning.
Glassmorphism on Dark
On gradient/dark backgrounds, use the glass card variant with backdrop-blur and white overlays for depth. This is the signature visual treatment for hero sections.
Mobile-First Responsive
Start with stacked layouts. Grid columns kick in at 768px (md) and 1024px (lg). Container padding scales from 16px to 32px.
Breakpoints
| Name | Min-width | Usage |
|---|---|---|
| Mobile | < 640px | Single column, 16px padding |
| Small | 640px | Wider padding (24px) |
| Medium | 768px | 2-col grids, 24px gap |
| Large | 1024px | 3-4 col grids, 32px gap, larger headings |
Color Usage Summary
| Token | Usage |
|---|---|
#120a4d Primary | Buttons, links, headings, nav active state |
#20127c Primary Dark | Hover states, secondary emphasis |
#0bd2a2 Teal | Metrics, overlines, success states, highlights |
#fa8b45 Orange | Warnings, secondary accent, pending states |
#dd2c8d Pink | Tertiary accent, badges, special callouts |
#111827 Gray 900 | Dark sections, footer, code backgrounds |
#f5f5f5 BG Light | Alternate section backgrounds |