AI Innovation Hub — Style Guide (WordPress → Angular migration)

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

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