# How Thumbtack structures their design system

DevFeed: [How Thumbtack structures their design system](<https://devfeed.tech/articles/how-thumbtack-structures-their-design-system-9788.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/how-thumbtack-structures-their-design-system/>)

Author: Daniel O'Connor

Published: 2023-07-13T00:00:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Front end](<https://devfeed.tech/topics/frontend.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Software](<https://devfeed.tech/topics/software.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [atomic](<https://devfeed.tech/tags/atomic.md>), [component](<https://devfeed.tech/tags/component.md>), [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [design](<https://devfeed.tech/tags/design.md>), [design-systems](<https://devfeed.tech/tags/design-systems.md>), [developers](<https://devfeed.tech/tags/developers.md>), [efficiency](<https://devfeed.tech/tags/efficiency.md>), [productivity](<https://devfeed.tech/tags/productivity.md>), [tokens](<https://devfeed.tech/tags/tokens.md>), [ui](<https://devfeed.tech/tags/ui.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

The article explains how Thumbtack organizes its Thumbprint design system into three layers: design tokens, an atomic CSS library, and reusable UI components. This layered architecture supports flexibility, efficiency, accessibility, and developer productivity across web and native clients.

## Source excerpt

Staff Software Engineer Daniel O'Connor peels back the layers of the home service platform's design system, Thumbprint, to show how they built it for flexibility and efficiency.