PSD Brand Guidelines Skill Skill

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

Full Landscape - Bridge connecting peninsula landscape, district name contained within
Horizontal - For when name/tagline would be too small
Emblem - Round versions, perfect for square spaces or tight fits
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

Agent Skills: PSD Brand Guidelines Skill

Skill Files