University of Maryland Design System
9 composable packages for building consistent, accessible UMD digital experiences.
Quick Start (CDN)
Drop two tags into any HTML page and start using UMD components immediately.
Install via npm
Add packages to your build pipeline for tree-shaking and selective imports.
Explore Architecture
Understand the composable package pyramid and choose your entry point.
Choose Your Path
No-Code
Content Managers
Build UMD pages with HTML tags and CSS classes. No build tools required.
Visit designsystem.umd.edu for design guidance and live demos.
npm + Frameworks
Web Developers
Install via npm, import components, integrate with your framework.
Advanced
Senior Developers / Architects
Compose at any layer — tokens, styles, elements, or build custom web components.
Composable Architecture
Each tier builds on the one below. Enter at the level that fits your needs.
Application Layer
Ready-to-use web components and dynamic feeds. Components, Feeds.
Infrastructure Layer
CSS utilities, element builders, and custom component tools. Styles, Elements, Model, Builder.
Foundation Layer
Raw design values, icons, and shared helpers. Tokens, Icons, Utilities.
Package Quick Reference
Foundation
Tokens
@universityofmaryland/web-token-library
Design primitives: color, spacing, media queries, and font definitions.
Icons
@universityofmaryland/web-icons-library
SVG icon and logo assets across 13 categories.
Utilities
@universityofmaryland/web-utilities-library
Shared helper functions across 15 categories: DOM, events, animation, and more.
Infrastructure
Styles
@universityofmaryland/web-styles-library
Static CSS files, Tailwind integration, and design token stylesheets.
Model
@universityofmaryland/web-model-library
Web component model: Attributes, Register, Slots, and Lifecycle utilities.
Builder
@universityofmaryland/web-builder-library
ElementBuilder: fluent API for constructing UI elements with lifecycle management.
Application
Elements
@universityofmaryland/web-elements-library
Foundational UI element builders: Atomic, Composite, and Layout.
Feeds
@universityofmaryland/web-feeds-library
Dynamic content feeds: academic, experts, news, events, and inTheNews.
Components
@universityofmaryland/web-components-library
Full web components (Custom Elements) with Shadow DOM encapsulation.