Design System Glossary
222 terms from the world of design systems, from tokens and theming to accessibility and AI agents, in English with the Persian equivalent. Every term has its own page with a short answer, a full explanation, related terms and where Dig shows it in practice.
A
- Accent colorرنگ تأکیدیAn accent color is a secondary color used to draw attention to small details, such as focus rings, tags or charts.
- Accessibility (a11y)دسترس‌پذیریAccessibility means designing and building interfaces everyone can use, including screen reader, keyboard, low-vision and motor-impaired users.
- Accessible nameنام دسترس‌پذیرAn accessible name is the text a screen reader announces for a control, from its label, text content or aria-label.
- AccordionآکاردئونAn accordion is a list of headings that each expand to reveal content.
- Adoptionنرخ پذیرشAdoption measures how much of a product actually uses the design system's components and tokens, and how much is still hand-built.
- Affordanceنشانهٔ کاربریAn affordance is a visual quality that signals what can be done with an element, like a button's shape inviting a press.
- Agent skillمهارت ایجنتAn agent skill is an instruction bundle an agent loads only when the related task comes up.
- Agentic workflowروند کاری ایجنتیAn agentic workflow is a way of working where agents do much of the building, checking and fixing while humans set goals, rules and final approval.
- AGENTS.mdفایل قواعد ایجنتAn agent instructions file, such as AGENTS.md or CLAUDE.md, sits in the project root and is read by coding agents before any work.
- AI agentایجنت هوش مصنوعیAn AI agent is an LLM-based system that calls tools, reads and writes files and completes multi-step work on its own.
- AI UXطراحی تجربهٔ هوش مصنوعیAI UX is designing interfaces for assistants and agents: input, work status, answer, sources, human approval and suggestions.
- AlertهشدارAn alert is a persistent in-page message reporting information, a warning, an error or success.
- Alt textمتن جایگزین تصویرAlt text is the text description of an image that screen readers announce and browsers show if it fails to load.
- Answer engine optimization (AEO)بهینه‌سازی برای پاسخ‌گوهاAnswer engine optimization writes and structures content so AI assistants and direct answers can quote it accurately.
- ARIAARIAARIA is a set of HTML attributes that tells assistive technology an element's role, name and state, such as aria-label or aria-expanded.
- Aspect ratioنسبت تصویرAspect ratio is the width to height proportion of an image or frame, such as 16:9 or 1:1.
- Atomic designطراحی اتمیAtomic design is a method for building interfaces from small to large: atoms, molecules, organisms, templates and pages.
- AvatarآواتارAn avatar is a small image representing a person or account, falling back to initials or an icon.
B
- BadgeنشانA badge is a small label next to an element showing status, a count or a category, such as New or 3.
- BannerبنرA banner is a message strip at the top of a page or section for global notices such as outages or new features.
- Bidirectional text (bidi)متن دوجهتهBidirectional text mixes right-to-left and left-to-right runs, such as a Persian sentence containing an email address.
- BlockبلاکA block is a complete, ready-made page or section, such as a sign-in page or dashboard, built from the system's components as a starting point.
- Border radiusگردی گوشهBorder radius is how rounded the corners of cards, buttons and fields are, a key part of a product's personality.
- Brand colorرنگ برندThe brand color is a product's signature color, used on the primary button, links and points of emphasis.
- Breadcrumbمسیر صفحهA breadcrumb is a row of links showing where the current page sits in the site structure.
- Breaking changeتغییر شکنندهA breaking change stops existing consumer code from working without edits, such as removing or renaming a prop.
- Breakpointنقطهٔ شکستA breakpoint is a viewport width where the layout changes, such as one column on phones to two on tablets.
- ButtonدکمهA button is a control that performs an action when clicked or tapped, such as save, send or open a dialog.
C
- CardکارتA card is a container with a border or shadow that groups related information about one subject.
- CarouselکاروسلA carousel shows several slides in one place, moved one at a time by buttons or swiping.
- Centralized modelمدل متمرکزIn a centralized model one dedicated team owns the design system and builds and maintains every component.
- Changelogگزارش تغییراتA changelog is the dated list of each release's changes: features, fixes and breaking changes.
- CheckboxچکباکسA checkbox turns one option on or off, or selects several options from a list.
- ChipچیپA chip is a small interactive label for filtering, choosing or showing selected values, often removable.
- Color blindnessکوررنگیColor blindness is difficulty telling some colors apart, usually red and green, affecting about one in twelve men.
- Color gamutگسترهٔ رنگA color gamut is the range of colors a display can show, such as sRGB or the wider P3.
- Color paletteپالت رنگA color palette is the set of approved colors for a product, each with several shades from light to dark.
- Color rampرمپ رنگA color ramp is the row of shades of one color, stepping evenly from light to dark.
- Color roleنقش رنگA color role is the job a color does in the interface, such as surface, text on surface, emphasis or error, regardless of hue.
- ComboboxکومبوباکسA combobox accepts typing and shows a filtered list of options.
- Command paletteپالت فرمانA command palette is a search box opened by a keyboard shortcut that finds and runs any action or page by typing.
- ComponentکامپوننتA component is a self-contained interface piece with defined looks, behavior and states, such as a button or text field, reused many times.
- Component anatomyآناتومی کامپوننتComponent anatomy maps the parts of a component, such as the label, input, icon, helper text and error message of a field.
- Component API surfaceسطح API کامپوننتA component's API surface is everything consumers can pass in or receive: props, events and subcomponents.
- Component libraryکتابخانهٔ کامپوننتA component library is the set of ready-made interface pieces in code, such as buttons, fields and dialogs, used the same way on every screen.
- Component lifecycleچرخهٔ حیات کامپوننتA component's lifecycle is the stages from proposal to removal: experimental, stable, deprecated and removed.
- Component registryرجیستری کامپوننتA component registry is an installable list of components from which a CLI copies each component's code into the project.
- Component stateحالت کامپوننتComponent state is how a component looks and behaves in different situations: default, hover, focus, pressed, disabled, loading, error and selected.
- Component tokenتوکن کامپوننتA component token is scoped to a single component, such as button height or tooltip background.
- Containerظرف محتواA container is a box with a maximum width that keeps content centered on large screens so lines do not get too long.
- Contextزمینهٔ مدلContext is everything the model has when it answers: the prompt, rule files, tool results and earlier conversation.
- Context windowپنجرهٔ زمینهThe context window is the maximum amount of text a model can consider at once, measured in tokens.
- Contrast ratioنسبت کنتراستContrast ratio is the luminance difference between text and background: at least 4.5:1 for normal text and 3:1 for large text and UI parts.
- Contribution modelمدل مشارکتA contribution model defines how product teams propose and add components or changes to the design system.
- Control sizeاندازهٔ کنترلControl size is the shared height of buttons, fields and selectors on a screen, which must match within a row.
- CSS custom propertyمتغیر CSSA CSS custom property is a value such as --primary defined in CSS and read anywhere with var(); the usual way tokens reach the browser.
- CSS logical propertiesویژگیهای منطقی CSSLogical properties use start and end instead of left and right in CSS, so layout works in both directions.
D
- Dark modeحالت تیرهDark mode is a version of the interface with a dark background and light text, easier in low light and preferred by many users.
- Data tableجدول دادهA data table shows rows and columns of information with sorting, filtering, selection and pagination.
- Data visualization paletteپالت نمودارA data visualization palette is a fixed order of colors for chart series that stay distinguishable, including in dark mode.
- Date pickerانتخابگر تاریخA date picker selects a date from a calendar, which is the Solar Hijri calendar in Persian interfaces.
- Densityتراکم رابطDensity is how tight spacing and control sizes are; data-heavy interfaces are denser, public ones more open.
- DeprecationمنسوخسازیDeprecation announces that a component or prop will be removed while it still works for now.
- Design debtبدهی طراحیDesign debt is the inconsistency that piles up with every shortcut: three blues, five button sizes, two styles of error message.
- Design handoffتحویل به توسعهDesign handoff delivers the final design with specs, states and behavior to developers.
- Design languageزبان طراحیA design language is a brand's visual and behavioral personality: the color, form, motion and voice that set the product apart.
- Design principleاصل طراحیA design principle is a short statement that settles hard trade-offs, such as clarity over decoration.
- Design specificationمشخصات فنی طراحیA design specification lists the sizes, spacing, colors and behavior a developer needs to build a design accurately.
- Design systemدیزاینسیستمA design system is the shared set of rules, tokens, components and patterns that keeps every screen of a product consistent and predictable.
- Design system governanceحاکمیت دیزاینسیستمDesign system governance is the set of rules and processes that decide what enters the system, how it changes and who decides.
- Design system maturity modelمدل بلوغ دیزاینسیستمA maturity model shows where a design system stands, from a simple library to a fully governed and measured internal product.
- Design system ROIبازگشت سرمایهٔ دیزاینسیستمDesign system ROI is the time and money a system saves compared with what it costs to build and maintain.
- Design to codeطراحی به کدDesign to code turns designs into a real interface, made simpler when components and tokens share names on both sides.
- Design tokenتوکن طراحیA design token is a named design value, such as a color, spacing or radius, used in code and design files instead of a raw number.
- Design Tokens Format (DTCG)قالب استاندارد توکن (DTCG)DTCG is the standard JSON format for design tokens that design tools and build tools understand.
- DESIGN.mdDESIGN.mdDESIGN.md is a structured file of a product's tokens and design rules that any agent can read, even offline.
- DesignOpsعملیات طراحیDesignOps is the processes, tools and roles that keep design work fast and orderly at scale.
- DialogدیالوگA dialog is a window over the page that captures attention for a short task or decision while the rest is inert.
- Disabled stateحالت غیرفعالThe disabled state shows a control that is visible but not usable right now.
- DrawerکشوA drawer is a panel that slides in from a screen edge, usually the bottom on phones or the side on desktop.
- Dropdown menuمنوی کشوییA dropdown menu is a list of actions opened from a button, such as edit, copy and delete.
E
- Elevationارتفاع سطحElevation shows how high a surface (card, menu, dialog) sits above others, with shadows in light mode and lightness in dark mode.
- Empty stateحالت خالیAn empty state is what users see when a list or page has no data yet, such as first use or a filter with no results.
- Error messageپیام خطاAn error message says what went wrong and how to fix it, next to the field or section.
F
- Fallback fontفونت جایگزینA fallback font is shown until the web font loads or when it is missing, usually a prioritized list.
- Federated modelمدل توزیعشدهIn a federated model representatives from several product teams build and maintain the design system together.
- FeedbackبازخوردFeedback is the visual, audible or haptic response to a user's action so they know it registered and what happened.
- Figma variablesمتغیرهای فیگماFigma variables define color, number and text tokens with several modes, such as light and dark.
- File uploadبارگذاری فایلFile upload lets users pick or drop a file and send it, with progress and upload errors.
- FilterفیلترA filter narrows a list to items matching a condition, such as price, category or date.
- Fitts's lawقانون فیتسFitts's law says larger, closer targets are faster to reach.
- Focus managementمدیریت فوکوسFocus management deliberately moves focus after page changes, such as to the first form error or a new page heading.
- Focus ringحلقهٔ فوکوسA focus ring is the outline around an element focused by keyboard.
- Focus stateحالت فوکوسThe focus state visibly marks the element selected by keyboard and ready for input.
- Focus trapحبس فوکوسA focus trap keeps keyboard focus inside an open window such as a dialog.
- Font familyخانوادهٔ فونتA font family is one type design with all its weights and styles, such as light, regular, bold and black.
- Font weightوزن فونتFont weight is the thickness of letters, from thin (100) to black (900), used for hierarchy without enlarging text.
- FormفرمA form is a set of fields and a submit button for collecting information from users.
G
- Generative UIرابط مولدGenerative UI is interface the AI builds on the fly for the user's need, such as a card or form inside an assistant reply.
- Gestalt principlesاصول گشتالتGestalt principles describe how the mind groups elements: proximity, similarity, continuity and closure.
- Grid systemسیستم گریدA grid system is the network of columns and gutters that page content is placed on for consistent alignment.
- GuardrailحفاظA guardrail is a rule or automatic check that keeps an agent's output or actions within allowed bounds.
- Gutterفاصلهٔ ستونهاA gutter is the empty space between grid columns that separates side-by-side content.
H
- Hallucinationتوهم مدلA hallucination is an answer that sounds right but is made up or wrong, such as a component or prop that does not exist.
- Helper textمتن راهنماHelper text is a short hint below a field explaining what to enter and in what format.
- Hick's lawقانون هیکHick's law says decision time grows with the number of choices.
- High contrast modeحالت کنتراست بالاHigh contrast mode is a theme with strong text and background contrast for low-vision users or bright environments.
- Hover stateحالت هاورThe hover state changes an element's look when the pointer is over it, signaling it is clickable.
- Human in the loopتأیید انسانیHuman in the loop means asking the user to decide or approve at sensitive points of an agent's work, such as before paying or deleting.
I
J
K
L
- Labelبرچسب فیلدA label says what a field is for and is linked to it so screen readers announce it.
- Landmarkناحیهٔ نشانهLandmarks are the main page regions, such as header, nav, main and footer, that screen readers jump between.
- Large language model (LLM)مدل زبانی بزرگA large language model is an AI model trained on vast amounts of text that can generate text, code and answers.
- Layout shiftجابهجایی چیدمانLayout shift is content jumping during load, for example when a late image pushes text down.
- Letter spacingفاصلهٔ حروفLetter spacing is extra or reduced space between all letters of a text.
- Line heightارتفاع خطLine height is the vertical distance between consecutive lines of text and directly affects readability.
- LinkلینکA link takes the user to another page or section.
- Live regionناحیهٔ زندهA live region is a part of the page whose changes screen readers announce automatically.
- LLM tokenتوکن مدل زبانیAn LLM token is a small unit of text, often part of a word, that models read and are billed and limited by.
- llms.txtفایل llms.txtllms.txt is a plain text file at a site's root that summarizes its content for language models and agents.
- Loading stateحالت بارگذاریThe loading state is what users see while data or a result has not arrived yet.
- Localization (l10n)بومیسازیLocalization adapts a product to a region's language and culture: translation, calendar, date and number formats, currency and direction.
M
- MicrointeractionریزتعاملA microinteraction is a small single-purpose moment, such as liking, toggling a switch or pull to refresh.
- MigrationمهاجرتMigration updates consumer code for a new system version or replaces old and hand-built components.
- Mobile-firstاول موبایلMobile-first means designing and coding from the smallest screen and adding detail for larger ones.
- Model Context Protocol (MCP)پروتکل MCPMCP is the standard protocol AI agents use to connect to external tools and data, one port for all.
- Motion tokenتوکن حرکتMotion tokens are fixed durations and easing curves so every animation in the product shares one rhythm.
- Multi-brandچندبرندیMulti-brand means one design system supports several brands or products with different looks from a single component set.
N
- NavigationناوبریNavigation is the structure and controls for moving between parts of a product: top bar, sidebar, bottom bar.
- Neutral colorرنگ خنثیNeutral colors are the gray family that builds most of the interface: text, backgrounds, borders and surfaces.
- Number and currency formattingقالببندی عدد و مبلغNumber formatting shows numbers with thousands separators, the right digits and one consistent currency.
O
- OKLCHفضای رنگی OKLCHOKLCH is a perceptual color space with lightness, chroma and hue, where numeric changes match visual changes.
- On-colorرنگ روی سطحAn on-color is the text and icon color placed on a colored surface, chosen to contrast with it.
- OpacityشفافیتOpacity is how much of what lies behind an element shows through; systems use it for overlays, not for text color or disabled states.
- Overlayلایهٔ پوشانندهAn overlay is the dimmed layer behind a dialog or drawer that shows the rest of the page as inactive.
P
- Page patternالگوی صفحهA page pattern is the layout and behavior rule that fits a type of page, such as one primary action per view or a fixed place for the save button.
- PaginationصفحهبندیPagination splits a long list into pages with controls for next, previous or a specific page.
- Pattern libraryکتابخانهٔ الگوA pattern library is a collection of proven solutions to recurring interface problems, such as sign-in, search or empty lists.
- Persian digitsارقام فارسیPersian digits are the Persian forms of 0 to 9 shown in Persian interfaces, separate from Latin digits used for storage and processing.
- Persian typographyتایپوگرافی فارسیPersian typography covers the specific rules for Persian text: more line height, Persian digits, the zero-width non-joiner, no letter spacing and right-to-left direction.
- Placeholderمتن نمونهA placeholder is faint text in an empty field showing an example, removed when typing starts.
- PopoverپاپاورA popover is a small panel opened next to an element, holding interactive content such as a small form.
- Pressed stateحالت فشردهThe pressed state is the instant feedback while an element is clicked or tapped.
- Primary actionاقدام اصلیThe primary action is the most important thing a user does in a view, shown with the most prominent button.
- Primitive tokenتوکن پایهA primitive token is the first layer of tokens, holding raw values with no usage meaning, such as blue-600 or spacing-4.
- Progress indicatorنشانگر پیشرفتA progress indicator is a bar or circle showing how far a task has progressed or that it is ongoing.
- Progressive disclosureافشای تدریجیProgressive disclosure shows only essentials first and keeps advanced options one step away.
- PromptپرامپتA prompt is the instruction or request given to an LLM or agent.
- Prompt engineeringمهندسی پرامپتPrompt engineering is deliberately designing prompts and model context for more accurate, predictable and repeatable output.
- PropپراپA prop is an input passed to a component to set its behavior or look, such as variant, size or disabled.
R
- Radio buttonدکمهٔ رادیوییA radio button lets the user choose exactly one of several visible options.
- Reduced motionکاهش حرکتReduced motion is an OS setting asking for large and unnecessary animations to be reduced or removed.
- Responsive designطراحی واکنشگراResponsive design is an interface that adapts to any screen size, from phone to large monitor.
- Retrieval-augmented generation (RAG)تولید مبتنی بر بازیابیRAG is a method where the model retrieves relevant passages from documents or data before answering and grounds the answer in them.
- Right-to-left (RTL)راستبهچپRight-to-left is the writing direction of languages such as Persian and Arabic; in a real RTL interface the layout, directional icons and previous/next navigation flip too.
S
- Safe areaناحیهٔ امنThe safe area is the part of a phone screen not hidden by the camera notch, rounded corners or home bar.
- Screen readerصفحهخوانA screen reader is software that reads page content aloud or converts it to braille for blind or low-vision users.
- SelectانتخابگرA select opens a list of options from which the user picks one.
- Semantic HTMLHTML معناییSemantic HTML means using the right tag for each job: button, a, h1 to h6 and nav.
- Semantic tokenتوکن معناییA semantic token names a purpose, not a value, such as primary, destructive or border-subtle.
- ShadeShadeA shade is one lightness step of a color in the palette, usually numbered from 50 (lightest) to 950 (darkest).
- ShadowسایهA shadow is a darkening effect beneath a surface that shows its depth and elevation.
- Sidebarنوار کناریA sidebar is a column of navigation or tools beside the page, common in admin interfaces.
- Single source of truthمنبع واحد حقیقتA single source of truth means each design decision is defined in one place and every tool and screen reads from it.
- SkeletonاسکلتونA skeleton is a gray, simplified shape of content that holds its place until real data arrives.
- Skip linkلینک پرشA skip link appears on the first Tab and jumps keyboard users straight to the main content.
- SliderاسلایدرA slider selects a value or range by dragging a handle along a track.
- Spacing scaleمقیاس فاصلهگذاریA spacing scale is a small set of distances, usually multiples of 4 or 8 pixels, used for every gap and margin.
- Status colorرنگ وضعیتStatus colors carry fixed meaning: red for error, green for success, yellow for warning and blue for information.
- StepperاستپرA stepper shows the steps of a multi-step process: current, completed and remaining.
- Streaming responseپاسخ تدریجیA streaming response shows the model's answer as it is generated instead of waiting for all of it.
- Style guideراهنمای سبکA style guide documents a brand's visual rules: logo, color, typography, imagery and tone of voice.
- SurfaceسطحA surface is any background layer content sits on: page, card, menu or dialog.
- SwitchسوئیچA switch is an on/off control whose change applies immediately, such as enabling notifications.
T
- Tab orderترتیب تبTab order is the sequence in which focus moves between elements when pressing Tab.
- TabsزبانهTabs switch between peer views in one place, showing one at a time.
- Text fieldفیلد متنیA text field lets users enter text, with a label, helper text and error message.
- Text styleسبک متنیA text style is a named combination of font, size, weight and line height, such as page title or body text.
- ThemeتمA theme is the set of values assigned to semantic tokens so the whole product's look, such as brand color or dark mode, changes at once.
- ThemingتمپذیریTheming is a system's ability to take on a new look, such as a client brand or dark mode, without rewriting components.
- Toastپیام موقتA toast is a short message, such as Saved, that appears for a few seconds after an action.
- Token naming conventionقاعدهٔ نامگذاری توکنA token naming convention is a fixed pattern for token names, such as category, role, state and intensity, so the right name is easy to guess.
- Token tiersلایهبندی توکنToken tiers arrange tokens in primitive, semantic and component levels, each pointing only to the level below.
- Token transformerتبدیلگر توکنA token transformer turns one token file into each platform's output: CSS, Android, iOS or JavaScript.
- Tool callفراخوانی ابزارA tool call is when an agent invokes an external tool, such as search, file reading or an API, with specific input and gets the result.
- TooltipتولتیپA tooltip is a small text label that appears on hover or focus to explain an element.
- Touch targetناحیهٔ لمسA touch target is the tappable size of a button or link, which should be at least 44 by 44 pixels.
- Type scaleمقیاس تایپوگرافیA type scale is a small set of text sizes, often with a fixed ratio, from which all headings and body text are chosen.
- TypographyتایپوگرافیTypography is the craft and rules of setting text: typeface, size, weight, line height and heading hierarchy.
U
- UI animationانیمیشن رابطUI animation is motion that explains a state change, such as a drawer sliding in from its edge.
- UI kitکیت رابط کاربریA UI kit is a ready-made design file of components and screens that designers use to mock up quickly.
- UndoبازگردانیUndo lets users reverse an action right after doing it, such as Deleted, Undo.
- Usage guidelineدستورالعمل استفادهA usage guideline explains when, where and how to use a component or pattern, and when not to, often with do and don't examples.
V
- ValidationاعتبارسنجیValidation checks that user input is correct, such as email format, ID length or required fields.
- Variable fontفونت متغیرA variable font is one font file that holds all weights, and sometimes widths, continuously instead of separate files.
- VariantواریانتA variant is a predefined form of a component for another use, such as primary, outline or ghost buttons.
- VersioningنسخهبندیVersioning numbers each release so consumers know what changed and how safe updating is.
- Visual hierarchyسلسلهمراتب بصریVisual hierarchy arranges size, weight, color and spacing so the eye knows what to see first and next.
- Voice and toneلحن و صدای برندVoice and tone is the consistent way interface text is written: buttons, error messages, empty states and hints.
W
- WCAGاستاندارد WCAGWCAG is the global Web Content Accessibility Guidelines, defining measurable criteria such as minimum contrast and keyboard use at levels A, AA and AAA.
- Web fontوبفونتA web font is downloaded with the site so text looks the same on every device.
- White-labelوایتلیبلWhite-label means a product ships under a client's brand, changing only color, logo and font.
Z
- Z-indexترتیب لایهZ-index decides which element sits on top of which, such as a dialog over a menu and a toast over everything.
- Zero-width non-joiner (ZWNJ)نیمفاصلهThe zero-width non-joiner is an invisible character that separates two letters without a full space, as in Persian verb prefixes and plurals.