Consistent

Consistency means that a visitor moving between any two UGA Online pages should feel like they are in the same ecosystem. The same colors, type styles, spacing rhythm, and component patterns appear everywhere, reducing cognitive load and reinforcing trust in the brand.

How the Design System Enforces Consistency

Design Tokens

Every visual decision — colors, spacing, font sizes, breakpoints — is stored as a Sass variable or map in the Settings layer. Pages never hard-code values; they reference tokens instead.

Token category	Example variable	Values
Colors	$color-primary-bulldog-red	#ba0c2f
Spacing	$spacers map	none, xs, sm, md, lg, xl, xxl
Font sizes	$font-sizes map	xs through xxxl
Breakpoints	$bp-sm through $bp-xl	30rem, 50rem, 60rem, 80rem

Because every page draws from the same token set, a change to a single variable propagates across every component and utility class automatically.

Shared Component Library

Components like the Header, Footer, Hero, and University Header are pre-built with the correct structure, classes, and ARIA attributes. Using these components instead of writing custom markup means every page gets the same navigation, the same footer links, and the same visual treatment.

Standardized Naming Conventions

Class names follow a strict prefix system (cmp-, obj-, util-) combined with BEM naming (block__element--modifier). This makes markup self-documenting — anyone familiar with the convention can read a template and understand what each class does. See the Naming Conventions page for full details.

Spacing Scale

Spacing is drawn from a fixed scale rather than arbitrary pixel values. The $spacers map provides seven stops (none through xxl), and utility classes like util-margin-bottom-lg or util-pad-vert-md apply them. This keeps vertical and horizontal rhythm predictable across layouts.

Anti-Patterns to Avoid

Consistency breaks down when pages bypass the system. Watch for these common issues:

• Inline styles — Adding style="margin-top: 47px" defeats the spacing scale. Use a utility class instead.
• One-off colors — Hard-coding a hex value that is not in the palette creates visual drift. If a new color is genuinely needed, it should be added to the token set.
• Custom component variants — Duplicating a component’s HTML and tweaking it locally leads to divergence over time. Propose a new modifier to the shared library instead.
• Skipping shared layout components — Building a header from scratch instead of using the Header component means that global updates (e.g., a new nav item) will not reach that page.

Consistency Matters

When every page looks and behaves the same way, users build mental models faster. They know where to find navigation, they recognize calls to action, and they trust the content because it looks intentional and professional.