Design Systems Engineer

WHO WE ARE: MagicSchool is the premier generative AI platform for teachers. We're just over a year and a half old, and more than 5 million teachers from all over the world have joined our platform. Join a top team at a fast growing company that is working towards real social impact. Make an account and try us out at our website and connect with our passionate community on our Wall of Love.

Role Description: As a Design Systems Engineer, you will take ownership of core design system components, ensuring they are scalable, consistent, and accessible. You will contribute to building a multi-theme, multi-modal, and extensible design system while collaborating closely with designers and other engineers.

Responsibilities

As a Design Systems Engineer, you will be responsible for:

• Building and maintaining a robust, scalable component library

  • Contributes to the discovery process in defining the technical path forward for the design system and its relationship to other products

  • Ensures components are performant, reusable, and align with best practices

  • Works with modern frontend tools (JS, CSS, and CSS-in-JS) to create theming and other configuration layers

  • Effectively debugs and optimizes components for performance and accessibility

  • Can build software that is easy for others to understand and utilize while being easy to maintain

• Ensuring adoption and extensibility of the design system

  • Advocates for design system best practices across the engineering team

  • Contributes to documentation in Storybook

  • Balances consistency with flexibility to accommodate product needs

• Collaborating with cross-functional teams to enhance the design system

  • Implements system-wide solutions

  • Develops opinions on usability, accessibility, and developer experience

  • Engages in discussions around Figma design tokens and components

Qualifications/Competencies/Skills

• Gets a lot done: Works hard, resourceful, do whatever it takes

• Adaptable: Smart, learns fast, curious

• Builds relationships easily: emotionally intelligent, communication, warm

• Strong communication skills: team-first mindset, highly collaborative, can articulate decisions within team’s context

• Strong understanding of front-end architecture and component-driven development

• Proficient in TypeScript, React, Next.js, and Storybook

• Experience with styling methodologies like cva, vanilla-extract, and/or css modules

• Familiarity with accessibility principles (ARIA, WCAG)

• Nice to have: Experience working in Figma

Experience

• 3+ years of experience as an engineer

• Preferred: 5+ years of experience as an engineer

• Preferred: Experience building design systems in the past

• Preferred: Startup experience

Our Benefits: We are proud to offer generous benefits, such as unlimited PTO, employer covered health insurance, a wellness stipend, a 401(k) match, and vision/dental insurance.

Our Values

• Educators are Magic:  Educators are the most important ingredient in the educational process - they are the magic, not the AI. Trust them, empower them, and put them at the center of leading change in service of students and families.

• Joy and Magic: Bring joy and magic into every learning experience - push the boundaries of what’s possible with AI.

• Community:  Foster community that supports one another during a time of rapid technological change. Listen to them and serve their needs.

• Innovation:  The education system is outdated and in need of innovation and change - AI is an opportunity to bring equity, access, and serve the individual needs of students better than we ever have before.

• Responsibility: Put responsibility and safety at the forefront of the technological change that AI is bringing to education.

• Diversity: Diversity of thought, perspectives, and backgrounds helps us serve the wide audience of educators and students around the world.

• Excellence:  Educators and students deserve the best - and we strive for the highest quality in everything we do.