kernl Design System
UX UI Design Systems Product Design Systems Thinking Branding
Project Overview
I was one of a team of 3 (myself as the product designer and 2 front-end developers) that created the the proprietary “kernl” design system for Northeastern University (NEU). Kernl is a universal design system for NEU brand to rapidly build digital products that are ADA compliant and most importantly, customizable. We chose the home-grown method of building kernl so that we would have control over versioning, UI/UX, and deployment across the NEU’s decentralized ecosystem.
Kernl is composed of a set of building blocks that leverages Brad Frost’s atomic design methodologies so that everything needed to create a website (or any digital product) is at your fingertips. From the color palette and typographic scale, to components and CSS utilities, kernl creates consistent UI patterns to build everything from websites to mobile apps.
My Role
Led the university’s design system from the ground up to ensure consistency across academic and marketing properties.
Built and documented reusable, production-ready components integrated with a headless CMS, leveraging Tailwind CSS, custom CSS, and JavaScript to create flexible, scalable UI patterns.
Created documentation and guidelines that enabled cross-team adoption, reduced design and development debt, and improved speed and quality of site delivery.
Information Graphics
I created this series of graphics to visualize how the design system is built, it’s scope, and the governance involved with it’s deployment.
Building Blocks
These design tokens are the foundation of the design system.
Design Patterns
Here are some examples of my fat marker sketches before I built the components in Figma.
