# Phoenix Seminary (ps.edu) — Brand Spec

> Source: ps.edu (homepage + about + admissions + give + multiple press releases), captured 2026-05-06
> Asset completeness: real logo (white shield + white wordmark, dark variants generated by fill-swap) + 7 real photos lifted from PS's own CDN + real CSS-extracted color & font tokens
> Tagline: "Scholarship with a Shepherd's Heart"
> Use case in JBSG sprinkle pipeline: editorial / institutional / academic — for Christian higher-ed-adjacent church and nonprofit websites that want gravitas without being stuffy.

## Core assets

### Logo
Phoenix Seminary's mark is a heraldic shield with internal Christian iconography (cross + figure), used solo or paired with the "PHOENIX SEMINARY" wordmark below.

- Shield (white-on-transparent, original): `assets/ps-edu-brand/shield-white.svg` — for dark/photo backgrounds
- Shield (navy fill, generated): `assets/ps-edu-brand/shield-dark.svg` — for light backgrounds
- Full logo with wordmark (white, original): `assets/ps-edu-brand/logo-white.svg`
- Full logo with wordmark (navy, generated): `assets/ps-edu-brand/logo-dark.svg`
- Favicon (rounded crest tile): `assets/ps-edu-brand/favicon.png`
- Reference: extracted brand color-palette swatch sheet `assets/ps-edu-brand/color-palette.png`

Use the full logo in nav and footer where horizontal space allows; use the shield-only mark in tight spaces (favicons, social, app tiles, badges). Shield is **mandatory** — it's the institutional anchor.

### Photography
7 real photos lifted from PS's own CDN. Tone: warm Sonoran light, brick-and-mortar classical campus architecture, library-with-people, professor-teaching, students-in-conversation. Real members and faculty, candid, not staged.

- `assets/ps-edu-brand/campus-aerial.jpg` — campus from above (the institutional hero)
- `assets/ps-edu-brand/library-with-people.jpg` — library reading room with students at tables
- `assets/ps-edu-brand/duby-teaching.jpg` — professor at the lectern, students facing
- `assets/ps-edu-brand/students-conversing.jpg` — students in conversation outside
- `assets/ps-edu-brand/preview-night.jpg` — prospective-student event, evening light
- `assets/ps-edu-brand/online-mdiv.jpg` — distance learner, study lamp + laptop
- `assets/ps-edu-brand/banner-scholarship-shepherd.png` — official "Scholarship with a Shepherd's Heart" wordmark composite

## Color tokens (extracted from real CSS — `siteground-optimizer-combined-css-f0140fc8...`)

| Token | Hex | Hits | Usage |
|-------|-----|------|-------|
| `--brand-orange` | `#d67719` | 109 | Primary brand accent (CTAs, link underline, accent rule, hover state) — the saturated PS orange you see on every CTA |
| `--brand-navy` | `#1d345e` | 35 | Institutional anchor — logo, footer, dark feature blocks, headings on light bg |
| `--brand-tan` | `#a17c4b` | 17 | Warm gold/tan — quote borders, secondary accent, scripture-rule |
| `--brand-putty` | `#d9d4d2` | 49 | Warm putty / parchment — alternate section background (the "scholarly cream") |
| `--brand-brick` | `#c02b0a` | 18 | Brick red — sparing emphasis, urgent CTAs (give-day, deadline) |
| `--ink` | `#262626` | 14 | Body text on light |
| `--ink-soft` | `#374047` | 7 | Secondary copy / metadata |
| `--ink-quiet` | `#607382` | 15 | Tertiary copy, captions, dividers |
| `--bg` | `#ffffff` | — | Page background |
| `--surface` | `#f9f9fa` | 7 | Subtle alternate surface |
| `--surface-2` | `#efefef` | 11 | Stronger alternate surface |
| `--border` | `#e8e8e8` | 12 | Hairlines |

Notes:
- Real PS uses orange `#d67719` extremely heavily (109 occurrences). Treat it as the workhorse accent — every primary CTA, hover bg, top-rule.
- Navy `#1d345e` is the institutional voice — footer ground, full-bleed feature panels, headings.
- The warm putty `#d9d4d2` is what gives PS its "old-library" feel — use as the alternate section background instead of plain gray.
- Brick `#c02b0a` is rare but real — campaign / deadline / "register today" tier.

## Typography (real stack from PS CSS, with free-font substitutes)

PS uses two **paid Adobe Typekit** serifs (`gmy2jqs.css` kit) plus Google's **Inter** for sans.

| Role | PS original | Substitute used here | Why |
|------|-------------|----------------------|-----|
| Display serif | `ivypresto-display` (Adobe, paid) | **Fraunces** (Google) | Same hi-contrast didone-leaning display serif feel; Fraunces is the closest free analog (variable opsz, sharp serifs, swash-able) |
| Body serif | `le-monde-livre-std` (Adobe, paid) | **EB Garamond** (Google) | Le Monde Livre is a humanist book serif; EB Garamond is the canonical free book serif with the same warm reading texture |
| Sans (UI/eyebrow/button) | `Inter` (Google, free — same on both sides) | **Inter** (Google) | Direct match |
| Quote / scripture set-piece | (uses Le Monde Livre italic) | **EB Garamond italic** | Direct substitute for italic body |

### Type ramp
- Hero display: 72–112px Fraunces 700 (opsz 144), line-height 1.0, letter-spacing -0.02em
- H1: 48–72px Fraunces 700 (opsz 96), line-height 1.05, letter-spacing -0.018em
- H2: 32–48px Fraunces 600 (opsz 72)
- H3: 22–28px Fraunces 600 (opsz 36) OR Inter 700
- Eyebrow: 12px Inter 700, uppercase, letter-spacing 0.18em, often in `--brand-orange`
- Body sans (UI / nav / buttons): 15–17px Inter 400/500
- Body serif (long-form prose / scripture / pull-quote): 18–21px EB Garamond 400, line-height 1.6
- Caption / metadata: 13px Inter 500, color `--ink-quiet`
- Scripture set-piece: 28–36px EB Garamond 400 italic, line-height 1.45, with `--brand-tan` left rule

PS's signature move is **mixing Inter sans (UI) with EB Garamond / Le Monde serif (long-form body)** — sans for navigation, buttons, eyebrows, captions; serif for the actual reading copy. This is what gives the site its journal-like feel.

## Components

### Buttons
Primary CTA (real PS pattern, lifted from homepage hero):
```css
background: #d67719;
color: #fff;
padding: 16px 28px;
border-radius: 4px;
font: 600 13px Inter, sans-serif;
text-transform: uppercase;
letter-spacing: 0.12em;
```

Outline / on-photo:
```css
background: transparent;
color: #fff;
border: 1.5px solid #fff;
padding: 16px 28px;
border-radius: 4px;
```

Text-arrow:
- "Learn more →" / "Read the full release →" — text in `--brand-orange`, arrow in same color, no border
- Hover: arrow translates 4px right, color shifts to brick `#c02b0a`

### Top accent rule (signature)
PS marks every section heading with a short orange horizontal rule above the eyebrow:
```css
.accent-rule {
  width: 56px; height: 3px;
  background: #d67719;
  margin: 0 0 20px;
}
```
On dark sections, this rule becomes warm tan `#a17c4b`.

### Quote / scripture block (signature)
Long quotes get a left rule in warm tan and serif italic body:
```css
.pullquote {
  border-left: 3px solid #a17c4b;
  padding-left: 28px;
  font: italic 28px/1.45 'EB Garamond', serif;
  color: #1d345e;
}
```

### Navigation
Fixed header, transparent over hero photos with subtle bottom hairline; turns to white background with hairline border on scroll. PS uses Inter weight 500 for top-level links. The PS shield sits left, "PHOENIX SEMINARY" wordmark to its right, in either white (over photo hero) or navy (over white scroll). Primary CTA `Apply` lives at far right in `--brand-orange`.

### Image treatment
- Photography: **uncropped**, full-bleed where it serves the section, no filters, real Arizona warmth preserved
- A single subtle navy-to-transparent scrim at the bottom of hero photos for type legibility (no full-overlay)
- No glassmorphism, no parallax abuse. Photos are presented as photographs, not as backgrounds for type

### Cards (program / news)
Light surface (`#fff` or `--surface`), 1px border `--border`, radius 4px, no shadow at rest, subtle `0 16px 32px -16px rgba(29,52,94,0.18)` on hover with 4px upward translate. Image fills top with `4/3` aspect.

## Tone keywords
scholarly · institutional · warm-not-cold · serif-led · sonoran-warm · academic · shepherd-hearted · evangelical-classical

## Forbidden / off-brand
- ❌ Stock photography of generic "students laughing in quad"
- ❌ Heavy shadows, glassmorphism, neon, dark mode as default
- ❌ Bright gradient backgrounds (PS is photo-flat with one solid accent)
- ❌ Helvetica / system-ui / Arial as display heading (kills the editorial signature — must be Fraunces or actual ivypresto)
- ❌ Emoji as bullet icons
- ❌ More than one accent color in any single screen (orange OR tan, not both as decoration — tan is reserved for quotes/scripture)
- ❌ Sans-serif body for long-form prose (always EB Garamond / Le Monde for reading copy)
- ❌ Round-pill buttons (PS uses 4px radius rectangles — institutional, not consumer-app)

## Anything that didn't extract cleanly
- **No standalone dark-fill logo asset on the CDN.** PS only ships `PS-white-logo.svg` and `PS-Sheild-White.svg`. Dark variants generated by sed-replacing `fill:white` → `fill:#1d345e` (brand navy). Real PS sometimes shows a brown/tan version on the live site that's likely produced via CSS color-filter or a member-area asset I couldn't locate. The substitution I made is faithful to brand palette; if the user wants the official dark version, we'd need to ask PS directly or pull a member-portal asset.
- **2 photos exceed 20MB** (`students-conversing.jpg` 24MB, `preview-night.jpg` 35MB). They're real, full-resolution PS-CDN photos — fine for archival, but for production HTML rendering they should be re-encoded down to ~400KB (use `sips -Z 2400 -s formatOptions 60 *.jpg` if needed). The HTML pages reference them as background-image and the browser handles, but local serving will be slow; user should consider downsampling before deploy.
- **No campus exterior building shot lower than aerial.** PS uses one aerial + interior life shots; no street-level building façade was on the homepage. The aerial does the job for hero.

---

## Section Patterns

This design system implements the canonical section catalog at `../SECTION-PATTERNS.md`. Every pattern in that catalog renders here in this DS's visual language.

**Where to see them rendered:**
- `homepage.html` — `hero-photo-led`, `intro-statement`, `service-times`, `ministries-grid`, `events-list`, `cta-band`, `closing-block`, `footer`
- `landing-1-im-new.html` — `hero-centered`, `intro-statement`, `service-times`, `staff-profile`, `cta-band`, `footer`
- `landing-2-series.html` — `hero-photo-led`, `intro-statement`, `events-list`, `cta-band`, `footer`
- `landing-3-give.html` — `hero-centered`, `intro-statement`, `ways-to-give`, `closing-block`, `footer`
- `design-system.html` — kitchen-sink reference of all type/color/component primitives

When sprinkling a prospect, the pipeline reads `SECTION-PATTERNS.md` for the field contract, fills the prospect's data, and this DS's CSS handles the visual treatment. To extend with a DS-specific signature section, add it below.

### Signature patterns (PS-edu-only)

These extend the canonical catalog with patterns unique to PS-edu's scholarly editorial language. The sprinkle pipeline can call them like any other pattern; only this DS implements them.

#### `scripture-pullquote`
- **Purpose:** A scripture verse or foundational quote in PS's signature serif italic with warm-tan left rule.
- **When to use:** Mid-page on any landing where the prospect's voice quotes scripture or a confessional document. Works on homepage, about, give.
- **CSS hook:** `.sig-scripture-quote`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `quote` | string | yes | Verse/quote text — rendered EB Garamond italic 28–36px |
| `attribution` | string | no | "—Romans 8:28" or "—Heidelberg Catechism, Q&A 1" |
| `lead_in` | string | no | Optional short editorial line before the quote |

#### `editorial-listing`
- **Purpose:** A scholarly catalog of programs, courses, lectures, or papers — replaces the visual `ministries-grid` with a more "academic prospectus" treatment: orange top-rule per item, sans eyebrow, serif title, serif body.
- **When to use:** Programs page, course/series catalog, lecture or sermon series listing.
- **CSS hook:** `.sig-editorial-listing`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `intro` | string | no | |
| `items` | `array of {eyebrow, title, body, href?}` | yes | 3–8 typical |

#### `top-accent-rule`
- **Purpose:** PS's signature 56px × 3px orange horizontal rule above section eyebrows. Small atomic component, called as a wrapper around any heading group.
- **When to use:** Above any major section heading on any page, when you want PS's editorial signature.
- **CSS hook:** `.sig-accent-rule` (decorative `<div>` placed before the eyebrow/heading)
- **Fields:** _(no fields — purely decorative; sprinkle pipeline emits the div when this pattern is requested)_