← Case studiesEMERGENCE / DESIGN SYSTEM ARCHITECT
Emergence project visual: a warm bloom forming in a dark field
DESIGN SYSTEM / 2025

Emergence.

Something new forming
out of something larger.

The system behind Novensia ↗
INTERACTIVE RULE SPECIMEN

Two states.
One clear read.

Change the context. See where gold and coral belong.

A demonstration of the design rule, using example content.

ON THE CANVAS

State on the node.
Selection around it.

Gold marks a running node. Coral marks the selection ring. The two states can be visible together without competing.

Gold
#E0A33E
Coral
#EE7F4E
TYPE AS CATEGORY

Before you read it,
you know what it is.

01 / INTERFACE / GEIST SANS

Temperature

A label a human wrote.
02 / CONTENT / NEWSREADER

Something new forming out of something larger.

The writing stays distinct from the interface.
03 / MACHINE VALUES / GEIST MONO

0.7

A value the machine produced.

The brief

Emergence is the design system I built for Novensia. It defines the colors, type, components, and interaction states used across the product.

SCREEN DETAILS / 01 / 04
01 / Color and semantic state
02 / Typography
03 / Components
04 / Readouts and node states
The System

Content is what the product is for. The whole system is dark-mode-first by intent, not by user preference. Dark is what lets warm read as warm and lets the content sit above everything else.

The system came before the product. The thesis showed up before the name did, which is why the tokens are named for the idea, not the product. Novensia sits on top of it. The system underneath doesn't depend on it.

One rule, two contexts

The system runs on gold and coral, and one rule governs them. Gold and coral split by context. On the node canvas, gold means running and coral means selected, so state lives on the node and interaction lives in a ring around it. Different layers, no collision. A node can be running and selected at once. Everywhere else, gold is the primary brand accent and coral is the secondary. One rule, applied two ways, holds the whole system together.

The grays carry a deliberate blue-violet bias, not neutral. That bias is what makes the warm accents read as truly hot. And gold gets used sparingly. Roughly three touches per screen, the brand mark, the primary action, the active step. Restraint is what makes it read as the accent instead of decoration.

Type as category

Three typefaces, three jobs. Geist Sans for interface (labels, controls, headings). Newsreader for content (your writing samples and the drafts, and nothing else). Geist Mono for machine values (model strings, temperatures, scores, JSON).

The rule that decides between them. A label is a word a human wrote ("Temperature"). A value is data the machine produced ("0.7"). Label gets Geist. Value gets Mono. The type choices give interface labels, written content, and machine values different visual treatments.

Two weights across all three faces, regular and medium. Emphasis comes from size, color, and the step between them, never a third weight.

Discipline

The system's point of view is mostly about restraint.

Gold touches about three things per screen. Two type weights, never three. Grays stay blue-violet-biased, never neutral. Red borders use a deep, desaturated red, because full-strength red on the void buzzes. It's reserved for dots, fills, and text where it carries a signal. Each of these is a limit, and they all protect the same thing. The content stays brightest, the accent stays the accent, nothing competes with what the user came to make.

The system is built from real primitives. The brand mark, the coral focus state, the gold button. Assembled from the same parts, no decoration bolted on.

THE ACTUAL SYSTEM REFERENCE

Restraint,
made explicit.

Original Emergence color reference: surfaces, gold, coral and their roles.
Original Emergence color reference: surfaces, gold, coral and their roles.