Visual Style Guide
BYU Housing — UI Style Guide
IBM Plex Sans • Bootstrap Icons & Spinners
Typography
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.
IBM Plex Sans
Light (300)
IBM Plex Sans
Regular (400)
IBM Plex Sans
Medium (500)
IBM Plex Sans
SemiBold (600)
IBM Plex Sans
Bold (700)
Color Palette
BYU Navy
#002E5D
BYU Royal
#0047BA
Blue 285
#0072CE
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
UI Elements — Buttons & Badges
Available
Frozen
Error
Form Inputs
Helper: 9 digits
Focus ring uses Blue‑285
Error: Bedspace not found
Selection Controls — Radios & Toggles
Radios
Segmented (Radio) Buttons
Toggles
Iconography — Bootstrap Icons
Single source: Bootstrap Icons. Use outline by default; switch to -fill variants for selected states.
Housing
Complex
Key/Check‑in
Access
Campus
Address
Map View
Map Pin
Wi‑Fi
Parking
Utilities
Roommates
Accessibility/ADA
Search
Filter
Calendar
Info
Warning
Success
Freeze
Chat
Phone
Email
Birthday
Sex
Restricted
Loading & Progress (Bootstrap)
spinner-border
Royal accent
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 are announced and tied to inputs via
aria-describedby - Respects
prefers-reduced-motion