bootstrap

name	bootstrap
description	Inject a condensed U-M brand guidelines summary into the project's CLAUDE.md so that brand standards are applied passively to all HTML work. Safe to re-run — updates the existing block in place without touching the rest of the file.
metadata	{"skill_version":"1.1.0","last_reviewed":"2026-05-22T00:00:00.000Z","sources":[{"name":"U-M Brand Identity Style Guide (PDF)","version":"February 2025","file":"../../references/250027-U-M-Style-Guide-February2025.pdf","url":"https://brand.umich.edu/wp-content/uploads/2025/02/250027-U-M-Style-Guide-February2025.pdf","source_page":"https://brand.umich.edu/design-resources/style-guide-redirect/"},{"name":"U-M Brand Colors","url":"https://brand.umich.edu/design-resources/colors/","retrieved":"2026-05-19T00:00:00.000Z"},{"name":"U-M Typography","url":"https://brand.umich.edu/design-resources/typography/","retrieved":"2026-05-19T00:00:00.000Z"},{"name":"U-M Web Accessibility Quick Tips","url":"https://accessibility.umich.edu/how-to/web-content-sites-apps/quick-tips","retrieved":"2026-05-19T00:00:00.000Z"}],"notes":"Brand guidelines are maintained by the U-M Brand Office ([e-mail]), not by the skill maintainer. Re-run this skill when apply/review are updated to a new version so the passive guidelines stay in sync.\n"}

Inject a condensed U-M brand guidelines summary into this project's CLAUDE.md so the standards are applied passively to all HTML work without requiring an explicit skill invocation.

Behavior

1. Look for CLAUDE.md in the project root.
2. If it exists, scan for sentinel markers <!-- uofm-style-guide:start --> and <!-- uofm-style-guide:end -->.
   • Both markers found: replace everything between them (inclusive) with the block below.
   • No markers found: append the block to the end of the file.
3. If CLAUDE.md does not exist: create it containing only the block below.
4. Confirm what was done in one sentence.

Block to inject

Substitute <VERSION> with the skill_version from this file's frontmatter and <DATE> with today's date in YYYY-MM-DD format.

<!-- uofm-style-guide:start -->
## U-M Brand Guidelines (uofm-style-guide v<VERSION>, synced <DATE>)

Apply these standards to all HTML work in this project. To apply them to an existing file run `/uofm-style-guide:apply`, or audit without modifying with `/uofm-style-guide:audit`.

### Colors

Primary palette:
- **Michigan Blue** `#00274C` — headers, primary backgrounds; pair with White `#FFFFFF` or Maize `#FFCB05` text
- **Michigan Maize** `#FFCB05` — accents and secondary buttons only; pair with Blue `#00274C` text; **never use as text on white** (WCAG AA fail)

Secondary palette — use for tags, badges, accents; never replace the primary palette:
| Color | Hex | Pair with |
|---|---|---|
| Tappan Red | `#9A3324` | White |
| Ross Orange | `#D86018` | Black |
| Rackham Green | `#75988d` | Black, Blue |
| Wave Field Green | `#A5A508` | Black, Blue |
| Taubman Teal | `#00B2A9` | Black, Blue |
| Arboretum Blue | `#2F65A7` | White |
| A2 Amethyst | `#702082` | Maize, White |
| Matthaei Violet | `#575294` | Maize, White |
| Peony Pink | `#E01F7C` | Black, White |
| UMMA Tan | `#CFC096` | Black, Blue |
| Burton Tower Beige | `#9B9A6D` | Black, Blue |
| Angell Hall Ash | `#989C97` | Black, Blue |
| Law Quad Stone | `#80764B` | White |
| Puma Black | `#131516` | Maize, White |

Do not use any color not in the primary or secondary palette above.

### Typography
- Body font: `'Atkinson Hyperlegible'` (preferred) — load via `<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap" rel="stylesheet">`, then use `'Atkinson Hyperlegible', Arial, system-ui, sans-serif`
- Headline font: `'Playfair Display'` or `'Oswald'`
- **All visible text must be at least 16px** — this applies to body copy, labels, captions, UI metadata, hints, and tags, not just paragraphs; line-height 1.5, flush-left (never `text-align: justify`)
- H1 color: `#00274C`; H2: `#00274C` or `#333333`; H3: dark gray
- All-caps visual text: write in title case in HTML, apply `text-transform: uppercase` in CSS
- Max 2–3 font families per page; do not use "Victors" (proprietary, not for general use)

### Layout
- Max content width 960–1200px, centered
- Cards/panels: white background, `1px solid #D5D5D5` border or subtle shadow
- No text over images or busy backgrounds

### Buttons
- Primary: `#00274C` background, white text, `border-radius: 4px`, visible focus style required
- Secondary/accent: `#FFCB05` background, `#00274C` text

### Accessibility (WCAG 2.1 AA — required for all U-M web content)
- Semantic heading hierarchy `<h1>`→`<h2>`→`<h3>` — never skip levels
- All `<img>` need `alt` text; decorative images use `alt=""`
- Form inputs need associated `<label>` elements
- Data tables need `<th scope="...">` headers and a `<caption>`
- Use `<ul>`/`<ol>` for lists — never simulate with manual bullets or `<br>` spacing
- All interactive elements need visible `:focus` styles
- Link text must be descriptive — no "click here" or "read more"
- Use semantic elements: `<header>`, `<main>`, `<footer>`, `<nav>`, `<section>`
<!-- uofm-style-guide:end -->