The single source of truth for every Nio DBP experience.
A practical design system for the Nio Digital Business Platform — principles, brand, tokens, and components that let designers, developers, and partners ship consistent products fast.
Design principles
Four commitments that guide every decision. When guidance is unclear or two patterns compete, the principles decide.
Simplicity first
Remove before you add. Every element earns its place; the shortest path to the task wins over the cleverest interface.
Accessibility by default
Designed for everyone from the start — AA contrast, full keyboard support, and clear focus are requirements, not options.
Consistent interactions
The same action behaves the same way everywhere. Shared components, states, and motion build trust and muscle memory.
Mobile-friendly
Layouts respond from 360px up. Touch targets stay at least 44px, and content reflows gracefully on every screen.
Logos
The Nio DBP logo pairs the Primary “nio” with the Secondary “DBP” and the Digital Business Platform descriptor. Download the approved artwork and use the version that matches the background.
Variations
Clear space & minimum size
| Rule | Value |
|---|---|
| Clear space (x) | Height of the “n” on every side |
| Min. width · digital | 160 px |
| Min. width · print | 35 mm |
| Favicon / avatar | Use “nio” only, 32 px+ |
Usage
Partner co-brand & “Powered by Nio”
Colors
Three brand colours carry the identity. Primary and Secondary drive calls to action; Deep Navy anchors text and dark surfaces. Neutrals do the rest.
- HEX
- #3A2EAF
- RGB
- 58 · 46 · 175
- CMYK
- 88 · 89 · 0 · 0
- HEX
- #007FC4
- RGB
- 0 · 127 · 196
- CMYK
- 84 · 42 · 0 · 0
- HEX
- #0A1F44
- RGB
- 10 · 31 · 68
- CMYK
- 100 · 89 · 41 · 48
Interaction states
| Colour | Default | Hover | Pressed | Soft fill | Used for |
|---|---|---|---|---|---|
| Primary | #3A2EAF | #2F2491 | #261D78 | #ECEBFA | Main CTA, links, focus, selection |
| Secondary | #007FC4 | #006AA3 | #00507D | #E3F1FA | Second CTA, info, highlights |
| Deep Navy | #0A1F44 | #142B57 | #061430 | #EEF1F6 | Headings, footers, dark surfaces |
Neutrals
Status
Light & dark mode
Account overview
Balances update in real time. Review pending transfers before the 4 PM cut-off.
Account overview
Balances update in real time. Review pending transfers before the 4 PM cut-off.
In dark mode the brand colours shift one step lighter so buttons and links keep AA contrast against Deep Navy. Secondary CTAs switch to navy labels.
Typography
Inter is the Nio DBP typeface for product, web, and print. JetBrains Mono is reserved for code, data, and labels.
Type scale
line-height 1.1
line-height 1.15
line-height 1.25
line-height 1.3
line-height 1.4
letter-spacing .06em
line-height 1.5
line-height 1.5
line-height 1.4
JetBrains Mono
| Style | Size | Weight | Line height | Letter spacing |
|---|---|---|---|---|
| H1 | 36px | 700 Bold | 1.1 | −0.02em |
| H2 | 28px | 600 SemiBold | 1.15 | −0.01em |
| H3 | 22px | 600 SemiBold | 1.25 | −0.01em |
| H4 | 18px | 600 SemiBold | 1.3 | 0 |
| H5 | 16px | 600 SemiBold | 1.4 | 0 |
| H6 / Overline | 14px | 700 Bold | 1.4 | 0.06em |
| Body | 16px | 400 Regular | 1.5 | 0 |
| Body small | 14px | 400 Regular | 1.5 | 0 |
| Caption | 12px | 500 Medium | 1.4 | 0 |
Icons
One line-icon set for the website and product, drawn on a 24 px grid with a 1.75 px stroke and rounded joins. Icons support labels; they never replace them.
Icon treatments
Line · defaultDeep Navy on light surfaces
Tinted tileFeature lists, cards
Solid PrimaryHero and campaign use
ReversedDark mode, footers
| Context | Size | Stroke | Colour |
|---|---|---|---|
| Inline with text | 16 px | 1.75 px | Inherit text colour |
| Buttons & inputs | 20 px | 1.75 px | Inherit label colour |
| Navigation & standalone | 24 px | 1.75 px | Deep Navy / Slate |
| Feature tiles | 28 px in 64 px tile | 1.75 px | Primary or Secondary on soft fill |
Marketing materials
Presentations, letterhead, and printed collateral follow the same tokens as the product UI. Use these page specs so every document reads as one brand.
| Document | Page size | Margins | Body type | Logo |
|---|---|---|---|---|
| Presentation | 1920×1080px | 96px safe area | 18px min | Bottom-right, 180px |
| Letterhead | A4 / Letter | 20mm | 10pt / 1.5 | Top-left, 42mm |
| Report | A4 portrait | 18mm | 11pt / 1.5 | Cover + footer |
| Business card | 85×55mm | 5mm | 8pt | Reverse, 30mm |
| Email signature | 320px wide | — | 12px | 140px |
- Start from the approved template rather than a blank file.
- Keep one accent colour per document.
- Embed Inter, or fall back to Arial for external files.
- Export print work as CMYK PDF/X-1a.
- Restyle headers or footers per document.
- Stretch the logo to fill a corner.
- Mix decorative fonts into brand documents.
- Screenshot slides in place of vector exports.
Spacing system
A 4px base scale governs all padding, margins, and gaps. Sticking to the scale keeps vertical rhythm and component density consistent.
Inside components
8–16px between related controls; 4px for tight icon/label pairs.
Between sections
24–48px to separate groups; 64px+ for major page sections.
Radius
4 / 8 / 12 / 16px. Inputs & buttons use 12px; cards 16px; pills 999px.
Layout & grid
A responsive 12-column grid structures every page. Columns flex; gutters and page margins stay fixed to the spacing scale.
| Breakpoint | Min width | Columns | Gutter | Margin |
|---|---|---|---|---|
Mobile · sm | 0–639px | 4 | 16px | 16px |
Tablet · md | 640px | 8 | 20px | 24px |
Desktop · lg | 1024px | 12 | 24px | 32px |
Wide · xl | 1440px | 12 | 24px | auto · max container 1200px |
Core components
The building blocks of every Nio DBP screen. Each is shown live with its variants — copy the markup and the scoped classes below.
Buttons
Six variants × three sizes. Primary for the main action, one per view.
Text input & textarea
Dropdown & choices
Badges
Tooltip & navigation
Alerts
Card & table
| Payee | Status | Amount |
|---|---|---|
| Northwind Ltd. | Paid | $12,400.00 |
| Atlas Freight | Pending | $3,275.50 |
| Civic Power Co. | Failed | $842.10 |
Modal
| Component | Variants | Accessibility requirement |
|---|---|---|
| Button | Primary, secondary, tertiary, danger, ghost, sizes sm/md/lg | Real ‹button›; visible focus ring; label or aria-label. |
| Text input | Default, with icon, prefix, error, disabled | Bound ‹label›; aria-invalid + described error. |
| Select | Native, sizes | Native control or full ARIA listbox + keyboard. |
| Checkbox / radio | Default, checked, indeterminate, disabled | Grouped with fieldset/legend. |
| Switch | On, off, disabled | role="switch" + aria-checked. |
| Modal | Dialog, confirm, sheet | Focus trap; Esc closes; aria-modal; return focus. |
| Tooltip | Top / bottom / left / right | Keyboard-reachable; aria-describedby. |
| Alert | Info, success, warning, danger | role="status" or alert for urgency. |
Component states
Every interactive element ships the same set of states so behaviour is predictable across the platform.
Button
Text input
Accessibility
Nio DBP targets WCAG 2.2 AA. Accessibility is a requirement for every component and every release.
Color contrast
Text ≥ 4.5:1, large text & UI ≥ 3:1. Never rely on color alone — pair with text or an icon.
Keyboard
Every action reachable and operable by keyboard, in a logical order, with no traps.
Focus indicators
A visible 4px focus ring on every interactive element. Never remove outlines without a replacement.
Screen readers
Semantic HTML first; ARIA only to fill gaps. Label every control and announce state changes.
Touch targets
Minimum 44×44px hit area on touch, with at least 8px between adjacent targets.
Motion
Respect prefers-reduced-motion; keep essential motion under 5s and non-looping.
| Pair | Ratio | Result |
|---|---|---|
| Deep Navy #0A1F44 on White | 16.3:1 | AAA |
| Primary #3A2EAF on White | 9.6:1 | AAA |
| White on Primary #3A2EAF | 9.6:1 | AAA |
| Secondary #007FC4 on White | 4.3:1 | Large / bold text, UI |
| White on Secondary #007FC4 | 4.3:1 | Bold labels 14 pt+ |
| Secondary 600 #006AA3 on White | 5.8:1 | AA text |
| Dark mode · #A9A2F0 link on Deep Navy | 7.1:1 | AAA |
| Dark mode · Navy on #5FB3E2 | 7.0:1 | AAA |
Design tokens
Design decisions stored as reusable values, shared one-to-one between design and code. CSS custom properties are the runtime source of truth; JSON feeds the build.
CSS custom properties
:root { --color-primary: #3A2EAF; --color-primary-hover: #2F2491; --color-secondary: #007FC4; --color-secondary-hover:#006AA3; --color-navy: #0A1F44; --color-success: #079455; --color-warning: #DC6803; --color-error: #D92D20; --color-info: #007FC4; --color-bg: #F7F8FA; --color-text: #0F1B33; --space-md: 16px; --radius: 8px; --font-family: 'Inter', sans-serif; } [data-theme="dark"] { --color-bg: #0A1F44; --color-surface: #142B57; --color-text: #FFFFFF; --color-primary: #5B50D6; --color-secondary: #5FB3E2; }
tokens.json
{
"color-primary": "#3A2EAF",
"color-secondary": "#007FC4",
"color-navy": "#0A1F44",
"color-success": "#079455",
"color-warning": "#DC6803",
"color-error": "#D92D20",
"color-info": "#007FC4",
"color-bg": "#F7F8FA",
"color-text": "#0F1B33",
"spacing-md": "16px",
"border-radius": "8px",
"font-size-body": "16px"
}
| Token | Value | Purpose |
|---|---|---|
color-primary | #3A2EAF | Main CTA, links, focus, selection. |
color-secondary | #007FC4 | Second CTA, info, highlights. |
color-navy | #0A1F44 | Headings, footers, dark surfaces. |
color-success / warning / error | #079455 · #DC6803 · #D92D20 | Status only, never decoration. |
spacing-md | 16px | Default gap between elements. |
border-radius | 8px | Base corner radius. |
font-size-body | 16px | Default body text size. |
font-family | Inter | Primary typeface. |
For developers
How to consume the system in the Nio DBP React app and elsewhere. Reference tokens by name, lean on semantic HTML, and never fork a component.
Use the tokens & classes
import "@nio/tokens/css"; .card { background: var(--color-bg); color: var(--color-text); padding: var(--space-md); border-radius: var(--radius); }
React component
import { Button, Input } from "@nio/react"; export function Pay() { return ( ‹form› ‹Input label="Amount" prefix="$" /› ‹Button variant="primary"›Send‹/Button› ‹/form› ); }
- Reference tokens by name — never a raw hex or px.
- Use semantic HTML:
‹button›,‹a›,‹table›. - Run an accessibility check in CI.
- Use tabular numerals for money.
- Fork or copy-paste a component to tweak it.
- Hard-code colors, spacing, or font sizes.
- Remove focus outlines without a replacement.
- Build a new pattern when one already exists.