The product design glossary.

Observable conditions that a feature must meet to satisfy its agreed requirements. They make review and testing more specific.

In practice: An invitation cannot be sent by a user who lacks the required permission.

What to watch for: Write criteria as observable outcomes, including meaningful failure cases. A description such as “the form is intuitive” needs a more specific test. Keep the criteria current when an approved product decision changes so design, engineering, and QA evaluate the same behavior.

Designing and building so people with different abilities and assistive technologies can use a product. It includes interaction, structure, content, and presentation.

In practice: A form has associated labels, keyboard access, understandable errors, and visible focus.

What to watch for: Accessibility includes the complete task, not only visual contrast. Review keyboard operation, semantics, labels, focus, content, and recovery from errors. Record the methods and scope of testing; a passing automated scan does not establish conformance for the whole product.

Reusable instructions and supporting resources that help an AI agent perform a particular class of task in a supported host.

In practice: A spacing-audit skill produces a table of mismatches against approved tokens.

What to watch for: A skill provides a procedure; an integration provides access to a tool or source. Installing one does not automatically provide the other. Verify that the host loads the intended instructions and that the output passes a task-specific review.

The reference line on which most letters sit. Consistent alignment helps text feel orderly across adjacent elements.

In practice: A label and its nearby value align on the same text baseline.

What to watch for: Use the actual typeface and text style when checking alignment. Elements can share a geometric center while their text feels misaligned. Compare mixed sizes, numbers, and icons in the rendered interface rather than relying only on bounding boxes.

The curvature applied to an element’s corners. It is a shape decision that should have a consistent role in the interface.

In practice: A card uses the system’s medium radius while a status pill uses a rounded shape.

What to watch for: Radius affects the shape of a container, but it does not define its role. Keep approved values connected to component types and nested relationships. A new radius should solve a real design need rather than become another arbitrary variation.

The thickness of an element’s border. Its usefulness depends on purpose, contrast, and surrounding content as well as its numeric value.

In practice: A divider uses a subtle one-pixel line; an emphasized boundary uses a separate role.

What to watch for: Decide whether a border is decorative, groups content, or helps identify an interactive control. Those jobs can require different treatment. Review thin lines at actual rendered size and check essential boundaries against the relevant adjacent colors.

A condition at which a responsive layout changes its arrangement or styling to better fit the available space.

In practice: A two-column form becomes one column when its content no longer fits comfortably.

What to watch for: Choose breakpoints where the layout needs to change, not only around familiar device names. Test intermediate widths and long content. A layout that works at two screenshots can still fail between them.

A reusable interface building block with defined appearance, inputs, and behavior. Its specification explains when and how to use it.

In practice: A shared Field component combines a label, input, hint, and error message.

What to watch for: A reusable component includes behavior and a supported contract, not just a visual shape. Document its purpose, inputs, states, and composition rules. Reuse should reduce repeated decisions without forcing unrelated product needs into one overloaded API.

A condition that changes what a component displays or how it behaves. States should reflect real interaction and data conditions.

In practice: A submit button can be idle, focused, loading, or disabled.

What to watch for: States describe conditions such as focus, loading, error, or selection. They can overlap, so define which combinations are supported. Review transitions in the running product; a set of static frames does not prove interaction behavior.

An intentionally supported configuration of a component for a different role or appearance. Variants differ from temporary interaction states.

In practice: A Button supports primary, secondary, and destructive appearances.

What to watch for: A variant is an intentional supported option, such as a primary or secondary button. It differs from a temporary state such as focus. Explain when to choose each variant so consumers do not treat the options as arbitrary styling presets.

Organizing the information available to an AI system so it can work from relevant, current context for a task.

In practice: An agent receives the approved feature spec and component references before implementation.

What to watch for: Separate source material from approved decisions and make current guidance easy to retrieve. More context is not automatically better context. Test whether the agent finds the right source and identifies uncertainty before trusting the generated result.

A numerical comparison of the relative luminance of two colors. The applicable accessibility criterion depends on what the colors represent.

In practice: Measure body text against the card surface behind it, then check the relevant threshold.

What to watch for: Measure the actual foreground and background pair in the relevant state. Transparency, imagery, and theme changes can affect the result. Apply the criterion appropriate to the content and avoid treating a passing pair as proof that the entire interface is accessible.

A maintained set of reusable interface foundations, components, patterns, and usage guidance that supports consistent product work.

In practice: Tokens, shared components, stories, and documented decisions work together.

What to watch for: A system needs maintained decisions and ownership as well as assets. A Figma library, code package, and documentation site can all contribute, but disagreements between them must be resolved. Start by making one real flow consistent and reviewable.

A named design value used to keep implementation and design decisions consistent. Tokens can describe colors, spacing, typography, and other properties.

In practice: A card uses space-6 instead of a locally invented padding value.

What to watch for: A token should have a maintained source and an intended role or place in a scale. Replacing every literal value with a variable does not automatically create a coherent system. Document how consumers should choose the correct token.

A Markdown document that explains visual principles, token references, component usage, and constraints for a product. Tool loading behavior must be configured or verified separately.

In practice: The file points to the token source and explains when to use a destructive button.

What to watch for: The filename alone does not guarantee an agent will load the document. Connect it to the host’s supported instructions and verify discovery. Keep system-level rules concise and link to detailed component contracts instead of duplicating every prop.

The interface shown when a view has no content to display. It should explain the situation and offer a useful next action when one exists.

In practice: A new workspace explains how to add its first project.

What to watch for: Explain the condition and offer a next step only when it is useful. An empty search result differs from a new account with no data. Use the actual cause to choose the message rather than applying one generic illustration and CTA everywhere.

A visible treatment that identifies the element currently receiving keyboard focus. It helps people track their position while navigating.

In practice: A link gains a distinct outline when reached with the Tab key.

What to watch for: Focus shows the current keyboard location; it is not the same as selection or hover. Check that the indicator remains visible on intended surfaces and is not clipped by a container. Review the focus sequence through the complete task.

A named family of related type designs, potentially including multiple weights, styles, or widths. Available files determine what can actually be rendered.

In practice: DM Sans can serve several text roles when the required styles are provided.

What to watch for: Verify the actual files, styles, weights, and characters the implementation loads. A fallback can change wrapping and apparent size. Test the interface with realistic content and ensure it remains usable if the preferred font is unavailable.

The deliberate use of two typefaces with distinct roles in one design. Their relationship should support hierarchy and reading tasks.

In practice: A display face is used for headlines while a restrained text face handles form labels.

What to watch for: Assign a clear role to each family and compare them in the same specimen. A second family is optional; one family can provide enough hierarchy through size and weight. Evaluate readability and brand fit separately.

The relative boldness of a typeface. CSS numeric values request a weight, but the font files determine which weights are available.

In practice: Body text uses regular while a section heading uses a supported semibold weight.

What to watch for: Numeric weight does not look identical across typefaces. Size, contrast, and letter proportions also affect perceived emphasis. Compare the shipped font files at actual sizes and define a small set of role-based weights.

Content rendered in front of a surface, such as text or an icon. Contrast needs to be evaluated against its actual background.

In practice: A white button label is checked against the button’s filled background.

What to watch for: A foreground must be evaluated against the surface immediately behind it. The same text color can behave differently on a card, overlay, or image. Document intended pairs rather than approving a foreground value in isolation.

A structure of columns, rows, or alignment rules used to organize content. A grid should adapt to the content and available space.

In practice: Resource cards use three columns on wide screens and fewer on narrow screens.

What to watch for: A grid supports alignment and composition, but it should accommodate content and responsive behavior. Explain column, gutter, and span rules through real layouts. Avoid shrinking important content just to preserve a desktop column count.

The color family or direction commonly described with names such as red, green, or blue. Hue alone does not determine contrast or meaning.

In practice: Two blue tokens can have very different lightness and contrast against white.

What to watch for: Hue identifies a color family but does not describe its brightness or saturation. Two colors with similar hues can have very different contrast and visual weight. Evaluate the complete values and their roles before substituting one for another.

The ordering of content by importance, expressed through structure, placement, typography, spacing, and other cues.

In practice: A status card makes the state and next action easier to find than secondary metadata.

What to watch for: Hierarchy should reflect the task: what someone needs to recognize first, understand next, and act on. Test it with real content and a concrete question. Making every element larger or bolder removes the distinctions hierarchy depends on.

An adjustment to the spacing between particular letter pairs. It differs from changing spacing across an entire word or text run.

In practice: A headline’s AV pair may need different spacing from other pairs.

What to watch for: Kerning adjusts the relationship between particular letter pairs; tracking adjusts spacing across a run of text. Do not use broad letter-spacing changes to solve one awkward pair without checking the rest of the word or interface.

The vertical distance between lines of text. It affects reading rhythm and how paragraphs occupy space.

In practice: A body style uses a unitless line height so it scales with the font size.

What to watch for: Line height affects reading rhythm and the room available for each line. Test paragraphs, wrapped labels, and different scripts. Fixed-height containers can clip text when users adjust text settings even if the default specimen looks correct.

An adjustment applied across the characters in a text run. It can change density and readability, especially in small labels or long passages.

In practice: A short uppercase category label uses a restrained amount of added tracking.

What to watch for: Apply tracking by text role and inspect the actual words. A treatment that works for a short display label may harm paragraph reading or create wrapping problems in controls. It is different from pair-specific kerning.

Space outside an element’s border. Its effect depends on the layout model and neighboring elements.

In practice: A section has separation from the section before it.

What to watch for: Margin contributes space outside an element; padding contributes space inside it. Prefer a clear layout relationship over stacking unrelated local adjustments. When spacing looks wrong, inspect the container’s layout rules as well as the element’s own margin.

Space between an element’s content and its border. It affects the content’s room inside the component.

In practice: Card padding keeps its title and paragraph away from the boundary.

What to watch for: Padding affects both enclosure and the space available for content. Test long labels and narrow containers before fixing heights. A shared card-padding role can make changes easier to review than unrelated values on every card.

A named base value in a design foundation. Semantic tokens can reference it to express a purpose.

In practice: A palette value called neutral-950 is referenced by text-primary.

What to watch for: A primitive stores a base value or scale step, while a semantic token explains a job. Several semantic roles can share a primitive without becoming the same role. Keep that distinction when deduplicating a palette.

TDP’s term for a maintained record of product context, decisions, requirements, and working rules that people and agents can consult.

In practice: A current-context page links to approved feature specs and unresolved questions.

What to watch for: Keep current decisions separate from meeting history and explorations. Give active records owners and link them to supporting evidence. A useful brain helps a new contributor identify what applies now, not merely find every past conversation.

A representation used to explore or evaluate a product idea. Its level of functionality should match the question being investigated.

In practice: A working invitation flow helps a team review role selection and error handling.

What to watch for: State what a prototype is intended to test and which behaviors are simulated. A convincing interaction does not establish production readiness, permission enforcement, or data reliability. Preserve those limits when sharing review results.

A typeface category without serifs. Individual fonts still differ in proportions, spacing, character shapes, and suitability for a task.

In practice: A sans serif used in a table is checked for clear numbers and compact labels.

What to watch for: The absence of serifs does not guarantee a modern appearance or better readability. Compare the specific face in its intended role, size, and language. Use a real interface specimen rather than deciding from an isolated alphabet.

A token named for a role or intention rather than a literal appearance. Its value can change across themes while the purpose stays consistent.

In practice: text-error identifies error copy even when its actual color changes in dark mode.

What to watch for: Name the responsibility, such as text-secondary or action-primary, and map it to a value. Keep theme-specific values behind the same role when appropriate. Similar current values are not sufficient reason to merge different responsibilities.

A finishing stroke attached to parts of a letterform. Serif typefaces vary widely; the category alone does not establish readability or brand personality.

In practice: Compare a serif heading in a real layout before deciding whether it fits the product.

What to watch for: Serifs describe letterform anatomy, not a guaranteed tone or accessibility outcome. Test the chosen face with actual content and layout. A serif can suit a contemporary interface, and different serif families can behave very differently at small sizes.

A limited set of reusable spacing values assigned to layout relationships. It reduces arbitrary gaps while allowing documented exceptions.

In practice: A form uses one value between label and field and a larger value between field groups.

What to watch for: A scale provides reusable values, but the system also needs rules for relationships. Explain label-to-field, group-to-group, and section spacing. Intentional optical exceptions can be documented without abandoning consistency.

An example that describes a rendered component state using a particular set of inputs and context. Stories make variants and behavior inspectable.

In practice: A Button story demonstrates a long label while loading.

What to watch for: A story makes a component configuration inspectable and repeatable. Choose states that demonstrate meaningful behavior and content boundaries. Stories support review but do not replace checking the component inside the application’s full user flow.

The thickness of a line in an icon or vector shape. Apparent weight also depends on shape, caps, size, and contrast.

In practice: Compare outline icons at their actual 20px size before standardizing the stroke.

What to watch for: Stroke weight contributes to an icon’s apparent emphasis alongside its size and shape. Compare icons beside the actual text and controls. Mixing families or weights without a role can make a small interface feel inconsistent.

A set of text sizes and related styles assigned to roles within an interface. It provides a shared hierarchy for headings, body text, and labels.

In practice: A page uses named title, section, body, and label styles.

What to watch for: A type scale should assign sizes to useful roles, not require every value from a mathematical sequence. Record weight and line height too. Test long headings, body reading, controls, and responsive layouts together.

The user interface: the controls, content, and visual structures through which a person interacts with a product.

In practice: A settings page presents labels, fields, actions, and feedback.

What to watch for: The interface includes interactive behavior as well as appearance. A polished default screen is incomplete if errors, loading, keyboard operation, or recovery fail. Evaluate the visible design as part of a complete task.

The user experience: how a person understands, uses, and experiences a product in context. It extends beyond the appearance of a screen.

In practice: A recovery flow helps someone understand an error and finish the original task.

What to watch for: User experience includes the wider journey around the interface: expectations, task completion, feedback, and recovery. A visual refresh may improve part of that experience, but evidence from real tasks is needed to understand the broader effect.

A font format that can support continuous variation along one or more axes, such as weight or width. Available axes and ranges depend on the font.

In practice: A delivered font supports several weights without a separate file for each one.

What to watch for: Check which axes the actual font file supports and how the implementation exposes them. A variable font is not automatically smaller or more readable in every setup. Test the required styles and fallback behavior before choosing it for the product.

The apparent emphasis an element has relative to nearby content. Size, thickness, contrast, color, and position can all contribute.

In practice: A primary action attracts attention while secondary metadata remains quieter.

What to watch for: Visual weight emerges from size, contrast, density, color, and shape together. Adjusting only font weight may not fix an overloaded composition. Decide what should lead the task, then compare the elements at actual rendered size.

A simplified representation of structure and interaction used to explore content and flow before detailed visual decisions.

In practice: A team compares the order of fields and actions before choosing colors and type.

What to watch for: A wireframe should make structure and task flow inspectable before surface detail dominates the discussion. Include realistic content and important states where they affect the layout. Low visual fidelity does not justify leaving the core behavior ambiguous.