University of Hawaiʻi at Mānoa Brand Styling
Overview
To apply UH Mānoa's official brand identity and style resources, use this skill. All materials should reflect institutional quality and create pride of place. For the full design token system, see docs/_branding/design.json in the project root.
Keywords: branding, UH Mānoa, university identity, visual identity, styling, brand colors, typography, Shidler College of Business, institutional design, ADA accessibility
Brand Guidelines
Colors
Primary Colors:
- UH Green:
#024731 (Pantone 3435 C) — Primary brand green; logos, headings, key UI elements
- Black:
#000000 — Primary text, borders, contrast
Secondary Colors:
- Silver:
#B2B2B2 (Cool Gray 5 C) — Borders, subtle accents, disabled states
- White:
#FFFFFF — Backgrounds, inverse text, cards on dark
UH Green Scale (for tints and shades):
- 50:
#E6F2EF — Lightest tint, subtle backgrounds
- 100:
#B3D9CF
- 200:
#80C0AF
- 300:
#4DA78F
- 400:
#1A8E6F
- 500:
#024731 — Primary (full brand green)
- 600:
#023D29
- 700:
#012E1F
- 800:
#011E14
- 900:
#000F0A — Darkest shade
Status Colors:
- Success:
#024731 (UH Green)
- Error:
#B43232
- Warning:
#B2B2B2 (Silver)
- Info:
#024731
Rules:
- Use only approved palettes — do not create custom palettes or gradients
- Ensure ADA-compliant contrast ratios for all text and UI elements
- Never use red type for body or primary content
- Avoid layouts that are too dark for readability
Typography
Heading Fonts:
- Print: Avenir Bold
- Web/Digital: Open Sans Bold (H1/H2), Open Sans Semibold (H3/H4)
- Fallback: Helvetica, Arial, sans-serif
Body Fonts:
- Print: Avenir Book
- Web/Digital: Open Sans Regular
- Fallback: Helvetica, Arial, sans-serif
Specialized Fonts (limited use):
- Serif: Minion Pro (print) / Crimson Text (web)
- Collegiate: Freshman
- Script: Gloss & Bloom
Sizing:
- Never set body text smaller than 10pt
- Use 11–12pt for audiences that may include older readers
- Generous leading: 3–5pt greater than type size for print
- Alignment: Flush left, ragged right for body text; avoid center or justify for body
Typography in Documents and Presentations
| Element |
Font |
Weight |
Size |
| H1/H2 |
Open Sans |
Bold (700) |
24–36pt |
| H3/H4 |
Open Sans |
Semibold (600) |
18–24pt |
| Body |
Open Sans |
Regular (400) |
11–14pt |
| Captions |
Open Sans |
Regular (400) |
10–12pt |
Features
Smart Font Application
- Apply Open Sans to headings (Bold for major, Semibold for minor)
- Apply Open Sans Regular to body text
- Fall back to Helvetica or Arial if Open Sans unavailable
- Preserve readability across all systems
Color Application
- Use UH Green (
#024731) for primary accents, headings, and key UI elements
- Use Black for body text and borders
- Use Silver (
#B2B2B2) for secondary/subtle elements
- Use the UH Green scale (50–900) for tints in backgrounds, hover states, etc.
- Maintain ADA-compliant contrast at all times
Shape and Accent Colors
- Non-text shapes and decorative elements use UH Green and Silver
- Charts and data visualizations should use the UH Green scale for a cohesive palette
- Maintain visual interest while staying on-brand
Design Principles
- Brand Consistency — Every element should reinforce UH Mānoa's shared identity
- Accessibility — Meet ADA standards in contrast, type size, and layout
- Quality and Legibility — Typography and layout should reflect institutional quality
- Pride of Place — Design supports the university's mission and creates pride in place
Technical Details
Font Management
- Use system-installed Open Sans when available
- Provide automatic fallback to Helvetica/Arial
- For best results, pre-install Open Sans in your environment
Color Application
- Uses RGB color values for precise brand matching
- Primary green RGB: (2, 71, 49)
- Maintains color fidelity across different systems
Component Defaults
- Buttons: UH Green background (
#024731), white text
- Focus states:
0 0 0 3px rgba(2, 71, 49, 0.25) box shadow
- Cards: White background, 1rem border radius,
#E5E5E5 border
- Links: UH Green (
#024731), darker on hover (#013D26)
Reference
For the complete design token system including spacing, shadows, responsive breakpoints, and dark/light mode specifications, see docs/_branding/design.json.
Source: adamwstauffer/shidler — distributed by TomeVault.
1---2name: brand-guidelines-93description: Applies University of Hawaiʻi at Mānoa official brand colors, typography, and design standards to any artifact that benefits from UH Mānoa's institutional look-and-feel. Use when brand colors or style guidelines, visual formatting, document styling, presentation design, or university design standards apply. Also use when creating materials for Shidler College of Business courses. Use when this capability is needed.4---56# University of Hawaiʻi at Mānoa Brand Styling78## Overview910To apply UH Mānoa's official brand identity and style resources, use this skill. All materials should reflect institutional quality and create pride of place. For the full design token system, see `docs/_branding/design.json` in the project root.1112**Keywords**: branding, UH Mānoa, university identity, visual identity, styling, brand colors, typography, Shidler College of Business, institutional design, ADA accessibility1314## Brand Guidelines1516### Colors1718**Primary Colors:**1920- UH Green: `#024731` (Pantone 3435 C) — Primary brand green; logos, headings, key UI elements21- Black: `#000000` — Primary text, borders, contrast2223**Secondary Colors:**2425- Silver: `#B2B2B2` (Cool Gray 5 C) — Borders, subtle accents, disabled states26- White: `#FFFFFF` — Backgrounds, inverse text, cards on dark2728**UH Green Scale (for tints and shades):**2930- 50: `#E6F2EF` — Lightest tint, subtle backgrounds31- 100: `#B3D9CF`32- 200: `#80C0AF`33- 300: `#4DA78F`34- 400: `#1A8E6F`35- 500: `#024731` — Primary (full brand green)36- 600: `#023D29`37- 700: `#012E1F`38- 800: `#011E14`39- 900: `#000F0A` — Darkest shade4041**Status Colors:**4243- Success: `#024731` (UH Green)44- Error: `#B43232`45- Warning: `#B2B2B2` (Silver)46- Info: `#024731`4748**Rules:**49- Use only approved palettes — do not create custom palettes or gradients50- Ensure ADA-compliant contrast ratios for all text and UI elements51- Never use red type for body or primary content52- Avoid layouts that are too dark for readability5354### Typography5556**Heading Fonts:**57- Print: Avenir Bold58- Web/Digital: Open Sans Bold (H1/H2), Open Sans Semibold (H3/H4)59- Fallback: Helvetica, Arial, sans-serif6061**Body Fonts:**62- Print: Avenir Book63- Web/Digital: Open Sans Regular64- Fallback: Helvetica, Arial, sans-serif6566**Specialized Fonts (limited use):**67- Serif: Minion Pro (print) / Crimson Text (web)68- Collegiate: Freshman69- Script: Gloss & Bloom7071**Sizing:**72- Never set body text smaller than 10pt73- Use 11–12pt for audiences that may include older readers74- Generous leading: 3–5pt greater than type size for print75- Alignment: Flush left, ragged right for body text; avoid center or justify for body7677### Typography in Documents and Presentations7879| Element | Font | Weight | Size |80|---------|------|--------|------|81| H1/H2 | Open Sans | Bold (700) | 24–36pt |82| H3/H4 | Open Sans | Semibold (600) | 18–24pt |83| Body | Open Sans | Regular (400) | 11–14pt |84| Captions | Open Sans | Regular (400) | 10–12pt |8586## Features8788### Smart Font Application8990- Apply Open Sans to headings (Bold for major, Semibold for minor)91- Apply Open Sans Regular to body text92- Fall back to Helvetica or Arial if Open Sans unavailable93- Preserve readability across all systems9495### Color Application9697- Use UH Green (`#024731`) for primary accents, headings, and key UI elements98- Use Black for body text and borders99- Use Silver (`#B2B2B2`) for secondary/subtle elements100- Use the UH Green scale (50–900) for tints in backgrounds, hover states, etc.101- Maintain ADA-compliant contrast at all times102103### Shape and Accent Colors104105- Non-text shapes and decorative elements use UH Green and Silver106- Charts and data visualizations should use the UH Green scale for a cohesive palette107- Maintain visual interest while staying on-brand108109## Design Principles1101111. **Brand Consistency** — Every element should reinforce UH Mānoa's shared identity1122. **Accessibility** — Meet ADA standards in contrast, type size, and layout1133. **Quality and Legibility** — Typography and layout should reflect institutional quality1144. **Pride of Place** — Design supports the university's mission and creates pride in place115116## Technical Details117118### Font Management119120- Use system-installed Open Sans when available121- Provide automatic fallback to Helvetica/Arial122- For best results, pre-install Open Sans in your environment123124### Color Application125126- Uses RGB color values for precise brand matching127- Primary green RGB: (2, 71, 49)128- Maintains color fidelity across different systems129130### Component Defaults131132- **Buttons**: UH Green background (`#024731`), white text133- **Focus states**: `0 0 0 3px rgba(2, 71, 49, 0.25)` box shadow134- **Cards**: White background, 1rem border radius, `#E5E5E5` border135- **Links**: UH Green (`#024731`), darker on hover (`#013D26`)136137### Reference138139For the complete design token system including spacing, shadows, responsive breakpoints, and dark/light mode specifications, see `docs/_branding/design.json`.140141---142> Source: [adamwstauffer/shidler](https://github.com/adamwstauffer/shidler) — distributed by [TomeVault](https://tomevault.io).143<!-- tomevault:4.0:skill_md:2026-05-26 -->
tomevault-io