Brand-Aligned
Every page built with the design system should be immediately recognizable as part of the University of Georgia. The system operationalizes the guidelines from the UGA Brand Style Guide, embedding the official color palette, approved typefaces, and standard university header and footer.
Color Palette
Section titled “Color Palette”The palette includes primary colors (Arch Black, Bulldog Red, Chapel Bell White), secondary colors organized into vibrant, rich, dark, and neutral families, and utility grays. All values are available as Sass variables and as utility classes.
For the full palette with values and usage examples, see the Colors documentation.
Typography
Section titled “Typography”Three typeface families are used, each with a specific role. All three are loaded from Google Fonts.
| Family | Sass variable | Role | Use cases |
|---|---|---|---|
| Oswald | $font-sans | Display / headings | Page titles, section headings, hero text |
| Merriweather | $font-serif | Body / long-form | Paragraphs, article text, block quotes |
| Merriweather Sans | $font-alt / $font-stack-primary | UI / interface | Navigation, buttons, form labels, captions |
Type Scale
Section titled “Type Scale”Font sizes are drawn from a fixed scale rather than arbitrary values. The $font-sizes map provides seven named stops:
| Key | Multiplier | Size (at 1 em = 16 px) |
|---|---|---|
xs | 1.125 em | 18 px |
sm | 1.375 em | 22 px |
md | 1.625 em | 26 px |
lg | 1.75 em | 28 px |
xl | 2.25 em | 36 px |
xxl | 2.5 em | 40 px |
xxxl | 4 em | 64 px |
Utility classes like util-font-size-lg and component mixins reference these keys so that type sizing remains proportional and consistent.
For typography element styles and utility classes, see the Typography documentation.