BYU Housing — UI Style Guide (Technical Docs)

BYU Housing — UI Style Guide

A single-file style guide built on Bootstrap 5, Bootstrap Icons, and IBM Plex Sans. This “docs” version is text-first and mirrors our visual style guide with copy-pasteable code blocks.

1) Getting Started (CDN Includes)

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<!-- Bootstrap CSS & Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
<!-- Bootstrap JS (optional for components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

2) Design Tokens (CSS Variables)

:root{
  --byu-navy:#002E5D;
  --byu-royal:#0047BA;
  --byu-white:#FFFFFF;
  --byu-blue-285:#0072CE;
  --byu-light-blue:#BDD6E6;
  --neutral-900:#1F2933;
  --neutral-700:#3E4C59;
  --neutral-500:#7C878E;
  --neutral-300:#C7C9C7;
  --neutral-200:#E5E7EB;
  --neutral-50:#FAFAFA;
  --success:#00966C;
  --warning:#D14124;
  --error:#9E2A2B;
}

Palette reference

Token	Hex	Swatch
`--byu-navy`	`#002E5D`
`--byu-royal`	`#0047BA`
`--byu-blue-285`	`#0072CE`
`--byu-light-blue`	`#BDD6E6`
`--neutral-900`	`#1F2933`
`--neutral-700`	`#3E4C59`
`--neutral-500`	`#7C878E`
`--neutral-300`	`#C7C9C7`
`--neutral-200`	`#E5E7EB`
`--neutral-50`	`#FAFAFA`
`--success`	`#00966C`
`--warning`	`#D14124`
`--error`	`#9E2A2B`

3) Base & Utilities

body { background: var(--neutral-50); color: var(--neutral-900);
  font-family:'IBM Plex Sans', Helvetica, Arial, sans-serif; }
header.byu-nav { background: var(--byu-navy); color:#fff; }
.card { border-radius:16px; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.swatch { border-radius:12px; height:64px; width:96px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.text-muted-700{ color:var(--neutral-700); }
.section-title{ color:var(--byu-navy); }
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation-duration:.01ms !important; }
}

4) Typography

Preview text

H1: Housing Portal
H2: Application Overview
H3: Section title
Body L: Clear, student-first copy that explains what to do next.
Body S: Helper text and captions.

Weights: 300 (Light) • 400 (Regular) • 500 (Medium) • 600 (SemiBold) • 700 (Bold)

<h1 class="fs-2 fw-bold lh-sm">H1: Housing Portal</h1>
<h2 class="fs-3 fw-semibold">H2: Application Overview</h2>
<h3 class="fs-4 fw-semibold">H3: Section title</h3>
<p>Body L: Clear, student-first copy that explains what to do next.</p>
<p class="small text-muted-700">Body S: Helper text and captions.</p>

5) Buttons & Badges

.btnx{ display:inline-flex; align-items:center; gap:.5rem;
  border-radius:8px; font-weight:600; height:40px; padding:0 14px;
  border:1px solid transparent; }
.btnx-primary{ background:var(--byu-royal); color:#fff; }
.btnx-primary:hover{ filter:brightness(.92); }
.btnx-outline{ background:#fff; color:var(--byu-navy); border-color:var(--byu-navy); }
.btnx-outline:hover{ background:rgba(0,71,186,.06); }
.btnx-danger{ background:var(--error); color:#fff; }
.badgex{ display:inline-flex; align-items:center; border-radius:999px;
  padding:.2rem .6rem; font-weight:600; font-size:12px; }
.badge-available{ background:#E6F5F1; color:var(--success); }
.badge-wait{ background:#E7F0FB; color:var(--byu-royal); }
.badge-maint{ background:#FDE8E6; color:var(--warning); }

<button class="btnx btnx-primary"><i class="bi bi-house" aria-hidden="true"></i> Primary</button>
<button class="btnx btnx-outline"><i class="bi bi-funnel" aria-hidden="true"></i> Outline</button>
<button class="btnx btnx-danger"><i class="bi bi-trash" aria-hidden="true"></i> Danger</button>
<button class="btnx btnx-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading
</button>

<span class="badgex badge-available">Available</span>
<span class="badgex badge-wait">Frozen</span>
<span class="badgex badge-maint">Error</span>

6) Form Inputs

.inputx{ border:1px solid var(--neutral-300); border-radius:8px;
  height:40px; padding:0 12px; background:#fff; width:100%; }
.inputx:focus{ outline:3px solid var(--byu-blue-285); border-color:var(--byu-navy);
  box-shadow:none; }
.inputx-error{ border-color:var(--error); background:#F9E7E7; }

<label class="form-label fw-semibold" for="studentId">Student ID</label>
<input id="studentId" class="inputx" inputmode="numeric" pattern="[0-9]*"
  placeholder="E.g., 123456789" aria-describedby="studentIdHelp" />
<p id="studentIdHelp" class="small text-muted-700">Helper: 9 digits</p>

<label class="form-label fw-semibold" for="moveIn">Move-in Date</label>
<input id="moveIn" class="inputx" type="date" aria-describedby="moveInHelp" />
<p id="moveInHelp" class="small text-muted-700">Focus ring uses Blue-285</p>

<label class="form-label fw-semibold" for="bedspace">Bedspace</label>
<input id="bedspace" class="inputx inputx-error" placeholder="CN-0001"
  aria-describedby="bedspaceError" aria-invalid="true" />
<p id="bedspaceError" class="small" style="color:#9E2A2B">Error: Bedspace not found</p>

7) Selection Controls — Radios & Toggles

.form-check-input:checked { background-color:#0047BA; border-color:#0047BA; }
.form-check-input:focus { box-shadow:0 0 0 .25rem rgba(0,71,186,.25); border-color:#0047BA; }
.btn-outline-primary { color:#0047BA; border-color:#0047BA; }
.btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active { background:#0047BA; color:#fff; border-color:#0047BA; }

<!-- Radios -->
<fieldset>
  <legend class="visually-hidden">Meal plan term</legend>
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="term" id="termFall" checked>
    <label class="form-check-label" for="termFall">Fall 2025</label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="term" id="termWinter">
    <label class="form-check-label" for="termWinter">Winter 2026</label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="term" id="termSpring" disabled>
    <label class="form-check-label" for="termSpring">Spring (closed)</label>
  </div>
</fieldset>

<!-- Segmented radios -->
<div class="btn-group" role="group" aria-label="Room type">
  <input type="radio" class="btn-check" name="roomType" id="roomShared" checked>
  <label class="btn btn-outline-primary" for="roomShared">Shared</label>
  <input type="radio" class="btn-check" name="roomType" id="roomPrivate">
  <label class="btn btn-outline-primary" for="roomPrivate">Private</label>
  <input type="radio" class="btn-check" name="roomType" id="roomSuite" disabled>
  <label class="btn btn-outline-primary" for="roomSuite">Suite</label>
</div>

<!-- Toggles -->
<div class="form-check form-switch mb-2">
  <input class="form-check-input" type="checkbox" role="switch" id="waitlist" checked>
  <label class="form-check-label" for="waitlist">Join waitlist if full</label>
</div>
<div class="form-check form-switch mb-2">
  <input class="form-check-input" type="checkbox" role="switch" id="autoRenew">
  <label class="form-check-label" for="autoRenew">Auto-renew lease</label>
</div>
<div class="form-check form-switch mb-2">
  <input class="form-check-input" type="checkbox" role="switch" id="notify" disabled>
  <label class="form-check-label" for="notify">SMS notifications (disabled)</label>
</div>

8) Iconography

Use Bootstrap Icons. Prefer outline icons; use -fill for selected/active states.

General housing:
bi-house, bi-buildings, bi-key, bi-door-closed, bi-mortarboard, bi-geo-alt,
bi-map, bi-pin-map, bi-wifi, bi-p-square, bi-lightning, bi-people,
bi-person-wheelchair, bi-search, bi-funnel, bi-calendar, bi-info-circle,
bi-exclamation-triangle, bi-check-circle, bi-snow, bi-chat-left-text,
bi-telephone, bi-envelope, bi-cake, bi-person, bi-ban

Dining & meal plans:
bi-egg-fried, bi-cup-hot, bi-basket, bi-credit-card, bi-clock, bi-geo-alt

Campus essentials:
bi-bed, bi-door-closed, bi-tools, bi-droplet, bi-lightning, bi-thermometer-half,
bi-shield-lock, bi-alarm, bi-bus-front, bi-bicycle, bi-p-square, bi-printer,
bi-book, bi-journal-text, bi-person-badge, bi-people

<i class="bi bi-house" aria-hidden="true"></i>
<i class="bi bi-egg-fried" aria-hidden="true"></i>
<i class="bi bi-bed" aria-hidden="true"></i>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />

9) Loading & Progress

<div class="d-flex align-items-center gap-2">
  <div class="spinner-border" role="status" aria-label="Loading"></div>
  <span>spinner-border</span>
</div>

<div class="d-flex align-items-center gap-2" style="color:#0047BA">
  <div class="spinner-border" role="status" aria-label="Loading"></div>
  <span>Royal accent</span>
</div>

10) Accessibility (AA) Quick Checks

Text contrast ≥ 4.5:1; large text/UI ≥ 3:1
Visible keyboard focus on all interactive elements
Icons with meaning have text or aria-label
Errors tied to inputs via aria-describedby and announced
Honors prefers-reduced-motion

Style Guide Technical Document