Lehigh Clutch Style Guide

Ucpa Color Audit Plan

UCPA Color Audit & Mapping Plan

Summary

This audit analyzes color usage in the master branch to prepare for new UCPA branding color implementation. The current branch (DRUP-3203-ucpa-changes) has identical colors to master, so no changes have been made yet.

Original Color Variables (Master Branch)

Primary Colors

  • Lehigh Brown Family: $lehigh_brown, $lehigh_brown_02, $lehigh_brown_20, $lehigh_brown_60, $lehigh_brown_80
  • Whites/Blacks/Greys: $white, $off_white, $black, $grey_darkest, $grey_light, $grey_lightest, $grey, $grey_20, $grey_60, $grey_k20, $grey_k60

Accent Colors (Requiring Attention)

  • Gold Family: $gold, $gold_20, $gold_60, $gold_80, $gold_k20 (#ffe41e)
  • Red Family: $red, $red_20, $red_60, $red_95, $red_k20 (#ef483e)
  • Coral: $coral (#f69576)
  • Dark Red: $dark_red (#ac1d15)
  • Teal Family: $teal, $teal_20, $teal_60, $teal_k20, $teal_k60 (#88c6bc)
  • Dark Teal: $dark_teal (#0e524e)
  • Blue Family: $blue, $blue_20, $blue_75, $blue_k20, $blue_k60 (#81b0d2)
  • Maroon Family: $maroon, $maroon_light (#722723, #742e2a)
  • Navy: $navy_darkest, $navy_dark (#040c21, #1d2a4d)
  • Dark Teal Variants: $teal_darkest, $teal_dark (#011b1e, #011f23)

Utility Colors

  • $base_font, $drop_shadow, $hyperlink, $hyperlink_breadcrumb
  • Dark mode: $background_darkmode, $hyperlink_darkmode, $lehigh_brown_darkmode, $drop_shadow_darkmode

Accent Colors Actually Referenced in SCSS

GOLD FAMILY (Heavily Used - High Priority)

  • $gold - Used in 4 components
  • $gold_20 - Used in 4 components
  • $gold_60 - Used in 2 components
  • $gold_80 - Used in 2 components
  • $gold_k20 - DEFINED but NEVER USED

Components Using Gold:

  1. bits/03-pieces/buttons/button/button.scss - Gold button variant
  2. bits/04-components/button_list/button_list.scss - Gradient backgrounds
  3. bits/05-sections/call_to_action/call_to_action.scss - Background color
  4. bits/05-sections/call_to_action_popout/call_to_action_popout.scss - Background color
  5. bits/05-sections/call_to_action_image/call_to_action_image.scss - Background color
  6. bits/04-components/branding/branding.scss - Text color
  7. bits/04-components/_navbar/navbar.scss - Text color
  8. bits/04-components/_navbar_header/navbar_header.scss - Text color
  9. bits/04-components/workbench/workbench.scss - Background color
  10. bits/02-general/imagery/icons/icons.scss - Icon color

TEAL FAMILY (Medium Use - High Priority)

  • $teal_60 - Used in 4 components
  • $teal_20 - Used in 2 components
  • $teal, $teal_k20, $teal_k60 - DEFINED but NEVER USED directly

Components Using Teal:

  1. bits/03-pieces/buttons/button/button.scss - Green button variant (uses $teal_60)
  2. bits/04-components/button_list/button_list.scss - Gradient backgrounds
  3. bits/05-sections/call_to_action/call_to_action.scss - Background color
  4. bits/05-sections/call_to_action_popout/call_to_action_popout.scss - Background color
  5. bits/05-sections/call_to_action_image/call_to_action_image.scss - Background color

BLUE FAMILY (Medium Use - High Priority)

  • $blue_75 - Used in 6 components
  • $blue_k60 - Used in 4 components
  • $blue_20 - Used in 2 components
  • $blue_k20 - Used in 2 components
  • $blue - DEFINED but NEVER USED directly

Components Using Blue:

  1. bits/03-pieces/buttons/button/button.scss - Blue button variant
  2. bits/04-components/button_list/button_list.scss - Gradient backgrounds
  3. bits/05-sections/call_to_action/call_to_action.scss - Background color
  4. bits/05-sections/call_to_action_popout/call_to_action_popout.scss - Background color
  5. bits/05-sections/call_to_action_image/call_to_action_image.scss - Background color
  6. bits/04-components/podcast_item/podcast_item.scss - Text color
  7. bits/04-components/news_item/news_item.scss - Text color

MAROON FAMILY (Low Use - Medium Priority)

  • $maroon_light - Used in 1 component
  • $maroon - DEFINED but NEVER USED

Components Using Maroon:

  1. bits/03-pieces/buttons/button/button.scss - Maroon button variant

NAVY COLORS (Low Use - Medium Priority)

  • $navy_dark - Used in 2 components
  • $navy_darkest - DEFINED but NEVER USED

Components Using Navy:

  1. bits/04-components/podcast_item/podcast_item.scss - Link color and border
  2. bits/04-components/news_item/news_item.scss - Text color

RED FAMILY (NEVER USED - Low Priority)

  • $red, $red_20, $red_60, $red_95, $red_k20 - ALL DEFINED but NEVER USED

UNUSED ACCENT COLORS (Can Be Removed)

  • $coral - DEFINED but NEVER USED
  • $dark_red - DEFINED but NEVER USED
  • $dark_teal - DEFINED but NEVER USED
  • $teal_darkest - DEFINED but NEVER USED
  • $teal_dark - DEFINED but NEVER USED

High Priority Components (Accent Color Heavy)

These components use multiple accent colors and are visible across the site:

  1. bits/03-pieces/buttons/button/button.scss - Uses gold, maroon, teal, blue (4 color variants)
  2. bits/04-components/button_list/button_list.scss - Uses gold, teal, blue gradients
  3. bits/05-sections/call_to_action/call_to_action.scss - Uses gold, teal, blue backgrounds
  4. bits/05-sections/call_to_action_popout/call_to_action_popout.scss - Uses gold, teal, blue backgrounds
  5. bits/05-sections/call_to_action_image/call_to_action_image.scss - Uses gold, teal, blue backgrounds

Low Priority / Single-Use Components

These components use accent colors minimally (1-2 references):

  1. bits/04-components/branding/branding.scss - Gold text (1 use)
  2. bits/04-components/_navbar/navbar.scss - Gold text (1 use)
  3. bits/04-components/_navbar_header/navbar_header.scss - Gold text (1 use)
  4. bits/04-components/workbench/workbench.scss - Gold background (1 use)
  5. bits/02-general/imagery/icons/icons.scss - Gold icon color (1 use)
  6. bits/04-components/podcast_item/podcast_item.scss - Blue and navy (3 uses)
  7. bits/04-components/news_item/news_item.scss - Blue and navy (3 uses)

Based on color function and visual similarity:

Gold → Golden Hour / Autumn Dusk

  • $gold (#ffe41e) → $golden-hour (#ffe41e) ✅ EXACT MATCH!
  • $gold_20 (lightest) → $first-light (#f5e9ad) - warm light tint
  • $gold_60 → $golden-hour (#ffe41e) - mid-tone
  • $gold_80 → $autumn-dusk (#eba033) - deeper gold/orange

Teal → Mountaintop Mist / Patina Green / Valley Green

  • $teal_60 (#80c7bc) → $mountaintop-mist (#d1e9e8) - light teal/cyan
  • $teal_20 (lightest) → $mountaintop-mist (#d1e9e8) - very light
  • Dark teal accents → $valley-green (#2cb357) or $serenity-garden (#1b3a24)

Blue → Bethlehem Sky / Spring Violet

  • $blue_75 (#8ac3ea) → $bethlehem-sky (#66b0ff) - bright blue
  • $blue_20 (lightest) → $bethlehem-sky (#66b0ff) at lower opacity
  • $blue_k60 (darker) → $spring-violet (#5e74ee) - deep blue/purple
  • $blue_k20 → $bethlehem-sky (#66b0ff)

Maroon → Night Sky (or keep existing)

  • $maroon_light (#742e2a) → $night-sky (#12354c) - deep accent color
  • OR keep existing maroon as legacy brown-adjacent color
  • $navy_dark (#1d2a4d) → $night-sky (#12354c) - very close match!
  • $navy_darkest → $night-sky (#12354c)

Red/Pink → Cherry Blossom

  • $red family (if needed in future) → $cherry-blossom (#fcd8d6) - soft pink accent

Unused New Colors

  • $patina-green (#afedc9) - Available for future use
  • $serenity-garden (#1b3a24) - Available for dark green accents

Implementation Strategy

  1. Phase 1: High Priority Components (Call-to-actions, Buttons, Button Lists)
  • Map gold → golden-hour/autumn-dusk
  • Map teal → mountaintop-mist
  • Map blue → bethlehem-sky/spring-violet
  1. Phase 2: Low Priority Single-Use (Navigation, Icons, Workbench)
  • Update remaining gold references
  • Update remaining blue references
  1. Phase 3: Specialized Components (Podcast, News)
  • Map navy → night-sky
  • Update blue variants
  1. Phase 4: Cleanup
  • Remove unused color variables (coral, dark_red, red family, etc.)
  • Update color documentation in _colors.scss
  • Update CSS variable definitions in _04-base.scss

Notes

  • The existing $gold (#ffe41e) is an EXACT match to new $golden-hour (#ffe41e)!
  • Navy dark (#1d2a4d) is very close to new $night-sky (#12354c)
  • All accent colors use CSS custom properties for dark mode support (already using var(--color, $fallback) pattern)
  • The system already has infrastructure for color theming through CSS variables in bits/00-base/base/_04-base.scss