Component Library and Design Tokens for School Website CMS

Problem

Designers and developers were repeatedly building school website mockups and digital products from scratch without a unified visual foundation. This lack of shared tokens for color, typography, spacing, and layout components led to inconsistent client mockups, tedious design handoffs, and unnecessary engineering rework across CMS themes and product extensions.

Solution

I architected a structured component library and design system in Figma tailored around the CMS ecosystem. By establishing core design tokens, standardized website patterns, and accessible defaults like navigation menus, hero sections, and content blocks, the system accelerated the creation of final client mockups and streamlined stakeholder approvals. To ensure true production accuracy, the Figma library accounted for granular edge cases, detailing requirements down to district-mandated logos, ADA compliance parameters, and specialized school widgets.

Key Improvements Made:

• Built a centralized Figma design system focused on CMS-driven school websites and digital products.

• Accelerated mockup generation and stakeholder approvals while eliminating redundant design and engineering work.

• Integrated real-world production details such as district-mandated logos, specialized widgets, and accessibility compliance.

Trinity High School

When Trinity High School set out to modernize their digital presence, the goal was to create a modern website that reflected their rich community while driving enrollment and campus engagement.

Partnering with a project manager to translate the client's vision into clear design milestones, I overhauled the visual identity away from rigid legacy templates toward a dynamic component system. To accelerate development while adhering to strict platform constraints, I leveraged Claude Code with a custom design agent trained on the specific CMS framework. I implemented a full-width video hero section at the top fold, while updating the palette with navy blue, light blue, and pink accents paired with sharp geometric patterns.

To improve structure and usability, I expanded the header and footer navigation to meet strict accessibility standards and designed flexible grid layouts for events, mission statements, and a dedicated "Giving" hero banner. After completing the layout and logic, I shipped the final product following a final technical audit by a developer. The result was an adaptable, CMS-driven platform built to scale seamlessly.

Project Highlights

• AI-Assisted Workflow: Built the site using Claude Code and a specialized CMS design agent, dramatically speeding up layout generation and component architecture.

• Immersive Hero Experience: Integrated a full-width video banner and official crest signage to establish an immediate, high-impact first impression.

• Refined Brand Palette: Updated the visual theme with navy blue, light blue, pink accents, and brand mark watermarks for a distinct identity.

• Cross-Functional Collaboration: Partnered with a project manager on client alignment and handed off to a developer for a final production audit before shipping.