Website Style Guide
A quick reference for anyone updating this website — the colors, fonts, and button styles that keep every page feeling like MSMS, plus a checklist of content the school still needs to supply.
Color palette — inspired by our garden
Leaf Green (Primary)
#287146
Headers, primary buttons, links, footer
Sunflower Yellow
#F6B93B
Call-to-action buttons, highlights, icons
Sky Blue
#3FA7D6
Summer camp, secondary accents, info blocks
Coral
#F0615A
Announcements, warm accents, Parent’s Zone
Butterfly Orange
#F4913D
Playful accents, event badges, the butterfly
Cream
#FBF7EE
Alternating soft section backgrounds
Typography
Headings — Baloo 2
A friendly, rounded display font
Used for all headings and buttons. Warm and playful without being childish — weights 600–800.
Body — Nunito
Soft, highly readable body text that pairs naturally with Baloo 2. Used at 16px or larger for comfortable reading on phones.
Body copy sits at 75–85% opacity for gentle hierarchy; never below WCAG AA contrast.
Buttons & components
All buttons are pill-shaped with shadows and hover states. Cards use 10px rounded corners, soft shadows, and background tones instead of borders. Section backgrounds alternate white / cream / soft palette tints, separated by wave dividers.
Content the school still needs to supply
The website is fully built with real school photos, but a few pieces of content are marked as placeholders until the school provides them:
- Staff photos and short bios for the “Our Philosophy” page (currently labeled photo placeholders).
- Three or more real parent testimonials with names — the homepage currently shows sample quotes attributed to “An MSMS Parent”.
- Verify the published Tuition & Fees page against the latest registration packet each year (2026–2027 rates are live now).
- Confirmed school-year calendar dates for the current year (events can be edited in the staff area).
- Parent handbook and enrollment forms as PDFs for the Parent’s Zone.
- Confirm on-campus speech/occupational therapy provider details before publishing specifics on the Programs page.
- Any additional photos from the Google Photos share link — it could not be accessed automatically, so photos should be uploaded through the staff area.