Color

Pitt Royal leads. Deep royal and medium blue carry dark panels and cards; gold is the accent for frames, dividers, titles-on-dark, and the tertiary button. Sections alternate as colored bands rather than plain white.

Typography

Two faces with clear roles. Instrument Serif is the display voice — every hero, section heading, gold title, and large figure. Roboto handles all body copy, labels, kickers, buttons, and UI. The accent word in a hero is set in serif italic.

Buttons

Shared .btn base with four variants: Primary, Secondary, Tertiary Gold, and Tertiary Blue. All lift with the elevation shadow on hover.

<a class="btn btn--primary">Primary Action</a>
<a class="btn btn--secondary">Secondary Action</a>
<a class="btn btn--tertiary-gold">Tertiary Gold</a>
<a class="btn btn--tertiary-blue">Tertiary Blue</a>

Kicker, Divider & Node Strip

The uppercase Roboto kicker opens sections. The gold content-divider sets the rhythm between blocks; the corner node-strip is the decorative motif used in heroes and blog headers.

<span class="kicker">The Pitt Difference</span>
<div class="content-divider"><span class="dot"></span></div>
<span class="node-strip"><span></span><span></span><span></span></span>

Chevron Link & Breadcrumb

Inline navigation uses a chevron (›), not an arrow. Breadcrumbs sit above hero copy and have an on-dark variant.

<a class="link-chevron" href="#">Request Info <span class="chev">›</span></a>

<nav class="crumb">
  <a href="#">Home</a><span class="sep">›</span>Graduate
</nav>

Gold-Framed Media

The signature treatment: a persistent 3px gold frame around featured images and video. Use .gold-frame on the wrapper.

<div class="gold-frame">
  <img src="…" alt="…">
</div>

Home Hero

Serif display headline with an italic accent word, a short lead, then an "ask your question" input with sample prompt chips — the conversational entry point in place of a single CTA.

Metric Rows (Content + List)

A medium-blue band with a gold serif title and label/value rows — used for program facts and outcomes. Values are set in serif gold.

<div class="band band--blue"><div class="wrap">
  <h3 class="gold-title">By the numbers</h3>
  <div class="metric-rows">
    <div class="row"><span class="label">…</span><span class="value">35%</span></div>
  </div></div></div>

Tuition & Costs

Royal band with a heading, supporting copy, and two prominent gold serif figures (full-time and part-time).

Program Cards

White cards with a gold top frame, an uppercase meta line, a serif title, and a chevron link pinned to the bottom so cards align across a row.

<div class="prog-card">
  <div class="meta">School of Nursing · MSN</div>
  <h3>Family Nurse Practitioner</h3>
  <p>Deliver primary care across the lifespan.</p>
  <a class="link-chevron" href="#">Request Info <span class="chev">›</span></a>
</div>

Secondary Callout

A white panel of checklist highlights with gold check accents — eligibility, experience, pathways, accreditation.

Request for Information

A Pitt Royal backdrop with a gold-bordered card holding a short interest form (selects) and a continue action.

Section Bands

Pages are built from alternating colored bands. Wrap content in .wrap and choose a band modifier.

<section class="band band--royal">
  <div class="wrap"> … </div>
</section>