Find here a list of terms and their definitions, related to design systems.
A methodology for creating design systems that breaks interfaces into fundamental building blocks: atoms, molecules, organisms, templates, and pages.
The practice of designing and developing digital products that can be used by people with disabilities.
Adoption in a design system refers to how effectively teams integrate its components, guidelines, and best practices into their workflows. It involves measuring usage, engagement, and the impact on design and development processes while encouraging contributions and continuous improvements.
A specific screen width where the layout of a design changes to accommodate different device sizes.
A set of rules that define the look and feel of a brand, including typography, colors, and voice.
Reusable UI element, such as buttons, inputs, or cards, designed with consistent styling and functionality. Components help maintain uniformity across a product and improve efficiency by providing prebuilt, adaptable design and code assets.
Set of predefined colors used consistently in a design or brand to create visual harmony and recognition. It typically includes primary, secondary, and neutral colors, along with variations for different use cases.
Copywriting is the practice of writing persuasive and compelling text (copy) for marketing, advertising, or branding purposes. It aims to engage audiences, communicate value, and drive actions such as purchases, sign-ups, or brand awareness.
Color contrast in a design system refers to the difference in lightness between text, UI elements, and their backgrounds to ensure readability and accessibility. Proper contrast improves visual clarity and helps meet accessibility standards like WCAG, making content usable for all users, including those with visual impairments.
A framework is a collection of code that can be reused to build software products. They can include aspects of a project like libraries, tools, and best practices.
The front-end refers to the user-facing part of a website or application, where users interact with the design, layout, and functionality. It is built using technologies like HTML, CSS, and JavaScript and communicates with the back end to display data dynamically.
In Figma, an refers to a copy of a component that can be placed and used across different frames or designs. Instances inherit the properties of the original component, allowing for consistent design while still enabling local adjustments (like text or color) without affecting the master component.
Design system maturity refers to the level of development and adoption of a design system within an organization. It typically progresses through stages, from an initial, ad-hoc system to a fully established, integrated system with consistent usage, ongoing maintenance, and contributions across teams.
In Figma, a mode refers to different predefined styles or variations within a design token that allow for easy theming and customization. Modes are commonly used for dark and light themes or different brand styles, enabling designers to switch between them seamlessly without manually adjusting each element.
In typography, measure refers to the line length of text, typically measured in characters per line (CPL). An optimal measure (usually 50–75 CPL for body text) improves readability by balancing line width and eye movement. Too short or too long lines can disrupt reading flow and reduce legibility.
A naming convention in a design system is a standardized method for naming components, styles, and assets to ensure clarity, consistency, and scalability. It helps teams easily identify, use, and maintain design elements across projects. A well-structured naming system improves collaboration between designers and developers and reduces confusion.
A reusable flow, like signing in or checking out. Sometimes used interchangeably with component, but we think of them as different things.
A design system requires a governing model that acts as a set of rules. These are required to manage all components within a project. They might pertain to visual design (e.g., animation, colors, typeface) or refer to a more complicated aspect of a project, like the personality or style of the branding or writing.
In a design system, primitives are the foundational design tokens or base styles, such as colors, typography, spacing, and shadows. They serve as the core building blocks that help maintain consistency and can be combined or modified to create more complex components and themes.
Properties are the characteristics of an element that define its appearance and behavior. In CSS, for example, properties include things like color, font size, and margin. In HTML, this could be used to make an element bold, italic, or a certain color.
A prototype is an interactive mockup that simulates the functionality and user experience of a product before development. It helps designers and stakeholders test interactions, gather feedback, and refine the design. Prototypes can range from simple click-through wireframes to high-fidelity simulations with animations and transitions.
Semantic in design and development refers to using meaningful names, structures, or elements that clearly convey their purpose. In a design system, semantic naming (e.g., "Primary Button" instead of "Blue Button") improves clarity and adaptability. In code, semantic HTML (e.g., <header>, <nav>, <article>) enhances accessibility and SEO by defining content meaning.
A single source of truth is a reference point between designers and developers that help them make their product consistent. Design systems, or particularly component libraries serve as a great single source of truth that product designers, product managers, and developers can use when building products.
Slots are used to insert content into a component. They are a great way to reuse components and to make sure that your content is always up-to-date. Among others, by using slots you could create a slot for your site’s navigation and insert the latest links into it whenever the content is updated.
In design systems, a state refers to the different visual or functional variations of a component based on user interaction or system status. Common states include default, hover, active, disabled, focused, and loading. States help improve usability by providing feedback and guiding user actions.
Storybook is an open-sourced tool that can be used to develop and test UI components. It allows for the creation of isolated environments for each component. The software can be used to generate static documentation for a component library. Storybook lets designers test out different variations of a component to see what works best. It also offers the ability to generate documentation for a design system.
In a design system, specifications are detailed guidelines that define how components, layouts, and interactions should be implemented. They include measurements, spacing, typography, colors, accessibility requirements, and behavior rules to ensure consistency across designs and development. Specifications help designers and developers align on a shared standard for building cohesive user experiences.
A platform- and technology-agnostic way to store a value to be ingested by specific applications.
Examples of useful properties to store as tokens: color palette, typographic families, spacing units.
Tone of voice refers to the way a brand or product communicates through language, including word choice, style, and emotional expression. It helps create a consistent personality across marketing, UI text, and customer interactions. A well-defined tone of voice ensures messages align with a brand’s identity, whether formal, friendly, professional, or playful.
A theme refers to a set of design rules or styles that define the visual identity and overall look of a product, website, or application. It includes elements like colors, typography, spacing, and component styles to create a consistent, cohesive experience across different screens or platforms. Themes can be easily switched or customized to adapt to different moods, seasons, or branding needs.
A type scale is a set of predefined font sizes that are proportionally spaced to create a consistent and harmonious typography hierarchy in a design. It helps establish a clear visual relationship between headings, subheadings, body text, and other textual elements, ensuring readability and a balanced layout across various screen sizes and devices.
A template is a pre-designed layout or structure that serves as a starting point for creating new content or designs. It includes placeholders for text, images, and other elements, allowing users to maintain consistency and save time while customizing it to fit specific needs or purposes. Templates are commonly used in websites, documents, and design systems.
A UI Kit is a collection of graphical user interface (GUI) elements that can be reused in digital products. A UI Kit typically includes buttons, icons, input fields, and other basic elements that can be used to build user interfaces.
UX writing is the practice of crafting clear, concise, and user-friendly text that guides users through an interface or product. It focuses on improving the overall user experience by using language that is easy to understand, helpful, and consistent, helping users navigate tasks, make decisions, and interact effectively with digital products.
In Figma, a variant refers to different versions of a component that share the same base structure but vary in properties like color, size, state, or content. Variants help streamline design workflows by allowing designers to create multiple variations of a component (e.g., button states or input fields) within a single component set, making it easier to manage and switch between different options.
Variables are used to store values that can be reused throughout a product. In CSS, for example, variables can be used to store colors, sizes, and spacing values. Tokens and variables can be a great way to maintain consistency across a product.
A wireframe is a low-fidelity, simplified visual representation of a webpage or app layout. It outlines the basic structure, including elements like navigation, buttons, and content placement, without focusing on detailed design or aesthetics. Wireframes serve as a blueprint for planning and organizing content before moving into higher-fidelity designs.