The single source of truth for every Nio DBP experience.

Full colour · light backgroundsPNG

Reversed · dark backgroundsPNG

Variations

One colour · Deep Navysingle-ink print, embossing

PNG

Reversed on Primarycampaign & hero surfaces

Reversed on Deep Navyfooters, dark mode

Clear space & minimum size

xxxx

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

✓ Do

Use full colour on white or light neutral backgrounds.

✓ Do

Use the reversed logo on Deep Navy, Primary, or photography.

✕ Don't

Don't place the full-colour logo on brand colours.

✕ Don't

Don't stretch, rotate, recolour, or add effects.

Partner co-brand & “Powered by Nio”

Co-brand · lightpartner vertical example

PNG

Co-brand · dark

PNG

Powered by Niorequired in partner apps

PNG

Powered by Nio · dark

PNG

Interaction states

Neutrals

Status

Light & dark mode

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.

Type scale

Icon treatments

Buttons

Six variants × three sizes. Primary for the main action, one per view.

Alerts

Button

Text input

import "@nio/tokens/css";

.card {
  background: var(--color-bg);
  color:      var(--color-text);
  padding:    var(--space-md);
  border-radius: var(--radius);
}

import { Button, Input } from "@nio/react";

export function Pay() {
  return (
    ‹form›
      ‹Input label="Amount" prefix="$" /›
      ‹Button variant="primary"›Send‹/Button›
    ‹/form›
  );
}

The prompt

Copy everything in the box below.

# Nio DBP design system: instructions for any interface or document
You are designing or building something that carries the Nio DBP brand (Nio
Digital Business Platform). Apply every rule below unless the task explicitly
overrides one. If a rule can't be met in the target format, use the closest
equivalent and say which rule you adapted. Never invent brand values; if you
need one that isn't here, ask.
## 1. Brand in one line
Nio DBP is a business platform for small and mid-sized organizations in
Trinidad and Tobago and the Caribbean. It should feel calm, precise and
trustworthy: dark, quiet grounds; one violet accent; clear type; nothing
loud.
## 2. Colour
Use only these values. Never sample colours from reference images or other
brands.
Core
- Nio Violet #3A2EAF: primary accent. Buttons, links on light grounds, active
states, icons on light grounds.
- DBP Blue #007FC4: secondary accent. Data, secondary highlights, the "DBP"
in the logo. Never compete with violet in the same component.
- Deep Navy #010133: headings and dark text on light grounds; dark brand
surfaces.
- Black #04060E: the darkest ground (hero, footer-level bands).
Supporting
- Violet light #5B50D6 (glows and hover tints only), Sky #5FB3E2 (eyebrow
labels and focus rings on dark), Lavender #A9A2F0 (icon glow on dark).
- Light ground #F7F8FA, White #FFFFFF.
- Text on dark: #FFFFFF headings, #B4BDD0 body. Text on light: #010133
headings, #5B6478 body.
- Lines: rgba(255,255,255,.09) on dark; rgba(1,1,51,.10) on light.
- Status (product UI only): use your framework's success, warning and danger
colours, tuned to pass contrast. Never use violet or blue for an error.
Balance
- Marketing surfaces (website, landing pages, decks): about 70% dark grounds,
20% mid-dark bands, 10% light.
- Product UI and working documents (dashboards, forms, reports, letters):
light-led. White or #F7F8FA grounds, navy text, violet for actions. A dark
theme, if offered, follows the dark-ground rules.
- Violet is a tint, never a flood. No full-violet or full-blue page
backgrounds.
## 3. Gradients (dark grounds)
Four families. Each must read as blackish or deep navy overall, never as
purple or bright blue.
- G1 Night: #04060E with a soft violet glow, rgba(91,80,214,.16), from the
top centre. Heroes and calls to action.
- G2 Deep: #04060E to #00001F, with faint violet glows in opposite corners.
Problem, risk and control content.
- G3 Ocean: medium-dark DBP blue (#0A4C8C to #13226A) with a violet tint in
one corner. Lighter than G2, used sparingly for proof and benefits.
- G4 Light: flat #F7F8FA. Feature lists, forms, logos, dense reading.
Don't put two bands of the same family next to each other. In documents and
slides, use the flat base colour where gradients aren't supported.
## 4. Typography
- Typeface: Inter for everything. Fallback: system-ui, -apple-system, Segoe
UI, Roboto, Arial, sans-serif. In Office documents where Inter isn't
installed, use Arial.
- Weights: 500 for display, 600 to 700 for headings, 400 body, 500 buttons
and labels.
- Minimum size 16px for any readable text on screen (11pt in print). Never go
smaller for captions, labels or legal lines.
- Headings: tight tracking (-0.02em), sentence case, usually ending with a
full stop on marketing pages ("Three ways to partner.").
- Eyebrows: 16px, 700, uppercase, +0.06em tracking. Sky on dark, violet on
light.
- Body: line-height 1.5 to 1.65, line length 60 to 75 characters.
## 5. Layout and shape
- 8px spacing grid. Section padding 96 to 128px on desktop, 64px on mobile.
- Radius: 10px buttons and inputs, 20 to 22px cards and panels, fully round
pills and badges.
- Content width 1140 to 1320px; text blocks under 44rem.
- Mobile first: every layout works at 390px wide with no horizontal scroll.
- Prefer left/right splits and centred feature visuals over grids of
identical cards. Use cards only when items are truly parallel.
## 6. Components
- Primary button on dark: violet glow. Translucent violet fill,
rgba(201,196,250,.42) border, soft inner glow. On light: solid #3A2EAF with
white text.
- Secondary button: transparent with a faint white border on dark; navy
outline on light.
- Text link: violet on light, white with an arrow on dark.
- Badge: pill with a small glowing sky dot, lavender text, faint violet fill.
- Feature cards (Reflect style): no box at rest, thin divider lines between
items. On hover, a soft violet glow rises behind the item and the icon glows
brighter.
- Forms: a white card on any ground, navy labels, 10px inputs, required
fields marked with *, a violet submit button.
- Tables: navy header text, hairline rows, no zebra stripes on dark, numbers
right-aligned.
- Focus: a visible 4px sky ring (rgba(95,179,226,.55)) on every interactive
element.
## 7. Icons
- Line icons only, 1.5px stroke, rounded caps and joins, on a 24 or 40px
grid. Lucide is the base set.
- On dark: white with a soft lavender glow. On light: Nio Violet, no glow.
- Pick an icon that means the specific idea. Never a generic one used for
decoration.
- No filled, duotone, emoji or 3D icons.
## 8. Logo
- Use only the supplied logo files: the indigo "nio" wordmark with a blue
"DBP". Never redraw, recolour, stretch, outline, shadow or animate it.
- Use the reversed (white) version on dark grounds.
- Keep clear space around it of at least the height of the "n".
## 9. Imagery
- Real people and real Caribbean businesses: shops, warehouses, credit
unions, field technicians, offices. Natural light, warm skin tones, no staged
handshakes.
- Product visuals: clean, cropped UI on a dark ground with a soft violet glow
behind it.
- Every image must be replaceable by the content team without a developer.
- Always give images alt text that says what they show.
## 10. Motion
- Subtle and purposeful. Slow orbits, a sweep, a gentle glow, content that
types or fades in. 4 to 10 second loops; 150 to 250ms for hover states.
- Use CSS or the platform's native animation. No heavy libraries for
decoration.
- Never repeat the same animated visual on one page or screen.
- Don't use constellation, polygon or network-mesh effects.
- Respect prefers-reduced-motion: show a still, finished state.
## 11. Accessibility
- WCAG 2.2 AA at minimum: 4.5:1 for text, 3:1 for large text and UI parts.
Check text over gradients at its worst point.
- 16px minimum text, 44px minimum touch targets.
- Decorative graphics are hidden from screen readers; meaningful ones are
labelled.
- Never use colour alone to carry meaning.
## 12. Voice and copy
- English (UK) is the default language. Spanish is a supported second
language, never the default.
- Plain, short and specific. Lead with what the reader gets. Sentences under
25 words.
- No hype words (revolutionary, seamless, cutting-edge), no exclamation
marks, no emoji.
- Use approved copy word for word when it's supplied. Never invent client
names, statistics, prices or quotes; mark gaps as [To confirm].
- Product names: Nio DBP, Nio Insight, Nio Cloud, Nio Transform, SME
Essentials.
## 13. Before you hand anything over, check
1. Only the colours above, and no background reads as purple or bright blue.
2. Inter (or the stated fallback), nothing under 16px.
3. Contrast passes AA everywhere, including over gradients and images.
4. Line icons only, each one meaningful.
5. It works at 390px wide and with reduced motion.
6. The logo is a supplied file, untouched.
7. Copy is UK English, matches approved text, and has no invented facts.
8. Images can be swapped by a non-developer and have alt text.