d1 | Nio Digital Business Platform

01 · Foundations

Design principles

Four commitments that guide every decision. When guidance is unclear or two patterns compete, the principles decide.

01

Simplicity first

Remove before you add. Every element earns its place; the shortest path to the task wins over the cleverest interface.

02

Accessibility by default

Designed for everyone from the start — AA contrast, full keyboard support, and clear focus are requirements, not options.

03

Consistent interactions

The same action behaves the same way everywhere. Shared components, states, and motion build trust and muscle memory.

04

Mobile-friendly

Layouts respond from 360px up. Touch targets stay at least 44px, and content reflows gracefully on every screen.

02 · Brand

Logo & brand assets

The Nio DBP mark is the brand's most visible asset — never redrawn, recolored, or distorted. Download the approved artwork below and use the right variant for each surface.

Primary lockup

Horizontal · on lightnio-dbp-h-light.png

PNG

Horizontal · on darknio-dbp-h-dark.png

PNG

Partner co-brand & “Powered by Nio”

Co-brand example · lightnio-dbp-credit-union-light.png

Co-brand example · dark

Powered by Niorequired in partner apps

i

The “Powered by Nio” mark is required in partner apps

Every partner-delivered Nio DBP product must display this lockup in the footer or About screen. It may not be removed, hidden, or replaced with text. “Powered by” sits to the left of the divider; the Nio mark always stays to the right.

Clear space, minimum size & usage

✓ Do

Use supplied artwork on a clean, single-tone surface with clear space ≥ the height of the “n”.

✕ Don't

Don't recolor, re-tint, or place the mark on busy or off-brand backgrounds.

✓ Do

Use the inverted (dark) asset on navy and photographic backgrounds.

✕ Don't

Don't stretch, squash, rotate, or otherwise distort the artwork.

Context	Minimum width	Notes
Digital · primary lockup	`180 px`	Keeps the descriptor legible.
Digital · wordmark only	`96 px`	Use where the descriptor is implied by context.
App icon / favicon	`32 px`	Use the “i-dot” mark only.
Print	`26 mm`	600 dpi minimum; vector for large format.

03 · Foundations

Color system

A limited, reusable palette built on Deep Navy and Electric Blue. Every value maps to a token so product code never references a raw hex.

Primary

Deep Navy

#010133

--navy-900

Indigo

#2B398E

--navy-700

Blue

#007FC6

--blue-600

Blue 100

#DCEFFB

--blue-100

Secondary & accent

Cool Gray

#6B7280

--grey-500

Emerald

#10B981

--emerald-500

Emerald soft

#D3F4E7

--emerald-100

Neutrals

Light Grey

#D7DBDE

--grey-200

Grey 100

#EEF0F3

--grey-100

Grey 50

#F7F8FA

--grey-50

White

#FFFFFF

--white

Interaction / hover

Blue · hover

#006AA6

--blue-700

Indigo · hover

#34449C

--navy-600

Emerald · hover

#0E9F70

--emerald-600

Status

Success

#15A868

--green-500

Warning

#C47E00

--amber-500

Error

#D83A3A

--red-500

Info

#007FC6

--blue-600

Success soft

#D6F5E3

--green-100

Error soft

#FBDADA

--red-100

Text & background roles

Role	Token	Value	Used for
Text · default	`--fg`	#14193A	Body copy, the default ink.
Text · strong	`--fg-strong`	#0A1150	Headings and emphasis.
Text · muted	`--fg-muted`	#5A6488	Secondary & helper text.
Background · page	`--bg`	#F7F8FA	App canvas behind cards.
Background · surface	`--canvas`	#FFFFFF	Cards, inputs, surfaces.
Border · default	`--border`	#D7DBDE	Dividers, input borders.

04 · Foundations

Typography

One typeface — Inter — across the whole platform, with JetBrains Mono for code, data, and labels. A tight scale keeps hierarchy obvious.

H1 · Display36px / 700
line-height 1.1

Build once, ship everywhere

H228px / 600
line-height 1.15

Unified platform, consistent UX

H322px / 600
line-height 1.25

Components with documented states

H418px / 600
line-height 1.3

Section heading for dense forms

H516px / 600
line-height 1.4

Card title and list group label

H614px / 700 · caps
letter-spacing .06em

Overline / eyebrow

Body16px / 400
line-height 1.5

The body style carries the bulk of the interface. It stays at 16px for comfortable reading and meets contrast at AA on every surface in the palette.

Body · small14px / 400
line-height 1.5

Secondary copy, helper text, and table cells use the small body size.

Caption12px / 500
line-height 1.4

Captions, timestamps, and metadata

Mono13px / 500
JetBrains Mono

--token-name: value · $1,284.00

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

05 · Foundations

Spacing system

A 4px base scale governs all padding, margins, and gaps. Sticking to the scale keeps vertical rhythm and component density consistent.

--sp-1 · 4px

--sp-2 · 8px

--sp-3 · 12px

--sp-4 · 16px

--sp-6 · 24px

--sp-7 · 32px

--sp-9 · 48px

--sp-10 · 64px

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.

06 · Foundations

Layout & grid

A responsive 12-column grid structures every page. Columns flex; gutters and page margins stay fixed to the spacing scale.

1

2

3

4

5

6

7

8

9

10

11

12

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

07 · Foundations

Iconography

A single line-icon set drawn on a 24px grid with a 1.75px stroke, rounded caps and joins. Icons clarify — never decorate.

Library · 24px grid

Sizes & stroke

16px

20px

24px

32px

Inline with text	`16px`
Buttons & inputs	`20px`
Standalone / nav	`24px`
Stroke weight	`1.75px`

08 · Components

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

Recipient *We'll never share this address.

Notes

Dropdown & choices

Account

Email receipt Save payee

Standard Express

Notifications on

Badges

Default Active Paid Pending Failed

Tooltip & navigation

Send by 4 PM ET to clear today

Alerts

i

Heads upStatements for April are now available.

✓

Wire sent$12,400.00 to Northwind Ltd. cleared.

!

Cut-off approachingSame-day wires close in 35 minutes.

✕

Payment failedInsufficient funds in the operating account.

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.

09 · Components

Component states

Every interactive element ships the same set of states so behaviour is predictable across the platform.

Button

Default

Hover

Focus

Active

Disabled

Loading

Text input

Default

Focus

Error

Disabled

10 · Reference

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 #010133 on White	19.9:1	AAA
Indigo #2B398E on White	10.1:1	AAA
Blue #007FC6 on White	4.3:1	UI / large only
Blue 700 #006AA6 on White	5.8:1	AA text
White on Deep Navy #010133	19.9:1	AAA

11 · Reference

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:   #2B398E;
  --color-navy:      #010133;
  --color-accent:    #007FC6;
  --color-secondary: #6B7280;
  --color-emerald:   #10B981;
  --color-bg:        #F7F8FA;
  --color-text:      #14193A;
  --space-md:        16px;
  --radius:           8px;
  --font-size-body:   16px;
  --font-family:      'Inter', sans-serif;
}

tokens.json

{
  "color-primary": "#2B398E",
  "color-navy":    "#010133",
  "color-accent":  "#007FC6",
  "color-secondary":"#6B7280",
  "color-emerald": "#10B981",
  "color-bg":      "#F7F8FA",
  "color-text":    "#14193A",
  "spacing-md":    "16px",
  "border-radius": "8px",
  "font-size-body":"16px"
}

Token	Value	Purpose
`color-primary`	#2B398E	Brand indigo — headings, key UI.
`color-navy`	#010133	Deep navy — footers, dark surfaces.
`color-accent`	#007FC6	Primary actions, links, focus.
`color-secondary`	#6B7280	Cool gray — secondary text, muted UI.
`color-emerald`	#10B981	Accent — positive emphasis, highlights.
`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.

12 · Documentation

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›
  );
}

✓ Do

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.

✕ Don't

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.

Energy Service

Digital Training Academy

Design principles

Simplicity first

Accessibility by default

Consistent interactions

Mobile-friendly

Logo & brand assets

Primary lockup

Partner co-brand & “Powered by Nio”

The “Powered by Nio” mark is required in partner apps

Clear space, minimum size & usage

Color system

Primary

Secondary & accent

Neutrals

Interaction / hover

Status

Text & background roles

Typography

Spacing system

Inside components

Between sections

Radius

Layout & grid

Iconography

Library · 24px grid

Sizes & stroke

Core components

Buttons

Text input & textarea

Dropdown & choices

Badges

Tooltip & navigation

Alerts

Card & table

Modal

Component states

Button

Text input

Accessibility

Color contrast

Keyboard

Focus indicators

Screen readers

Touch targets

Motion

Design tokens

CSS custom properties

tokens.json

For developers

Use the tokens & classes

React component