This repository hosts editable, open source design files of the Treasury Digital Design System for U.S. Department of the Treasury designers or anyone wishing to make use of the UI components or visual style guide in this site. The following file types are available for your use and can be found in their corresponding folders:
- Sketch color palette
- Sketch
- Public Sans
- Merriweather
- Source Code Pro
You have a few options for working with our color palette: You can either use the color swatches included in the Sketch component file, or you can install the Sketch Palette files. To install the files, follow the directions below, and let us know if you run into any difficulty.
- Begin by adding the Sketch palette plugin, which you can find here.
- Then, from the color picker, select Load Palette... from either the Global Colors or the Document Colors menu. Please note that doing this will replace whatever colors are currently in the selected section. If you’re concerned about losing your Global Colors, consider adding our palette to only your Document Colors menu.
- Navigate to WDS.sketchpalette to install the palette.
Some single-function components, such as buttons, have been turned into symbols with layer styles for easy access from the symbol menu. Before you alter anything (except text), detach the instance of the symbol so that you don’t change every instance. We’ve left more complex components, such as footers, as groups.
Wherever appropriate, we’ve created type styles and layer styles to make these components easier to adapt.
Style and symbol names are a compromise between Treasury Digital Design System naming conventions, U.S. Web Design System CSS naming conventions (which allow us to transition Sketch files more easily into development) and names that make sense in the context of screen design.