What is NIO?

NIO in brief

The NIO style is the visual language of the website and app surfaces of the Shanghai electric-vehicle maker founded in 2014. Its English tagline, Blue Sky Coming, is the starting point, and the interface keeps that promise almost literally: white pages, cool off-white panels, near-black navy for text, and one deep-teal-to-cyan gradient that fills the headline type and almost nothing else.

What separates it from a generic clean tech look is restraint with a purpose. Colour is held back so that the product and the person speaking to it carry the page. Buttons are crisp, surfaces are calm, and the gradient is rationed so strictly that it reads as a signature rather than a decoration. The result is premium without being cold, which is a difficult balance for technology and service interfaces.

The warmth does not live in the page ornament at all. It comes from elsewhere in the brand: a round on-dashboard face called NOMI that blinks as a greeting, and physical NIO Houses built from terrazzo, Douglas fir and mirrored ceilings. The digital system pairs that calm product frame with a friendly, member-first voice, so the screen stays quiet while the language speaks to the owner as a member of a community.

See the NIO design system

Where does NIO come from?

NIO launched in Shanghai in 2014, and its English line, Blue Sky Coming, made the name itself a promise. The source material places the company within a group it calls Chinese premium EV brands, a wave of makers that tried to meet global luxury expectations in a new category rather than copy the established grammar of petrol-car marketing. For such a brand the website is the first showroom, and a visual language that feels composed and unhurried was a natural way to signal premium intent.

The brand's public history is marked by a short list of vehicles. The EP9 appeared in 2016, the ES8 in 2017, and the ET7 in 2021. The web visual that this style describes is dated to roughly 2021 through 2024, which means it belongs to the period when the company was already established and could afford to say less. Earlier stages of a young carmaker often shout; this later surface speaks in a lower voice, and the white ground with navy type shows the confidence of a company that no longer needs to explain itself loudly.

A second strand in the origin is what the source calls the user-enterprise community model. NIO treats owners as members of a relationship rather than one-time buyers, and the physical NIO Houses, with terrazzo floors, Douglas fir and mirrored ceilings, act as living rooms for that community. The digital style borrows this logic. Its voice is friendly and member-first, and its restraint leaves room for the human elements, the round NOMI face on the dashboard blinking hello, to supply the warmth.

The third strand is a Scandinavian-led brand identity. The people and studios named among the key figures include William Li, the founder known as Li Bin, along with Kris Tomasson, Stockholm Design Lab and Schmidt Hammer Lassen. The last two are Nordic names, and the movement tag in the source says plainly that the identity has a Scandinavian lead. That lineage explains much of what the screens look like: pale surfaces, disciplined colour, natural materials echoed in the physical spaces, and a calm that reads as design confidence rather than minimalism for its own sake.

What defines the NIO look?

See the NIO design system

Who shaped NIO?

How do you use NIO today?

For slides, use the NIO style for a cover where the title carries the only gradient and everything else is white and navy. A single large headline on an empty white field is enough. Content slides work best with generous margins, a short navy heading and two or three lines of body copy, and a data slide should use neutral grey-blue chart marks with the gradient left out entirely, since the gradient belongs to titles.

For web and app interfaces, the style suits service-oriented products: an owner dashboard, a booking flow, a membership page, a support centre. Keep panels in the cool off-white, keep buttons crisp and few, and let status information be calm rather than alarming. A pricing or plan page should present options as quiet cards with clear comparison, using the gradient only on the single headline that frames the choice.

For editorial and marketing pages, the style gives a campaign page an unhurried, premium feel. Pair a big gradient headline with a clean photograph or product render and plenty of white. Long-form stories about a community, a service or a technology release read well in navy on white, and the friendly member-first voice can carry the personality that the restrained visuals deliberately do not.

It also fits technology and service products outside the automotive field, anywhere the brief is premium but not cold: a fintech onboarding, a health service, a membership club. The source frames it as suitable for interfaces that need that premium-but-warm balance, so the question to ask is whether the product wants to speak calmly to a person rather than shout at a crowd.

The most common mistake is spreading the gradient. Once it appears on buttons, cards, icons and backgrounds, the one signature moment is lost and the page becomes generic cyan branding. A second mistake is replacing the navy ink with pure black or the cool off-white with warm beige, which breaks the sky-like temperature of the system. Finally, do not add heavy shadows or decorative illustrations; the warmth is supposed to come from voice and from human touches, not from visual noise.

See the NIO design system

NIO — FAQ