DOCSEARCHbyAlgolia
Submit Docs

Thumbprint Design System

website·Indexed 32 days ago

https://thumbprint.design/

A comprehensive design system and component library for Thumbtack, providing UI components and design tokens across React, Android, iOS (SwiftUI/UIKit), and SCSS. Includes documentation for components such as Buttons, Modals, Text Inputs, Chips, and Pills, as well as V1 and V2 versioning for consistent user interface implementation.

Tokens
93.2K
Snippets
493
Records
734
Agent score
66%

What's inside Thumbprint

  1. Overview of TPAvatar component

    v1
    TPAvatar is a SwiftUI container used to display images for Users (people) or Entities (companies, businesses, or services). It supports loading images via URL, using local images, or displaying initials as a fallback when no image is available.

  2. Overview of Thumbprint iOS Button (UIKit)

    v1
    The Button component is used for clickable elements that perform actions. It supports text labels and an optional icon (either leading or trailing, but not both). Note: The UIKit version of Thumbprint on iOS is being deprecated in favor of SwiftUI.

  3. Overview of the Thumbprint Design System

    Thumbprint is the design system used for Thumbtack products. It is a living system designed to streamline the design and development process through consolidation, standardization, and documentation. Its primary goal is to reduce decision-making friction, allowing teams to focus on higher-order problems while improving quality and consistency for customers.

  4. Overview of Fab (Floating Action Button) components

    v1

    Floating Action Buttons (FABs) are used for high-priority tasks and sit high in the page hierarchy. Because of their prominence, they should be used sparingly. There are two primary types:

    1. ThumbprintIconFab: Typically placed in the lower right-hand side of the UI for high-priority actions.
    2. ThumbprintTextFab: Typically placed in the bottom middle of the UI; includes text and an optional leading icon.

  5. Overview of Thumbtack Content Design Style Guide

    The Thumbtack style guide provides writing guidelines for product and brand teams to ensure a clear and consistent user experience. The guide is organized into the following core areas:

    • Voice and Tone: Brand expression and contextual adaptation.
    • Writing for Everyone: Inclusive and accessible writing principles.
    • Writing with AI: Principles for using AI in the design process.
    • Grammar and Mechanics: Standards for punctuation, capitalization, and technical communication.
    • Common Content: Styling for specific surfaces like emails and error messages.
    • Preferred Terms: Approved and discouraged terminology used at Thumbtack.

  6. Overview of ModalCurtain component

    ModalCurtain is a low-level React component used to create accessible overlays that cover the page. It is intended for use only when the standard Modal component is too restrictive. It provides several built-in accessibility and UX features:

    • Focus trap: Moves focus to the first interactive element and prevents tabbing to the background page.
    • Scroll lock: Disables page scrolling while the curtain is open.
    • DOM Portal: Appends the HTML to the end of the <body> tag to avoid z-index conflicts.
    • Keyboard support: Listens for the Esc key to trigger closing.
    • Click-to-close: Provides a mechanism to close the modal when the backdrop is clicked.

    Note: The component handles positioning, overflow, z-index, visibility, and opacity via CSS, but does not provide opinionated styles like background colors or padding.

  7. Use TextFloatingActionButton for text-based actions

    v1
    The TextFloatingActionButton is used to display text and optionally includes a UIView to the left of the text. It supports primary and secondary themes, or custom themes via the TextFloatingActionButton.Theme struct.
    // Initialize with primary theme
let fab = TextFloatingActionButton(text: "Action", accessibilityLabel: "Action Label", theme: .primary)

// Set a left view
fab.setLeftView(someUIView, largeContentImage: someImage)

  8. Use the PillV2 component for status or category labels

    v2
    The PillV2 component is a read-only label used to qualify information. It accepts text content as children and supports optional themes and icons to indicate status or categories.
    <PillV2>
  Label
</PillV2>

  9. Use the ButtonV2 component

    v2
    The ButtonV2 component is used for clickable elements that perform actions. It supports various themes for different emphasis levels, including a high-emphasis alert theme reserved for destructive actions like deleting.
    <ButtonV2 theme="primary">Primary</ButtonV2>
<ButtonV2 theme="secondary">Secondary</ButtonV2>
<ButtonV2 theme="tertiary">Tertiary</ButtonV2>
<ButtonV2 theme="alert">Alert</ButtonV2>
<ButtonV2 theme="caution">Caution</ButtonV2>

  10. Implement a binary choice Switch on iOS (UIKit)

    v1
    The Switch component in Thumbprint for iOS (UIKit) is implemented using the built-in Apple UIKit component UISwitch. It is used to provide a binary choice, such as on/off. Note that Thumbprint on iOS is transitioning from UIKit to SwiftUI, and UIKit documentation is being deprecated.

  11. Implement a 12-column responsive layout with Grid

    v1
    The Grid system serves as the foundation for page-level layouts. It is based on a 12-column system where the grid can contain any number of columns divisible by 12. Columns are responsive and can adjust their width at any breakpoint. By default, grid columns stack vertically.

  12. Use the Pill component to render small labels

    v1
    The Pill component is used to create small labels that qualify information. Note that Pill (V1) is deprecated; you should use PillV2 instead.
    <Pill>
  Available
</Pill>