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

name, description, triggers, allowed-tools, version

name	description	triggers	allowed-tools	version
psd-brand-guidelines	Apply Peninsula School District official brand colors, typography, and logos to artifacts	psd brand district branding psd colors psd logo peninsula school district style brand guide on-brand	Read, Write, Edit, Bash	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

/* 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

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