BusinessPress
Sign in Book a demo
v1.0 March 2026
Nium

Brand Identity

Overview

The real-time payments infrastructure for the modern economy.

Nium is a global leader in real-time cross-border payments, offering a modular platform that enables banks, payment providers, and businesses to collect, convert, and disburse funds across 190+ countries.

This document defines Nium's visual identity, design tokens, component library, and communication guidelines. Use it as the single source of truth when creating any Nium-branded experience.

Color

Bold. Confident. Built for trust.

The Nium palette combines a vibrant teal with deep navy to convey fintech authority and modern energy. Purple provides accent depth. Neutrals keep interfaces clean and readable.

Primary

Nium Blue

#24BAD6

rgb(36, 186, 214)

CTAs, accents, links

Dark Blue

#0B0E58

rgb(11, 14, 88)

Headings, dark sections

Purple

#7461D4

rgb(116, 97, 212)

Gradients, accents

Dark Blue 50

#3845B8

rgb(56, 69, 184)

Hover states, secondary

Neutrals

White

#FFFFFF

rgb(255, 255, 255)

Primary background

Extra Light Grey

#F5F5F5

rgb(245, 245, 245)

Alt background

Light Grey

#DFDFDF

rgb(223, 223, 223)

Borders, dividers

Grey 50

#898989

rgb(137, 137, 137)

Muted text

Dark Grey

#3A3A3A

rgb(58, 58, 58)

Body text

Status & Feedback

Success

#16A34A

rgb(22, 163, 74)

Confirmations, active

Warning

#F59E0B

rgb(245, 158, 11)

Alerts, caution

Danger

#DC2626

rgb(220, 38, 38)

Errors, destructive

Info

#3B82F6

rgb(59, 130, 246)

Informational

Gradients

Text Gradient 1

Teal to Purple — Headlines, emphasis text

Text Gradient 2

Purple to Cyan — Alternative emphasis

Typography

One typeface. Every purpose.

Inter is Nium's sole typeface — a modern, highly legible sans-serif designed for screens. Weight and size variations handle the full range from hero headlines to micro-copy.

Headlines

Aa

Inter Extrabold

Weight 800

line-height: 1.1–1.15

letter-spacing: -0.03em

color: var(--color-dark-blue)

Body

Aa

Inter Regular / Medium

Weight 400 / 500

line-height: 1.5–1.7

letter-spacing: normal

color: var(--color-dark-grey)

Labels & UI

Aa

Inter Bold

Weight 700

line-height: 1.2–1.4

Used for buttons, badges, nav

color: varies by context

Type Scale

Token Class Size Specimen
H1 h1 text-h1 Real-time payments
H2 h2 text-h2 Global infrastructure
H5 h5 text-h5 Card title
Body body text-body Body text for paragraphs and descriptions.
Body SM body-sm text-body-sm Smaller body text for supporting content.
CTA text-cta text-cta Call to action
Voice & Tone

Clear. Confident. Never complicated.

Nium speaks with the authority of a global payments leader, but never hides behind jargon. We make complex financial infrastructure feel accessible and trustworthy.

Clarity

Explain intricate payment flows simply. If a sentence needs re-reading, rewrite it.

"Send money to 190+ countries in real time. One API. No intermediaries."

Authority

Lead with facts and numbers. Nium's scale speaks for itself — let data do the convincing.

"38M+ transactions processed. 190+ countries. 40+ licenses worldwide."

Trust

Compliance isn't a footnote — it's a feature. Surface security and regulation proactively.

"PCI DSS Level 1 certified. SOC 2 compliant. Licensed in every market we serve."

Precision

Use exact technical language where it matters. Vague claims erode credibility with developer and enterprise audiences.

"Sub-second settlement via local rails. FX conversion at interbank rates."

Avoid

× Buzzwords ("revolutionize", "disrupt", "game-changing")
× Passive voice in CTAs or product descriptions
× Vague superlatives ("best-in-class", "world-class")
× Exclamation marks in product or technical copy
× Emoji in documentation or developer-facing content
× Unsubstantiated claims without data
Components

Living elements.

Core UI patterns used across all Nium interfaces. Each component maps to predefined CSS classes for consistency.

Buttons

Get early access Learn more View docs
Info action Delete Ghost link
Small Disabled
Tokens
btn-primary Teal bg, white text, pill radius, px-8 py-3.5
btn-secondary Dark blue bg, white text, hover to dark-blue-50
btn-outline Teal border, teal text, fill on hover
btn-ghost No bg, dark blue text, underline on hover

Cards

Feature Card

A card for showcasing product features with icon, title, and description.

1
Step Card

Used for numbered processes and how-it-works flows.

"Nium made our global expansion effortless."

Jane Doe

VP Payments, Acme Corp

Dark Card

For use on dark sections. Maintains readability with white text.

Badges & Tags

Success Info Warning Danger Neutral Outline Outline Blue
Chip Success Chip Neutral
Tag Dark

Accordion

How does Nium handle compliance?
Nium holds 40+ licenses globally and is PCI DSS Level 1 certified. Compliance is built into every transaction, not bolted on.
What payment methods are supported?
Nium supports bank transfers, card payments, digital wallets, and real-time payment rails across 190+ countries.
Layout

Containers, spacing & structure.

Every page follows a strict container hierarchy derived from nium.com. Sections are full-bleed; containers center content; content-widths constrain prose. Never nest containers.

Container Hierarchy

Three levels, each with a single job. The outer section handles background color and full-bleed. The container centers content with responsive gutters. Narrow wrappers constrain text for readability.

section (full-width)
.container max-width: 1280px · mx-auto
narrow wrapper max-w-2xl / max-w-3xl / max-w-lg
Container Rules
Token / Class Value Responsive When to use
.container max-width: 1280px
margin: 0 auto		 ≤1300px: px-8
≤600px: px-5
Nested: no padding		 Primary content wrapper inside every section. One per section, never nested.
.container-content max-width: 1280px
margin: 0 auto		 Same as .container Alias for .container within page builder templates. Identical behavior.
max-w-3xl mx-auto 768px centered — Long-form body text blocks. Keeps line length at ~75 characters.
max-w-2xl 672px — Section descriptions, subheadings beneath a section title.
max-w-lg 512px — Centered hero headlines, form containers, narrow call-to-action blocks.
max-w-sm 384px — Sidebar content, small modals, tooltip panels.
Section Pattern

Every content section follows this exact structure. Backgrounds go on the section. Padding goes on the section via .section class. The container only centers.

<section class="section section-white">
  <div class="container">
    <h2 class="h2">Title</h2>
    <p class="body max-w-2xl">Description</p>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10">
      ...
    </div>
  </div>
</section>
Section Spacing
.section Default section
py: 80px
px: 80px
.section (mobile) ≤ 767px
py: 32px
px: 20px
Section backgrounds
.section-white .section-light .section-dark
Breakpoints
xs / mobile
300–599px
sm
≥ 600px
md
≥ 900px
lg
≥ 1200px
xl
≥ 1500px

Container behavior: At ≤1000px the container becomes 100% width. Gutters switch from 0 → 32px at ≤1300px → 20px at ≤600px.

Do's & Don'ts
✓ Do
  • Use .container once per section, directly inside the <section>
  • Use max-w-2xl to constrain description text below headings
  • Alternate .section-white and .section-light for visual rhythm
  • Let the section handle padding, not the container
× Don't
  • Nest .container inside another .container
  • Add horizontal padding to .container — gutters are handled automatically
  • Use arbitrary max-widths like max-w-[1100px] — stick to the defined scale
  • Put background colors on the container — they go on the section
Border Radius
--radius-card-sm 12px
--radius-card 16px
--radius-pill-sm 30px
--radius-pill 48px
--radius-circle 100px
Shadows
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
Section Patterns

Page composition.

Every marketing page follows a consistent section rhythm. Alternate between light and dark backgrounds. Each section begins with an uppercase teal label, a bold headline, and descriptive body text.

section-white
section section-white

Default content sections, feature grids

section-light
section section-light

Alternating sections, FAQs, spacing

section-dark
section section-dark

Hero, voice & tone, CTAs, use cases

Section Anatomy
1

Label

Uppercase teal text, tracking-widest

2

Headline

h2, extrabold, with optional gradient word

3

Description

body class, max-w-2xl, dark grey

4

Content

Cards, grids, stats, or media

5

CTA

Optional btn-primary or btn-ghost

Quick Reference

Design tokens.

All CSS custom properties available for theming and component styling.

tokens.css

/* -- Colors -- */

--color-blue: #24BAD6;

--color-dark-blue: #0B0E58;

--color-dark-blue-40: #374194;

--color-dark-blue-50: #3845B8;

--color-purple: #7461D4;

--color-dark-grey: #3A3A3A;

--color-grey-50: #898989;

--color-extra-light-grey: #F5F5F5;

--color-light-grey: #DFDFDF;

 

/* -- Semantic -- */

--primary: #24BAD6;

--secondary: #0B0E58;

--success: #16A34A;

--warning: #F59E0B;

--danger: #DC2626;

--info: #3B82F6;

 

/* -- Radius -- */

--radius-card: 16px;

--radius-card-sm: 12px;

--radius-pill: 48px;

--radius-pill-sm: 30px;

--radius-circle: 100px;

 

/* -- Layout -- */

--section-padding-x: 80px;

--section-padding-y: 100px;

--container-max: 1440px;

--content-max: 1280px;

 

/* -- Font -- */

--font-family: "Inter", sans-serif;

AI Agent Prompt

Design system prompt for coding agents.

Copy this prompt into your AI coding agent's system instructions to generate interfaces that are visually consistent with the Nium design system. It encodes colors, typography, spacing, component patterns, and layout conventions.

NIUM DESIGN SYSTEM -- AI CODING AGENT INSTRUCTIONS

You are generating UI for the Nium brand. Follow these rules exactly.

1. COLORS

Primary (CTAs, links, accents): #24BAD6 (nium-blue)

Secondary (headings, dark sections, nav): #0B0E58 (nium-dark-blue)

Purple accent (gradients): #7461D4

Dark blue hover/secondary: #3845B8 (nium-dark-blue-50)

Dark blue card bg: #374194 (nium-dark-blue-40)

Body text: #3A3A3A (nium-dark-grey)

Muted text: #898989 (nium-grey-50)

Borders: #DFDFDF (nium-light-grey)

Light backgrounds: #F5F5F5 (nium-extra-light-grey)

White: #FFFFFF

Success: #16A34A | Warning: #F59E0B | Danger: #DC2626 | Info: #3B82F6

Text gradient: background: linear-gradient(90deg, #24BAD6 10%, #786BFC 49.52%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

2. TYPOGRAPHY

Font: Inter (Google Fonts), sans-serif. No other typefaces.

H1: font-extrabold, tracking tight (-0.03em), color nium-dark-blue. Use class "h1" or "h1-light" on dark bg.

H2: font-extrabold, tracking tight. Use class "h2" or "h2-light".

H5: font-bold. Use class "h5" or "h5-light".

Body: font-normal, color nium-dark-grey (#3A3A3A). Use class "body" or "body-light" on dark bg.

Body small: class "body-sm". Muted/subtle: class "text-muted" or "text-subtle".

Section labels: uppercase, text-nium-blue, text-sm, tracking-[0.15em] or use badge badge-outline-blue.

3. BUTTONS

All buttons use pill radius (rounded-full/48px). Class prefix: "btn".

Primary: "btn btn-primary" (teal bg, white text, px-8 py-3.5)

Secondary: "btn btn-secondary" (dark blue bg, white text)

Outline: "btn btn-outline" (teal border/text, fills teal on hover)

Outline white: "btn btn-outline-white" (for dark backgrounds)

Ghost: "btn btn-ghost" (no bg, underline on hover)

Small: add "btn-sm". Disabled: add "btn-disabled".

4. CARDS

Base card: "card" (white bg, rounded-card/16px, p-6, shadow-sm)

Feature card: "card-feature" with card-feature-icon, card-feature-title, card-feature-body

Step card: "card-step" with card-step-icon (numbered circle), card-step-title, card-step-body

Testimonial: "card-testimonial" with card-testimonial-quote, card-testimonial-author, card-testimonial-role

Dark card: "card-dark" (dark blue bg, white text)

Accordion: "card-accordion" with card-accordion-heading, card-accordion-title, card-accordion-body

Bordered: add "card-bordered". Elevated: add "card-elevated".

5. BADGES

"badge badge-success" (teal bg), "badge badge-info" (purple bg), "badge badge-warning", "badge badge-danger"

"badge badge-neutral" (light grey bg), "badge badge-outline", "badge badge-outline-blue"

6. SECTIONS & LAYOUT

Use "section" class for vertical padding (px-section-x, py-section-y = 80px, 100px).

Background variants: "section-white", "section-light" (#F5F5F5), "section-dark" (nium-dark-blue).

Content container: "container-content" (max-w-1280px, mx-auto).

Alternate section backgrounds for visual rhythm: white → light → dark → white.

Every section starts with: a section label badge, then h2 heading, then body paragraph, then content.

7. SECTION ANATOMY PATTERN

<section class="section section-white">

  <div class="container-content">

    <span class="badge badge-outline-blue mb-4">LABEL</span>

    <h2 class="h2 mt-4">Headline here.</h2>

    <p class="body mt-3 max-w-2xl">Description text.</p>

    <div class="mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      

    </div>

  </div>

</section>

8. RESPONSIVE BREAKPOINTS

Mobile-first. xs/mobile: 300-599px, sm: 600px, md: 900px, lg: 1200px, xl: 1500px.

Grid pattern: grid-cols-1 on mobile, md:grid-cols-2, lg:grid-cols-3 (or lg:grid-cols-4).

Stack to horizontal: flex-col on mobile, md:flex-row on tablet+.

9. ICONS

Use Phosphor icons via svg() function: {{ svg('phosphor-icon-name', 'w-5 h-5 text-nium-blue') }}

Also available: heroicons (heroicons-name), line-awesome (lineawesome-name).

10. INTERACTIVITY

Use Alpine.js v3 for client-side behavior (accordions, tabs, toggles, modals).

Never add comments inside Alpine.js attributes (x-data, x-init, @click) -- they break the parser.

11. RULES

- Never use inline <style> tags. Use Tailwind utility classes only.

- Never hardcode colors. Use Tailwind nium-* classes or CSS variables.

- Never create custom CSS class names. Use existing classes from the design system.

- Use semantic HTML5 (section, nav, header, main, article, footer).

- Include ARIA attributes for accessibility.

- Mobile-first responsive design.

- Gradient text class: "nium-text-gradient-1" for headline emphasis words.

Build with the brand.

Use these guidelines, tokens, and the AI agent prompt to create experiences that are unmistakably Nium.

Visit nium.com Back to top

v1.0 — March 2026

Cart