How Thumbtack structures their design system | Figma Blog

Thumbtack structures its Thumbprint design system as three layers: design tokens, atomic CSS, and reusable UI components. Each layer trades some flexibility for greater productivity, consistency, accessibility, and quality. The approach lets developers choose the highest-level solution that fits their needs while retaining lower-level escape hatches for custom or native experiences.

Three-Layer Architecture

• Thumbprint Tokens

  • The foundation shared by web and native clients.
  • Defines granular properties such as colors, typography, spacing, sizing, radii, and shadows.
  • Offers the greatest flexibility but the least built-in structure.

• Thumbprint Atomic

  • An atomic CSS library built on the tokens.
  • Enables developers to build interfaces without writing custom CSS.
  • Includes utilities such as aspect-ratio classes for maintaining proportions in responsive or embedded media.

• Thumbprint Components

  • Provides accessible, prebuilt implementations of common patterns, including alerts, buttons, date pickers, and star ratings.
  • Improves development speed, consistency, and accessibility.
  • Developers can fall back to Atomic or Tokens when no suitable component exists.

Layered Components and Tokens

• Individual layers can contain their own sub-layers for added flexibility.
• Thumbprint’s modal system separates:
  • ModalCurtain, which supplies core usability and behavior without visual styling.
  • Modal, which adds the standard visual design on top of ModalCurtain.
• Developers generally use the more prescriptive Modal, but can use ModalCurtain for unusual requirements.
• Tokens can also inherit from one another. For example, a semantic token such as button-cta-background-color may derive from a broader token like cta-background-color, which ultimately maps to a raw value such as blue-400.
• Users are encouraged to select the highest abstraction appropriate for their use case.

Why the Structure Helps

• Higher layers reduce repeated work and improve consistency.
• Lower layers preserve flexibility for custom product needs.
• Components allow engineers to focus on product functionality instead of rebuilding common UI patterns.
• Layered primitives provide a controlled way to support exceptions without abandoning the design system.
• The architecture is intended to simplify maintenance and save time for both developers and end users.

Thumbprint’s model demonstrates that a design system does not need to choose between standardization and flexibility. A layered structure provides strong defaults while preserving lower-level tools for cases that require customization.