Aesthetics [WIP]

Table of Contents

[WIP] This section is under active development.

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
#

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)

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;
}

5. Categorical 12-Color Tag & Topic Palette
#

For scientific topic tags, data graphics, and member research badges, the lab uses a curated 12-color categorical palette across three variations: Dark, Set (Normal), and Pastel.

The active UI standard for web badges and tags is the Pastel variation, paired with high-contrast text (#1E293B in light mode, #0F172A in dark mode):

Index	Color Role	Pastel (Active Badge)	Dark	Set	Default Topic / Keyword
0	Teal	`#9AD7C8`	`#049D86`	`#60C2AC`	`datacentric-ai`, `datasets`, `bgcs`
1	Orange	`#FAB891`	`#D0670C`	`#F79250`	`mixtures`, `chemical-mixtures`
2	Blue	`#B4C1DD`	`#5C78B6`	`#8CA0CB`	`graphs`
3	Pink	`#F5B2CC`	`#E52A8F`	`#EE88B3`	`olfaction`
4	Green	`#C3E792`	`#75A30A`	`#A6D854`	`proteins`, `enzymes`
5	Yellow	`#FFE490`	`#D9B218`	`#FFD853`	`benchmarks`
6	Tan	`#F0D8BA`	`#A97420`	`#E7C395`	`reviews`
7	Light Blue	`#A8CEDE`	`#0E7DA0`	`#78B4CD`	`self-driving-labs`, `sdls`
8	Brick / Rust	`#D19287`	`#B55344`	`#B75748`	`materials`
9	Purple	`#D0ADD7`	`#7C3589`	`#B881C2`	`small-molecules`, `molecules`
10	Pale Green	`#CFF4EF`	`#0D8178`	`#B3EEE6`	Fallback / secondary tags
11	Gray	`#CECECE`	`#666666`	`#B3B3B3`	General keywords
-	White	`#FFFFFF`	`#FFFFFF`	`#FFFFFF`	`#ai`, `molecular-ai` (bordered badge)

6. Interaction Principles: Zero Hover Action
#

The website strictly adheres to a Zero Hover Action invariant:

No Physical Movement on Hover: Cards, member photos, buttons, and icons do not translate, elevate, scale, jump, or bounce when hovered (transform: none !important;).
Subtle State Changes: Interactive affordances are communicated purely through color transitions, text underline or accent shifts, and subtle background opacity changes.
Academic Serenity: This stillness prioritizes calm authority, readability, and accessibility over gamified web trends.

7. Website Architectural & Design Decisions Log
#

All visual and architectural decisions governing this website are recorded in the repository’s permanent log:

Location: docs/decisions.md
Specification: docs/design_specification.md

Whenever modifying layouts, styles, or schemas, contributors must verify compliance against these documents.

1. Color System #

Institutional Primary Anchor #

Lab Identity Tones #

UofT Supporting Accents (Full Extended Set) #

Cool Tones #

Warm Tones #

Rich Tones #

UI Canvas & Neutrals #

Interactive Visual Swatches #

Color Palette Tokens #

2. Typography System #

Font Families #

3. Structural Constraints #

4. Web CSS Tokens #

5. Categorical 12-Color Tag & Topic Palette #

6. Interaction Principles: Zero Hover Action #

7. Website Architectural & Design Decisions Log #