# Style Guide

Colors, typography, spacing, breakpoints, and logo usage ported from the live site.

## Colors

`--color-primary`#2d668e
`--color-accent`#b31b1b
`--color-accent-dark`#a01114
`--color-warning`#f8981d
`--color-hero-bg`#1a1a1a
`--color-hero-accent-1`#a66dd5
`--color-hero-accent-2`#c6b20f
`--color-footer-bg`#333333
`--color-link`#1176ac

## Typography

`--heading-font`: "freight-sans-pro", Georgia, serif · `--body-font`: "freight-sans-pro", Verdana, Geneva, Tahoma, sans-serif

# Heading 1

`42px / heading-font`

## Heading 2

`28px / heading-font`

### Heading 3

`20px / heading-font`

Body text

`16px / body-font`
Small / meta text `13px / body-font`

## Spacing scale

@for (size of spacingSizes; track size.px) {
`{{ size.px }}px`
}

## Breakpoints

Variable | Value | Purpose
--- | --- | ---
$screen-xs-min | 480px | Extra small
$screen-ks-min | 624px | Small-ish
$screen-sm-min | 768px | Nav collapse threshold
$screen-mobile-min | 868px | Mobile/tablet boundary
$screen-md-min | 992px | Medium
$screen-ml-min | 1080px | Medium-large
$screen-lg-min | 1200px | Large
$screen-xl-min | 1480px | Extra large
$cwd-container-fluid-max-width | 1280px | Max content width

## Logo usage

The Cornell seal SVGs are white-fill and require a dark or red background. The "Cornell University / AI Innovation Hub" wordmark in the masthead is rendered as HTML text, not an image.

## Buttons

Link button →