All remote jobs

Frontend Engineer – Design Systems

Review the role, location requirements, compensation details, and application process before deciding whether this opportunity fits your next career move.

Remote from
USA, Canada
Salary
USD 140,800–158,400 / yr
Employment
Full Time
Experience
Open level
Published
Apply before
30 Nov 2026
Listing views
33
Application actions
2
Application toolkit

Make your next move.

Prepare your resume, explore your fit, and draft a cover letter for this opportunity.

AI Summary

The role, at a glance.

Mercury is hiring an early-career to intermediate Frontend Engineer to build and evolve its shared design-system components. The role centers on React, TypeScript, HTML, CSS, accessibility, and translating Figma design intent into reusable production code. The engineer will partner closely with designers and product engineers, improve documentation and adoption workflows, and validate component quality through implementation and testing. The position also expects practical fluency with AI coding tools, including evaluating generated code and applying sound engineering judgment. It is a remote role available to candidates in the United States and Canada.

Role DNA

A quick view of the complexity, pace, ownership and collaboration implied by the job description.

Job Complexity

3/5
EasyHard

Pace & Pressure

3/5
RelaxedFast-paced

Autonomy Level

3/5
GuidedFull ownership

Communication Load

4/5
IndependentCollaborative
AI insightThis is a solid intermediate frontend role requiring both implementation skills and an understanding of reusable component architecture, accessibility, and design collaboration. The scope is supported by experienced teammates, but successful delivery requires independent judgment across code, design tradeoffs, and AI-assisted workflows.

Salary analysis

Estimated compensation compared with the broader US market for similar roles.

Estimated job median (per year)Market rate
$149,600
US market range (per year)$130k–$175k
AI insightThe yearly pay period is inferred from the job context; it was not explicitly stated by the employer. The employer explicitly lists a US annual base-salary range of $140,800–$158,400 USD, with a midpoint of $149,600. A separate annual range is provided for Canadian employees in CAD. The estimated US market range for an early-career to intermediate frontend engineer specializing in design systems is $130,000–$175,000 USD annually.

Core skills

Skills and capabilities most closely associated with this opportunity.

Sample interview questions
How would you design a reusable React component that supports different product contexts without becoming overly complex?

I would begin by identifying the stable shared behavior and the genuine points of variation from product use cases. I would expose a small, intentional API through props, composition, and sensible defaults rather than adding a prop for every exception. I would document supported patterns, add accessibility requirements and tests, and use feedback from adopters to decide whether a variation belongs in the shared component or should remain product-specific.

Describe how you would ensure a new design-system component is accessible.

I would first establish the component’s semantic structure and keyboard interaction requirements. I would use native HTML controls where possible, provide correct labels and focus behavior, verify contrast and visible focus states, and add ARIA only when native semantics are insufficient. I would test with keyboard navigation, automated accessibility checks, and practical review of relevant screen-reader behavior.

How do you translate a Figma design into a reliable frontend component?

I review the design intent, states, responsive behavior, content constraints, and interaction details with the designer before coding. I map repeated values to existing design tokens and identify what should become a reusable variant versus a one-off treatment. After implementation, I compare the component in context with the design, test edge cases, and incorporate feedback so the coded component remains both visually accurate and practical for product teams.

What is your process for using AI coding tools responsibly in frontend development?

I provide the tool with focused context and use it to accelerate exploration, boilerplate, or alternative implementation ideas. I review every output for correctness, security, accessibility, consistency with the codebase, and maintainability rather than accepting generated code uncritically. I then run tests, validate behavior in the application, and refine the result based on engineering and design-system standards.

How would you encourage product teams to adopt a shared component library?

I would make the library easier to use than recreating the same pattern by providing clear documentation, practical examples, predictable APIs, and migration guidance. I would listen to adoption friction through direct collaboration with product teams and prioritize improvements that solve recurring needs. Sharing rationale, accessibility benefits, and successful examples also helps teams understand the value of using the system.

This analysis is generated from the job description. Salary estimates, role characteristics and sample answers are guidance, not employer-provided facts.
Opportunity details

About this role.

Mercury’s Design Systems team helps product teams build interfaces that feel consistent, accessible, and carefully considered. We’re hiring a Frontend Engineer to help evolve the shared components and patterns behind those experiences, making it easier for teams across Mercury to turn good ideas into well-crafted software.

You’ll work closely with designers and engineers to understand product needs, explore solutions, and carry improvements into the hands of the teams using them. This role is open to early-career and intermediate engineers. You’ll build depth in frontend engineering and design systems through meaningful project ownership, with guidance from experienced teammates suited to your experience.

Design systems will be your initial focus within the team’s broader Design Foundations work. As opportunities and interests align, you can also contribute to code-based prototyping and tools that help designers and AI agents work with Mercury’s components. Strong AI fluency is part of how we build from the start.

As part of this role, you will:

  • Build shared components and patterns that make Mercury’s interfaces better. You’ll work in React and TypeScript, turning recurring product needs into flexible solutions that teams can use across different experiences.
  • Partner with designers and product engineers to connect design intent with working software. Help evolve components and tokens across Figma and code, using feedback from real product work to improve the system.
  • Improve the quality of the experiences built with our components. Consider how they look and behave for different users, bringing accessibility, thoughtful interactions, and reliable behavior into implementation and testing.
  • Make the design system easier to use. Help teams adopt shared patterns and improve the examples, documentation, and workflows that let people build confidently with them.
  • Use AI tools to explore approaches and move ideas into working code. Apply your judgment to what agents produce, test the results in context, and contribute useful approaches back to the team.

What you’ll bring:

We’re interested in what you’ve built and how you think. Your experience may come from professional work, internships, coursework, open source, or personal projects.

  • A foundation in React, TypeScript, HTML, and CSS, with experience building interfaces and the ability to explain the decisions behind your code.
  • Care for visual craft and how people use software, including an interest in accessible interfaces and the details that make interactions feel right.
  • Hands-on fluency with AI coding tools. You can provide useful context, evaluate and improve generated code, and verify that it works as intended.
  • Ownership and a willingness to learn: you follow work through, communicate when you need help, and use feedback to improve your approach.
  • Curiosity about reusable systems and the tradeoffs involved in serving different product needs with shared components.
  • An interest in solving problems alongside designers and engineers, contributing ideas, and understanding the needs behind a request.
  • Experience with design systems, prototyping, or developer tooling is a plus. You don’t need to have held a design systems role to bring useful skills and ideas to this team.

If this role interests you, we invite you to explore our public demo at demo.mercury.com.

*Mercury is a fintech company, not an FDIC-insured bank. Banking services provided through Choice Financial Group and Column N.A., Members FDIC.

Mercury values diversity & belonging and is proud to be an Equal Employment Opportunity employer. All individuals seeking employment at Mercury are considered without regard to race, color, religion, national origin, age, sex, marital status, ancestry, physical or mental disability, veteran status, gender identity, sexual orientation, or any other legally protected characteristic. We are committed to providing reasonable accommodations throughout the recruitment process for applicants with disabilities or special needs. If you need assistance, or an accommodation, please let your recruiter know once you are contacted about a role.

#LI-MC1

Total Rewards
The total rewards package at Mercury includes base salary, equity (stock options/RSUs), and benefits.

Our salary and equity ranges are highly competitive within the SaaS and fintech industry and are updated regularly using the most reliable compensation survey data for our industry. New hire offers are made based on a candidate’s experience, expertise, geographic location, and internal pay equity relative to peers.

Our target new hire base salary ranges for this role are the following:

US employees (any location):

$140,800—$158,400 USD

Canadian employees (any location):

$115,700—$149,700 CAD

Apply now >

This job listing has been manually reviewed by the Jobicy Trust & Safety Team for compliance with our posting guidelines, including verification of the company's legitimacy, accuracy of job details, clarity of remote work policy, and absence of misleading or fraudulent content.

Next step

Apply now.

Follow the employer’s application method and review Jobicy’s safety guidance before sharing personal information.

Did you apply?Let us know, and we’ll help you track your application.

Continue on the employer website

Protect your personal information and never pay to secure an interview or job offer. .

Log in to save
One quick step before you apply

Sign in to continue.

Sign in or create a free account to continue to the employer's application.

Add alert
Jobs Talent AI Tools Salaries
Menu