Skip to main content

An official website of the United States government

Here's how you know

Design System

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Select a theme

Version:

Design system switcher

Select a version

What's new?

View code on GitHub

Theme:

Design system switcher

Select a theme

Version:

Design system switcher

Select a version

Sketch UI Kit release 6.0

Sketch Cleanup / Design Debt work to improve accuracy and consistency in Sketch UI design libraries. Applies to Core, HealthCare & Medicare.

🛠 Fixed

  1. Reset UI kit styles to link to the themes and to match our theme tokens.
  2. Layout bugs fixed so that symbols behave as expected:
    1. Table symbols
    2. Tab panel symbols
    3. Form Label symbols
    4. Help Drawer
  3. Organized Text styles and example boards by deleting and merging unused/duplicate styles and merging split art boards. For more information on typography classes, check out our migration guide.

💅 Changed

  1. Standardized breakpoint naming conventions to “Large”, “Medium” and “Small”
    1. A mix of terminology was being used to refer to breakpoints for different symbols and styles, from more abstract labels (Large, Medium, Small) to device-specific labels (Desktop, Tablet, Mobile). 
    2. We chose one approach and applied it consistently to our symbols and styles.
    3. The abstract naming approach better facilitates design and code alignment. See breakpoint guidelines for descriptions of Small, Medium, Large, and XL breakpoints.

🚀 Added

  1. New components and patterns added
    1. Experimental modular alert symbol
    2. Add/Edit/Remove pattern symbol
    3. Autocomplete component
    4. Filter Chip component symbols
    5. Ordered and unordered list components + unordered list pattern
    6. Subcomponent for hint text for Core UI toolkit
  2. Symbol treatments:
    1. Inline and multi line link treatments added: Checkbox and Radio components
    2. Added Big/Small buttons and Icon left/right buttons
    3. Updated modal dialog to include multiple sizes and variables
  3. In page section labeling added to all example artboards

📚 Updating your Sketch Library

Double check your Sketch library to confirm that you are using the latest version. We recommend enabling Sketch’s Auto-download LibrariesThis link goes to an external site

You are leaving design.cms.gov.

You're about to connect to a third-party site. Select CONTINUE to proceed or CANCEL to stay on this site.

Learn more about links to third-party sites.

Continue
 feature—located in the Libraries tab of the Settings window in the Mac app. This feature will automatically download and update Libraries as soon as they become available.

Referencing the shared Sketch libraries:

💎 The subheading of each component documentation page includes a direct link to the corresponding Sketch component page.

Screenshot of the page headings on this doc site where the link to Sketch assets is highlighted
Notice: Was this article helpful?
See other releases

On this page

Have ideas?