This repository hosts editable, open source US Customs and Border Protection (USCBP) Design System design files for government designers or anyone wishing to make use of the CBP DS components or visual styles.
What’s included in this respository:
The CBP Design System Sketch Libary is a resource to allow consumers of the CBP Design System to quickly and consistently create user interface mockups within the Sketch application. This library contains our design tokens and components to mirror our codebase as accurately as the software will allow us to. The CBP DS repo should always be considered as the single source of truth Found Here. Currently, we only plan on supporting a Sketch version of our design assets. This may change in the future as tools and best practices shift. We have no plans to support Figma in the near term as we cannot use it due to security policies in place.
In order to use this resource there are several prerequisites required before trying to download this file.
To begin, you must FIRST download and install the required font files to your Font Book application on your mac. Failure to install these fonts correctly before opening the library file will cause all elements that utilize font stylings to break.
Roboto from Google Fonts. First, you will need to click the “download family” button from this page Google Fonts. Then you will need to unzip the folder and drag all of the .ttf files to your Font Book application on your mac into your “All Fonts” folder.Roboto Mono from Google Fonts. First, you will need to click the “download family” button from this page Google Fonts. Then you will need to unzip the folder and drag all of the .ttf files to your Font Book application on your mac into your “All Fonts” folder.Font Awesome 6. The CBP DS uses the FREE version of the Font Awesome Icon library. First, visit this page Font Awesome 6 and click on the download button for the “Free for Desktop” set of icons. Unzip that folder. In that folder you will find another folder labled “otfs”. Drag all of those files into the “All Fonts” folder in your Font Book application.Once you have the font files installed on your system click this link to add the Sketch Library File to your Sketch application: Add Sketch Library · View in Github Pages
Upon clicking this link, you should be directed to your Sketch desktop application to confirm that you want to add this library file.
If you followed the installation instructions above correctly, then keeping your local version of the Sketch library should be very simple. Whenever there is an update to the Sketch library file then any file you use that utilizes the CBP DS Sketch library will update upon clicking the notification icon in the top-right corner of your Sketch application and selecting “library Updates Available.” This will tell Sketch to update your library file and will show you what has changed between your version and this one.
DO NOT make changes directly to the CBP DS Sketch library file. If you do, then when you update your version of the library file any of these overrides may be lost. If you need an alternate version of a particular component try clicking on that component and “make it local” so that you detach any changes you are making from an element in the library file.
If you find an error, or something that is not working with the CBP DS Sketch Library file, please open a github issue in our repo. We cannot guarantee that we will make any suggested change, or on what timeline that a change may occur as we have a small team. But we appreciate your feedback and encourage you to submit issues when you find them.
Open an issue Github Issues
The CBP DS library file has been made available for download. The file should be considered as in “Alpha” status and will change frequently with little or no warning. At this stage we encourage users to download and try out the library file with the understanding that this file and all of its components will likely change significantly before a wider release campaign begins for the CBP Design System.