The design language
for Nio Digital
A unified system of foundations, components, and patterns that brings consistency across every Nio product — from Transform to DBP and beyond.
Brand Identity
The Nio wordmark is a custom geometric letterform. No separate symbol — the logotype is the brand. Sub-products extend the mark with a vertical separator and product name.
Sub-brand Lockups
transformDBPcloud✓ Do
- Use provided logo assets — never recreate from a font.
- Maintain 1x logo height as clear space on all sides.
- Place on white, off-white, dark, or brand gradient.
- Sub-brand text is always Inter weight 500.
✗ Don't
- Don't rotate, stretch, skew, or add effects.
- Don't place on busy images without a scrim overlay.
- Don't recolor outside the approved palette.
- Don't set the logo smaller than 18px in height.
Colour System
A three-tier palette anchored by Indigo 700 as the primary brand colour. Each tier has a dedicated role.
Primary — Indigo
Brand colour, primary buttons, active navigation, focus rings.
● = Key shade. Buttons use 700. Hover uses 800. Backgrounds use 50.
Secondary — Blue
Hyperlinks, informational badges, secondary actions.
Accent — Teal
Highlights, charts, progress indicators.
Semantic
System feedback — constant across themes.
Gradients
Usage Map
| Element | Light | Dark |
|---|---|---|
| Primary button | p-700 | p-500 |
| Button hover | p-800 | p-600 |
| Links | s-600 | s-300 |
| Page background | n-0 | dk-0 |
| Body text | n-700 | dk-t1 |
| Borders | n-200 | dk-border |
Typography
Inter for all UI. JetBrains Mono for code and data labels.
Spacing, Radius & Elevation
All spacing is built on a 4px base grid.
Border Radius
Elevation
Iconography
Line icons at 24x24px, 1.5px stroke. Single colour using primary or neutral. Recommended: Lucide Icons.
Core Components
Reusable UI elements that maintain consistency across every Nio product.
Badges
Lifecycle stages, agent states, validation results.
Text Input
Label, placeholder, help text, error state.
Alerts
Info (blue), success (green), warning (amber), error (red).
Avatars
36px circle with initials. Hover for name.
Progress Bar
Brand gradient fill. 8px height.
Lifecycle Stepper
7 stages: Evaluate → Onboard → Data → Validate → Test → Go-live → Support
Common Patterns
Proven layouts for admin (internal) and user (client portal) contexts.
Admin — Dashboard Header
InternalAdmin — Client Table
Internal| Client | Stage | Status | Next Action |
|---|---|---|---|
| Trident Energy Ltd | Data | On Track | Review Chart of Accounts |
| Savannah Financial Group | Evaluate | Delayed | Awaiting financials upload |
| PortCity Logistics | Go-live | On Track | Final test sign-off |
User — Implementation Status
Client PortalDark Mode
Layered surfaces. Primary and secondary shift to 300-500 range for contrast.
Surfaces
Accessibility & Guidelines
Every Nio product should meet WCAG 2.1 AA as a minimum.
✓ Colour Contrast
- Body text on white: 4.5:1 minimum.
- Large text (18px+): 3:1 minimum.
- Never use colour alone — pair with icons or labels.
✓ Focus & Keyboard
- Visible focus ring on all interactive elements.
- Tab order follows visual reading order.
- Escape key closes topmost overlay.
✓ Do
- Maintain the 4px spacing grid.
- Use Inter for UI, JetBrains Mono for code.
- Test both light and dark themes.
- Use brand gradient sparingly — heroes and CTAs only.
✗ Don't
- Don't combine primary and secondary buttons as peers.
- Don't use p-700 as background for large surfaces.
- Don't override semantic colours with brand colours.
- Don't disable users without explaining why.
Nio Digital Limited — Design System
For use by Nio Digital product, engineering, and design teams