apply

Apply University of Michigan brand standards to the HTML or template file(s) in this session.

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 — if all-caps text exists in the HTML source, leave the content as-is but apply text-transform: uppercase in CSS and write the HTML in title case, so screen readers announce it naturally
• 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.

The official Block M favicon is assets/favicon.ico in this plugin's assets/ directory (at the plugin root, two levels up from this skill file).

• If a <link rel="icon"> already exists, leave it alone — the project has made an explicit choice.
• If no <link rel="icon"> exists, copy favicon.ico into the project's static asset directory (see Logo section for how to locate it) and add a <link rel="icon"> pointing to it.

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 (scalable at any size). Minimum logo height: 75px for digital.

Choose the correct variant based on the background it will appear on:

Background	Recommended file
White or light (standard use)	assets/U-M_Logo-PMS.svg / assets/u-m_logo-hex.png
Dark or Michigan Blue #00274C	assets/U-M_Logo-PMS-withoutline.svg / assets/u-m_logo-hex-withoutline.png
Single color available, light bg	assets/U-M_Logo-Blue-PMS.svg / assets/u-m_logo-blue-hex.png
Single color available, dark bg	assets/U-M_Logo-Blue-PMS-withoutline.svg / assets/u-m_logo-blue-hex-withoutline.png
Print/newspaper (no color)	assets/U-M_Logo-Black.svg / assets/u-m_logo-black.png
Print/newspaper on dark bg	assets/U-M_Logo-Black-withoutline.svg / assets/u-m_logo-black-withoutline.png
Horizontal (vertical space limited)	assets/u-m_logo-horizontal-hex.svg / assets/u-m_logo-horizontal-hex.png
Horizontal on dark bg	assets/u-m_logo-horizontal-hex-reversed.svg / assets/u-m_logo-horizontal-hex-reversed.png
Horizontal, white only	assets/u-m_logo-horizontal-white.svg / assets/u-m_logo-horizontal-white.png
Horizontal, no color	assets/u-m_logo-horizontal-black.svg / assets/u-m_logo-horizontal-black.png

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

Placing the logo file in the project:

Never reference the logo from inside the plugin's own directory — that path is an implementation detail and will break in production. Instead:

1. Look for a conventional static asset directory in the project root: assets/, static/, images/, public/, or similar.
2. If one is found, copy the appropriate logo file there and reference it with a path relative to the source file.
3. If none is found, ask the user where static assets should live before copying anything.

Example (assuming assets are in assets/images/):

<img src="assets/images/U-M_Logo-PMS.svg" alt="University of Michigan" style="height: 75px;">

Header

• If the page has a header/navbar: Blue #00274C background, white text, optional Maize accent strip at bottom
• Place the logo top-left using the appropriate dark-background variant (withoutline version)
• 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>) so assistive technology can navigate by heading — 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 apply to:

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 act on before proceeding — do not silently act on all HTML or template files in the project.

Coexistence with other design skills

If a general-purpose design skill (e.g. frontend-design) is also active in this session, defer to it on layout systems, component structure, spacing scales, and other broad UI patterns it covers. This skill takes priority on any conflict involving U-M brand identity — colors, typography choices, logo usage, and the accessibility rules listed above.

Apply

1. Read the HTML or template file(s) in scope
2. Apply brand standards to the CSS — colors, typography, layout, buttons, header
3. Fix all accessibility violations found
4. Do not change content or functionality — only styling and structure
5. After saving, emit a Change Summary of the 3–5 most significant changes, each tagged with its category: [Colors], [Typography], [Layout], [Buttons], [Logo], [Header], or [Accessibility]