UGA Online Design System

A modular UI toolkit for building consistent, accessible, and responsive web pages for UGA Online.

Getting Started

Add the design system CSS and JavaScript to start building. See the Installation and Setup page for full details and a complete HTML template.

<link rel="stylesheet" href="https://design.online.uga.edu/css/base.css" />
<script src="https://design.online.uga.edu/js/scripts.js"></script>

Design Principles

Consistent A shared visual language across all UGA Online properties — same colors, typography, spacing, and component patterns everywhere.

Accessible Built with WCAG 2.1 AA guidelines in mind. Semantic HTML, sufficient color contrast, and ARIA attributes are baked into every component.

Responsive Mobile-first breakpoints and a flexible 12-column grid ensure layouts adapt from phone to desktop to print.

Brand-Aligned UGA's official color palette, typography, and logo usage are embedded in the system so every page stays on-brand.

What’s Included

Section	Description
Documentation	Colors, spacing, grid, flexbox, icons, and utility class references
Elements	Base HTML element styles — typography, tables, images, figures, and lists
Components	Reusable UI patterns — buttons, forms, pagination, breadcrumbs, cards, and more
Assets	Logo files and other brand assets

How to Use This Site

Each documentation page includes live previews alongside the rendered HTML code. You can copy code snippets directly from the examples. Utility classes are documented with tables showing every available class and its effect.

Preview + Code: Component pages show a live preview with the full HTML below it.
Class Tables: Utility and element pages list every class, its purpose, and responsive variants.
Copy to Clipboard: Use the copy button on code blocks and asset cards to grab markup or URLs.

New to the design system? Start with Naming Conventions and Building a Public Page or Building LMS Content.