This document specifies the visual identity, typography hierarchy, color palette, and design tokens for the lab website, slide decks, and digital communications. Institutional references follow the University of Toronto Brand Portal.
1. Color System #
Institutional Primary Anchor #
- UofT Navy Blue:
#002A5C
Lab Identity Tones #
- Lab Dark Pink (Rosa Mexicano):
#E7298A - Lab Dark Green (Cactus):
#66A61E
UofT Supporting Accents (Full Extended Set) #
Cool Tones #
- UofT Light Blue:
#0072CE - UofT Teal:
#00828A - UofT Slate:
#1A3B68 - UofT Midnight Blue:
#001C3D
Warm Tones #
- UofT Gold:
#FFC72C - UofT Orange:
#E87722 - UofT Crimson:
#DA291C - UofT Burgundy:
#7A003C
Rich Tones #
- UofT Purple:
#4F2D7F
UI Canvas & Neutrals #
- Primary Text:
#1E293B - Light Canvas:
#F8FAFC - Dark Canvas:
#1C1D1F - Divider Gray:
#E2E8F0
Interactive Visual Swatches #
UofT Navy Blue
#002A5C
--color-uoft-blue
Rosa Mexicano Pink
#E7298A
--color-lab-pink
Cactus Green
#66A61E
--color-lab-green
UofT Light Blue
#0072CE
--color-uoft-light-blue
UofT Teal
#00828A
--color-uoft-teal
UofT Slate
#1A3B68
--color-uoft-slate
UofT Midnight Blue
#001C3D
--color-uoft-midnight
UofT Gold
#FFC72C
--color-uoft-gold
UofT Orange
#E87722
--color-uoft-orange
UofT Crimson
#DA291C
--color-uoft-crimson
UofT Burgundy
#7A003C
--color-uoft-burgundy
UofT Purple
#4F2D7F
--color-uoft-purple
Color Palette Tokens #
| Token Name | Color Name | Hex Code |
|---|---|---|
--color-uoft-blue |
UofT Navy Blue | #002A5C |
--color-lab-pink |
Lab Dark Pink (Rosa Mexicano) | #E7298A |
--color-lab-green |
Lab Dark Green (Cactus) | #66A61E |
--color-uoft-light-blue |
UofT Light Blue | #0072CE |
--color-uoft-teal |
UofT Teal | #00828A |
--color-uoft-slate |
UofT Slate | #1A3B68 |
--color-uoft-midnight |
UofT Midnight Blue | #001C3D |
--color-uoft-gold |
UofT Gold | #FFC72C |
--color-uoft-orange |
UofT Orange | #E87722 |
--color-uoft-crimson |
UofT Crimson | #DA291C |
--color-uoft-burgundy |
UofT Burgundy | #7A003C |
--color-uoft-purple |
UofT Purple | #4F2D7F |
--color-text-main |
Primary Text | #1E293B |
--color-bg-light |
Light Canvas | #F8FAFC |
--color-bg-dark |
Dark Canvas | #1C1D1F |
--color-border |
Divider Gray | #E2E8F0 |
2. Typography System #
Font Families #
- Display & Titles:
Spectral(Serif — Weights: 400, 600) - Body & UI:
Fira Sans(Sans-Serif — Weights: 300, 400, 500) - Technical & Data:
Fira Code(Monospace — Weights: 400, 500)
Display & Titles
Spectral (Serif)
Chemical Cognition Lab reasoning about molecular structures & chemical representations.
Body & UI
Fira Sans
Clean, legible sans-serif for UI elements, article body text, cards, and lab documentation.
Technical & Data
Fira Code
SMILES = "CC(=O)OC1=CC=CC=C1C(=O)O"
loss = criterion(pred, target)
loss = criterion(pred, target)
3. Structural Constraints #
- Header Titles (
<h1>/ Slide Titles): Maximum ~41 characters. Formatted as a declarative sentence. - Subtitles (
<p.lead>/ Slide Subtitles): Maximum ~63 characters. Summarizes the core message.
4. Web CSS Tokens #
:root {
/* Typography */
--font-title: 'Spectral', Georgia, serif;
--font-body: 'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-code: 'Fira Code', monospace;
/* Institutional Primary & Lab Identity */
--color-uoft-blue: #002A5C;
--color-lab-pink: #E7298A;
--color-lab-green: #66A61E;
/* UofT Cool Accents */
--color-uoft-light-blue: #0072CE;
--color-uoft-teal: #00828A;
--color-uoft-slate: #1A3B68;
--color-uoft-midnight: #001C3D;
/* UofT Warm Accents */
--color-uoft-gold: #FFC72C;
--color-uoft-orange: #E87722;
--color-uoft-crimson: #DA291C;
--color-uoft-burgundy: #7A003C;
/* UofT Rich Accents */
--color-uoft-purple: #4F2D7F;
/* Canvas & Neutrals */
--color-text-main: #1E293B;
--color-bg-light: #F8FAFC;
--color-bg-dark: #1C1D1F;
--color-border: #E2E8F0;
}