HCMS Website — Design Guidelines

Reference for any future updates or new components on the Henry Coaster Memorial School site. This is the source of truth for visual/design decisions — read this before styling anything new.

1. Brand Colors

The palette below is implemented in assets/css/main.css (:root) under different variable names than this guideline originally used. Always use the actual CSS custom properties in the right-hand column — don’t introduce new color variables.

Confirmed 2026-09-08: these hexes matched the live site almost exactly when checked — no color rework needed, just use the real variable names above.

Usage rules

• Primary Blue is dominant (navigation, headings, buttons).
• Secondary Blue for accents and hover states.
• Accent Red used sparingly — only for emphasis, never as a base color.
• Dark Navy replaces black for all text and the footer.
• Light Gray for borders/separators, not black.
• Keep sufficient contrast — this is a school site, accessibility matters.
• All colors defined as CSS variables so the theme is easy to update later.

2. Typography

• Display font: Manrope (already loaded via --font-display / --font-body in main.css, pulled from Google Fonts).
• Serif font: Noto Serif (already loaded via --font-serif) — used selectively for a “classic school” feel (e.g. section headings).
• Base body size: 16–18px, line height 1.6–1.8.
• Never use system default fonts (Arial, Helvetica, SF).
• Minimum 3 hierarchy levels; don’t use more than 2–3 sizes per screen.
• Text color is Dark Navy (--navy-200 / --text-primary / --text-secondary), never pure black.

3. Color Layering & Depth

• Build 3–4 shades of the base color (increase lightness ~0.1 at a time). Darker = background/deeper, lighter = elevated/important. main.css already has these scales (--primary-100..400, --sage-100..400, --bg-100..400, etc.) — reuse them rather than inventing new shades.
• Stack lighter shades onto darker ones to create elevation — you don’t need borders once layering is right; contrast alone separates elements.
• Two-layer shadow system: light comes from above, so elevated elements get a subtle light top-edge highlight + a deeper bottom shadow. main.css already defines --shadow-sm, --shadow-md, --shadow-md-hover — use these instead of writing new box-shadow values.
  • Small shadow tier → cards
  • Medium tier → buttons
  • Large tier → modals
• Never pure white (#FFFFFF as a foreground surface) or pure black anywhere.

4. Layout & Responsiveness

• Treat every layout as a system of boxes with clear relationships — get the structure right before making it responsive.
• Responsive = rearranging with purpose, not just shrinking everything uniformly.
• Use an 8px spacing grid: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 — matches the --space-* custom properties already in main.css.
• One clear focal point per screen; avoid perfectly symmetrical, lifeless layouts.
• Mobile responsive is required (site is built on Jekyll / GitHub Pages).
• Watch for unscoped class-name collisions. main.css is one large file with several components that historically reused generic class names (e.g. two different “schedule” components both used .schedule-day/.schedule-date). This caused a real mobile bug (Sept 2026) where an unused component’s CSS bled into the live one. When adding a new component, scope its selectors under a unique parent class rather than bare/generic class names.
• Flex items and long text: a flex item with flex-shrink: 0 will never shrink below its full single-line content width — this caused a header bug (Sept 2026) where a long tagline pushed the hamburger menu off-screen instead of wrapping. If a flex child contains text that should be allowed to wrap/shrink, give it min-width: 0 rather than blanket flex-shrink: 0.

5. Component Patterns (from the homepage rebuild)

• “This Week’s Activities” card: calendar icon, top border accent, event list with square date boxes, “Full School Calendar” button. Live implementation: .widget-activities in index.html + matching CSS in main.css.
• “Quick Resources” card: light-blue tinted background, list of links with external-link icons, each link styled as a mini card.
• “Our Sacred Lands” image card: photo with gradient overlay, text anchored at bottom, hover zoom effect.
• Map section: gray background, two columns (text + map image), address with icons, large shadow on the map image.
• Footer: Dark Navy (--navy-200) background, 4 columns (About / Quick Links / Contact / Newsletter), school logo + description, newsletter signup form, copyright line at the bottom.
• Banners (e.g. homepage “Welcome Back” banner): top accent border, icon + badge + heading + paragraph + CTA button, reused as .welcome-back-banner / .welcome-banner-* classes — follow this pattern for any future homepage announcement banner rather than inventing a new one.

6. Buttons, Radius & Icons

• One consistent border-radius scale across the whole site (--radius-md, --radius-lg, --radius-xl, --radius-full already defined) — don’t introduce arbitrary radius values.
• Buttons: gradient background, subtle 1px top highlight, drop shadow colored to match the button’s hue (not grey), bold text, generous padding, and defined hover/pressed/disabled states.
• Icons: consistent stroke width (this site uses 1.5–2px stroke SVGs throughout — match the existing inline SVG icon style rather than pulling in an icon font/library), no default system icons, small icons (<24px) filled rather than outlined, larger icons can be outlined, always leave padding around icons inside their containers.

7. Animation

• Prefer spring/physics-based motion over linear easing.
• Micro-interactions: 100–200ms. Transitions: 300–400ms. Entrances: 400–600ms.
• Stagger list/entrance animations by 50–100ms. Nothing should animate at 0ms (instant).

8. Common Mistakes to Avoid (the “AI slop” checklist)

• Pure white backgrounds or pure black text
• Generic grey shadows on colored elements
• Inconsistent border radius across components
• System default fonts
• Flat single-color fills with no depth
• No visual hierarchy — everything the same weight
• Cramped spacing
• Linear (non-physical) animations
• Perfectly symmetrical, lifeless layouts
• Generic blue/purple gradient as the “default AI” palette
• Missing hover/press states
• Borders used instead of color contrast to separate sections
• Too many font sizes/weights with no system
• Reusing generic/unscoped class names across unrelated components (see Layout & Responsiveness above)

9. Implementation Notes

• Site is built with Jekyll, hosted on GitHub Pages (custom domain: henrycoastermemorialschool.ca) — keep that structure.
• Key files: _layouts/default.html, index.html, assets/css/main.css.
• Keep existing functional features (photo carousel, after-school schedule) when redesigning — this is a visual/structural update, not a rebuild from scratch.
• Workflow: edit files → test locally with bundle exec jekyll serve → commit → push → check the live site after ~2 minutes.

Goal for every update: it should look like a human who cared made every decision — not a generic AI-generated template.