Compass-Detroit · shrinkray · Jun 19, 2026 · Jun 19, 2026
diff --git a/ACCESSIBILITY.md b/ACCESSIBILITY.md
@@ -1,6 +1,6 @@
 # Accessibility Guidelines
 
-This document outlines the accessibility standards and practices for the Black History Month Innovation Summit website. Our goal is to ensure the website is accessible to all users, including those using assistive technologies.
+This document outlines the accessibility standards and practices for the Detroit Pride Innovation Summit website. Our goal is to ensure the website is accessible to all users, including those using assistive technologies.
 
 ## Overview
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- **Rebrand to Detroit Pride Innovation Summit**: repurposed from the Black History Month Innovation Summit to the Detroit Pride Innovation Summit; renamed the project/repository to `pridemi26` and updated README, CONTRIBUTING, ACCESSIBILITY, COLOR, and SECURITY docs accordingly
+- **Theme system**: shipped four switchable color themes (Purple default, Blue, Green, Gold) via `iwd` Tailwind tokens and `data-theme`; updated `COLOR.MD` to match
 - Open Graph and Twitter/X card meta tags in `index.html` — aligned to `pridemi26.vercel.app` (replaced legacy `iwdsummit.com` URLs)
 - **Navbar**: Removed pathway/route-link logic; Navbar now only shows section (anchor) links; route links like Previous Events remain in Footer only
 

diff --git a/COLOR.MD b/COLOR.MD
@@ -2,24 +2,15 @@
 
 This document defines the color palette for the Detroit Pride Innovation Summit website.
 
-The palette is inspired by the Women Techmakers brand and implemented as semantic Tailwind tokens under the `iwd` namespace. The site ships two switchable themes controlled via CSS custom properties and a `data-theme` attribute on `<html>`.
+The palette is inspired by the Women Techmakers brand and implemented as semantic Tailwind tokens under the `iwd` namespace. The site ships four switchable themes controlled via CSS custom properties and a `data-theme` attribute on `<html>`. The themes and their swatches are defined in `src/constants/ui.js`; the default is **Purple** (set in `src/components/ui/ThemeContext.jsx`).
+
+Each `iwd.gold.*` Tailwind token maps to a `--iwd-accent-*` CSS variable, and each `iwd.black.*` token maps to a `--iwd-dark-*` variable (see `tailwind.config.js`). The tables below show the key accent (`iwd-gold-400`/`700`), darkest surface (`iwd-black-950`), and `focus-ring` values per theme.
 
 ---
 
 ## Themes
 
-### Blue (Default)
-
-Ocean-forward palette. Cool, professional, and aligned with Google/Women Techmakers blue.
-
-| Token         | Hex       | RGB        |
-| ------------- | --------- | ---------- |
-| iwd-gold-400  | `#60a5fa` | 96 165 250 |
-| iwd-gold-700  | `#1d4ed8` | 29 78 216  |
-| iwd-black-950 | `#090e18` | 9 14 24    |
-| focus-ring    | `#1e3a8a` | 30 58 138  |
-
-### Purple
+### Purple (Default)
 
 Violet-forward palette. Bold, empowering, and aligned with the purple theme tradition.
 
@@ -30,6 +21,39 @@ Violet-forward palette. Bold, empowering, and aligned with the purple theme trad
 | iwd-black-950 | `#0d0a16` | 13 10 22    |
 | focus-ring    | `#581c87` | 88 28 135   |
 
+### Blue
+
+Ocean-forward palette. Cool, professional, and aligned with Google/Women Techmakers blue.
+
+| Token         | Hex       | RGB         |
+| ------------- | --------- | ----------- |
+| iwd-gold-400  | `#669df6` | 102 157 246 |
+| iwd-gold-700  | `#1967d2` | 25 103 210  |
+| iwd-black-950 | `#090e18` | 9 14 24     |
+| focus-ring    | `#1a73e8` | 26 115 232  |
+
+### Green
+
+Emerald palette aligned with Google green.
+
+| Token         | Hex       | RGB       |
+| ------------- | --------- | --------- |
+| iwd-gold-400  | `#5cb85c` | 92 184 92 |
+| iwd-gold-700  | `#0b5124` | 11 81 36  |
+| iwd-black-950 | `#09120e` | 9 18 14   |
+| focus-ring    | `#0d652d` | 13 101 45 |
+
+### Gold
+
+Warm yellow/amber palette aligned with Google yellow.
+
+| Token         | Hex       | RGB       |
+| ------------- | --------- | --------- |
+| iwd-gold-400  | `#fabb05` | 250 187 5 |
+| iwd-gold-700  | `#b85c00` | 184 92 0  |
+| iwd-black-950 | `#120e06` | 18 14 6   |
+| focus-ring    | `#e27200` | 226 114 0 |
+
 ---
 
 ## Symbolism
@@ -45,12 +69,12 @@ Violet-forward palette. Bold, empowering, and aligned with the purple theme trad
 
 ## How Theming Works
 
-1. CSS variables defined in `src/index.css` under `:root` / `[data-theme='blue']` and `[data-theme='purple']`
+1. CSS variables defined in `src/index.css` under `:root` (fallback) and one `[data-theme='...']` block per theme (`blue`, `green`, `purple`, `gold`)
 2. Tailwind tokens `iwd.gold.*` and `iwd.black.*` reference these via `rgb(var(--iwd-accent-*) / <alpha-value>)`
-3. React context (`ThemeContext`) sets `data-theme` on `<html>` and persists to `localStorage`
-4. A floating `ThemeSwitcher` button lets visitors toggle
+3. React context (`ThemeContext`) sets `data-theme` on `<html>` and persists to `localStorage` (defaults to `purple`)
+4. A floating `ThemeSwitcher` button lets visitors pick from the swatches in `src/constants/ui.js`
 
-**Adding a new theme:** duplicate a `[data-theme='...']` block in index.css, add the key to the toggle cycle in ThemeContext, done.
+**Adding a new theme:** duplicate a `[data-theme='...']` block in `index.css` and add a matching entry (`id`, `label`, `swatch`, `palette`) to `THEMES` in `src/constants/ui.js`.
 
 ---
 

diff --git a/CONTRAST-ANALYSIS.md b/CONTRAST-ANALYSIS.md
@@ -1,119 +1,82 @@
-# WCAG 2.2 Contrast Analysis for CTAButton Component
+# WCAG 2.2 Contrast Notes for the CTAButton Component
 
 ## Overview
 
-This document analyzes the color contrast ratios used in the CTAButton component against WCAG 2.2 standards.
+This document describes the color/contrast approach used by the `CTAButton`
+component (`src/components/ui/CTAButton.jsx`) and how to verify it against WCAG 2.2.
+
+> **Important:** `CTAButton` no longer uses fixed `sky-*`/`primary-*` colors. It now
+> styles itself with **theme-aware, translucent** tokens (`iwd-gold-*` for the primary
+> variant; black/white opacity layers for the secondary variant). Because the
+> backgrounds are semi-transparent and change with the active theme (Purple, Blue,
+> Green, Gold) and mode (light/dark), there is no single fixed contrast ratio — it
+> must be verified against the **rendered** background for each theme/mode.
 
 ## WCAG 2.2 Requirements
 
 - **Normal Text** (< 18pt or < 14pt bold): Minimum 4.5:1 contrast ratio (Level AA)
 - **Large Text** (≥ 18pt or ≥ 14pt bold): Minimum 3:1 contrast ratio (Level AA)
+- **Non-text / focus indicators** (1.4.11): Minimum 3:1 against adjacent colors
 - **Enhanced (Level AAA)**: 7:1 for normal text, 4.5:1 for large text
 
-## CTAButton Text Size Analysis
-
-Based on the component styling:
-
-- Font size: `font-medium` with padding `px-8 py-5`
-- Estimated rendered size: ~16-18px
-- Font weight: `font-semibold` for primary variant
-- **Classification**: Borderline between normal and large text
-
-## Color Combinations Used
-
-### 1. Primary Button
-
-- **Background**: `sky-900` (#0c4a6e) - Dark blue
-- **Text**: `primary-50` (#fefce8) - Light cream/yellow
-- **Border**: None
-- **Use case**: "GET TICKETS" button
-
-**Contrast Ratio**: ~12.8:1
-
-- ✅ **WCAG AA (Normal Text)**: PASS (requires 4.5:1)
-- ✅ **WCAG AA (Large Text)**: PASS (requires 3:1)
-- ✅ **WCAG AAA (Normal Text)**: PASS (requires 7:1)
-- ✅ **WCAG AAA (Large Text)**: PASS (requires 4.5:1)
-
-**Status**: ✅ **EXCELLENT** - Exceeds all WCAG requirements
-
-### 2. Secondary Button
-
-- **Background**: `primary-100` (#fffac2) - Light yellow
-- **Text**: `sky-900` (#0c4a6e) - Dark blue
-- **Border**: 4px `sky-900` (#0c4a6e)
-- **Use case**: "APPLY TO SPEAK" button
-
-**Contrast Ratio**: ~12.8:1 (same as primary, colors inverted)
-
-- ✅ **WCAG AA (Normal Text)**: PASS (requires 4.5:1)
-- ✅ **WCAG AA (Large Text)**: PASS (requires 3:1)
-- ✅ **WCAG AAA (Normal Text)**: PASS (requires 7:1)
-- ✅ **WCAG AAA (Large Text)**: PASS (requires 4.5:1)
-
-**Status**: ✅ **EXCELLENT** - Exceeds all WCAG requirements
-
-### 3. Hover States
-
-#### Primary Button Hover
-
-- **Background**: `sky-800` (#075985)
-- **Text**: `primary-50` (#fefce8)
-- **Contrast Ratio**: ~11.5:1
-- **Status**: ✅ **EXCELLENT**
-
-#### Secondary Button Hover
-
-- **Background**: `primary-50` (#fefce8)
-- **Text**: `sky-900` (#0c4a6e)
-- **Border**: `primary-900` (#733e10)
-- **Contrast Ratio (Text)**: ~12.8:1
-- **Status**: ✅ **EXCELLENT**
-
-## Focus States
+## Current CTAButton styling
 
-- **Focus Ring**: `primary-300` (#ffe243) with 2px ring
-- All focus indicators meet the minimum 3:1 contrast requirement against adjacent colors
+From `src/components/ui/CTAButton.jsx`:
 
-## Summary
+### Primary variant
 
-✅ **ALL COLOR COMBINATIONS PASS WCAG 2.2 LEVEL AAA**
+- **Text**: `text-iwd-gold-300` (theme accent, light tint)
+- **Background**: `bg-iwd-gold-400/10` (theme accent at 10% opacity over the section
+  background) with a `border-iwd-gold-400/30` border
+- **Hover**: background goes to `iwd-gold-400/20`; a light-mode hover treatment is
+  applied via the `GOLD_PRIMARY_LIGHT_HOVER` constant
+- Font: `font-semibold`, `text-sm`, `uppercase`, `tracking-widest`
 
-Both button variants exceed the most stringent accessibility requirements:
+### Secondary variant
 
-- Primary button: 12.8:1 contrast ratio
-- Secondary button: 12.8:1 contrast ratio
-- All hover states maintain excellent contrast
+- **Text**: `text-gray-600` (light) / `dark:text-gray-200` (dark), darkening to
+  `text-black` / `dark:text-white` on hover
+- **Background**: `bg-black/[0.04]` (light) / `dark:bg-white/[0.04]` (dark) with a
+  matching translucent border
 
-## Recommendations
+### Focus indicator (shared `baseStyles`)
 
-1. ✅ **Current Implementation**: Excellent! No changes needed.
+- `focus:ring-2 focus:ring-focus-ring focus:ring-offset-2 focus:ring-offset-black`
+- Uses the per-theme `focus-ring` token (see `COLOR.MD`), satisfying WCAG 2.4.7
+  (Focus Visible) and 1.4.11 (Non-text Contrast) when the ring contrasts ≥ 3:1 with
+  adjacent colors.
 
-2. **Future Considerations**:
+## How to verify contrast
 
-   - If you ever need to add more button variants, aim for at least 4.5:1 contrast
-   - The current color scheme provides significant headroom above minimum requirements
+Because the button text sits on a translucent accent over a section background, check
+the **effective** (flattened) colors:
 
-3. **Testing Tools**:
-   - WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
-   - Chrome DevTools: Lighthouse accessibility audit
-   - axe DevTools: Browser extension for live testing
+1. Run the site (`npm run dev`) and open the button in the browser.
+2. For each theme (Purple/Blue/Green/Gold) and mode (light/dark), use Chrome DevTools
+   → Elements → inspect the button text. The color picker shows the computed contrast
+   ratio against the rendered background, including AA/AAA pass indicators.
+3. Alternatively, sample the rendered text and background pixels and enter them into
+   the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/).
+4. Confirm normal text ≥ 4.5:1 (or ≥ 3:1 if the rendered size qualifies as large) and
+   the focus ring ≥ 3:1 against adjacent colors.
 
-## Verification
+The `iwd-gold-300` accent tints are intentionally light so the text stays bright
+against dark section backgrounds; spot-check the lighter themes (Gold) most carefully,
+since light accent text on a light background is the highest-risk combination.
 
-To verify these results yourself:
+## Tooling
 
-1. Visit https://webaim.org/resources/contrastchecker/
-2. Enter the color combinations listed above
-3. Confirm the contrast ratios
+- **Chrome DevTools** color picker (live contrast ratio + AA/AAA badges)
+- **axe DevTools** browser extension and the CI axe-core check (`npm run a11y:check`)
+- **WebAIM Contrast Checker**: https://webaim.org/resources/contrastchecker/
 
 ## References
 
-- [WCAG 2.2 Contrast Guidelines](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
+- [WCAG 2.2 Contrast (Minimum) 1.4.3](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
+- [WCAG 2.2 Non-text Contrast 1.4.11](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
 - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
-- [Tailwind CSS Color Palette](https://tailwindcss.com/docs/customizing-colors)
+- Project color system: [`COLOR.MD`](COLOR.MD)
 
 ---
 
-**Last Updated**: October 12, 2025
-**Component Version**: CTAButton v1.0
+**Last reviewed**: June 2026 (updated for the theme-aware `iwd` token system)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,13 +1,13 @@
-# Contributing to Black History Month Innovation Summit Website
+# Contributing to the Detroit Pride Innovation Summit Website
 
-Thank you for your interest in contributing to the Black History Month Innovation Summit (BHM-website)! This document provides guidelines and information for contributors.
+Thank you for your interest in contributing to the Detroit Pride Innovation Summit (`pridemi26`)! This document provides guidelines and information for contributors.
 
 ## Getting Started
 
 ### Prerequisites
 
-- Node.js 18 or higher
-- npm or yarn package manager
+- Node.js 22 or higher
+- npm
 - Git
 
 ### Development Setup
@@ -16,8 +16,8 @@ Thank you for your interest in contributing to the Black History Month Innovatio
 2. **Clone your fork** locally:
 
    ```bash
-   git clone https://github.com/YOUR_USERNAME/BHM-website.git
-   cd BHM-website
+   git clone https://github.com/YOUR_USERNAME/pridemi26.git
+   cd pridemi26
    ```
 
 3. **Install dependencies**:
@@ -41,16 +41,16 @@ If **Push** or **Create Pull Request** in GitHub Desktop opens or targets a diff
 1. **Re-add the repo** so GitHub Desktop picks up the correct remote:
 
    - In GitHub Desktop: **File → Remove repository** (removes it from the list only; files stay on disk).
-   - **File → Add Local Repository** and choose this project folder (`BHM-website`).
-   - GitHub Desktop will use the existing Git remotes; pushes and "Create Pull Request" should now target **Compass-Detroit/BHM-website**.
+   - **File → Add Local Repository** and choose this project folder (`pridemi26`).
+   - GitHub Desktop will use the existing Git remotes; pushes and "Create Pull Request" should now target **Compass-Detroit/pridemi26**.
 
 2. **Confirm remotes in Terminal** (optional):
    ```bash
    git remote -v
    ```
-   You should see `origin` (and optionally `upstream`) pointing to `https://github.com/Compass-Detroit/BHM-website.git`. If not:
+   You should see `origin` (and optionally `upstream`) pointing to `https://github.com/Compass-Detroit/pridemi26.git`. If not:
    ```bash
-   git remote set-url origin https://github.com/Compass-Detroit/BHM-website.git
+   git remote set-url origin https://github.com/Compass-Detroit/pridemi26.git
    ```
    Then remove and re-add the repo in GitHub Desktop as in step 1.
 
@@ -63,7 +63,7 @@ All pull requests are automatically checked for:
 - **Code Quality**: ESLint checks for code style and potential errors
 - **Code Formatting**: Prettier ensures consistent code formatting
 - **Build Verification**: Ensures the application builds successfully
-- **Accessibility**: Automated accessibility testing with axe-core and pa11y
+- **Accessibility**: Automated accessibility testing with axe-core against the built site
 - **Security**: npm audit checks for security vulnerabilities
 
 ### Manual Checks
@@ -102,8 +102,8 @@ npm run lint
 # Check formatting
 npm run format:check
 
-# Run accessibility tests
-npm run test:a11y
+# Run accessibility linting
+npm run lint:a11y
 
 # Build the application
 npm run build
@@ -151,7 +151,7 @@ Then create a pull request on GitHub using our PR template.
 
 ## Accessibility Guidelines
 
-We are committed to making the Black History Month Innovation Summit website accessible to everyone. Please ensure:
+We are committed to making the Detroit Pride Innovation Summit website accessible to everyone. Please ensure:
 
 ### Keyboard Navigation
 
@@ -175,11 +175,11 @@ We are committed to making the Black History Month Innovation Summit website acc
 ### Testing Accessibility
 
 ```bash
-# Run automated accessibility tests
-npm run test:a11y
+# Lint JSX for accessibility issues (eslint-plugin-jsx-a11y)
+npm run lint:a11y
 
-# Run pa11y tests
-npm run test:a11y:pa11y
+# Run the full accessibility check (a11y lint + build)
+npm run a11y:check
 ```
 
 ## Code Style Guidelines
@@ -244,7 +244,7 @@ Releases are managed by the maintainers. When your PR is merged:
 
 ## Thank You
 
-Thank you for contributing to the Black History Month Innovation Summit website! Your contributions help make our event more accessible and engaging for the community.
+Thank you for contributing to the Detroit Pride Innovation Summit website! Your contributions help make our event more accessible and engaging for the community.
 
 ---