The Oakland University Design System

Color Tokens

Ready for the refreshed brand: Oakland's brand and typography standards are being redeveloped. Because every color and typeface here is a token, not a hardcoded value, the refreshed standards drop in by updating these tokens once, and every component and page already built on this system inherits the new brand automatically, with no page-by-page rework.

Typography

Space & Sizing Tokens

Buttons

<button class="btn btn--primary">Primary CTA</button>
<button class="btn btn--ink">Secondary</button>

Accessible because: buttons have min-height 48px (44px touch target + padding), meet AA contrast on all themes, and use semantic <button> elements with clear focus rings.

<!-- On .room--dark background -->
<button class="btn btn--primary">Primary</button>

Cards & Links

<a class="card card--link" href="#">
  <span class="cat">Program</span>
  <h3>Computer Science</h3>
  <p class="muted">…</p>
</a>

Accessible because: cards use semantic <a> links with adequate touch targets, text color meets AA contrast, and the entire card is a single clickable region with proper focus states.

Accordion

<button class="acc-trigger" aria-expanded="false" aria-controls="panel-1">
  Question?
  <span class="chev"></span>
</button>
<div id="panel-1" class="acc-panel" hidden>Answer.</div>

Accessible because: accordion uses aria-expanded and aria-controls to announce state; triggers are keyboard-operable (Enter / Space to toggle); the chevron rotates to show visual state change; panels use semantic hidden attribute.

Form Fields

<div class="field">
  <label for="input-id">Label</label>
  <input id="input-id" type="text">
</div>

Accessible because: all inputs have associated labels (not placeholders); focus ring is visible and high-contrast; fields have min-height 48px for touch; error/hint text tied to fields via structure.

Announcement Component

<div class="announce">
  <span class="when">Applications Open</span>
  <div>
    <h3>Summer & Fall 2026</h3>
    <p>…</p>
  </div>
</div>

Accessible because: announcement uses a left border and semantic structure (span + div) to organize time and content; color is not the only indicator (border + layout); heading hierarchy is respected.

Grid Layout (3-Column Card Strip)

<div class="card-grid cols-3">
  <a class="card card--link">…</a>
  <a class="card card--link">…</a>
  <a class="card card--link">…</a>
</div>

Side-by-Side Layout (Image + Text)

Layout module

Side-by-Side + Arch Frame

On tablet and up, image floats right next to text. On mobile, stacks vertically. The image uses the signature arched-top frame — a gentle collegiate curve that echoes Meadow Brook Hall.

<div class="split">
  <div class="split-body">…</div>
  <div class="split-media">
    <figure class="arch arch--wide">
      <img src="…" alt="…">
    </figure>
  </div>
</div>

Copy code Copy

Full-Width Feature Band

<section class="section room--dark">
  <div class="wrap center">
    <h2>Your message</h2>
    <p class="lede">…</p>
  </div>
</section>

Content Governance

These components are built as design tokens and reusable patterns implemented natively in OU's existing TerminalFour CMS as governed templates and content types. The design system enforces consistency and accessibility across all OU web properties without requiring every editor to be a designer.

Next steps: These components are built as design tokens and reusable patterns implemented natively in OU's existing TerminalFour CMS. During implementation, each component maps to a custom TerminalFour markup template and content type; editors build pages by selecting components and filling governed fields, not writing HTML. The design system is the CMS's own template layer, and token values (color, spacing, typography) update centrally: one change to --gold reflects everywhere it's used.