Nox Product UI

Brief

Interface and design tokens for a B2B workspace — built for weekly releases so craft keeps pace with engineering without losing the brand.

Year
2026
Field
B2B software
Scope
/ Product UI / Tokens
Cadence
14 weeks

Nox

01

( Surfaces )

4 files

nox
nox
Campaign
Campaign
Campaign
Campaign
Live issue
Live issue

02

( The mark )

Three rules

A workspace that ships weekly without drifting off brand.

( 01 )

Tokens before screens

Color, space, and type were defined as tokens first, so a new screen starts on-brand.

( 02 )

States are design

Empty, loading, and error states were drawn with the same care as the happy path.

( 03 )

Engineering in the room

The front-end lead reviewed every component before it entered the library.

03

( In the file )

System

Northline type lockup on a warm paper field
Type
Northline color study — glass bottles on a warm field
Color
Northline grid study — white cube and black volumes on a green field
Grid
Northline lockup still — figure in a red field
Lockup
  • Token set for web and app
  • Component library in Figma
  • State and edge-case coverage
  • Front-end handoff notes

04

( Desk )

Nox

“We came in with a product that worked and a story that didn’t. Their team tightened both — identity, web, and motion landing as one system our team can actually keep shipping.”

Jonah Ellis

Head of Product, Kite

Jonah Ellis · Head of Product, Kite

05

( What held )

File

42

Components

6

Release cycles

14 wk

Cadence