Senior Design Systems Engineer

📍 Job Overview

Job Title: Senior Design Systems Engineer Company: Altruist Location: Los Angeles, CA Job Type: Full-Time Category: Engineering / Product Development Date Posted: 2025-07-30T18:07:18 Experience Level: 10+ years

🚀 Role Summary

• Lead the strategic vision, execution, and ongoing governance of a comprehensive cross-platform design system powering both web (React) and mobile (React Native) applications.
• Architect and scale a versioned, token-driven design system, ensuring consistency in color, typography, spacing, and motion across light/dark modes and potential partner themes.
• Engineer robust, reusable React and React Native components using TypeScript, with a strong emphasis on automated accessibility (a11y), visual regression, and unit testing to maintain high-quality standards.
• Enhance the developer experience by integrating Storybook addons, linters, and codemods to guide feature teams towards best practices and efficient component usage.

📝 Enhancement Note: This role is highly technical and bridges the gap between design and engineering. The focus is on building a scalable, well-governed design system that directly impacts product quality, developer efficiency, and brand consistency across Altruist's digital platforms. It requires a blend of deep technical expertise in front-end frameworks and a strategic understanding of design system principles and best practices.

📈 Primary Responsibilities

• Architect and continuously scale a versioned, token-driven design system, encompassing color, typography, spacing, and motion, to support light/dark modes and future theming requirements across web and mobile platforms.
• Engineer and refactor high-quality, reusable React and React Native components using TypeScript, ensuring comprehensive automated testing suites for accessibility (WCAG AA compliance), visual regression, and unit tests.
• Elevate the developer experience by implementing and maintaining Storybook addons, custom lint rules, and codemods that guide feature teams to adhere to design system standards and maintain code quality.
• Define and uphold the design system's governance model, including contribution guidelines, release processes, and a Request for Comments (RFC) workflow, while maintaining living documentation within Storybook/Docusaurus that is synchronized with Figma.
• Collaborate closely with product designers, brand specialists, and accessibility experts to translate visual design intent into resilient, well-documented component APIs.
• Mentor fellow engineers on best practices related to performance budgets, WCAG compliance, and efficient component implementation within the design system context.
• Proactively monitor and enforce performance budgets (e.g., Lighthouse scores, bundle-size caps) and establish Datadog/New Relic dashboards to track design system adoption and performance, ensuring it never hinders feature delivery.

📝 Enhancement Note: The primary responsibilities highlight a leadership role in establishing and maintaining the foundational UI architecture for Altruist. This involves not just building components but also defining processes, fostering adoption through developer experience improvements, and ensuring the system's long-term health and performance. The emphasis on testing, documentation, and cross-functional partnership is key.

🎓 Skills & Qualifications

Education:

• Bachelor's degree in Computer Science, Engineering, or a related technical field is ideally sought.

Experience:

• A minimum of 8+ years of professional experience in front-end or product engineering.
• At least 2 years of dedicated experience in owning or significantly contributing to a design system or UI platform initiative.

Required Skills:

• Deep expertise in modern front-end development with React and React Native.
• Proficiency in TypeScript for building robust, type-safe components and applications.
• Extensive experience with Storybook for component development, documentation, and testing.
• Strong command of testing frameworks such as Jest and React Testing Library (RTL) for unit and integration testing.
• Proven track record of building and shipping token-driven component libraries, ideally supporting multiple brands or themes.
• Fluency with design tooling APIs, particularly Figma plugin APIs, and experience with design token pipelines and transformation tools (e.g., Style Dictionary).
• Hands-on experience with visual regression testing tools like Percy or Chromatic.
• Demonstrated ability to act as a strategic thinker and hands-on mentor to engineering teams.
• Excellent written and verbal communication skills, with the ability to articulate complex technical concepts clearly.
• Working knowledge of modern build tooling such as Vite or Webpack, and familiarity with Node.js.
• Passion for and practical experience in implementing WCAG AA accessibility standards and performance optimization techniques.

Preferred Skills:

• Experience with GraphQL for data fetching and API integration.
• Direct experience integrating AI technologies within design systems or development workflows.
• Familiarity with design system analytics, including adoption metrics, token usage patterns, and component performance.
• Contributions to open-source design system tools or libraries (e.g., Storybook, Style Dictionary).

📝 Enhancement Note: The required skills emphasize a deep technical foundation in the React ecosystem and a proven ability to manage the lifecycle of a design system. The preferred skills indicate a forward-looking approach, valuing experience with advanced topics like AI integration and data-driven system management. The expectation for 8+ years of experience, with 2+ specifically in design systems, positions this as a senior, impactful role.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Demonstrate a history of building and maintaining scalable, versioned design systems or UI platforms.
• Showcase examples of token-driven architecture (color, typography, spacing, motion) and its implementation across different themes or states (e.g., light/dark mode).
• Provide case studies detailing the engineering of complex, reusable React and React Native components, highlighting TypeScript usage and adherence to best practices.
• Include evidence of implementing comprehensive testing strategies, specifically automated accessibility (a11y), visual regression, and unit tests for components.
• Present examples of developer experience enhancements, such as custom Storybook configurations, linting rules, or codemods, that improve efficiency and consistency for feature teams.

Process Documentation:

• Illustrate experience in defining and documenting design system contribution guidelines, release processes, and governance frameworks (e.g., RFC workflows).
• Showcase examples of living documentation practices, ideally using tools like Storybook or Docusaurus, and how they are kept in sync with design tools like Figma.
• Detail past work on integrating performance monitoring and enforcement, such as Lighthouse budgets, bundle size caps, and relevant dashboarding tools.

📝 Enhancement Note: Candidates are expected to provide tangible proof of their design system expertise. The portfolio should not only showcase finished components and systems but also the underlying processes, governance, and strategic thinking involved in their creation and maintenance. This includes demonstrating an understanding of developer experience, testing methodologies, and performance optimization within a design system context.

💵 Compensation & Benefits

Salary Range:

• Based on industry benchmarks for Senior Design Systems Engineers in Los Angeles, CA, with 8-10+ years of experience, a competitive salary range is estimated between $158,000 and $203,000 USD annually.

Benefits:

• Health & Wellness: Premium healthcare, dental, and vision insurance plans. Physical and emotional wellness programs are also provided to nurture overall well-being.
• Financial Security: 401k savings plan with matching contributions and immediate vesting. Access to a financial guidance program for personalized counseling on debt, savings, and financial planning.
• Work-Life Balance & Growth: A hybrid work schedule promoting collaboration and work-life balance. Generous paid parental leave.
• Professional Development: Significant investment in career growth through an employee mobility program and an annual Learning & Development (L&D) budget allocation for each employee.
• Additional Perks: Competitive pay and equity for eligible positions. A company perks program offering discounts on various services like pet insurance, fitness, cell phone plans, entertainment, and travel.

Working Hours:

• Standard full-time working hours are expected to be around 40 hours per week, with a hybrid work arrangement that balances in-office collaboration with remote flexibility.

📝 Enhancement Note: The salary range is derived from publicly available compensation data for similar roles in the specified location and experience level, adjusted for industry standards. Altruist offers a comprehensive benefits package that supports employees' financial, physical, and emotional well-being, alongside robust opportunities for professional development and work-life balance.

🎯 Team & Company Context

🏢 Company Culture

Industry: Financial Technology (FinTech), focused on modernizing the custodian and software solutions for independent financial advisors. Company Size: Altruist is a growing company, likely in the mid-to-large size range given its ambition and established presence in the FinTech space. This size typically means a dynamic environment with opportunities for significant impact, but also requires structured processes. Founded: While not explicitly stated, Altruist has rapidly emerged as a key player in its niche, suggesting a relatively recent founding with a strong growth trajectory.

Team Structure:

• The Design Systems team is likely embedded within or closely aligned with the broader Engineering and Product departments.
• This role will involve close collaboration with Product Designers, UX Researchers, Brand Specialists, and individual Product Engineering teams across various squads.
• Reporting structure would typically be to an Engineering Manager or Director overseeing UI platforms or front-end development.

Methodology:

• Altruist emphasizes a data-driven approach, using metrics to inform decisions and measure impact, which extends to design system adoption and performance.
• Workflow planning and optimization are critical, especially for a role focused on improving developer efficiency and product quality through a design system.
• Automation and efficiency practices are core to the design system's function, aiming to streamline development processes and ensure consistency.

Company Website: https://altruist.com/

📝 Enhancement Note: Altruist operates in the FinTech sector, aiming to disrupt traditional financial services through technology. The company culture is defined by its core values: Kindness, Brilliance, and Grit. This suggests a collaborative, intellectually stimulating, and resilient work environment where employees are encouraged to learn, support each other, and persevere through challenges. The emphasis on "Brilliance" points to a high standard of technical and strategic execution.

📈 Career & Growth Analysis

Operations Career Level: This is a Senior Engineer position, indicating a high level of technical expertise and autonomy. The role is responsible for leading critical technical initiatives (the design system) and mentoring others. Reporting Structure: The Senior Design Systems Engineer will likely report to a Director or VP of Engineering, or a lead architect, within the product engineering organization. They will work closely with design leadership and product management. Operations Impact: This role has a direct and significant impact on the efficiency, consistency, and quality of all Altruist's digital products. A well-executed design system accelerates development cycles, reduces bugs, improves user experience, and strengthens brand identity, contributing to overall business success and scalability.

Growth Opportunities:

• Technical Leadership: Opportunity to become the primary technical authority for the design system, influencing its roadmap and technical direction.
• Specialization: Deepen expertise in design systems, front-end architecture, accessibility, and performance optimization.
• Mentorship & Management: Potential to lead and mentor junior engineers, and over time, potentially manage a dedicated design systems team.
• Cross-Functional Influence: Grow influence across product, design, and engineering by championing best practices and driving adoption of the design system.
• Industry Recognition: Opportunities to contribute to open-source projects or speak at conferences related to design systems and front-end development.

📝 Enhancement Note: The "Senior" title implies a significant level of responsibility and the expectation of proactive leadership. Growth paths are geared towards deepening technical mastery, taking on architectural leadership, and potentially moving into management or principal engineering roles, with a strong emphasis on influencing product development across the organization.

🌐 Work Environment

Office Type: Altruist offers a hybrid work schedule, indicating a blend of remote work and in-office collaboration. Their offices are described as "stunning, amenity-filled," intentionally designed for comfort, collaboration, and productivity. Office Location(s): Primary office locations include Culver City, CA, San Francisco, CA, and Dallas, TX. The role is based in Los Angeles, CA, suggesting presence at the Culver City office will be expected.

Workspace Context:

• The hybrid model supports flexibility while fostering strong team connections and collaborative problem-solving through in-person interactions.
• Expect a modern, well-equipped workspace designed to facilitate both focused individual work and dynamic team discussions.
• The collaborative nature of design systems work means frequent interaction with designers, product managers, and fellow engineers.

Work Schedule:

• Standard full-time hours are expected, with the flexibility afforded by a hybrid work arrangement. This allows for focused work on complex technical challenges and process optimization, balanced with team syncs and collaborative sessions.

📝 Enhancement Note: The hybrid work environment at Altruist is designed to offer the best of both worlds: the focus and flexibility of remote work, combined with the collaborative energy and team cohesion of an in-office setting. The emphasis on intentionally designed office spaces suggests a commitment to employee experience and productivity.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter or hiring manager will likely conduct an initial call to assess basic qualifications and cultural fit.
• Technical Interviews: Expect multiple rounds focusing on front-end development skills (React, React Native, TypeScript), design system principles, testing methodologies, and problem-solving abilities. These may include live coding exercises, system design discussions, and deep dives into past projects.
• Design System Deep Dive: A dedicated session to discuss your experience building and governing design systems. This is where your portfolio will be crucial for demonstrating your strategic approach, technical execution, and impact.
• Cross-Functional Interview: You may meet with designers, product managers, or engineers from other teams to evaluate collaboration skills, communication, and ability to integrate the design system across the organization.
• Behavioral/Values Interview: Expect questions designed to assess alignment with Altruist's core values (Kindness, Brilliance, Grit) and your approach to teamwork, ownership, and resilience.

Portfolio Review Tips:

• Structure for Impact: Organize your portfolio to clearly demonstrate your contributions to design systems. Use case studies for each significant project.
• Highlight Key Contributions: For each project, clearly articulate your specific role, the challenges faced, the solutions implemented (especially regarding tokens, component engineering, testing, and developer experience), and the measurable outcomes or impact.
• Show, Don't Just Tell: Include live demos, interactive examples (e.g., links to Storybook instances), code snippets (if appropriate and anonymized), and visual aids (screenshots, diagrams).
• Emphasize Process & Governance: Detail your approach to design system governance, contribution workflows, documentation, and release management. This is critical for a Senior role.
• Focus on Metrics: Quantify your achievements whenever possible (e.g., reduction in UI bugs, increase in component adoption, improvements in page load times, accessibility compliance scores).

Challenge Preparation:

• System Design: Be prepared to discuss how you would architect or scale a design system for a growing company like Altruist, considering cross-platform needs, theming, and developer adoption.
• Component Building: Practice building a well-tested, accessible, and performant component in React or React Native, potentially as a take-home assignment or live coding exercise.
• Problem Solving: Anticipate questions about how you've handled challenges like design system adoption roadblocks, conflicting design requests, or performance bottlenecks.

📝 Enhancement Note: The interview process is designed to thoroughly assess technical depth, strategic thinking regarding design systems, and cultural alignment. A strong, well-prepared portfolio is paramount for showcasing the specific skills and experience required for this senior leadership role in design systems engineering.

🛠 Tools & Technology Stack

Primary Tools:

• Core Frameworks: React, React Native, TypeScript.
• Component Development & Documentation: Storybook (essential for component isolation, testing, and documentation).
• Testing Utilities: Jest (unit testing), React Testing Library (RTL) for component testing, potentially Cypress or Playwright for end-to-end testing of components within an application context.
• Visual Regression Testing: Percy, Chromatic, or similar tools for automated visual testing.
• Design Token Management: Experience with tools or pipelines for managing design tokens (e.g., Style Dictionary, specific Figma plugins, custom scripts).

Analytics & Reporting:

• Performance Monitoring: Lighthouse, Datadog, New Relic for tracking application and component performance.
• Dashboarding: Tools like Tableau, Looker, or internal dashboarding solutions for visualizing design system adoption and impact metrics.

CRM & Automation:

• While not directly listed, understanding how design systems integrate with broader product development workflows is key. Familiarity with CI/CD pipelines (e.g., GitHub Actions, Jenkins) and version control systems (Git) is assumed.

📝 Enhancement Note: Proficiency in the React ecosystem and Storybook is non-negotiable. Experience with design token pipelines and visual regression tools is highly valued. The ability to integrate with performance monitoring and analytics tools demonstrates a commitment to data-informed design system management.

👥 Team Culture & Values

Operations Values:

• Kindness: Fostering an environment of understanding, healthy debate, and respectful conflict resolution. Willingness to listen and embrace diverse perspectives.
• Brilliance: Demonstrating a growth mindset, taking ownership, and leveraging unique skills collaboratively to achieve common goals. Acknowledging success and failure as a team.
• Grit: Maintaining focus on the mission, finding ways forward through challenges, and adapting swiftly to change with a sense of urgency.

Collaboration Style:

• Cross-functional Integration: Actively partnering with designers, brand, and accessibility SMEs to translate visual intent into robust engineering solutions.
• Mentorship & Knowledge Sharing: Proactively mentoring engineers on design system best practices, performance, and accessibility standards.
• Process Improvement: Championing a culture of continuous improvement in design system development and adoption through feedback exchange and experimentation.

📝 Enhancement Note: Altruist's core values—Kindness, Brilliance, and Grit—are central to their culture. Candidates should be prepared to demonstrate how they embody these values in their work, particularly in how they collaborate, learn, problem-solve, and contribute to team success. The emphasis is on a supportive yet high-achieving environment.

⚡ Challenges & Growth Opportunities

Challenges:

• Scaling a Design System: Effectively managing the growth and evolution of a design system to support a rapidly expanding product suite and user base.
• Driving Adoption: Encouraging and enabling dozens of product squads to consistently adopt and leverage the design system, overcoming potential resistance or inertia.
• Maintaining Consistency: Ensuring high fidelity and consistency across both web and mobile platforms, while also accommodating unique platform needs and evolving brand guidelines.
• Performance Optimization: Balancing feature velocity with the imperative to maintain excellent performance and accessibility standards across all digital surfaces powered by the design system.

Learning & Development Opportunities:

• Deepening Expertise: Becoming the recognized expert in design systems, front-end architecture, and cross-platform UI development within Altruist.
• Industry Engagement: Opportunities to attend industry conferences, workshops, and potentially contribute to open-source projects related to design systems.
• Leadership Development: Mentoring junior engineers, leading technical initiatives, and potentially growing into a team lead or management role within the design systems or front-end engineering function.

📝 Enhancement Note: The primary challenges revolve around the strategic and technical execution of a large-scale design system in a fast-paced environment. Growth opportunities are aligned with expanding technical leadership, deepening specialized knowledge, and influencing broader engineering and product strategies.

💡 Interview Preparation

Strategy Questions:

• How would you approach architecting a token-driven design system for a company with both web and native mobile applications? What are the key considerations for managing tokens across platforms?
• Describe your process for establishing design system governance, including contribution guidelines, RFC processes, and release management. How do you ensure adoption and compliance across multiple product teams?
• Walk me through a time you had to significantly improve the developer experience for a component library or design system. What tools and techniques did you use, and what was the impact?
• How do you measure the success and impact of a design system? What key metrics would you track at Altruist, and how would you report on them?

Company & Culture Questions:

• Based on our values (Kindness, Brilliance, Grit), how would you approach a situation where a product team is resistant to adopting a new component from the design system?
• How do you approach collaboration with designers and product managers to ensure the design system effectively translates visual intent into code?
• Describe your experience mentoring other engineers. How would you ensure knowledge transfer and best practice adoption within Altruist's engineering teams?

Portfolio Presentation Strategy:

• Narrative Arc: Structure your portfolio presentation with a clear narrative for each project: the problem, your solution (focusing on technical details and process), and the results/impact.
• Interactive Elements: Be ready to demo live components or walk through Storybook instances. If discussing code, be prepared to explain specific patterns or implementations.
• Highlighting Process: Explicitly detail the processes you established for design system governance, testing, and documentation. This is crucial for a senior role.
• Quantify Impact: Use data and metrics to demonstrate the value your design system work has brought to previous organizations.

📝 Enhancement Note: Preparation should focus on articulating your strategic approach to design systems, demonstrating technical depth with concrete examples from your portfolio, and aligning your collaboration and problem-solving styles with Altruist's stated values. Be ready to discuss the "why" and "how" behind your technical decisions.

📌 Application Steps

To apply for this Senior Design Systems Engineer position:

• Submit your application through the provided link on the Altruist careers page.
• Portfolio Customization: Tailor your resume and portfolio to highlight your most relevant design system and cross-platform UI engineering experience. Showcase projects that demonstrate token architecture, React/React Native component engineering, robust testing practices, and developer experience improvements.
• Resume Optimization: Ensure your resume clearly outlines your 8+ years of front-end experience and 2+ years specifically in design systems. Use action verbs and quantify achievements related to efficiency, consistency, and quality improvements. Integrate keywords like React, React Native, TypeScript, Storybook, WCAG, and design tokens naturally.
• Interview Preparation: Practice articulating your design system philosophy, your approach to governance and adoption, and how you measure impact. Prepare specific examples from your experience to answer behavioral and technical questions, and rehearse presenting your portfolio highlights.
• Company Research: Familiarize yourself with Altruist's mission, products, and core values (Kindness, Brilliance, Grit). Understand their position in the FinTech market and how a strong design system contributes to their goals.

⚠️ 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.