Senior Design Systems Engineer

📍 Job Overview

Job Title: Senior Design Systems Engineer Company: Altruist Location: San Francisco, CA Job Type: Full-Time Category: Engineering / Product Development Date Posted: July 30, 2025 Experience Level: 10+ Years (Implied by AI analysis of 8+ years front-end/product-engineering experience plus 2+ years design system ownership) Remote Status: Hybrid

🚀 Role Summary

• Lead the strategic direction, execution, and ongoing governance of Altruist's comprehensive cross-platform design system, ensuring consistency and quality across all digital touchpoints.
• Architect and scale a versioned, token-driven design system (encompassing color, typography, spacing, and motion) to support multiple themes, including light/dark modes and partner-specific branding, across both web and mobile platforms.
• Engineer robust, reusable React and React Native components using TypeScript, incorporating automated accessibility (a11y), visual regression, and unit tests to ensure high standards of quality and reliability.
• Enhance the developer experience through the implementation of Storybook addons, lint rules, and codemods that guide feature teams towards best practices and efficient component utilization.
• Establish and maintain living documentation for the design system, utilizing tools like Storybook and Docusaurus, and defining clear contribution guidelines, release processes, and RFC workflows.
• Collaborate closely with product design, brand teams, and accessibility subject matter experts to translate visual intent into resilient component APIs, while mentoring engineers on performance budgets and WCAG compliance.
• Monitor and enforce quality metrics for the design system, including Lighthouse performance budgets and bundle size constraints, integrating with monitoring tools like Datadog/New Relic to ensure the system does not impede feature delivery.

📝 Enhancement Note: While the title is "Senior Design Systems Engineer," the combined experience requirement (8+ years front-end/product-engineering + 2+ years design system ownership) suggests a highly experienced individual, potentially aligning with a Principal or Lead Engineer level in other organizations. The role emphasizes strategic leadership, architectural decisions, and cross-functional influence, going beyond typical senior engineer responsibilities. The focus on "leading the strategy, execution, and governance" strongly indicates a senior-level individual contributor role with significant autonomy and impact.

📈 Primary Responsibilities

• Architect and scale a versioned, token-driven design system (color, type, spacing, motion) that supports light/dark and partner themes across web and mobile platforms.
• Engineer high-quality, reusable React and React Native components written in TypeScript, ensuring comprehensive test coverage (a11y, visual-regression, unit tests).
• Elevate the developer experience by integrating Storybook addons, custom lint rules, and codemods to guide and enforce design system best practices within feature teams.
• Define and manage the design system’s governance model, including contribution guidelines, release management processes, and an RFC (Request for Comments) workflow for system changes.
• Maintain up-to-date living documentation for the design system, synchronizing design specifications (Figma) with engineering implementations (Storybook/Docusaurus).
• Partner with designers, brand strategists, and accessibility specialists to translate visual intent and brand guidelines into robust, maintainable component APIs and design tokens.
• Mentor engineering teams on effective design system adoption, performance optimization techniques (e.g., performance budgets), and adherence to Web Content Accessibility Guidelines (WCAG) standards.
• Implement and monitor quality gates, such as Lighthouse performance budgets and bundle-size limitations, leveraging monitoring tools (Datadog, New Relic) to ensure the design system's continued efficiency and performance.

📝 Enhancement Note: The responsibilities highlight a dual focus on both strategic leadership and hands-on engineering. The role demands not only building and maintaining components but also establishing processes, governance, and developer enablement strategies. The emphasis on "partnering cross-functionally" and "mentoring engineers" underscores the need for strong communication and leadership skills within a technical context.

🎓 Skills & Qualifications

Education:

• Ideally, a Bachelor's degree in Computer Science, Software Engineering, or a related technical field. Equivalent practical experience will also be strongly considered.

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.
• Proven track record of successfully shipping and scaling token-driven component libraries that support multiple brands or themes across web and mobile applications.

Required Skills:

• Deep expertise in modern front-end JavaScript frameworks, specifically React and React Native.
• Proficiency in TypeScript for building robust and maintainable codebases.
• Hands-on experience with Storybook for component development, documentation, and testing.
• Strong understanding and practical application of unit testing (e.g., Jest) and React Testing Library (RTL) for component validation.
• Familiarity with modern build tooling such as Vite or Webpack.
• Working knowledge of design token concepts and pipelines, including experience with tools for token management and distribution.
• Fluency with design tool APIs, particularly Figma, for integration with component development workflows.
• Experience with visual regression testing tools like Percy or Chromatic.
• Solid understanding of web accessibility standards (WCAG AA compliance) and best practices for implementation.
• Demonstrated ability to manage performance budgets and optimize application performance.
• Excellent communication and interpersonal skills, with the ability to articulate technical concepts clearly to both technical and non-technical audiences.
• A strategic mindset with the ability to mentor and guide other engineers.

Preferred Skills:

• Direct experience integrating Artificial Intelligence (AI) concepts or technologies within a design system context.
• Familiarity with design system analytics, including tracking adoption rates, component usage, and token utilization.
• Active contributions to open-source design system projects or related tools (e.g., Storybook, Style Dictionary).
• Experience with GraphQL for data fetching and API interactions.
• Working knowledge of Node.js for backend or build tooling development.
• Experience with automated quality gates beyond testing, such as CI/CD pipeline integrations for design system components.

📝 Enhancement Note: The "Experience" section implies a seniority level that goes beyond a standard Senior Engineer. The call for "owning design-system or UI-platform work" suggests a leadership or principal-level contribution within this domain. The strong emphasis on specific technologies like React Native, TypeScript, Storybook, and Figma API integration indicates a need for deep, practical expertise in these areas.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Demonstrate a portfolio showcasing significant contributions to design systems or UI platforms, highlighting ownership of component libraries and platform strategy.
• Provide tangible examples of how you have architected and scaled token-driven systems across different platforms (web, mobile) and themes (light/dark, brand variations).
• Include case studies or examples of building and refactoring React and React Native components with robust testing strategies (a11y, visual regression, unit tests).
• Showcase experience in enhancing developer experience through tooling, documentation, or process improvements related to component adoption and usage.
• Highlight contributions to defining governance models, including RFC processes, contribution guidelines, and release management for component libraries.
• Present evidence of cross-functional collaboration with design, brand, and accessibility teams to translate design intent into engineering solutions.

Process Documentation:

• Illustrate your approach to documenting design system components, including the use of Storybook, Docusaurus, or similar tools, and how you ensure documentation stays synchronized with code.
• Detail your experience in establishing and managing contribution guidelines, release processes, and RFC workflows for design system evolution.
• Provide examples of how you have monitored and enforced quality metrics, such as performance budgets (Lighthouse) and bundle size caps, within a component library context.
• Showcase your methods for integrating design tokens into component development pipelines and ensuring consistency across the system.

📝 Enhancement Note: Given the senior nature of this role and the emphasis on leadership, a portfolio is critical. It should not only showcase technical skills but also strategic thinking, process ownership, and cross-functional collaboration. The "Process Documentation" aspect implies a need to demonstrate not just what was built, but how it was managed and governed effectively.

💵 Compensation & Benefits

Salary Range:

• The provided salary range for San Francisco, CA is $170,000 - $226,000 USD per year.

Benefits:

• Hybrid Work Schedule: Offers a balance between in-office collaboration and remote flexibility.
• Stunning Office Spaces: Access to modern, amenity-filled offices in key locations.
• Competitive Pay: Base salary within the specified range, reviewed regularly for fairness and market competitiveness.
• Equity: Stock options (ISOs) available for eligible positions, providing ownership in the company's growth.
• Premium Healthcare: Comprehensive health, dental, and vision insurance plans.
• 401k Savings Plan: With matching contributions and immediate vesting, supporting long-term financial planning.
• Generous Paid Parental Leave: Supporting employees during significant life events.
• Professional Growth: Opportunities for career advancement, including an employee mobility program and an annual Learning & Development (L&D) budget.
• Wellness Programs: Support for both physical and emotional well-being.
• Company Perks Program: Discounts on various services including pet insurance, fitness, cell phone plans, and travel.
• Financial Guidance Program: Access to counseling and resources for debt management, savings, planning, and home purchasing.

Working Hours:

• Standard working hours are assumed to be 40 hours per week, typical for a full-time engineering role. The hybrid work schedule offers flexibility in how these hours are distributed between office and remote work.

📝 Enhancement Note: The salary range provided ($170,000 - $226,000 USD) for San Francisco, CA is competitive for a Senior Design Systems Engineer role, reflecting the high cost of living and the specialized skill set required. The comprehensive benefits package emphasizes a strong commitment to employee well-being, professional development, and financial security, which are attractive to experienced professionals.

🎯 Team & Company Context

🏢 Company Culture

Industry: FinTech / Financial Services - Altruist operates in the modern custodian space, providing technology and brokerage services specifically tailored for independent financial advisors. This industry is characterized by rapid innovation, a focus on efficiency, and a need for robust, secure, and user-friendly platforms. Company Size: Altruist is likely a growing mid-to-large-sized company, indicated by its expansion into multiple office locations and the need for a senior-level role to lead a critical function like a design system. This size suggests a dynamic environment with opportunities for impact, but also a need for structured processes. Founded: While the founding date isn't explicitly stated, the description implies a company that is modernizing the financial advice industry, suggesting a relatively recent founding or a significant recent growth phase.

Team Structure:

• The Senior Design Systems Engineer will likely be part of the core Engineering or Product Development team, possibly within a dedicated Design Systems pod or closely aligned with Product Design.
• The role reports to an Engineering Manager or Director, with significant interaction with Product Designers, Brand Managers, and other Engineering teams (React, React Native, backend).
• Collaboration is expected to be high, with feature teams relying on the design system for components and best practices, requiring strong communication and partnership.

Methodology:

• Data Analysis & Insights: The role requires leveraging data from tools like Lighthouse, Datadog, and potentially design system adoption metrics to inform decisions and monitor quality.
• Workflow Planning & Optimization: A core responsibility is to design and optimize workflows for design system contribution, release, and adoption, aiming to improve efficiency for dozens of product squads.
• Automation & Efficiency: The role emphasizes building reusable components, creating codemods, and implementing linters to automate quality checks and streamline development processes.

Company Website: https://altruist.com/

📝 Enhancement Note: Altruist's mission to modernize financial advice suggests a culture that values innovation, efficiency, and user-centric design. The company's stated values (Kindness, Brilliance, Grit) are crucial for understanding the expected interpersonal dynamics and work ethic. The emphasis on "challenging the status quo" indicates a forward-thinking and potentially fast-paced environment.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned at a senior individual contributor level, equivalent to Principal Engineer or Lead Engineer in many organizations. It requires extensive experience and the ability to drive strategy, architecture, and best practices for a foundational element of Altruist's product development. Reporting Structure: The Senior Design Systems Engineer will likely report to an Engineering Manager or Director. They will work closely with Product Designers, Frontend Engineering teams (React, React Native), and potentially QA and Accessibility specialists. Operations Impact: The design system is a critical enabler for Altruist's Go-To-Market (GTM) strategy. By ensuring a consistent, high-quality, and efficient user experience across all digital surfaces, it directly impacts brand perception, customer acquisition, user adoption, and overall product velocity. A well-maintained design system reduces development time, improves accessibility, and ensures brand fidelity, all of which contribute to revenue growth and operational efficiency.

Growth Opportunities:

• Technical Specialization: Deepen expertise in design systems, component architecture, accessibility, and front-end performance optimization, potentially becoming a recognized authority within the company.
• Leadership & Mentorship: Grow into a technical leadership role, mentoring junior engineers, influencing architectural decisions across multiple product teams, and potentially leading a dedicated design systems team in the future.
• Strategic Influence: Contribute to the long-term technical strategy of Altruist, shaping how technology and design intersect to deliver exceptional user experiences.
• Industry Recognition: Potential to contribute to open-source projects or speak at conferences related to design systems and front-end development, enhancing personal and company brand.

📝 Enhancement Note: This role is a significant step for an engineer specializing in front-end architecture and design systems. It offers the chance to build and own a critical foundational element of a rapidly growing FinTech company, providing substantial career growth potential in technical leadership and strategic impact.

🌐 Work Environment

Office Type: Altruist offers a hybrid work schedule, indicating a blend of in-office and remote work. The offices are described as "stunning, amenity-filled," suggesting a modern, well-equipped, and comfortable workspace designed to foster collaboration and productivity. Office Location(s): Key office locations include Culver City, CA, San Francisco, CA, and Dallas, TX. The specific role is based in San Francisco, CA. Workspace Context:

• The San Francisco office provides a hub for in-person collaboration with designers, engineers, and other stakeholders, fostering a strong team dynamic.
• The workspace is equipped with the necessary tools and technology to support complex engineering tasks, including development environments, collaboration platforms, and potentially specialized hardware.
• Opportunities for direct interaction with the broader engineering and product teams are abundant, facilitating knowledge sharing and cross-pollination of ideas.

Work Schedule:

• The hybrid work schedule allows for flexibility, enabling engineers to manage their time effectively between focused individual work (often done remotely) and collaborative team activities (often done in the office). Specific "in-office" days are not detailed but are typical for hybrid arrangements.

📝 Enhancement Note: The hybrid model suggests a company that trusts its employees to manage their work effectively while valuing in-person interaction for key collaborative activities. The emphasis on "stunning, amenity-filled office spaces" points to an investment in creating a positive and productive physical work environment.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A recruiter or hiring manager will likely conduct an initial call to assess qualifications, experience, and cultural fit. Be prepared to discuss your background in design systems and your understanding of Altruist's mission.
• Technical Interview(s): Expect one or more technical interviews focusing on your front-end skills (React, React Native, TypeScript), design system principles, component architecture, testing strategies, and problem-solving abilities. These may involve live coding exercises or deep dives into your past projects.
• Design System Deep Dive/Portfolio Review: A dedicated session will likely focus on your portfolio. Be ready to walk through specific examples of design systems you've worked on, discuss your architectural decisions, the reasoning behind your choices, and the impact of your work. Prepare to explain your process for governance, contribution, and documentation.
• Cross-Functional / Behavioral Interviews: Interviews with designers, product managers, or other engineers will assess your collaboration style, communication skills, ability to mentor, and alignment with Altruist's values (Kindness, Brilliance, Grit). Expect questions about how you handle conflict, manage feedback, and drive initiatives.
• Final Interview: A conversation with senior leadership (e.g., VP of Engineering or CTO) to discuss strategic vision, long-term impact, and overall fit within the company.

Portfolio Review Tips:

• Structure is Key: Organize your portfolio clearly, perhaps by project or by theme (e.g., Component Architecture, Token Systems, Developer Experience Enhancements).
• Tell a Story: For each project, explain the problem you were solving, your approach, the technologies used, your specific contributions, the challenges faced, and the measurable outcomes or impact. Use the STAR method (Situation, Task, Action, Result).
• Highlight Ownership: Clearly articulate where you led the strategy, architecture, or governance. Quantify achievements where possible (e.g., "reduced component development time by X%", "increased adoption by Y%").
• Showcase Technical Depth: Include code snippets (if appropriate and non-confidential), discuss testing strategies in detail, and explain your rationale for architectural decisions. Demonstrate your expertise in React, React Native, TypeScript, and Storybook.
• Address Process & Governance: Specifically showcase examples of your contribution guidelines, RFC processes, release management, and documentation strategies.
• Accessibility & Performance: Dedicate sections to how you ensure WCAG compliance and performance optimization within your design systems.

Challenge Preparation:

• Coding Challenges: Prepare for coding exercises that test your proficiency in React, React Native, and TypeScript. Focus on building reusable components, state management, and efficient data handling.
• Design System Problems: Be ready to tackle hypothetical design system challenges, such as designing a new component, refactoring an existing one, or proposing a solution for a specific governance issue. Think about scalability, maintainability, and developer experience.
• Scenario-Based Questions: Prepare for behavioral questions related to collaboration, conflict resolution, mentorship, and handling difficult feedback within a cross-functional team.

📝 Enhancement Note: The interview process is likely rigorous, reflecting the senior nature of the role and the importance of the design system. A strong portfolio is paramount, serving as the central piece for demonstrating expertise in both technical execution and strategic/process ownership. Candidates should prepare to articulate not just what they built, but why and how it delivered value.

🛠 Tools & Technology Stack

Primary Tools:

• Frontend Frameworks: React, React Native (deep expertise required for both).
• Language: TypeScript (essential for robust component development).
• Component Development & Documentation: Storybook (heavy usage expected for building, testing, and documenting components).
• Testing Frameworks: Jest (for unit testing), React Testing Library (RTL) (for component interaction testing).
• Design Tools: Figma (fluency with its API and design token integration is key).
• Build Tooling: Vite, Webpack (working knowledge required).

Analytics & Reporting:

• Performance Monitoring: Lighthouse (for performance budgets), Datadog, New Relic (for application performance monitoring and quality gate enforcement).
• Design System Analytics: Tools for tracking component adoption, usage, and token distribution (potentially custom solutions or Storybook analytics).

CRM & Automation:

• While not directly CRM-related, the role involves automating processes within the design system lifecycle using tools like linters and codemods.
• Design Token Pipelines: Tools and methodologies for managing and distributing design tokens across platforms (e.g., Style Dictionary, custom scripts).
• Visual Regression Tooling: Percy, Chromatic (for automated visual testing).

📝 Enhancement Note: The technology stack is heavily focused on modern front-end development tools and design system best practices. Proficiency in React, React Native, TypeScript, and Storybook is non-negotiable. Experience with design token management and visual regression testing tools is also critical.

👥 Team Culture & Values

Operations Values:

• Kindness: Approach interactions with empathy, listen actively to understand diverse perspectives, and engage in open, honest, and respectful debate. This applies to feedback on components, design decisions, and team collaboration.
• Brilliance: Embrace a growth mindset, take ownership of work, and leverage unique skills collaboratively towards common goals. Humility and a willingness to learn are highly valued.
• Grit: Maintain focus on achieving the mission even when facing challenges. Demonstrate nimbleness, a sense of urgency, and the ability to adapt and overcome obstacles swiftly.
• Ownership: Take pride in all aspects of work, signifying a commitment to quality and excellence in every component and process developed.
• Communication: Engage in intentional dialogue, actively listening and sharing perspectives effectively. This is crucial for cross-functional collaboration and stakeholder management.
• Resilience: Show unwavering determination and the ability to achieve success despite adversity.
• Assurance: Possess confidence grounded in knowledge, with an openness to discovering the unknown and accepting differing perspectives.
• Creative Problem Solving: Instinctually identify roadblocks and proactively develop creative solutions.

Collaboration Style:

• Cross-functional Integration: Work closely with Product Design, Brand, and Engineering teams, acting as a bridge between design intent and technical implementation.
• Process Review & Feedback: Foster a culture of continuous improvement through open feedback loops on components, processes, and contributions.
• Knowledge Sharing: Actively share expertise, mentor colleagues, and contribute to a collective understanding of design system best practices and technical standards.
• Experimentation: Be open to exploring new tools, techniques, and approaches to enhance the design system and developer experience.

📝 Enhancement Note: Altruist's core values are deeply integrated into the expected behaviors and collaboration style. Candidates should be prepared to demonstrate how they embody Kindness, Brilliance, and Grit in their work and interactions. The emphasis on "intentional dialogue" and "listening to understand" highlights the importance of strong communication skills.

⚡ Challenges & Growth Opportunities

Challenges:

• Scaling a Design System: Architecting and scaling a design system to support multiple product teams, platforms (web/mobile), and potentially future brand extensions requires careful planning and robust infrastructure.
• Cross-Team Adoption: Ensuring consistent adoption and effective utilization of the design system across dozens of product squads with varying technical maturity and priorities can be challenging.
• Balancing Innovation and Stability: Maintaining the design system while allowing for rapid iteration and new feature development requires a delicate balance, managing technical debt and ensuring backward compatibility.
• Maintaining Quality Standards: Continuously enforcing high standards for accessibility, performance, and code quality across a growing component library and diverse team of contributors.
• Cross-Functional Alignment: Effectively translating design intent and brand guidelines into robust engineering solutions while managing diverse stakeholder needs and expectations.

Learning & Development Opportunities:

• Design System Specialization: Become a deep expert in design systems, component architecture, tokenization, and related tooling.
• Technical Leadership: Develop mentorship and leadership skills by guiding other engineers and influencing technical direction.
• FinTech Domain Knowledge: Gain insights into the financial services industry and the unique challenges and opportunities within FinTech.
• Cross-Functional Skill Development: Enhance collaboration and communication skills by working closely with design, product, and accessibility teams.
• Industry Engagement: Opportunities to contribute to open-source projects or attend industry conferences, staying abreast of the latest trends in front-end development and design systems.

📝 Enhancement Note: The challenges are inherent to building and scaling a critical platform component in a growing company. They present significant opportunities for professional growth, particularly in technical leadership, strategic planning, and process optimization within a dynamic FinTech environment.

💡 Interview Preparation

Strategy Questions:

• Design System Strategy: "How would you approach developing a comprehensive strategy for a cross-platform design system at Altruist, considering our web and mobile experiences?" Prepare to discuss phases, key stakeholders, and success metrics.
• Component Architecture: "Describe your process for designing, building, and testing a new reusable component (e.g., a button or modal) for a design system, ensuring it's accessible, performant, and maintainable." Be ready to walk through React/React Native specifics.
• Governance & Contribution: "How do you establish effective governance and contribution guidelines for a design system to ensure consistency and quality across multiple teams?" Discuss RFC processes, versioning, and release management.
• Developer Experience: "What strategies would you implement to improve the developer experience for teams consuming our design system?" Think about Storybook addons, codemods, documentation, and onboarding.
• Performance & Accessibility: "How do you ensure WCAG AA compliance and optimize performance budgets within a design system?" Discuss specific tools and techniques.

Company & Culture Questions:

• Values Alignment: "Can you provide examples of how you've demonstrated Kindness, Brilliance, and Grit in your previous roles, particularly in a team setting?" Prepare specific anecdotes.
• Collaboration: "Describe a time you had to collaborate with designers or product managers who had different priorities or perspectives. How did you navigate that?"
• Mentorship: "How do you approach mentoring junior engineers on best practices for component development and design system usage?"
• Company Mission: "What excites you about Altruist's mission to make financial advice better, more affordable, and accessible?"

Portfolio Presentation Strategy:

• Focus on Impact: For each project, clearly articulate the business problem solved and the quantifiable impact of your design system work (e.g., efficiency gains, consistency improvements, reduced development time).
• Technical Deep Dive: Be prepared to discuss the architectural decisions, technology choices (React, React Native, TypeScript, Storybook), testing strategies, and tokenization approaches in detail.
• Process & Governance: Showcase your understanding of design system lifecycle management, including contribution workflows, release processes, and documentation strategies.
• Cross-Functional Collaboration: Highlight examples of successful partnerships with design, brand, and other engineering teams.
• Conciseness and Clarity: Structure your presentation logically and deliver it concisely, focusing on the most relevant and impactful aspects of your experience.

📝 Enhancement Note: Interview preparation should focus on demonstrating not only technical proficiency but also strategic thinking, process ownership, and strong collaborative skills. Candidates need to be ready to articulate the "why" behind their technical decisions and quantify the impact of their work.

📌 Application Steps

To apply for this Senior Design Systems Engineer position:

• Submit your application through the provided link on the Altruist careers page.
• Portfolio Preparation: Curate your professional portfolio to prominently feature your experience with design systems, UI platforms, and component libraries. Include specific examples of your work in React, React Native, TypeScript, Storybook, and demonstrate your approach to design token management, accessibility, and performance optimization. Prepare to discuss the strategic aspects of your contributions, such as governance and developer experience enhancements.
• Resume Optimization: Tailor your resume to highlight keywords and responsibilities mentioned in this job description, such as "design systems," "React," "React Native," "TypeScript," "Storybook," "accessibility (WCAG)," "performance," and "component architecture." Quantify your achievements using metrics where possible to showcase impact.
• Interview Practice: Rehearse answers to potential interview questions, focusing on behavioral scenarios that align with Altruist's values (Kindness, Brilliance, Grit). Practice articulating your technical expertise and portfolio projects clearly and concisely, emphasizing your strategic thinking and problem-solving abilities.
• Company Research: Thoroughly research Altruist's mission, values, products, and recent news. Understand their target audience (independent financial advisors) and how a strong design system contributes to their overall business goals and user experience strategy.

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