Navigating The Web App

Learn how to explore and understand your design system documentation using the intuitive Handoff web application. This guide walks you through finding design tokens, reviewing component guidelines, and ensuring that your projects always match your official brand standards. Discover the power of a live, self-updating design system reference for all stakeholders.

The Handoff Documentation Web Application is designed to be accessible to everyone involved in the product lifecycle, not just developers. This guide will walk you through the key features and sections of the app, helping you find the information you need with speed and accuracy.

Exploring Foundations

Use the Foundations section in the sidebar to explore the fundamental building blocks of your design system:

  • Colors: View the primary, secondary, and utility color palettes with their respective hex codes and variable names.
  • Typography: Explore the system's font families, weights, and sizing hierarchy across all of your projects.
  • Effects: View shadows, blurs, and other visual effects used to create depth and visual interest in your designs.

Exploring Components

The Components section provides a live, interactive preview of every UI element in your design system:

  • Interactive Previews: Use the controls to toggle between different component variants, such as "Primary Button" and "Secondary Button," to see how they behave.
  • Usage Guidelines: Read the "Should/Should Not Do" notes to understand the intended use and context for each component in your application.
  • Accessibility Info: Check specialized accessibility notes to ensure that you are using components correctly for all users across every platform.

Search And Discoverability

  • Search (⌘K): Quickly find any component or foundation style by name using the powerful, built-in search bar.
  • Table Of Contents: Use the right-hand Table of Contents on each page to navigate long documentation articles and jump directly to the section you need.

Governance And Updates

The Changelog section allows you to track updates to the design system in real-time. This ensures that you are always aware of new features, bug fixes, or breaking changes as your brand continues to evolve.