DOCSEARCHbyAlgolia
Submit Docs

Washington Post Design System

website·Indexed 6 days ago

https://build.washingtonpost.com/

Documentation for the Washington Post Design System (WPDS), including guides for React, Stitches, and Tailwind integration. It provides resources on accessibility standards, component lifecycles, color tokens, and technical implementation guides for Figma and Zeplin.

Tokens
51.1K
Snippets
200
Records
446
Agent score
97%

What's inside WPDS

  2. Overview of automated accessibility testing

    Automated testing is a useful tool for achieving accessibility but is not sufficient for full testing, as it is generally believed to catch only 30-50% of accessibility issues on a page. It should be used as one step of a larger accessibility testing process that includes testing with assistive technology.

  3. Overview of the WPDS Carousel component

    The WPDS Carousel is a container component used to display a sequence of items that users can interact with via clicking or swiping. It is designed for economical use of vertical screen real-estate, particularly on mobile. The component is built with modern accessibility best-practices, supporting reduced-motion, keyboard-enabled navigation, and screen-reader interoperability, though rich media (audio/video) may impact performance.

  4. Overview of WaPo Tachyons

    WaPo Tachyons is a CSS framework based on small atomic CSS classes designed for rapid development. It was originally developed to adhere to the strict style size limits imposed by AMP, which means it provides a specific set of utility classes rather than a comprehensive CSS toolkit.

  5. AppBar component overview

    The AppBar is an empty container component designed to simplify the positioning of elements within a layout. It does not contain built-in visual elements but provides utilities for layout positioning.

  6. Make HTML tables accessible to screen readers

    Follow these two requirements for accessible tables:

    1. Use the <caption> tag: Provide an overview of the table. If the caption should not be visible to sighted users, apply the sr-only class.
    2. Use <th> tags in the <thead>: Column headers must use <th> instead of <td>. This ensures screen readers announce the header for every cell in that column, providing necessary context to the user.
    <table>
   <caption class="sr-only">Total votes for Biden, Sanders and Warren in Super Tuesday states</caption>
   <thead>
    <tr>
        <th>State</th>
        <th>Votes for Biden</th>
        <th>Votes for Sanders</th>
        <th>Votes for Warren</th>
    </tr>
   </thead>
   <tbody>
    <tr>
        <td>Alabama</td>
        <td>15,000</td>
        <td>7,000</td>
        <td>2,000</td>
    </tr>
   </tbody>
</table>

  7. Understand Button anatomy and types

    The Button component consists of three primary visual elements: an Icon, a Background Fill, and Text.

    There are two main types of buttons:

    • Text buttons: Use text paired with or without an icon.
    • Icon buttons: Use only an icon.

  8. Drawer component overview and anatomy

    The Drawer component consists of three primary structural elements: a Container, a Button icon (optional), and a Scrim (optional). It is designed to slide in from any side of the screen. To ensure usability, drawers should never occupy the full screen and must leave at least 1/3 of the viewer window available.

  10. Differentiate between color themes and device color modes

    In the WPDS framework, color themes and device color modes are distinct:

    • Color Themes: Tailored to specific applications to reflect design preferences.
    • Device Color Modes: System-wide operating system settings (typically Light Mode and Dark Mode) that influence the overall appearance of the device and its apps.

  11. Configure the Divider component

    The Divider component is used to separate items in a list or provide visual distinction between grouped elements. By default, the divider spans the full horizontal or vertical dimension of its parent element.

  12. Understand the Accordion component anatomy

    The Accordion component consists of the following structural elements:

    • Header: The text label that triggers the expansion.
    • Panel: The area containing text or mixed content revealed when expanded.
    • Icon: A state indicator (e.g., chevron) that signals whether the item is Expanded or Collapsed.
    • Divider: A visual separator between items.
    • Background color: A manually set property (defaults to "none").