Web Designer interview questions

A design system should layer reusable decisions from low-level foundations up to complete interaction patterns.

• Foundations define shared color, type, spacing, elevation, and motion rules without prescribing a whole interface.
• Primitives turn those rules into focused building blocks such as text, icon, button, and input components.
• Composed components combine primitives into stable units such as search fields, cards, or dialogs.
• Patterns document how components work together in flows such as authentication or filtering without becoming rigid page templates.

A useful component boundary encloses one recognizable responsibility with a stable contract.

• Repeated structure, behavior, and accessibility semantics are stronger reasons for a component than visual similarity alone.
• Content that changes independently should enter through properties or slots rather than require detaching the component.
• A component that exposes every internal layer becomes fragile because consumers can create unsupported combinations.
• Splitting too far creates assembly overhead, while one large component becomes difficult to reuse outside its original context.

A difference belongs in a variant when it changes a finite, supported axis of the same component contract.

• Size, emphasis, and interaction state are typical variant axes because the component keeps the same purpose and anatomy.
• A structural change with different semantics, such as a checkbox versus a switch, deserves a separate component despite visual similarity.
• Independent options should use properties or composition so multiplying them does not create a variant for every combination.
• Each allowed combination needs a real use case; technically possible combinations are not automatically part of the API.

Interaction states should represent distinct user or system conditions with explicit visual and behavioral rules.

• Hover, focus-visible, and pressed describe different input moments and should not be collapsed into one darker style.
• Selected, checked, and expanded persist after an action, while pressed normally lasts only during activation.
• Loading should preserve context and prevent duplicate actions without being confused with disabled, which communicates unavailability.
• Invalid and success states need text or another non-color cue, not only a border hue.

The three layers move from raw values to meaning and then to a component-specific decision.

• A primitive such as blue-600 or space-300 names a value without saying where it belongs.
• A semantic token such as color-action-primary or space-content-gap names a role that can survive a theme change.
• A component token such as button-primary-background resolves a local need and usually aliases a semantic token.
• Components should consume the highest meaningful layer so raw palette changes do not leak across every design and code file.

Aliases let stable role names resolve to different values for each supported context.

• color-text-primary can point to gray-950 in light mode and gray-050 in dark mode while component references stay unchanged.
• A brand mode can redirect action roles to another palette without duplicating every button or link token.
• Alias chains should remain short enough to trace from a component value to its source during debugging.
• Modes should represent orthogonal contexts such as theme or density, not become a store for unrelated one-off exceptions.

A durable token name describes role and hierarchy without embedding a temporary visual value.

• Names such as color-text-muted remain valid if muted text changes from gray to a tinted neutral.
• A consistent order such as category, concept, property, state makes tokens searchable and predictable.
• State suffixes should be explicit, for example action-primary-background-hover rather than action-blue-dark.
• The taxonomy must work in Figma and code, so separators and reserved words need an agreed transformation rule.

Governance defines how the system accepts, changes, documents, and retires shared decisions.

• Contribution criteria distinguish a recurring product need from a local pattern that should remain outside the core library.
• Named owners review visual, interaction, accessibility, and implementation implications before publication.
• Release notes and migration guidance tell consumers what changed and whether adoption requires work.
• Adoption feedback and usage data reveal missing capabilities, duplicate components, and rules that teams routinely bypass.

A deprecation policy lets the system evolve without silently breaking existing products.

• The replacement should be published before the old component or token stops receiving normal use.
• A deprecation notice names the reason, supported migration path, and removal date or review point.
• Figma assets, code packages, and documentation need matching status so teams do not adopt an obsolete source.
• Immediate removal is reserved for severe risks; ordinary cleanup should allow consumers time to migrate.

Accessibility should be part of the component contract rather than an optional note applied by each screen designer.

• The component defines keyboard behavior, focus order, target size, and visible states alongside its visual anatomy.
• Text, icons, boundaries, and focus indicators are checked against every supported surface and state.
• Properties should make the accessible path easiest, for example requiring a label while exposing icon-only use deliberately.
• Documentation identifies responsibilities that remain with the consumer, such as meaningful button copy or dialog titles.

A modular scale derives related sizes by multiplying a base size by a chosen ratio.

• A 16-pixel base with a 1.25 ratio yields steps near 16, 20, 25, and 31 pixels before rounding.
• A small ratio provides more subtle roles for dense interfaces, while a large ratio creates dramatic hierarchy with fewer usable intermediate sizes.
• The calculated values are starting points that can be rounded to render cleanly and assigned to semantic text roles.
• Captions, data tables, or marketing display type may need controlled exceptions instead of forcing every text size onto one sequence.

Combining units lets type respond to available width without making the viewport its only source of scale.

• A pure vw value can become illegibly small or excessively large unless separate limits contain it.
• clamp() can pair rem minimum and maximum values with a preferred calc() term that mixes rem and viewport units.
• The rem contribution preserves more response to browser text settings, while the viewport term provides gradual layout adaptation.
• Body copy should use a narrow range, and every role still needs zoom, wrapping, and intermediate-width checks.

Optical sizing uses glyph drawings adjusted for their intended rendered size rather than geometrically scaling one outline.

• Small optical sizes may use more open counters, sturdier strokes, and wider spacing to remain clear.
• Display sizes can support finer detail, stronger stroke contrast, and tighter proportions where more pixels are available.
• A variable font with an opsz axis can interpolate these changes, and font-optical-sizing: auto lets a supporting browser derive the setting from font size.
• The effect depends on the typeface, so designers should compare actual specimens instead of assuming every optical axis improves the chosen role.

A variable font stores continuous design axes in one font resource, enabling finer control than a few static files.

• Standard axes include weight, width, slant, italic, and optical size, while a family may add custom axes.
• Intermediate weights can tune hierarchy without synthesizing a style the typeface did not draw.
• One variable file can replace several static files, but a broad glyph set and many axes may still make that file large.
• Browser support, fallback styles, axis ranges, and the font license must be verified before the design depends on them.

Vertical rhythm coordinates line boxes and block spacing so related text forms a repeatable reading cadence.

• Body line height establishes the densest recurring interval, while heading line height can be tighter because display text wraps less often.
• The space above a heading should signal a stronger section break than the space below it toward its paragraph.
• Paragraph, list, and caption spacing can use multiples or related steps without forcing every element onto an exact baseline grid.
• Controls and mixed media may need optical adjustment because strict baseline alignment can damage their internal balance.

An intrinsic layout lets content and available space determine more of the result than fixed viewport-specific dimensions.

• min-content represents the smallest width content can take without avoidable overflow, while max-content represents its ideal unwrapped width.
• Flexible tracks and wrapping allow a composition to adapt before a media query is necessary.
• min(), max(), and clamp() can express boundaries that combine content, container, and viewport constraints.
• Intrinsic behavior reduces breakpoint count, but explicit structural changes still need queries when the composition itself must change.

The combination creates as many tracks as fit while protecting each track's usable minimum.

• repeat(auto-fit, minmax(16rem, 1fr)) collapses empty tracks and distributes remaining width among present columns.
• The minimum controls when another column no longer fits, so it should reflect card content rather than a device label.
• The 1fr maximum lets tracks share extra space instead of leaving an arbitrary gap at the container edge.
• auto-fill preserves empty track slots, which is useful only when that reserved grid structure is intentional.

Container queries let a component respond to the space its parent provides rather than the size of the whole browser window.

• The same card can use a compact layout in a sidebar and a richer layout in main content at one viewport width.
• A parent must establish an appropriate query container, commonly with container-type: inline-size.
• Query thresholds should mark where the component's own content or anatomy stops working.
• Viewport queries remain appropriate for page-level changes tied to the overall screen or environment.

Subgrid lets a nested grid reuse track definitions from its parent instead of creating an unrelated internal grid.

• Card titles, descriptions, and actions can align across siblings even when their content lengths differ.
• The nested element participates in the parent row or column tracks chosen for the subgrid axis.
• Shared alignment becomes structural rather than dependent on duplicated pixel values or fixed heights.
• Subgrid is unnecessary when the nested content needs independent tracks and no cross-component alignment.

Logical properties express spacing and size by text flow instead of hard-coding physical sides.

• margin-inline-start follows the start of an LTR or RTL line, while margin-left always targets the physical left side.
• inline-size and block-size map to the inline and block axes, including vertical writing modes.
• Logical padding, borders, and inset values reduce locale-specific overrides when direction changes.
• A physical property still belongs where the physical edge is intentional, such as a viewport-fixed control.