🎨 Design &amp; UX

Alignment: Invisible Lines That Structure Interfaces

Alignment is invisible scaffolding: eyes travel along shared edges instead of hunting anchors. In Figma, left-aligning labels and inputs turns chaos into readable flow. Center-aligning long text is the footgun; ragged invisible edges increase reading friction.

Font Pairing Is Casting, Not Matchmaking

Font pairing is casting: one lead voice, one supporting role that contrasts without competing. A display headline face plus a neutral body sans guides the eye through a dashboard. Using two fonts with similar weights or x-heights creates noise, not hierarchy.

Figma Permissions Cascade Downward

Figma permissions flow downward: team access opens every project and file inside it. Use share links for quick reviews, but direct invites gate specific files. Inviting someone to a team exposes every project, while a file invite keeps the rest hidden.

Mathematical Expressions in Figma Prototypes

Use variable modes as contexts for math in Figma prototypes. Instead of creating one variable per item, a single number variable with multiple modes lets expressions calculate independent counts, like separate produce counters in a shopping cart.

Rhythm and Repetition in UI Layouts

Rhythm turns random elements into scannable patterns by repeating spatial intervals, not just shapes. Use it in lists, dashboards, and card grids where users hunt for information.

Design a type-safe polymorphic component that renders as different HTML elements

Tests TypeScript generics and prop forwarding in design systems. Answer: generic as constrained to keyof JSX.IntrinsicElements, merged with ComponentPropsWithoutRef<C>, omit clashes, forward ref with ElementRef.

What WAI-ARIA attributes and keyboard interactions make Tabs accessible?

This tests mastery of the W3C Tabs pattern. A strong answer covers role tablist tab tabpanel, aria-selected, aria-controls, and arrow-key roving focus with optional auto-activation. A red flag is treating tabs as buttons and relying only on the Tab key.

How would you structure a flexible Card component API?

Tests composition-over-configuration thinking in design systems. A strong answer uses compound components or slots so consumers reorder or omit title, image, and body freely without prop drilling. Red flag: rigid boolean props that freeze layout order.

Two strategies to prevent style leakage in reusable components and their trade-offs

This tests style encapsulation in design systems. A strong answer contrasts Shadow DOM, which fully isolates CSS via a shadow root, with scoped naming like BEM or CSS Modules. Red flag: proposing global resets or !important as a solution.

When should data in a reusable component be a prop or state?

This tests controlled versus uncontrolled patterns. Great answers ask who owns the data: props when parent must drive or observe it, state only for private details.

How do you handle a one-off token exception for a campaign?

Tests balancing speed and systemic consistency. Strong answers outline a governance fast-track with sunset clauses, document the exception, and isolate it via campaign overrides instead of mutating core tokens. Red flag: permanently hardcoding the one-off.

Describe a robust architecture for implementing theming using design tokens

Three tiers, CSS custom properties for live switching, and layered overrides.

Design token pipeline serving Web, iOS, and Android

This tests cross-platform design system architecture and governance. A strong answer uses W3C JSON tokens in option, decision, component layers, with Style Dictionary generating Web, iOS, and Android outputs. Red flag: using Figma or CSS as source of truth.

Implement a typographic scale using design tokens and accessible properties

Token-driven typography and accessibility. Start with base size (14-16px) and ratio token, compute sizes, then bundle font-size with line-height, letter-spacing, weight, and family in composite tokens. Red flag: ignoring line-height, spacing, or composites.

What is a design token versus a CSS or Sass variable?

Whether you understand abstraction layers in design systems and cross-platform interoperability. Define tokens as vendor-neutral design decisions that generate platform-specific code; contrast with CSS variables (runtime, web-only) and Sass (compile-time…

How does a mature design system change cross-functional collaboration?

Tests whether you view maturity as a collaborative operating framework, not just components. Strong answers hit shared definitions of done, living documentation, code/design parity, and trust-based adoption. Red flag: calling it a docs or enforcement problem.

How do you handle a product team requesting a custom Button?

This tests governance discipline. A strong answer asks context questions to separate misuse from a real gap, uses a decision tree for actions and CTAs, and extends the system with a documented variant. A red flag is instantly greenlighting a custom fork.

What governance model would you propose for a centralized design system?

Tests balancing standardization with autonomy across legacy silos. A strong answer proposes a hybrid model with a core team and contribution rules, weighing consistency against migration cost.

What metrics measure design system success and adoption?

Tests if you connect design system health to delivery speed and consistency. Strong answers hit adoption rate, component usage, design-to-code parity, and accessibility compliance tied to team behavior.