## Color — existing template tokens (keep as-is)

Already defined in `client/app/shared/theme/_variables.scss` — match the live site's masthead/button red exactly. No change needed.

Cornell Blue
`--color-primary: #2d668e`
Not visibly used on this site's chrome today, but retained — Material primary palette.
Cornell Red
`--color-accent: #b31b1b`
Masthead bg, primary buttons, section-heading underline, card border-bottom.
Cornell Red — dark
`--color-accent-dark: #a01114`
Secondary button fill / hover state on red buttons.
Cornell Orange
`--color-warning: #F8981D`
Warning/alert accents (unchanged).

## Color — new tokens for this migration

Not yet in `_variables.scss` — add these for hero/footer parity with the live site.

Hero background
`--color-hero-bg: #1a1a1a`
Homepage hero band gradient base (near-black → subtle gradient).
Hero accent — purple
`--color-hero-accent-1: #a66dd5`
Italic accent word in hero headline ("Empowering"). Dark-bg only, not a general UI color.
Hero accent — yellow/olive
`--color-hero-accent-2: #c6b20f`
Italic accent word in hero headline ("Responsible AI"). Dark-bg only.
Footer background
`--color-footer-bg: #333333`
Site footer band.
Footer text (on dark)
`--color-footer-text: #bbbbbb`
Body text inside footer band.
Body link blue
`--color-link: #1176ac`
Inline text links inside article/page body copy.

## Typography

Live site loads `freight-sans-pro` for both headings and body via Cornell's Typekit kit (`use.typekit.net/nwp2wku.css`) — link this kit in `client/index.html` rather than copying font files (Adobe/Typekit license). Fallbacks below match the template's current placeholders.

Hero display
900 italic

### Empowering Responsible AI

Heading 1
--heading-font

### Page title heading

Heading 2
accent-colored

### Section heading

Body
--body-font 16px

Body copy uses freight-sans-pro with a Verdana/Tahoma fallback stack, 16px base to avoid mobile auto-zoom on inputs (see `_accessability.scss`).

Caption / meta
13px, #666

June 15, 2026 · Articles

Inline link

Read more in the full article.

## Spacing scale

From `_spacing.scss` / `_flex.scss` — unchanged, reused directly.

gap-0 · 0px
gap-1 · 8px
gap-2 · 16px
gap-3 · 24px
gap-4 · 32px
gap-5 · 40px
gap-6 · 48px

## Breakpoints

From `_variables.scss` — the mobile nav/menu collapse threshold used across the live site is `$screen-sm-min` (768px).

Variable | Value | Usage
--- | --- | ---
`$screen-xs-min` | 480px | Smallest phone breakpoint
`$screen-ks-min` | 624px | Small tablet
`$screen-sm-min` | 768px | Nav/menu collapse — hamburger below this width
`$screen-mobile-min` | 868px | Mobile-max helper
`$screen-md-min` | 992px | Container-fluid gutters kick in
`$screen-ml-min` | 1080px | Medium-large
`$screen-lg-min` | 1200px | Large desktop
`$screen-xl-min` | 1480px | Wide desktop
`$cwd-container-fluid-max-width` | 1280px | Max content width, matches live site's centered column

## Cornell branding & logo usage

SVGs already live in `client/assets/` (seal) — the wordmark + reduced-white variant + chevron icon need to be copied in alongside it (see migration plan, "Static asset migration").

Seal icon (white fill — needs a dark/red bg)
cornell_logo_simple_b31b1b.svg
Wordmark — dark/red backgrounds
cornell-reduced-white.svg
Seal — masthead, top-right (white fill)
cornell_seal.svg
Chevron — link/CTA affordance
icon_chevron_right_white.svg

Both "logo" SVGs shipped by the theme are actually the white-fill circular seal at different weights — the textual "Cornell University / AI Innovation Hub" wordmark seen in the live masthead is rendered as HTML text, not an image/SVG.

## Buttons

See All → Join meeting