ECS design system

A school website with seventy pages drifts unless every page draws from one set of rules. The school needed one approved look applied everywhere, so new pages match the homepage without being redrawn.

1. Turned the approved homepage into 16 reusable components, including the header, hero, news cards, numbers band and footer.
2. Defined colors, spacing and type as named tokens, with green reserved for actions and a blue band reserved for the school's numbers.
3. Added school-page and campus-page styles that load across the whole site from one stylesheet.
4. Published a style guide page with the colors, type and usage rules for staff and designers.
5. Built a preview bundle so each component can be browsed and checked on its own.

• 16 components
• Color and type tokens
• School page styles
• Style guide

In use since August 2026 to style the live ecspgh.org pages from one stylesheet.