Design Systems Engineer

📍 Job Overview

Job Title: Design Systems Engineer

Company: Ambrook

Location: New York, NY (Hybrid)

Job Type: Full-Time

Category: Engineering - Frontend / Design Systems

Date Posted: 2026-08-01

Experience Level: Mid-Senior Level (5-10 years)

Remote Status: Hybrid

🚀 Role Summary

• Own and evolve Ambrook's design system, encompassing component libraries, interaction patterns, and design tokens as production frontend infrastructure.

• Drive the adoption of the design system across web and mobile products, managing migrations and deprecating legacy patterns.

• Champion frontend performance and accessibility, treating them as core product features and implementing necessary tooling and guardrails.

• Leverage agentic development workflows, including codemods and migration scripts, to accelerate the adoption of the design system and improve overall engineering efficiency.

📝 Enhancement Note: This role is critical for establishing a consistent, high-quality user experience across Ambrook's product suite. It requires a blend of deep technical frontend expertise and a strategic understanding of how design systems facilitate scalability and maintainability. The emphasis on "agentic development" suggests a forward-thinking approach to engineering efficiency, leveraging AI tools for tasks like migrations and code updates.

📈 Primary Responsibilities

• Architect, build, and maintain a robust, scalable component library using TypeScript and React, ensuring it serves as reliable production frontend infrastructure.

• Develop and manage design tokens, interaction patterns, and other foundational elements of the design system to ensure consistency and ease of use.

• Lead cross-functional efforts to integrate the design system into existing and new product features, actively managing versioning, breaking changes, and deprecation strategies.

• Implement and optimize frontend performance metrics, including bundle size optimization, render performance, and accessibility standards, establishing continuous monitoring and improvement processes.

• Design and implement agentic workflows (e.g., codemods, migration scripts) to automate the adoption of design system updates and reduce manual effort for product engineers.

• Collaborate closely with product designers and engineers to translate design specifications into reusable, high-quality code components and patterns.

• Establish and enforce best practices for frontend development, component usage, and design system contribution within the engineering team.

• Profile and diagnose frontend performance bottlenecks, providing actionable insights and solutions to improve application speed and responsiveness.

📝 Enhancement Note: The responsibilities highlight a hands-on engineering role with significant ownership. The "migrations and adoption" aspect implies a need for strong communication and collaboration skills to influence and guide other engineering teams, not just technical execution. "Agentic development" suggests an expectation to explore and implement AI-assisted development practices within the team.

🎓 Skills & Qualifications

Education: Bachelor's degree in Computer Science, Engineering, or a related field, or equivalent practical experience.

Experience: 5-10 years of professional experience in frontend engineering, with a significant focus on building and maintaining design systems or shared component libraries in production environments.

Required Skills:

• Deep expertise in modern frontend development, including advanced proficiency in TypeScript and React.

• Proven experience in architecting, building, and scaling design systems or comprehensive component libraries.

• Strong understanding of data structures, asynchronous programming, and modern build tooling workflows (e.g., Webpack, Vite).

• Demonstrated ability to manage versioning, handle breaking changes, and execute large-scale migrations for shared codebases.

• Experience in profiling and optimizing frontend performance (bundle size, render times) and implementing robust accessibility standards (WCAG).

• Familiarity with using coding agents or AI-assisted tools for development tasks, particularly for migrations and code updates.

• Strong problem-solving skills and the ability to hold a high bar for code quality and UI craft.

• Excellent communication and collaboration skills, with experience influencing engineering teams. Preferred Skills:

• Experience with design tools such as Figma for translating designs into code.

• Familiarity with mobile development frameworks or cross-platform solutions.

• Experience with CI/CD pipelines and automated testing for frontend applications.

• Contributions to open-source design systems or related projects.

• Understanding of backend infrastructure or full-stack development principles.

📝 Enhancement Note: The experience level (5-10 years) and the emphasis on "owning" the system suggest this is not an entry-level position. The requirement for experience with "agentic development" is a key differentiator, indicating a need for candidates who are comfortable and skilled in leveraging AI tools in their workflow.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• Showcase at least one significant project where you architected, built, and maintained a design system or a large-scale component library in a production setting.

• Include examples demonstrating your approach to versioning, handling breaking changes, and managing migrations within a shared codebase.

• Provide evidence of your work in optimizing frontend performance, detailing methodologies used and measurable improvements achieved.

• Highlight any contributions to tooling, automation scripts (like codemods), or agentic development workflows that improved engineering efficiency or system adoption.

• Demonstrate your understanding of accessibility best practices through implemented features or case studies. Process Documentation:

• Detail your process for designing and implementing new components within a design system, from initial concept to production-ready code.

• Explain your strategy for driving adoption of the design system across multiple teams and projects, including communication and support mechanisms.

• Outline your approach to performance monitoring, analysis, and continuous improvement for frontend applications and the design system itself.

• Describe your methodology for managing the lifecycle of components, including deprecation and eventual removal.

📝 Enhancement Note: Given the role's focus on ownership and system adoption, a portfolio demonstrating practical experience with these challenges is crucial. The inclusion of "agentic development" means any examples of AI-assisted workflow improvements will be highly valued.

💵 Compensation & Benefits

Salary Range: $115,000 - $280,000 USD per year.

Benefits:

• Equity in a rapidly growing Series B startup.

• Comprehensive health, dental, and vision insurance.

• Generous paid time off (PTO) and holidays.

• Opportunities for professional development and continuous learning.

• Access to cutting-edge AI development tools and workflows.

• A collaborative and mission-driven work environment focused on real-world impact.

Working Hours: Standard full-time hours, approximately 40 hours per week, with flexibility to accommodate hybrid work arrangements and asynchronous collaboration.

📝 Enhancement Note: The wide salary range reflects significant variation based on experience, specific skill alignment with the "agentic development" requirement, and the candidate's proven impact in previous roles. The emphasis on equity is typical for a Series B startup.

🎯 Team & Company Context

🏢 Company Culture

Industry: FinTech / AgTech (Financial infrastructure for agriculture)

Company Size: Series B startup, likely between 50-200 employees, with a growing engineering and design team.

Founded: Founded to rebuild the financial infrastructure for American family-run businesses, focusing on accounting, banking, and spending tools for agricultural operators.

Team Structure:

• The Design Systems Engineer will be part of a lean, talented design and engineering team.

• This role likely reports into an Engineering Lead or Head of Engineering, with close collaboration with Product Design.

• Cross-functional collaboration is key, working with product managers, engineers across different product areas, and potentially marketing for brand consistency. Methodology:

• Data-driven approach to product development and financial infrastructure.

• Emphasis on modern tooling, including AI for efficiency gains in engineering processes.

• Focus on user empathy for the agricultural operators they serve.

• Iterative development cycles with a focus on shipping value and learning.

Company Website: https://ambrook.com/

📝 Enhancement Note: Ambrook's mission to support family-run agricultural businesses is a strong cultural anchor. The "Series B startup" context implies a fast-paced, innovative environment where engineers are empowered to make significant technical decisions and drive product direction. The integration of AI into engineering workflows is a defining characteristic.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned at a mid-to-senior engineering level, with significant ownership and influence over a critical product area – the design system. It's a hands-on technical leadership role focused on system architecture, implementation, and adoption.

Reporting Structure: Typically, a Design Systems Engineer would report to an Engineering Manager or Director of Engineering. They would work closely with Product Designers and collaborate with various product engineering teams.

Operations Impact: The Design Systems Engineer directly impacts Ambrook's ability to scale its product offerings efficiently and consistently. A well-maintained design system reduces development time, improves UI/UX quality, and ensures brand consistency, directly contributing to user satisfaction and faster iteration cycles. This role is foundational to product quality and engineering velocity.

Growth Opportunities:

• Technical Specialization: Deepen expertise in frontend architecture, performance optimization, accessibility, and AI-driven development tools.

• Leadership: Potentially lead the growth of the design systems team as the company scales, mentor junior engineers, and influence engineering best practices across the organization.

• Product Impact: Play a key role in shaping the user experience of Ambrook's core financial products, directly contributing to the company's mission.

• Broader System Ownership: Expand responsibilities to encompass other aspects of frontend infrastructure or tooling.

📝 Enhancement Note: The "Design Systems Engineer" title, combined with the experience requirements and ownership scope, points to a role with significant individual contribution and potential for team leadership as Ambrook grows. The emphasis on AI tools also presents a unique growth avenue.

🌐 Work Environment

Office Type: Hybrid work environment, with a primary office located in New York City.

Office Location(s): New York, NY, United States.

Workspace Context:

• The hybrid model allows for a blend of focused individual work at home and collaborative, in-person interaction at the New York office.

• Expect access to modern development tools and technologies, including AI-powered coding assistants.

• The environment likely fosters open communication and collaboration, typical of a growing tech startup.

• Opportunities for direct interaction with design and engineering teams to foster a cohesive product development culture.

Work Schedule: While a standard 40-hour work week is expected, the hybrid nature and startup environment may offer some flexibility. Emphasis will be placed on deliverables and impact rather than strict hour-counting, with an expectation of availability for key team syncs and collaborative sessions.

📝 Enhancement Note: The hybrid nature in New York City suggests a professional office setting combined with the flexibility of remote work. For operations roles, understanding how to manage distributed teams and asynchronous communication is key.

📄 Application & Portfolio Review Process

Interview Process:

• Initial Screening: A brief call with a recruiter to assess basic qualifications and cultural fit.

• Technical Interview 1: Focus on core frontend concepts, TypeScript, React, and data structures. This may involve live coding exercises.

• Design Systems Deep Dive: A discussion specifically about your experience with design systems, component libraries, versioning, and adoption strategies. You may be asked to walk through specific examples from your portfolio.

• Systems & Architecture Interview: Focus on frontend infrastructure, performance optimization, accessibility, and your experience with build tooling. Discussions around your approach to agentic development and AI tools.

• Portfolio Review: A dedicated session where you present selected projects from your portfolio, explaining your technical decisions, impact, and lessons learned.

• Hiring Manager / Team Interview: A conversation with the hiring manager and potential team members to assess collaboration style, problem-solving approach, and overall fit with Ambrook's culture and mission.

• Final Round: May involve a discussion with senior leadership.

Portfolio Review Tips:

• Curate 2-3 of your strongest projects that directly showcase your design systems and frontend engineering expertise.

• For each project, clearly articulate the problem you were solving, your technical approach, the tools and technologies used, and the quantifiable impact or results.

• Be prepared to discuss your role in detail, especially in team projects. Highlight your specific contributions and decision-making processes.

• For design system projects, detail your architecture, component development patterns, versioning strategy, and how you drove adoption.

• If you have examples of using AI for development tasks (codemods, migrations), be ready to present them and explain the benefits.

• Ensure your portfolio is easily accessible (e.g., GitHub repository, personal website) and well-documented. Challenge Preparation:

• Be ready for technical challenges that test your ability to write clean, efficient TypeScript/React code and solve complex frontend problems.

• Practice explaining complex technical concepts clearly and concisely.

• Prepare examples of how you've handled difficult technical challenges, managed cross-functional dependencies, and driven consensus on technical decisions.

• Research Ambrook's mission, values, and recent news to demonstrate genuine interest and understanding of their business context.

📝 Enhancement Note: The emphasis on a portfolio review and specific technical discussions about design systems, performance, and agentic development means candidates must be prepared to demonstrate their practical skills and strategic thinking in these areas.

🛠 Tools & Technology Stack

Primary Tools:

• Languages: TypeScript, JavaScript

• Frameworks/Libraries: React

• Design System Tools: Component libraries (e.g., Storybook), Design Tokens

• Build Tools: Webpack, Vite, or similar modern bundlers

• Agentic Development: AI-powered coding assistants (e.g., GitHub Copilot, custom agent workflows)

Analytics & Reporting:

• Frontend performance monitoring tools (e.g., Lighthouse, Web Vitals, custom dashboards)

• Accessibility testing tools

• Potentially integrated with product analytics platforms for feature usage tracking. CRM & Automation:

• While not directly a CRM role, understanding how frontend systems integrate with backend services and data stores is crucial.

• Familiarity with CI/CD pipelines for automated testing and deployment.

• Experience with scripting for automation tasks (e.g., shell scripting, Node.js scripts).

📝 Enhancement Note: The explicit mention of "agentic development" and AI tools is a key indicator of the technology stack. Candidates should be prepared to discuss their experience with these emerging technologies in a practical, applied context.

👥 Team Culture & Values

Operations Values:

• Craftsmanship: A high bar for quality, performance, and user experience in all engineering outputs.

• Collaboration: Working effectively with design and product teams to build intuitive and powerful financial tools.

• Ownership: Taking responsibility for the design system's health and adoption, driving projects to completion.

• Innovation: Embracing new technologies and methodologies, such as AI for development, to improve efficiency and outcomes.

• Mission-Driven: Dedication to Ambrook's goal of supporting American family-run businesses and contributing to a more resilient economy.

Collaboration Style:

• Open and transparent communication channels, likely utilizing tools like Slack and shared documentation platforms.

• Emphasis on constructive feedback and iterative improvement through code reviews and design critiques.

• Cross-functional teams working closely together to align on product strategy and execution.

• A culture that encourages experimentation and learning from both successes and failures.

📝 Enhancement Note: The values highlight a blend of technical excellence, user-centricity, and a forward-looking approach to technology, particularly AI. This suggests a team that is both rigorous and open to innovation.

⚡ Challenges & Growth Opportunities

Challenges:

• System Adoption at Scale: Ensuring that a growing product suite and engineering team effectively adopts and contributes to the design system, managing resistance to change or technical debt.

• Balancing Innovation and Stability: Integrating new technologies like AI-driven development while maintaining the stability and performance of production systems.

• Bridging Design and Engineering: Maintaining alignment between design intentions and engineering implementation across a complex product.

• Performance Optimization: Continuously improving frontend performance in a dynamic application environment.

Learning & Development Opportunities:

• AI in Engineering: Deep dive into leveraging AI for code generation, migration, testing, and other development workflows.

• Advanced Frontend Architecture: Opportunities to shape and evolve complex frontend systems.

• Design Systems Leadership: Develop skills in managing design system strategy, governance, and team growth.

• Industry Exposure: Gain insights into the unique challenges and opportunities within the AgTech and FinTech sectors.

• Mentorship: Potential to be mentored by experienced engineering leaders and to mentor junior engineers.

📝 Enhancement Note: The challenges are typical for a growing startup with an ambitious technical vision. The growth opportunities are particularly strong in the emerging field of AI-assisted development and in the specialized area of design systems.

💡 Interview Preparation

Strategy Questions:

• "Describe a time you had to drive adoption of a new design system or major component library across multiple engineering teams. What were the biggest challenges, and how did you overcome them?"

• "How do you approach versioning and managing breaking changes in a shared component library? Walk me through your process for deprecating old components."

• "Imagine we need to migrate a large portion of our existing codebase to a new design system. How would you leverage coding agents or AI tools to accelerate this process, and what guardrails would you put in place?"

• "How do you balance the need for rapid feature development with maintaining high standards for frontend performance and accessibility?"

• "What is your philosophy on design tokens, and how do they integrate into a comprehensive design system?" Company & Culture Questions:

• "What interests you about Ambrook's mission to support American family-run businesses?"

• "How do you see your role contributing to Ambrook's growth and success?"

• "Describe your ideal collaboration style with product designers and other engineers."

• "How do you stay current with the rapidly evolving landscape of frontend development and AI tools?" Portfolio Presentation Strategy:

• Structure your presentation around key projects that highlight your design systems expertise, frontend performance work, and any experience with AI/agentic development.

• For each project, clearly articulate:

  • The problem statement and your objective.
  • Your technical architecture and key decisions.
  • The specific tools and technologies used (especially TypeScript, React, and any AI tools).
  • Quantifiable results or impact (e.g., adoption rates, performance improvements, development time saved).
  • Lessons learned and what you would do differently.

• Be prepared to answer detailed questions about your code, architecture, and decision-making process.

📝 Enhancement Note: Expect questions that probe your practical experience, problem-solving abilities, and strategic thinking, especially regarding design systems, performance, and the innovative use of AI in engineering.

📌 Application Steps

To apply for this Design Systems Engineer position:

• Submit your application through the provided link on Ashby.

• Tailor your resume: Highlight experience with TypeScript, React, design systems, component libraries, frontend performance optimization, and any exposure to AI/agentic development tools. Use keywords from the job description.

• Prepare your portfolio: Curate 2-3 strong projects showcasing your design systems expertise, performance work, and ideally, examples of AI-assisted development or automation. Ensure it's easily accessible and well-documented.

• Practice your presentation: Rehearse walking through your portfolio projects, clearly explaining your technical contributions, impact, and lessons learned. Be ready to discuss your approach to design systems and frontend architecture.

• Research Ambrook: Understand their mission, the industry they serve, and their commitment to using modern technology like AI. Prepare thoughtful questions about the role, team, and company.

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

---