audit

Audit HTML or template file(s) in this session against University of Michigan brand standards and produce a structured compliance report. Do not modify the audited file.

University of Michigan Brand Standards

Source: https://brand.umich.edu/design-resources/colors/

Colors

Primary palette — use for major UI elements

Color	Hex	Accessible text colors
Michigan Blue	#00274C	Maize #FFCB05, White #FFFFFF
Michigan Maize	#FFCB05	Blue #00274C only

Maize on white fails WCAG AA — never use Maize as small text on a white background. Use it for large decorative elements, backgrounds, and accents only.

Secondary palette — for accents and variety; never replace the primary palette

Color	Hex	Accessible text colors
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

Typography

U-M has no licensed campuswide typeface. Do NOT use "Victors" — it is a proprietary font developed by Michigan Creative, optimized only for the words "University of Michigan," and is not available for general use.

Recommended free Google Fonts (use these):

• Body / general use: 'Atkinson Hyperlegible' (accessibility-focused, preferred — https://fonts.google.com/specimen/Atkinson+Hyperlegible), 'IBM Plex Sans', 'Nunito Sans', or 'Montserrat'
• Serif body/editorial: 'Merriweather'
• Display/headlines: 'Playfair Display' or 'Oswald'
• Fallback stack for body: Arial, system-ui, sans-serif

Typography rules:

• Sans-serif for body text — preferred for accessibility
• Minimum body font size: 16px for web
• Line height: at least 1.2× font size (ideally 1.5 for body)
• Text alignment: flush-left / ragged-right — never justify
• Optimum line length: 60 characters (~8–12 words)
• Max 2–3 font families per page
• Avoid italics and all-caps for body text
• Heading hierarchy: H1 in Michigan Blue #00274C, H2 in Blue or dark gray #333333, H3 in dark gray

Layout

• Maximum content width: 960–1200px, centered
• Ample white space — people with low vision and cognitive disabilities benefit from it
• Cards and panels: white background, subtle border 1px solid #D5D5D5 or light shadow
• Avoid placing text over photographs or busy backgrounds — contrast against non-solid backgrounds is hard to guarantee
• No justified text; no decorative fonts for body copy

Buttons

• Primary button: Blue #00274C background, white text, 4px border radius
• Secondary/accent: Maize #FFCB05 background, Blue #00274C text
• Hover on primary: slightly darker shade of blue
• No flat unstyled buttons; all interactive elements need visible focus styles

Favicon

Note: Favicon guidance is not part of the official U-M Style Guide. This is a suggested quality-of-life addition only — treat it as a convenience, not a brand requirement.

• If a <link rel="icon"> exists, flag it as an INFO finding — the project has made an explicit choice.
• If no <link rel="icon"> exists, flag it as an INFO finding recommending the official Block M favicon from the plugin's assets/favicon.ico.

Logo

Official logo files are in the assets/ directory at the plugin root (two levels up from this skill file). Always use an official file — never recreate or modify the logo. Prefer SVG over PNG for web. Minimum logo height: 75px for digital.

Important rules:

• The blue box surrounding the Block M and wordmark is an essential part of the logo — it must always appear
• The horizontal logo is for use only when vertical space is at a premium
• Always include descriptive alt text: alt="University of Michigan"
• Clear space around the logo: minimum equal to twice the height of the block serif on all sides

Header

• If the page has a header/navbar: Blue #00274C background, white text, optional Maize accent strip at bottom
• Logo placed top-left using the appropriate dark-background (withoutline) variant
• Do not recreate or modify any official U-M logo mark

Accessibility (WCAG 2.1 AA — required for all U-M web content)

Source: https://accessibility.umich.edu/how-to/web-content-sites-apps/quick-tips

Color and contrast

• Use only the approved color combinations from the color table above for text
• Maize #FFCB05 is only AA-compliant on Blue #00274C — never use Maize as text on white or light backgrounds
• Do not rely on color alone to convey meaning — pair with symbols, patterns, or text labels
• Avoid placing text over images or non-solid backgrounds

Images and media

• All <img> elements need descriptive alt text; decorative images use alt=""
• Videos must have captions

Structure and navigation

• Use semantic heading hierarchy (<h1> → <h2> → <h3>) — do not skip levels
• All interactive elements must have visible focus styles
• Form inputs need associated <label> elements (via for/id or wrapping)

Links

• Link text must be short, unique, and descriptive on its own — avoid "click here," "read more," or bare URLs
• Each link should make sense when read out of context (screen readers navigate link-to-link)

Tables

• Data tables need <th> header cells with scope attributes and a <caption>
• Do not use tables for layout

Lists

• Use <ul> or <ol> for lists — do not simulate lists with indented lines or manual bullets

Scope resolution

Before acting, determine which file(s) to audit:

1. If a filename was passed as an argument to the skill invocation, use that file.
2. Otherwise, if a specific HTML or template file is clearly in context from the current conversation, use that file.
3. Otherwise, ask the user which file(s) to audit before proceeding.

Review

Audit the HTML against the brand standards above. Do not modify the audited file. Only flag elements, attributes, values, and CSS properties you can directly cite from the source — do not flag assumed or inferred structure that is not present in the file.

Write a self-contained HTML review report named audit-<source-filename>-<YYYY-MM-DD-HH-MM>.html alongside the audited file. The report itself must follow U-M brand standards: Michigan Blue #00274C header, Maize #FFCB05 accents, Atkinson Hyperlegible font, semantic HTML, WCAG AA compliant.

Report structure

Use skills/audit/TEMPLATE.html (in this plugin's directory) as the exact structural skeleton for every report. Read the template file, then fill in each {{PLACEHOLDER}} with the real audit content. Do not deviate from the template's HTML structure, CSS, or section order.

Placeholders to fill:

Placeholder	What to substitute
{{SOURCE_FILENAME}}	The audited file's name, e.g. no-skills.html
{{REVIEW_DATETIME}}	Date and time in YYYY-MM-DD HH:MM format
{{LOGO_SVG}}	Full inline <svg>...</svg> markup — read the dark-bg withoutline SVG from the plugin's assets/ directory. Never use <img src="...">
{{COUNT}}	Number of findings for that category row
{{VERDICT_TEXT}}	One sentence summarizing overall compliance — name the most significant issues
{{FINDING_TITLE}}	Short descriptive title for the finding
{{LOCATION}}	Element, CSS selector, or approximate line reference
{{ISSUE}}	What is wrong and which guideline it violates
{{RECOMMENDATION}}	What to change

Summary table rules:

• Category name is an <a href="#findings-{category}"> anchor link when findings exist; plain text when PASS
• Badge classes: badge-critical (CRITICAL), badge-warning (WARNING only), badge-info (INFO only), badge-pass (no findings)

Verdict color rules — set border-color and background on .verdict based on worst severity present:

• Any CRITICAL → border-color: #9A3324; background: #fff5f5
• WARNING only → border-color: #00274C; background: #f0f5ff
• All pass → border-color: #75988d; background: #f0fff8

Findings section rules:

• One <section id="findings-{category}"> per category that has findings — skip PASS categories
• Section ids must match the href values used in the summary table
• Within each section, one <article class="finding {severity}"> per finding
• Finding ids (f1-title, f2-title, …) must be unique across the whole document
• Severity class on <article> must match the badge inside it: critical, warning, or info

Severity definitions

Level	Meaning
CRITICAL	WCAG AA violation or outright brand prohibition (e.g., Maize text on white, missing alt text)
WARNING	Non-compliant with brand standards but not a hard failure (e.g., wrong font family, missing logo)
INFO	Best practice or optional improvement

Reporting standards

• For accessibility findings, cite the specific WCAG 2.1 success criterion by number and short name (e.g., "1.4.3 Contrast (Minimum)", "2.4.7 Focus Visible", "1.3.1 Info and Relationships").
• When flagging a color contrast issue, include the calculated contrast ratio (e.g., "1.8:1 — fails 4.5:1 minimum for normal text").
• Only cite a criterion when you have directly verified the violation in the source; do not speculatively cite criteria.