Skip to content
UGA Online Design System

FAQ and Troubleshooting

Styles Are Not Applying

Section titled “Styles Are Not Applying”

Symptom: Elements render with browser defaults instead of design system styles.

Check these first:

  1. Is the stylesheet loaded? Open the browser Network tab and confirm base.css returns a 200 status. A 404 means the URL is wrong or the CDN has not been updated.
  2. Is Google Fonts loaded? If the fonts look wrong but other styles work, verify the Google Fonts <link> tag is present and loads before the design system stylesheet.
  3. Is another stylesheet overriding? A more specific selector in your own CSS can win over design system classes. Inspect the element in DevTools and check the Styles panel for crossed-out rules.
  4. Are you using the correct class prefix? Component classes start with cmp-, utility classes with util-, and layout objects with obj-. A typo in the prefix means the class does not exist.

Interactive Components Are Not Working

Section titled “Interactive Components Are Not Working”

Symptom: Accordions, togglers, carousels, or tabs render but do not respond to clicks.

Check these first:

  1. Is the script loaded? Confirm scripts.js appears in the Network tab and finishes loading without errors.
  2. Is the script at the bottom of the page? The <script> tag should be placed just before the closing </body> tag so the DOM is fully parsed before the script runs.
  3. Is the no-js class on <html>? The design system script replaces no-js with js at startup. If <html> still shows no-js after page load, the script did not execute. Check the browser console for errors.
  4. Is the HTML structure correct? Interactive components depend on specific markup and js- hook classes. Compare your markup against the component documentation to make sure no required elements or attributes are missing.

Heading or Table Lost Its Styles After Adding a Class

Section titled “Heading or Table Lost Its Styles After Adding a Class”

Symptom: A heading, table, paragraph, or link reverts to browser defaults after you add a utility class.

Why this happens: The design system’s base element styles use :not([class]) selectors, so they only apply to elements with no class attribute. Adding any class — even a single utility class — causes the base styles to stop matching.

Fix: Add the corresponding component class alongside your utility class. For headings, use cmp-heading-1 through cmp-heading-6:

<!-- Before: heading loses styles -->
<h2 class="util-margin-bottom-lg">Title</h2>


<!-- After: heading styles restored -->
<h2 class="cmp-heading-2 util-margin-bottom-lg">Title</h2>

For paragraphs, use cmp-paragraph. For tables and lists, see the component documentation for the applicable classes.

See Element Styles and the :not([class]) Rule for the full explanation.

Spacing Looks Wrong

Section titled “Spacing Looks Wrong”

Symptom: Margins or padding are too large, too small, or missing.

Check these first:

  1. Are you using the spacing scale? Spacing utilities use named stops (xs, sm, md, lg, xl, xxl). If you hard-coded a pixel value in an inline style, the spacing will not match the design system’s rhythm.
  2. Is a responsive suffix needed? A class like util-margin-bottom-xl applies at all screen sizes. If you only want it on larger screens, add a breakpoint suffix: util-margin-bottom-xl@md.
  3. Are margin and padding collapsing? Adjacent vertical margins collapse in CSS. If two util-margin-bottom-lg elements are stacked, the gap between them is 1.5rem, not 3rem. Use padding or a wrapper if you need additive spacing.

Colors Do Not Match the Brand Palette

Section titled “Colors Do Not Match the Brand Palette”

Symptom: A color utility class produces a different color than expected.

Check these first:

  1. Are you using the right class name? Color utility classes use short names from the $colors map: util-color-red (not util-color-bulldog-red), util-background-olympic, etc. See the Colors documentation for the full list.
  2. Is the element inheriting a color from a parent? Use the DevTools computed styles panel to see which rule is setting the color.
Section titled “Print Styles Are Not Applying”

Symptom: Elements do not hide or restyle when printing.

Check these first:

  1. Are you using the @print suffix? Classes like util-display-none@print only activate inside a @media print block. They will not appear to do anything on screen.
  2. Test with print preview. Use Ctrl+P / Cmd+P or the browser’s Print Preview to see print styles in action.