Tokens Use Cases

Getting Started

Where This Package Fits: Tokens sits in the Foundation layer. It has no dependencies and provides raw design values used by Styles, Utilities, and Elements. See full architecture.

1. Token Reference

Colors

Token	Value	Description
`color.red`	`#e21833`	UMD primary red
`color.gold`	`#ffd200`	UMD secondary gold
`color.black`	`#000000`	Black
`color.white`	`#ffffff`	White
`color.grayLighter`	`#f1f1f1`	Gray -- lighter
`color.grayLight`	`#e6e6e6`	Gray -- light
`color.grayMedium`	`#757575`	Gray -- medium
`color.grayDark`	`#454545`	Gray -- dark
`color.grayDarker`	`#242424`	Gray -- darker
`color.blue`	`#0072ce`	Blue
`color.green`	`#008000`	Green
`color.redDark`	`#a51c30`	Red -- dark

Spacing Scale

Token	Value	Description
`spacing.min`	`4px`	Minimum spacing
`spacing.xs`	`8px`	Extra small
`spacing.sm`	`16px`	Small
`spacing.md`	`24px`	Medium
`spacing.lg`	`32px`	Large
`spacing.xl`	`48px`	Extra large
`spacing.2xl`	`64px`	2x large
`spacing.3xl`	`80px`	3x large
`spacing.4xl`	`96px`	4x large
`spacing.max`	`120px`	Maximum spacing

Typography

Token	Value	Description
`font.family.sans`	Interstate	Primary sans-serif family
`font.family.serif`	Crimson Pro	Serif family
`font.family.campaign`	Barlow Condensed	Campaign / display family
`font.size.xs` -- `font.size.6xl`	Responsive scale	Size tokens from extra-small to 6x-large
`font.weight.light`	`300`	Light weight
`font.weight.regular`	`400`	Regular weight
`font.weight.semiBold`	`600`	Semi-bold weight
`font.weight.bold`	`700`	Bold weight
`font.weight.extraBold`	`800`	Extra-bold weight

Media Breakpoints

Breakpoint	Range	Description
`media.mobile`	`0 -- 767px`	Mobile devices
`media.tablet`	`768px -- 1023px`	Tablet devices
`media.desktop`	`1024px+`	Desktop screens
`media.highDef`	`1200px+`	High-definition screens

2. Usage Patterns

Namespace Import (Recommended)

import * as token from '@universityofmaryland/web-token-library';

token.color.red;    // '#e21833'
token.spacing.md;   // '24px'
token.font.family.sans; // 'Interstate, ...'

Named Imports

import { color, spacing } from '@universityofmaryland/web-token-library';

Category Imports

import * as color from '@universityofmaryland/web-token-library/color';
import * as font from '@universityofmaryland/web-token-library/font';
import * as media from '@universityofmaryland/web-token-library/media';
import * as spacing from '@universityofmaryland/web-token-library/spacing';

3. Using Tokens in Custom CSS

After importing the generated tokens.min.css file, you can use design tokens as CSS custom properties:

/* After importing tokens.min.css */
.my-header {
  color: var(--umd-color-red);
  font-family: var(--umd-font-sans);
  padding: var(--umd-space-lg);
}

.my-card {
  background-color: var(--umd-color-white);
  border: 1px solid var(--umd-color-gray-light);
  margin-bottom: var(--umd-space-md);
}

For more about the static CSS export pipeline, see the Styles static CSS guide.

Content Manager Note

Design token values are documented with visual examples at designsystem.umd.edu.

Related Resources

TypeDoc API Reference

Generated API documentation for all design system packages.

View API

Static CSS Guide

Use tokens as pre-compiled CSS custom properties.

View Guide

Styles Use Cases

See how tokens are applied in real-world styling patterns.

View Use Cases