# ShutterCoach Brand Identity

## Philosophy: "Your Light, Reflected"

ShutterCoach doesn't have a single brand color. Our identity IS the Aurora gradient system - a living, breathing spectrum that adapts to each user's photography journey.

## Aurora Gradient Spectrum

The Aurora is defined by these anchor colors (from design-tokens.json v4.0.0):

### Aurora Deep Blue

- **Hex:** #0A2463
- **RGB:** R: 10, G: 36, B: 99
- **Usage:** Gradient darkest anchor, base atmosphere

### Aurora Cyan

- **Hex:** #3E92CC
- **RGB:** R: 62, G: 146, B: 204
- **Usage:** Primary gradient accent, energetic highlight

### Aurora Purple

- **Hex:** #7B2D8E
- **RGB:** R: 123, G: 45, B: 142
- **Usage:** Gradient mid-tone, creative expression

### Aurora Magenta

- **Hex:** #D90368
- **RGB:** R: 217, G: 3, B: 104
- **Usage:** Gradient light anchor, celebratory moments

## Functional Accent Colors

These colors serve specific UI purposes and appear sparingly:

### Interactive (Platform-Specific)

**iOS/Web (Cyan):**

- **Hex:** #64D2FF
- **RGB:** R: 100, G: 210, B: 255
- **Usage:** Tappable elements, links, focused states
- **Rationale:** Vibrant on solid dark backgrounds

### Success

- **Hex:** #30D158
- **RGB:** R: 48, G: 209, B: 88
- **Usage:** Completion states, positive feedback

### Warning

- **Hex:** #FFD60A
- **RGB:** R: 255, G: 214, B: 10
- **Usage:** Caution states, attention needed

### Error

- **Hex:** #FF6961
- **RGB:** R: 255, G: 105, B: 97
- **Usage:** Error states, destructive actions

## Glass & Surface System (Warm-Gray per ADR-009)

ShutterCoach uses a warm-gray glass system that floats over the Aurora backgrounds:

### Canvas Base

- **Hex:** #1A1917
- **RGB:** R: 26, G: 25, B: 23
- **Usage:** Deepest background, hint of brown warmth

### Glass Elevated

- **Hex:** #2A2825
- **RGB:** R: 42, G: 40, B: 37
- **Usage:** Cards, sheets, elevated UI elements
- **Blur:** 20px backdrop-blur

### Glass Overlay

- **Hex:** #3A3835
- **RGB:** R: 58, G: 56, B: 53
- **Usage:** Popovers, tooltips, temporary UI
- **Blur:** 24px backdrop-blur

## Text Colors

### Primary Text

- **Hex:** #FFFFFF
- **RGB:** R: 255, G: 255, B: 255
- **Usage:** Headlines, primary content
- **Contrast:** 21:1 on dark surfaces

### Secondary Text

- **Hex:** #A8A8A8
- **RGB:** R: 168, G: 168, B: 168
- **Usage:** Subheadings, supporting content
- **Contrast:** 7:1 on dark surfaces

### Tertiary Text

- **Hex:** #6B6B6B
- **RGB:** R: 107, G: 107, B: 107
- **Usage:** Captions, hints, disabled content
- **Contrast:** 4.5:1 on dark surfaces

## Accessibility

- All text combinations meet **WCAG AAA** standards (7:1 minimum contrast)
- High Contrast mode available for users who need maximum legibility
- Reduced Motion mode disables Aurora breathing animation
- Graphics Quality toggle (Full/Balanced/Performance) for device capability

## Usage Guidelines

1. **Aurora is the hero** - Let the gradient speak, don't compete with accent colors
2. **Glass creates depth** - Warm-gray glass surfaces float over the Aurora, creating atmosphere
3. **Accents are rare** - Functional colors (success, error, warning) appear only when contextually needed
4. **Photos come first** - The user's photography is always the visual focus; Aurora supports, never dominates
5. **Respect the user** - Accessibility modes are first-class features, not afterthoughts

## Digital Assets

All brand assets including logos, icons, and color swatches are available for download at:
https://shuttercoach.app/press

### Available Downloads

- App Icon (1024x1024 PNG)
- Logo variants (PNG, light/dark)
- Aurora color palette (ASE for Adobe, CSS variables)
- Marketing screenshots
- Feature graphics for App Store

---

_Generated from design-tokens.json v4.0.0 — "Your Light, Reflected" Design System_