gh-krishagel-geoffrey/skills/psd-brand-guidelines/SKILL.md

---
name: psd-brand-guidelines
description: Apply Peninsula School District official brand colors, typography, and logos to artifacts
triggers:
  - "psd brand"
  - "district branding"
  - "psd colors"
  - "psd logo"
  - "peninsula school district style"
  - "brand guide"
  - "on-brand"
allowed-tools: Read, Write, Edit, Bash
version: 0.1.0
---

# PSD Brand Guidelines Skill

This skill applies Peninsula School District's official brand identity to artifacts including presentations, documents, graphics, and other materials.

## Purpose

Ensure professional and consistent use of the Peninsula School District brand across all communications. The brand reflects the stunning beauty of the Pacific Northwest and the Puget Sound region.

## Typography

### Headings & Logo Text: Josefin Sans

Modern geometric, elegant font with a vintage 1920s feel. Use **Bold** weight for district name and all headings.

- **Font:** Josefin Sans Bold
- **Source:** https://fonts.google.com/specimen/Josefin+Sans
- **Fallback:** Arial, sans-serif

### Body Text: Josefin Slab

Perfect pairing to Josefin Sans, highly legible at smaller sizes due to slab serif and typewriter-style attributes.

- **Font:** Josefin Slab
- **Source:** https://fonts.google.com/specimen/Josefin+Slab
- **Fallback:** Georgia, serif

## Color Palette

### Logo Colors (Primary)

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Sea Glass** | #6CA18A | rgb(108, 161, 138) | Primary green, landscape elements |
| **Pacific** | #25424C | rgb(37, 66, 76) | Primary dark blue, text, headers |
| **Driftwood** | #D7CDBE | rgb(215, 205, 190) | Neutral tan, backgrounds |

### Supporting Brand Colors

| Name | Hex | RGB | Usage |
|------|-----|-----|-------|
| **Cedar** | #466857 | rgb(70, 104, 87) | Dark green accent |
| **Whulge** | #346780 | rgb(52, 103, 128) | Medium blue (Coast Salish word for sound of waves) |
| **Sea Foam** | #EEEBE4 | rgb(238, 235, 228) | Light background |
| **Meadow** | #5D9068 | rgb(93, 144, 104) | Green accent |
| **Ocean** | #7396A9 | rgb(115, 150, 169) | Light blue accent |
| **Skylight** | #FFFAEC | rgb(255, 250, 236) | Off-white/cream background |

### Color Selection Guidelines

- **Light backgrounds:** Use Pacific (#25424C) or 2-color logo
- **Dark backgrounds:** Use Sea Glass (#6CA18A) or white logo
- **Neutral backgrounds:** Choose based on contrast needs
- When adding colors, choose natural, complementary colors that reflect Pacific Northwest landscape tones

## Logo Options

### Available Formats

1. **Full Landscape** - Bridge connecting peninsula landscape, district name contained within
2. **Horizontal** - For when name/tagline would be too small
3. **Emblem** - Round versions, perfect for square spaces or tight fits
4. **Stacked** - Vertical layout with name separated from brandmark

### Color Variants

- **2-color** - Sea Glass + Pacific (primary use)
- **1-color Pacific Blue** - For light backgrounds
- **1-color Sea Glass** - For medium backgrounds
- **White** - For dark backgrounds

### File Types

| Format | Use Cases |
|--------|-----------|
| **EPS (Vector)** | Professional printing, large scaling, Adobe programs |
| **PNG (Raster)** | Microsoft Office, websites, social media, email signatures |

### Logo Location

**Local assets folder:** `skills/psd-brand-guidelines/assets/`

**PNG files (19)** - for web, Office, email:
- `psd_logo-2color-{emblem,fulllandscape,stacked,horizontal,square}.png`
- `psd_logo-1color-blue-{emblem,fulllandscape,stacked,horizontal,square}.png`
- `psd_logo-1color-green-{emblem,fulllandscape,stacked,horizontal,square}.png`
- `psd_logo-white-{emblem,stacked,horizontal,square}.png`

**EPS files (19)** - for professional printing, Adobe programs:
- Same variants as PNG, with `.eps` extension

**Reference:**
- `PSD_Branding_Guide.pdf` - full brand guide document

**Google Drive source:**
- **Logos Folder ID:** `1YhjxX_pOwZJppZebIIC7QW_UHF4bvo79`
- **Brand Guide Folder:** `1ufOB6rrKDbAaH7HapdLadJzWy8ho5hTb`

## Logo Usage Rules

### Do's

- Maintain original proportions
- Ensure sufficient contrast with background
- Use appropriate color variant for background
- Use emblem/stacked logo for small sizes

### Don'ts

- Don't shrink full landscape logo below 1.5" wide (print) or 300px (web)
- Don't rotate the logo
- Don't apply effects (drop shadows, mirroring, etc.)
- Don't stretch or squish
- Don't use non-brand fonts with logo
- Don't place on backgrounds with insufficient contrast

## Applying Brand to Artifacts

### Presentations

```css
/* Title slides */
background-color: #25424C;  /* Pacific */
color: #FFFAEC;             /* Skylight */
font-family: 'Josefin Sans', Arial, sans-serif;

/* Content slides */
background-color: #EEEBE4;  /* Sea Foam */
color: #25424C;             /* Pacific */
font-family: 'Josefin Slab', Georgia, serif;

/* Accent elements */
border-color: #6CA18A;      /* Sea Glass */
```

### Documents

- **Headings:** Josefin Sans Bold, Pacific (#25424C)
- **Body:** Josefin Slab, Pacific (#25424C)
- **Links/Highlights:** Whulge (#346780)
- **Backgrounds:** Sea Foam (#EEEBE4) or Skylight (#FFFAEC)

### Digital/Web

- Primary buttons: Sea Glass (#6CA18A)
- Secondary buttons: Whulge (#346780)
- Text on light: Pacific (#25424C)
- Text on dark: Skylight (#FFFAEC)

## Brand Contact

For questions or special needs:
- **Danielle Chastaine**, Digital Media Coordinator
- chastained@psd401.net

## Quick Reference

```javascript
const PSD_BRAND = {
  colors: {
    // Logo colors
    seaGlass: '#6CA18A',
    pacific: '#25424C',
    driftwood: '#D7CDBE',
    // Supporting colors
    cedar: '#466857',
    whulge: '#346780',
    seaFoam: '#EEEBE4',
    meadow: '#5D9068',
    ocean: '#7396A9',
    skylight: '#FFFAEC'
  },
  fonts: {
    heading: "'Josefin Sans', Arial, sans-serif",
    body: "'Josefin Slab', Georgia, serif"
  },
  logos: {
    localPath: 'skills/psd-brand-guidelines/assets/',
    driveFolder: '1YhjxX_pOwZJppZebIIC7QW_UHF4bvo79'
  }
};
```

---

*Last updated: June 14, 2024*
*Source: PSD Branding Guide 06.14.2024.pdf*