Glossary

Terms#

Design system

A design system is a set of reusable components, design tokens and usage rules, shared between design and code, that keeps a product's interface consistent as it grows. What is a React design system?

Design tokens

Design tokens are named values for colour, typography, spacing and radius that components read instead of hard-coded numbers, so changing one value re-themes everything that uses it.

Component library

A component library is a collection of ready-made interface components, such as buttons, inputs and menus, that you import or copy into a project. A design system usually includes one and adds tokens, rules and a design file.

UI kit

A UI kit is a set of ready-made interface elements and example screens, most often as a Figma file, used to speed up design work. Figma UI kit vs design system

Figma library

A Figma library is a Figma file whose components, styles and variables can be used in other files, so many designs draw from one source.

Block

A block is a finished piece of interface, such as a sign-in screen or a table with filters, assembled from a design system's components. A component is a single primitive; a block is a composition of them. Blocks

Variant

A variant is one version of a component, such as a size, a state or a theme, defined as a value of a property rather than as a separate component.

White-label theming

White-label theming means a product can be re-branded without changing its components, usually by swapping design token values, so one codebase serves several brands.

Headless component

A headless component supplies behaviour and accessibility, such as keyboard handling and focus management, without any visual styling, leaving the appearance to the developer.

Tree-shaking

Tree-shaking is a build step that removes code a project never imports, so using one component from a library does not ship the rest of it.

React Server Components

React Server Components are components that render on the server and send no component JavaScript to the browser. A library is safe to use with them when its components do not require client-only code.

Model Context Protocol (MCP)

The Model Context Protocol is an open standard for connecting AI assistants to external tools and data through a declared interface that a client discovers and calls. Editor and MCP

MCP server

An MCP server is a program that exposes operations and data over the Model Context Protocol, so compatible AI clients, such as Cursor or Claude Code, can use them while they work.

MCP design system

An MCP design system exposes its components, props, variants and tokens through an MCP server, so AI coding tools can query the real API instead of guessing. What is an MCP design system?

AI-native design system

An AI-native design system is one whose components, props and tokens are available as structured, queryable data, so AI coding tools can generate code against the real API. The phrase is recent and has no formal specification. What is an AI-native design system?

Hallucinated prop

A hallucinated prop is a component property an AI assistant writes because it looks plausible, not because the library has it. The code usually fails when it is built.

Vibe coding

Vibe coding is building software by describing what you want to an AI assistant and iterating on what it writes, with little hand-written code. The term is informal. Orvain UI for AI and vibe coding

Orvain UI

Orvain UI is a design system for React and Vue with a Figma library and a hosted MCP server, built on one component contract shared by design, code and AI tools. What is Orvain UI?