Full Stack Engineer, Design Systems

📍 Job Overview

Job Title: Full Stack Engineer, Design Systems

Company: Planning Center

Location: Remote (USA)

Job Type: Full-Time

Category: Engineering / Software Development / Design Systems

Date Posted: March 5, 2026

Experience Level: Mid-Level (3+ years)

Remote Status: Fully Remote

🚀 Role Summary

• This role focuses on the critical intersection of design and engineering, specifically within the realm of Design Systems, requiring a unique blend of full-stack technical expertise and a strong front-end sensibility.

• The engineer will be instrumental in architecting, developing, and maintaining the technical infrastructure that powers Planning Center's internal design system, ensuring consistency, accessibility, and efficiency across all web and mobile products.

• Key responsibilities include building and refining tooling, patterns, and processes that empower UX Engineers and Full-Stack Engineers across multiple product teams to deliver high-quality, well-structured UIs.

• The position involves close collaboration with both design and engineering teams to drive the evolution of the design system's backend and platform architecture, while also managing cross-team impact and facilitating system-wide adoption of new standards and components.

📝 Enhancement Note: This role is positioned within a "Design Engineering" function, a specialized area that bridges the gap between design vision and product implementation. The emphasis on "Full Stack Engineer, Design Systems" highlights the need for a candidate who can contribute to both the front-end componentry and the underlying backend infrastructure that supports and deploys the design system. The "About the Work" section clearly outlines the three core pillars of the team's responsibility: design system maintenance, frontend standards definition, and tooling/infrastructure development.

📈 Primary Responsibilities

• Architect and maintain the technical infrastructure powering the design system, including npm build pipelines, release workflows, bundling strategies, and content delivery mechanisms.

• Enable multiple product teams by creating reliable tooling, patterns, and processes that help UX Engineers and Full-Stack Engineers deliver consistent, accessible, well-structured UI across the Planning Center ecosystem.

• Collaborate closely with UX Engineers on the team, reviewing implementation approaches, supporting component API design, and ensuring system contributions are stable, maintainable, and aligned with the overall design direction.

• Partner with Full-Stack Engineers across various teams to understand their needs, reduce friction in adopting the design system, and anticipate challenges related to build processes, versioning, and integration.

• Drive the evolution of the design system’s backend and platform architecture, including Rails-based services, token pipelines, and documentation tooling (e.g., Storybook).

• Manage cross-team impact (~25% of time), coordinating system-wide improvements, facilitating migrations, and helping teams adopt new versions or patterns safely and predictably.

• Contribute to a clear and consistent release strategy, including semantic versioning, changelogs, beta releases, and automated testing to protect downstream teams.

• Identify and implement opportunities to enhance the developer experience, from Storybook enhancements to scaffolding tools and automated validation of component usage.

• Support and champion accessibility best practices by ensuring the system infrastructure and APIs enable UX Engineers to meet accessibility standards.

• Champion long-term system health, balancing extensibility with stability, and guiding decisions on what belongs within the design system versus what resides within individual product teams.

📝 Enhancement Note: The responsibilities clearly indicate a need for strategic thinking regarding system architecture, developer experience, and cross-functional alignment. The mention of "Rails-based services," "token pipelines," and "Storybook" provides specific technical areas of focus. The ~25% allocation for "cross-team impact" signifies a significant responsibility for driving adoption and managing dependencies, a key aspect of design system engineering.

🎓 Skills & Qualifications

Education: While no specific degree is mandated, a strong foundation in computer science principles or equivalent practical experience is implied by the technical requirements.

Experience: 3+ years of professional experience in full-stack development with a significant emphasis on front-end technologies and design systems.

Required Skills:

• 3+ years of professional experience in Ruby on Rails.

• 3+ years of professional experience in React.

• Solid understanding and practical application of CSS.

• Demonstrated ability to architect and maintain technical infrastructure for front-end systems.

• Proficiency in creating tooling, patterns, and processes for developer enablement.

• Experience with collaborative development environments and cross-functional team interaction.

• Familiarity with accessibility best practices and their implementation in UI development.

Preferred Skills:

• Experience with design system tooling and documentation platforms like Storybook.

• Knowledge of npm build pipelines, release workflows, and bundling strategies.

• Experience developing APIs and migration utilities (e.g., codemods).

• Familiarity with backend services beyond Rails, or a strong understanding of how backend services integrate with frontend systems.

• Proven ability to manage cross-team dependencies and facilitate system adoption.

• Experience in advocating for and implementing long-term system health and stability.

📝 Enhancement Note: The requirement for both Ruby on Rails and React, coupled with a "solid understanding of CSS," points to a full-stack role with a strong front-end specialization. The emphasis on "front-end sensibility" and "design decisions translate into code" suggests that candidates should possess a keen eye for detail and an understanding of UX principles, even if not formally designers. The "Who We Look For" section further elaborates on desired soft skills like diplomacy, organization, empathy, flexibility, and judiciousness, which are crucial for a role involving significant cross-team collaboration.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Demonstrate experience in architecting and maintaining technical infrastructure for design systems, showcasing build pipelines, release workflows, or similar system-level components.

• Provide examples of tooling, patterns, or processes developed to enable other engineers, highlighting efficiency gains or friction reduction in UI development.

• Showcase contributions to component architecture, API design, or system stability within a design system or complex front-end project.

Process Documentation:

• Examples of how you've documented technical processes, release strategies, or system integration guidelines.

• Demonstrate experience in creating or improving developer-facing documentation, such as within Storybook or other knowledge-sharing platforms.

• Showcase your approach to ensuring system health, stability, and maintainability through defined processes and best practices.

📝 Enhancement Note: While a formal "portfolio" isn't explicitly requested in the initial application steps, the "Technical/Pairing Interview" and "Career Focused Interview" stages strongly imply the need to discuss past work and methodologies. Candidates should be prepared to articulate their experience with design systems, infrastructure, tooling, and cross-team collaboration through concrete examples, akin to presenting a portfolio of their technical contributions and problem-solving approaches.

💵 Compensation & Benefits

Salary Range: $142,500 - $172,000 annually.

Benefits:

• Competitive pay structure.

• 401(k) contribution.

• Charitable giving match of up to $2,000 per year.

• Generous allowance for continued education.

• Coworking stipend.

• Generous paid sick and vacation time.

• $200 per month for physical fitness and mental health.

• 95% medical premium coverage.

• 100% dental premium coverage.

• Paid Fridays for the entire year.

• Month-long sabbatical every five years.

• Week off between Christmas and New Year’s.

• Week each year to serve with a globally focused non-profit.

• Two weeks of paid vacation (increasing over time).

Working Hours: Standard full-time hours are expected, likely around 40 hours per week, with flexibility inherent in a remote work environment. The company offers several "paid Fridays" throughout the year, suggesting a focus on work-life balance.

📝 Enhancement Note: The salary range is clearly stated. The benefits package is extensive and highlights a strong commitment to employee well-being, professional development, and work-life balance, which is particularly attractive for remote roles. The inclusion of "physical fitness and mental health" stipends and a "coworking stipend" are specific perks that cater to remote employees.

🎯 Team & Company Context

🏢 Company Culture

Industry: Software/Technology, specifically focused on providing tools for churches and religious organizations.

Company Size: The description mentions "over 90,000 churches worldwide," implying a significant user base. LinkedIn data indicates a company size of 51-200 employees, suggesting a mid-sized, independent company.

Founded: 2006, indicating a well-established company with over 20 years of experience in its market.

Team Structure:

• The "Design Engineering" team appears to be a specialized unit within the larger engineering organization, focused on design systems.

• This role works closely with an existing full-stack engineer on the Design Engineering team, forming a core technical partnership.

Methodology:

• Emphasis on building great products that solve real problems using web and mobile technologies.

• Commitment to an independent, debt-free operational model.

• Utilizes modern collaboration tools such as Asana, Slack, Notion, and Zoom.

• Values a data-driven approach, with a focus on customer impact and iterative development ("Think Holistically, Work Iteratively").

Company Website: https://www.planningcenter.com/

📝 Enhancement Note: Planning Center's identity as an independent, debt-free company supporting religious organizations is a key cultural differentiator. The emphasis on "Core Values" (Engage with Humility, Invest in our team, Do Our Best Work, Focus on Customer Impact, Think Holistically, Work Iteratively) provides a strong framework for understanding their operational and interpersonal approach. The remote-first culture is supported by regular in-person gatherings in Carlsbad, CA.

📈 Career & Growth Analysis

Operations Career Level: This role is for a Mid-Level Full Stack Engineer with specialized expertise in Design Systems. It involves significant technical ownership, architectural input, and cross-functional influence, bridging individual contributor growth with team-level impact.

Reporting Structure: The role is part of the "Design Engineering" team, working closely with another full-stack engineer and likely reporting to a Design Engineering lead or Engineering Manager. The ~25% cross-team impact indicates significant interaction with various product teams and their leadership.

Operations Impact: The engineer's work directly impacts the efficiency, consistency, and quality of UI development across all of Planning Center's products. By maintaining and evolving the design system and its supporting infrastructure, this role enables faster delivery of features, improved user experiences, and greater accessibility for their church customers.

Growth Opportunities:

• Technical Specialization: Deepen expertise in design systems, front-end architecture, and full-stack development within a well-established product ecosystem.

• Leadership & Influence: Grow into a technical leadership role within the Design Engineering team, influencing technical direction and mentoring other engineers.

• Cross-Functional Expertise: Develop strong collaboration and communication skills by working with diverse product teams and stakeholders.

• System Ownership: Gain experience in managing the lifecycle and evolution of critical platform components that serve a large user base.

• Learning & Development: Benefit from a generous continued education allowance and opportunities to engage with industry best practices.

📝 Enhancement Note: The role offers a unique growth path for engineers interested in the specialized field of design systems, moving beyond typical feature development. The blend of individual contribution and cross-team influence provides opportunities for both technical depth and leadership development. The company's commitment to learning and development supports career progression in this niche area.

🌐 Work Environment

Office Type: Fully Remote, with mandatory in-person gatherings three times per year at their main office in Carlsbad, CA.

Office Location(s): While remote, the company's headquarters are in Carlsbad, CA.

Workspace Context:

• The remote-first environment fosters autonomy and flexibility, supported by robust collaboration tools (Asana, Slack, Notion, Zoom).

• The in-person gatherings are designed to foster work relationships and team cohesion, providing opportunities for direct interaction and strategic alignment.

• A coworking stipend is provided, acknowledging the need for dedicated workspace setups for remote employees.

Work Schedule: Standard full-time hours are expected, with flexibility typical of remote roles. The company's emphasis on "Paid Fridays" suggests a proactive approach to work-life balance and preventing burnout.

📝 Enhancement Note: The hybrid remote model, with planned in-person meetups, offers a balanced approach that provides remote flexibility while ensuring strong team bonding and face-to-face collaboration. This setup is ideal for engineers who value autonomy but also appreciate occasional in-person strategic planning and team building.

📄 Application & Portfolio Review Process

Interview Process:

• Step One: Application: Submit resume and complete application questions, which are treated as an opportunity for self-expression similar to a cover letter.

• Step Two: Online Coding Assessment: A technical evaluation to gauge general developer proficiency.

• Step Three: Talent Acquisition Phone Screen: An initial conversation to discuss work, culture, and mutual fit.

• Step Four: Career Focused Interview: A deep dive into career journey, past experiences, and motivations for joining the team.

• Step Five: Technical/Pairing Interview: Discussion of work experience and methodologies, culminating in an interactive pairing exercise designed to be lighthearted.

• Step Six: Offer Extension: Pending successful completion of all previous stages.

Portfolio Review Tips:

• While a formal portfolio submission isn't explicitly required upfront, be prepared to discuss specific projects and contributions during the Career and Technical interviews.

• For the Technical/Pairing Interview, be ready to articulate your thought process and problem-solving approach in real-time. Focus on how you would translate design requirements into functional code and infrastructure.

• Highlight examples of your work related to design system components, tooling, infrastructure maintenance, cross-team collaboration, and accessibility.

Challenge Preparation:

• The "pairing exercise" in Step Five is the primary "challenge." Prepare to collaborate on a small coding task, demonstrating your ability to communicate, problem-solve, and work with others.

• Focus on clear communication, asking clarifying questions, and explaining your approach. The "lighthearted" nature suggests an emphasis on collaboration and fit over intense pressure.

• Be ready to discuss your experience with Ruby on Rails, React, CSS, and any relevant design system tools or concepts.

📝 Enhancement Note: The interview process is structured to assess both technical skills and cultural fit. The emphasis on "application questions" as a cover letter substitute and the "lighthearted" pairing exercise suggest a focus on authentic communication and collaborative problem-solving rather than purely theoretical or high-pressure scenarios. Candidates should be ready to "interview us as much as we're interviewing you."

🛠 Tools & Technology Stack

Primary Tools:

• Backend: Ruby on Rails (significant experience required).

• Frontend: React (significant experience required).

• Styling: CSS (solid understanding required).

• Design System Tools: Storybook is explicitly mentioned for documentation.

• Build/Deployment: npm build pipelines, release workflows, bundling strategies will be key areas of focus.

• Collaboration: Asana, Slack, Notion, Zoom.

Analytics & Reporting: While not explicitly detailed for this role, it's common for such companies to use various internal tools for product analytics and performance monitoring.

CRM & Automation: Not directly relevant to this engineering role, but the company utilizes tools like Asana for project management.

📝 Enhancement Note: The core technology stack is clearly defined: Ruby on Rails for backend and React for frontend, with CSS as a fundamental skill. Proficiency in these areas is non-negotiable. The role also requires familiarity with the ecosystem around design systems, including build tools, release processes, and documentation platforms like Storybook.

👥 Team Culture & Values

Operations Values:

• Engage with Humility: Openness, receptiveness, thoughtful and kind communication regardless of skill level.

• Invest in our team: Dedication to team success through effective communication, diverse perspectives, knowledge sharing, and asking questions.

• Do Our Best Work: Continuous improvement of individual output and contribution to team growth.

• Focus on Customer Impact: Advocating for customer interests in decision-making, with clear links between projects and customer value.

• Think Holistically, Work Iteratively: Practical steps toward goals with awareness of the broader context; thinking big, working small.

Collaboration Style:

• Cross-functional collaboration is a cornerstone, with engineers working closely with UX Engineers and other Full-Stack Engineers across product teams.

• Emphasis on open communication, knowledge sharing, and seeking solutions collaboratively.

• The "Diplomatic," "Organized," "Empathetic," "Flexible," and "Judicious" traits in the "Who We Look For" section highlight the desired collaborative approach.

📝 Enhancement Note: Planning Center's core values are deeply integrated into their culture, emphasizing a supportive, collaborative, and customer-centric environment. The "Design Engineering" team's mission to bridge design and product delivery inherently requires strong collaborative muscles and a shared commitment to quality and efficiency.

⚡ Challenges & Growth Opportunities

Challenges:

• Balancing the needs of multiple product teams with the overarching goals and stability of the design system.

• Driving adoption of new system patterns and versions across a diverse engineering organization.

• Maintaining and evolving a complex technical infrastructure that supports a growing design system.

• Ensuring long-term system health and extensibility while managing technical debt and iterative improvements.

Learning & Development Opportunities:

• Specialized Skill Development: Deepen expertise in design systems, front-end architecture, and full-stack development.

• Architectural Influence: Contribute to the strategic direction of the design system's technical foundation.

• Mentorship: Learn from experienced engineers and collaborate closely with UX Engineers.

• Industry Exposure: Potentially gain insights into best practices for design system engineering through company-wide initiatives or external learning supported by the education allowance.

• Career Progression: Opportunity to become a lead engineer or architect within the Design Engineering discipline.

📝 Enhancement Note: The challenges are typical for design system roles, focusing on alignment, adoption, and technical stewardship. The growth opportunities are substantial for an engineer looking to specialize and make a significant impact on product development processes and quality across an organization.

💡 Interview Preparation

Strategy Questions:

• Be prepared to discuss how you would architect and maintain the technical infrastructure for a design system, using examples of build pipelines or release workflows you've managed.

• Expect questions about how you enable other engineers, focusing on tooling, patterns, and processes that reduce friction in UI development.

• Discuss your approach to API design for components, ensuring stability and maintainability, and how you collaborate with UX engineers.

• Be ready to explain your experience in managing cross-team impact, facilitating adoption of new system versions, and coordinating system-wide improvements.

Company & Culture Questions:

• Research Planning Center's mission, products, and core values. Understand how their work supports churches.

• Reflect on how your personal values align with Planning Center's core values (Humility, Team Investment, Best Work, Customer Impact, Holistic Thinking/Iterative Work).

• Be prepared to discuss your experience working in a remote-first environment and how you foster collaboration and communication.

Portfolio Presentation Strategy:

• While not a formal portfolio submission, prepare to verbally walk through 2-3 key projects or contributions that demonstrate your full-stack, front-end, and design system experience.

• For each example, clearly articulate the problem, your solution (technical architecture, code, tooling), the impact (quantifiable metrics if possible, e.g., reduced build times, improved adoption rates, fewer bugs), and lessons learned.

• Be ready to discuss your experience with Ruby on Rails, React, CSS, and any specific design system tools or methodologies.

• Focus on how you translated design vision into technical reality and empowered other engineers.

📝 Enhancement Note: The interview process emphasizes understanding the candidate's career journey, technical approach, and cultural alignment. Preparation should focus on articulating specific examples of past work, demonstrating a deep understanding of design system principles, and showcasing strong collaborative and communication skills. The "pairing exercise" is a key opportunity to demonstrate these skills in action.

📌 Application Steps

To apply for this Full Stack Engineer, Design Systems position:

• Submit your application through the provided link on Greenhouse.

• Resume Optimization: Tailor your resume to highlight your 3+ years of professional experience in both Ruby on Rails and React, along with your solid understanding of CSS. Emphasize any experience related to design systems, component architecture, tooling, and cross-functional collaboration.

• Application Questions: Treat these as an extension of your cover letter. Use them to express your motivations, articulate your relevant experience, and demonstrate how you embody Planning Center's core values and the desired soft skills (diplomatic, organized, empathetic, flexible, judicious).

• Portfolio Preparation: Mentally prepare to discuss specific projects and contributions during the interview stages, focusing on your technical approach, problem-solving, and impact in areas relevant to design systems, full-stack development, and engineering enablement.

• Company Research: Thoroughly research Planning Center's mission, products, and culture. Understand their core values and consider how your experience and aspirations align with their goals and operational model.

⚠️ Important Notice: This enhanced job description includes AI-generated insights and operations industry-standard assumptions. All details should be verified directly with the hiring organization before making application decisions.