Start every new PCS page from the colors, fonts and pieces below, then copy the code block at the bottom into your stylesheet.
Values were read from the live sites on Sunday, November 8, 2026. Tap any color to copy its hex code.
The crest is the logo
Every PCS site opens with the school crest. On a crimson bar it always sits inside a white circle.
Use the crest file as is, from plumstead.ooo/crest.png or the shared Drive folder.
Keep it at least 40px wide, with a 2 to 3px white ring on crimson.
Don't redraw, recolor, stretch or crop the crest.
Don't put it straight on crimson or on a photo without the white circle.
Crimson, ivory and ink
Crimson carries the brand. Ivory and white do the heavy lifting behind it. Ink is for text.
Contrast checked: white text on Crimson is 6.1 to 1 and Muted text on Ivory is 5.4 to 1, so both pass for normal-size text. Win Green is a status color only, never a brand color.
Two Google fonts
Cormorant Garamond gives headings the classic school feel. Libre Franklin keeps everything else easy to read on a phone.
Weights 600 and 700, plus 600 italic. Use for page titles, section heads, card titles, opponents and scores.
Weights 400 to 800. Use for paragraphs, buttons, menus, dates, times and small uppercase labels.
| Role | Sample | Size | Font |
|---|---|---|---|
| Hero title | Good afternoon | 2.2rem phone, 3.4rem computer | Cormorant 700 |
| Page title | Family Handbook | 2.1rem | Cormorant 700 |
| Section head | Coming up this week | 1.75rem | Cormorant 700 |
| Card title | vs Jenkintown | 1.35rem | Cormorant 700 |
| Body | Scores, schedules and live streams. | 1rem (17px), Game Day 1.06rem | Franklin 400 |
| Label | Next up | .72 to .78rem, spaced .14em | Franklin 700 caps |
The shared pieces
These come straight from Game Day and the hub, so new pages feel like the same family.
Buttons
Corners 12px. At least 48px tall. Primary is always crimson, never black. Quiet is white with a soft shadow. Link pills use Crimson Soft.
Status pills
Fully round. Live is the only filled crimson pill. Win uses the status green.
Game card
Example games copied from Game Day. Cards: white, corners 18px, soft warm shadow, no border. Calendar tile has a crimson month strip.
Top bar and quick links
Top bar is crimson with the crest seal and the site name in Cormorant. Quick link tiles are 64px, corners 20px.
School look and Game Day look
Same colors and fonts, tuned for two audiences. Pick the look by who reads the page.
School look
- Modern college-prep feel: crimson, ink and white with the crest.
- Ink may be used for text, a footer band or a secondary button.
- Bigger, more editorial headings and photos.
Used by: main site rebuild, PCS Families app, Family Handbook, school blog, the hub.
Honor God with excellence
Example layout only.
Game Day look
- Light white, ivory and gray pages with crimson accents.
- No black backgrounds and no black buttons, anywhere.
- Large text (17px and up) and big tap targets (48px and up) for grandparents in the stands.
- Scores in big Cormorant numbers.
Used by: Game Day at gameday.plumstead.ooo, Game Day v2, plumstead.ooo, the Game Day blog.
MS Girls Basketball
Monday, November 9 · 3:30 PM
Every PCS site, side by side
What each site uses today. Dots show page background, crimson and text color.
| Site | Look | Fonts | Colors | Matches? |
|---|
What doesn't match yet
Ten differences found across the sites, most important first, each with the fix that brings it in line.
Copy into any PCS page
Paste this at the top of a page's style block, then use the names, like var(--crimson), instead of typing hex codes.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Libre+Franklin:wght@400;500;600;700;800&display=swap">
:root {
/* Brand */
--crimson: #BD2041; /* buttons, top bar, labels */
--crimson-dk: #8E1530; /* hover, photo overlays */
--crimson-soft: #FBECEF; /* pills, link chips */
/* Neutrals */
--bg: #FAF7F2; /* ivory page */
--surface: #FFFFFF; /* cards */
--gray-soft: #F1ECE4; /* quiet panels */
--line: #E8E1D6; /* dividers */
--muted: #6B6560; /* secondary text */
--ink: #1E1A18; /* text (School look may also use it for a footer) */
/* Status only */
--win: #2E7D4F;
/* Type */
--se: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--sa: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Shape */
--r-card: 18px; --r-btn: 12px; --r-tile: 20px; /* pills: 999px */
--shadow: 0 4px 18px rgba(80,40,30,.07);
}
body { font-family: var(--sa); background: var(--bg); color: var(--ink); }
h1, h2, h3 { font-family: var(--se); font-weight: 700; }
<meta name="theme-color" content="#BD2041">