# Design System Glossary

> Plain definitions of the terms design system work runs on: design tokens, semantic tokens, colour scales, type scales, token drift, Figma variables and MCP.

- Source: https://flashdsm.com/glossary
- Site: Flash DS (https://flashdsm.com)

---

## Terms

### Colour scale

A colour scale is an ordered set of shades of one hue, conventionally numbered from 50 to 900, built so that steps are perceptually even and specific pairings meet known contrast ratios. It lets a team pick colours by role and step rather than choosing arbitrary hex values.

Full entry: https://flashdsm.com/glossary/color-scale

### Dark mode tokens

Dark mode tokens are a second set of values bound to the same semantic token names as the light theme, so that switching modes repoints names such as `--color-surface` at different underlying colours without any component needing to know which mode is active.

Full entry: https://flashdsm.com/glossary/dark-mode-tokens

### Design system

A design system is the shared set of design decisions, components and rules that a team uses to build a product consistently. It typically includes design tokens, a component library, usage guidelines and documentation, maintained as a single source of truth for both design and code.

Full entry: https://flashdsm.com/glossary/design-system

### Design token

A design token is a named value that stores a single design decision, such as a colour, a spacing step or a font size, so that the decision can be reused across design tools and code instead of being written out by hand in each place.

Full entry: https://flashdsm.com/glossary/design-token

### Design-to-code

Design-to-code describes the process of turning design decisions made in a tool such as Figma into working front-end code. The durable version transfers design tokens rather than generating markup from a canvas, because tokens stay valid as the interface changes while generated markup does not.

Full entry: https://flashdsm.com/glossary/design-to-code

### Figma variables

Figma variables are named values stored inside a Figma file for colours, numbers, strings and booleans, supporting modes for cases such as light and dark themes. They are Figma's native form of design tokens, but reading them programmatically through the Figma REST API requires an Enterprise plan.

Full entry: https://flashdsm.com/glossary/figma-variables

### MCP for design tokens

Model Context Protocol is an open standard for connecting AI assistants to external tools and data. Applied to design tokens, an MCP server exposes a project's live token values to an AI coding agent so that generated components reference the real design system rather than values the model invents.

Full entry: https://flashdsm.com/glossary/mcp-design-tokens

### Semantic token

A semantic token is a design token named for the job it does rather than the value it holds, such as `--color-text-danger` rather than `--color-red-600`. It usually references a primitive token, which lets the underlying value change without renaming anything that uses it.

Full entry: https://flashdsm.com/glossary/semantic-token

### Token drift

Token drift is the gradual divergence between the design decisions recorded in a design system and the values actually used in a product, which happens when a surface such as a Figma file, a stylesheet or AI-generated code stops referencing the shared source and accumulates its own values.

Full entry: https://flashdsm.com/glossary/token-drift

### Type scale

A type scale is the ordered set of font sizes a design system permits, usually generated by multiplying a base size by a consistent ratio. Restricting text to those steps is what keeps typography consistent across an interface built by many people.

Full entry: https://flashdsm.com/glossary/type-scale