# Design Language

The shared vocabulary for nadicode's reusable visual decisions and interface structures.

## Language

### Foundations

**Foundation**:
The visual values available to every nadicode product, whether one product renders them or three: colour roles, typography, spacing, shape, material, elevation, motion, icons, and brand assets.
_Avoid_: Palette, base theme

**Register**:
One product's visual rules for applying the Foundation. nadicode has four Registers: website, Portal, Nadia desktop, and Alveare desktop.
_Avoid_: Theme, skin

**Neutral spine**:
The achromatic colour roles that carry grounds, chrome, hierarchy, and every control in every Register. Chromatic colour belongs to the Identity palette, the semantic feedback roles and the chart palette.

**Identity palette**:
The brand's colour: five full-strength hues, cobalto, verde, arancio, giallo and rosso, with the white and ink poles type sits on. They appear flat behind glass, as accents on the website, in Agents, objects, the logo and imagery, and never as a website section's ground or on a control.
_Avoid_: Swatch, theme color, Agent identity palette

**Identity plane**:
A flat surface painted edge to edge in one Identity palette hue, such as a field in an image.

### Structure and surfaces

**Website column**:
The website's one centred content column, which every full-bleed section centres its content in.

**Page composition**:
One of the five repeated page shapes the products build from: Overview, Collection, Object, Settings and Library, each defined by the first question it answers and drawn by its one component in `@nadicodeai/ui`.

**Material ladder**:
The set of materials a product surface can be made of: the workspace ground, the four solid heights above it, and glass.

**Height**:
How far a solid surface sits above the workspace ground, one of resting, raised, floating and modal.

**Glass**:
The translucent, blurred and saturated material, so what moves or carries colour behind a surface still reads through it.

**Seam**:
A visible structural line between two parts of a layout, drawn as one hairline in the line colour.

**Status vocabulary**:
The shared five-tone visual language for product status. Each product owns its status families, values, and mapping to those tones.

**Workflow states**:
The five colours that mark where a piece of agentic work stands: ready, running, in review, blocked, and complete. They are separate from the Status vocabulary.

**Agentic work surface**:
A visual family outside the conversation renderer for work output and workflow state, such as memory, run progress, identity, and handoffs.

**Agent orb**:
The identity of one Agent across products: one of seven forms in one chosen colour, or the fixed figure of Nadia or Sofia.
_Avoid_: Agent glyph, Agent avatar, Agent visual

**Product view**:
An authentic capture or inert fragment of the Portal, Nadia or Alveare on the website. Capture provenance and fictional data are recorded internally; production notes do not appear on the public page.

**System activity**:
What a person sees while the system does work they asked for: a pending label, then one waiting line, a counted progress line, or still skeletons. It never takes an orb, because an orb means an Agent.

### Brand

**Mark**:
The n, nadicode's logo: the first letter of the name, as tall as it is wide, with nothing added.
_Avoid_: Monogram, symbol

**Wordmark**:
The name nadicode drawn in the mark's one geometric line, with one cobalt dot over the i.
_Avoid_: Logotype

**Icon**:
The mark on a tile with rounded corners: the brand tile in cobalto, the light tile in white, or the dark tile in black.
_Avoid_: Badge

**Signature form**:
The light icon with its construction guides, drawn only where it is 128 px or larger.

**Construction guides**:
The grey lines that show how the mark is drawn: a dotted circle around the arch, the two centre axes, and the mark's width and height.