For Designers

The Foundation section of the website establishes the visual style grounded in the UMD brand. You can review UMD Colors as well as accessible color guides, Typography and Layout grids here. Font downloads or links to fonts are also available. 

The UMD Web Services team uses Figma as its main design tool. Figma is the industry standard web design tool. In order to view the Design System design assets, you must use Figma. Adobe Photoshop and Adobe Illustrator may be used to edit images and create vector assets for upload into content management systems. It is recommended to follow image sizing recommendations in the documentation. 

All components are documented extensively. For designers, there are suggestions on when to use which component, variation possibilities, and recommendations for image sizing and aspect ratios. There are notes on any limitations for images or videos, and in some cases, recommended focus areas for best layouts. Also, there are links to download the Figma application files by component so designers can put the pieces together on their own. 

The Web Services team created examples for how components can be used together for best effect. This section is ongoing and will continue to be developed as more components come online. There are endless possibilities on what someone can do with the Design System. We encourage you to familiarize yourself with this site to understand how powerful these tools are.