TDDS is the United States Department of the Treasury's open-source design system. It contains user experience (UX) guidance and reusable, accessible components. Read our user guide to get started.
The following design files are available for your use and can be found in their corresponding folders:
We use type styles and layer styles to make components easier to adapt. Single-function components, such as buttons, are symbols with layer styles for easy customization. Before changing styles or symbol sources, detach the instance. This way you don’t change every instance. We’ve left more complex components, such as footers, as groups.
Our names derive from U.S. Web Design System(USWDS) CSS naming conventions. This helps us with developer handoffs.
Please note that our team primarily uses Sketch. We've translated TDDS to Adobe XD and Figma, but don't actively maintain the files as of April 2023.
- Add the Sketch Palette plugin.
- 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.