update brand style guide (#840)

Author: jeromehardaway

brand-style-guide.md

@@ -7,9 +7,9 @@
 
 #VetsWhoCode is a streamlined, highly selective software development training program intent on transitioning military veterans into the vacancies of the tech sector.
 
-#VetsWhoCode was founded by vets who themselves faced the realities of transitioning. We don’t focus our energy on marketing ploys or on how many people we can funnel through a pipeline. Instead, we choose quality over quantity and tangible results over lofty ideals.
+#VetsWhoCode was founded by vets who themselves faced the realities of transitioning. We don't focus our energy on marketing ploys or on how many people we can funnel through a pipeline. Instead, we choose quality over quantity and tangible results over lofty ideals.
 
-We are solution-based and action-oriented. If our students can’t make money with it then we don’t bother teaching it.
+We are solution-based and action-oriented. If our students can't make money with it then we don't bother teaching it.
 
 ### Results Driven
 
@@ -45,12 +45,101 @@ Do not manipulate, tweak, or otherwise alter the #VetsWhoCode logo in any way. A
 
 The #VetsWhoCode color palette is based on the exact Pantones used for the American Flag. Make sure to use the approved Pantone CMYK or RGB color values.
 
-- Navy Blue: `R: 9, G: 31, B: 64` - Pantone 282 C
-    - Navy Blue: `#091f40`
-- Red: `R: 197, G: 32, B: 62` - Pantone 193 C
-    - Red: `#c5203e`
-- White: `R: 255, G: 255, B: 255` - Pantone White
-    - White: `#ffffff`
+### Primary Colors
+
+| Color       | Hex       | RGB                    | Pantone | Role                       |
+| ----------- | --------- | ---------------------- | ------- | -------------------------- |
+| Navy Blue   | `#091f40` | R: 9, G: 31, B: 64     | 282 C   | Primary brand color        |
+| Red         | `#c5203e` | R: 197, G: 32, B: 62   | 193 C   | Primary accent, CTAs       |
+| Cream White | `#EEEDE9` | R: 238, G: 237, B: 233 | —       | Backgrounds                |
+| Ink Black   | `#1A1823` | R: 26, G: 24, B: 35    | —       | Body text                  |
+| Amber Gold  | `#FDB330` | R: 253, G: 179, B: 48  | —       | Highlights, success states |
+
+### Navy Blue Scale
+
+Extended tints and shades for UI depth and hierarchy.
+
+| Color      | Hex       | Role                          |
+| ---------- | --------- | ----------------------------- |
+| Sky Blue   | `#B9D6F2` | Light backgrounds, info boxes |
+| Ocean Blue | `#006DAA` | Links, interactive elements   |
+| Royal Blue | `#0353A4` | Secondary buttons             |
+| Deep Navy  | `#003559` | Dark accents, hover states    |
+| Midnight   | `#061A40` | Alternative to primary navy   |
+
+### Red Scale
+
+Extended red tones for states and emphasis.
+
+| Color      | Hex       | Role                        |
+| ---------- | --------- | --------------------------- |
+| Signal Red | `#C52233` | Near primary, alternative   |
+| Crimson    | `#A51C30` | Hover/pressed states        |
+| Dark Red   | `#74121D` | Error borders, deep accents |
+| Maroon     | `#580C1F` | Darkest gradients           |
+
+### Gold Scale
+
+Extended gold tones for highlights and success states.
+
+| Color       | Hex       | Role                       |
+| ----------- | --------- | -------------------------- |
+| Light Gold  | `#FFE169` | Highlight backgrounds      |
+| Bright Gold | `#FAD643` | Badges, success indicators |
+| Rich Gold   | `#DBB42C` | Hover state for gold       |
+| Deep Gold   | `#C9A227` | Darker gold accents        |
+
+### UI Grays
+
+Neutral scale for borders, secondary text, and UI structure.
+
+| Color     | Hex       | Role                            |
+| --------- | --------- | ------------------------------- |
+| Off White | `#F8F9FA` | Light cards, subtle backgrounds |
+| Silver    | `#DEE2E6` | Borders, dividers               |
+| Slate     | `#6C757D` | Secondary text, captions        |
+| Charcoal  | `#495057` | Muted labels                    |
+| Dark Gray | `#343A40` | Softer large text blocks        |
+
+### Dark Mode — Backgrounds
+
+Surface hierarchy for dark interfaces.
+
+| Color     | Hex       | Role                              |
+| --------- | --------- | --------------------------------- |
+| Ink Black | `#1A1823` | Primary dark background           |
+| Charcoal  | `#212529` | Elevated surfaces (cards, modals) |
+| Dark Gray | `#343A40` | Tertiary surfaces, hover states   |
+
+### Dark Mode — Text
+
+Typography colors optimized for dark backgrounds.
+
+| Color     | Hex       | Role                     |
+| --------- | --------- | ------------------------ |
+| Off White | `#F8F9FA` | Primary text             |
+| Silver    | `#DEE2E6` | Secondary text, captions |
+| Slate     | `#6C757D` | Disabled/muted text      |
+
+### Dark Mode — Accents
+
+Adjusted brand colors for visibility and reduced eye strain on dark.
+
+| Color       | Hex       | Role                        |
+| ----------- | --------- | --------------------------- |
+| Light Blue  | `#84C1FF` | Links, interactive elements |
+| Sky Blue    | `#B9D6F2` | Hover state for links       |
+| Coral       | `#F38375` | Errors, destructive actions |
+| Light Gold  | `#FFE169` | Success, highlights         |
+| Bright Gold | `#FAD643` | Badges, notifications       |
+
+### Color Usage Guidelines
+
+Primary colors (Navy, Red, Cream, Black, Gold) should dominate all brand materials. Extended scales are for UI states, gradients, and functional indicators. Maintain a 60/30/10 ratio: 60% neutrals (Cream, Grays), 30% primary (Navy), 10% accent (Red, Gold).
+
+**Accessibility:** Ensure text maintains minimum 4.5:1 contrast ratio. Navy on Cream and Ink Black on Cream both pass WCAG AA. Red text should only be used on light backgrounds.
+
+**Dark Mode:** Swap Navy (`#091f40`) for Ink Black (`#1A1823`) as background. Replace Navy interactive elements with Light Blue (`#84C1FF`). Shift Red to Coral (`#F38375`) for reduced eye strain. Gold lightens to `#FFE169` for better pop. Off White (`#F8F9FA`) replaces Cream for primary text — pure white (`#FFFFFF`) is too harsh.
 
 ## Typography