University of Maryland Design System

Build consistent, accessible, and beautiful UMD digital experiences

Welcome to the UMD Design System

The UMD Design System is a comprehensive collection of design tokens, utilities, components, and patterns that help developers and designers create consistent, accessible, and on-brand digital experiences for the University of Maryland.

🚀 Quick Links

Get Started
Component Playground
Design System Website

Common ImplementationNo code solutions

These packages provide ready-to-use solutions for most web development needs. They offer pre-built components and utilities that can be quickly integrated with minimal configuration.

🧩

Components Package

@universityofmaryland/web-components-library

Feature-rich Web Components built with Shadow DOM encapsulation that automatically enforces UMD brand standards and accessibility compliance. These high-level components are built on top of the Elements package and implement UMD design patterns, ready to use in any web application with full WCAG 2.1 AA support built-in. Perfect for developers who want to quickly build UMD-branded interfaces without custom development, while ensuring consistent styling and accessibility across all implementations.

Component Categories
  • Navigation (headers, menus, breadcrumbs)
  • Content (cards, heroes, quotes)
  • Layout (intros, columns , footers)
  • Interactive (accordions, tabs, modals)
  • Media (carousels, galleries, video)
Resources
📖 Component Reference 💻 Usage Examples 🔧 Advanced Guide
Popular Components
🎨

Styles Package

@universityofmaryland/web-styles-library

The foundation of the design system, providing design tokens, CSS utilities, and layout systems. This package contains all the visual building blocks including colors, typography, spacing, and grid systems. Ideal for projects that need consistent UMD styling without the overhead of full components.

Key Features
  • Design tokens (colors, spacing, typography)
  • CSS utility classes
  • Layout and grid systems
  • Responsive breakpoints
  • Animation utilities
Resources
📚 Full Documentation 💡 Use Cases & Examples 🌊 Tailwind Integration 🎯 Design Tokens 📐 Layout System

Advanced Implementation Pro-Code solutions

These packages provide lower level access for advanced implementations. They offer maximum flexibility for developers who want to integrate with TypeScript for advanced UI development or intergration into existing frameworks.

🧱

Elements Package

@universityofmaryland/web-elements-library

Foundational UI elements built as atomic building blocks. These are the smallest units used to construct more complex components. Elements are unstyled by default and rely on the styles package for visual appearance. Perfect for developers building custom component libraries or needing precise control over UI construction.

What's Included
  • Base UI elements (buttons, inputs, etc.)
  • Layout primitives
  • Typography components
  • Media elements
  • Form controls
Resources
📋 Element Documentation 💡 Use Cases & Examples (Coming Soon) 🔧 API Reference
📰

Feeds Package

@universityofmaryland/web-feeds-library

Specialized components for displaying dynamic content feeds including news, events, and academic information. These components are designed to integrate with UMD data sources and APIs. Ideal for developers who need programmatic control over content display and custom feed implementations.

Feed Types
  • News feeds with filtering
  • Event calendars and lists
  • Academic program displays
  • Dynamic content grids
  • Social media integrations
Resources
📋 Feed Documentation 💡 Use Cases & Examples 📰 News Feed 📅 Events Feed 🎓 Academic Feed
🤔 Which Package Should I Use?
Use High-Level Packages When:
  • Building standard UMD websites quickly
  • Need ready-to-use components
  • Want minimal configuration
  • Following standard UMD patterns
  • Prototyping or rapid development
Use Low-Level Packages When:
  • Building custom component libraries
  • Need fine-grained control
  • Integrating with existing frameworks
  • Creating unique UI patterns
  • Performance optimization is critical

Additional Resources

🔧 Developer Tools
📚 Learning Resources
🌐 External Links
🤝 Need Help?

Documentation: Start with our Getting Started Guide
Examples: Explore the Interactive Playground
Issues: Report bugs or request features on GitHub
Contact: Reach out to the Web Services Unit for additional support