Design Engineer (React / Next.js / TypeScript)Contract-to-Hire | 15・・20 hours/week | Remote (U.S)
About the RoleWe're looking for a Design Engineer who thrives at the intersection of design and front-end development. You・・ll bring thoughtful, high-quality user interfaces to life ・・ helping us build fast, accessible, and elegant experiences.
This is a hands-on, highly collaborative role focused on shipping polished UI using React, Next.js (App Router), TypeScript, and modern tooling like Vercel. You・・ll move quickly (with AI-assisted workflows) while maintaining a high bar for detail and technical excellence.
In this role, you will:• Translate product requirements into polished, responsive UIs with attention to spacing, typography, motion, and interaction states.
- Build and evolve a reusable component library/design system ・・ including design tokens, theming, dark mode, i18n, and accessibility.
- Ship and operate Next.js apps using App Router, Server Components, SSR/SSG/ISR, edge functions, and middleware ・・ all deployed on Vercel.
- Use advanced TypeScript patterns (discriminated unions, generics) to write safe, maintainable, and self-documenting code.
- Optimize for performance and Core Web Vitals ・・ including bundle strategy, code-splitting, caching, and Suspense streaming.
- Ensure WCAG 2.2 AA accessibility through semantic HTML, ARIA, keyboard handling, focus management, and contrast audits.
- Add thoughtful motion and micro-interactions (hover, press, drag, page transitions) while maintaining performance.
- Collaborate with Product Design on feasibility, prototypes, and design critiques ・・ giving and receiving detailed feedback.
- Integrate with REST/GraphQL APIs, manage data fetching (TanStack Query, SWR), and handle empty/error/loading states gracefully.
- Write reliable tests using Vitest, Testing Library, and Playwright; own UI quality via CI and automated checks.
- Use AI tools (Copilot, Cursor, LLMs) for scaffolding, refactors, test generation, and docs ・・ always with standards and reviews in place.
What We're Looking For• React + Next.js (App Router, RSC, SSR/SSG/ISR) expertise, including dynamic routing and SEO metadata strategies.
- Strong TypeScript skills ・・ writing strict types, clean component APIs, and ergonomic developer experiences.
- Proficiency with Vercel ・・ environments, preview links, edge runtime, and performance tooling.
- A sharp design eye ・・ understanding of typography, layout systems, grids, elevation, color, and spacing.
- Demonstrated experience building accessible interfaces to WCAG 2.2 AA standards.
- Fluency in performance debugging tools (Lighthouse, WebPageTest, React Profiler) and diagnosing hydration, jank, or memory issues.
- Strong CSS experience using Tailwind or CSS Modules, and familiarity with design tokens and theming strategies.
- Collaborative Figma workflow experience (variants, auto-layout, tokens), with the ability to give designers constructive feedback.
- Solid grasp of data fetching, caching, and degraded state UX (loading, errors, offline).
- Strong communicator with a bias for ownership, iteration, and delivery.
- Comfortable using AI tools responsibly ・・ with prompt discipline, security awareness, and thoughtful code review habits.
Bonus Skills• Experience with headless CMSs, especially Sanity.io.
- Animation experience using Framer Motion or GSAP with accessibility in mind.
- Familiarity with design token pipelines (e.g., Style Dictionary) and multi-brand theming setups.
- Understanding of SEO/OG best practices, structured data, and internationalization (i18n, RTL support).
- Experience with analytics tools (e.g., PostHog, Amplitude), feature flags, and experimentation frameworks.
- Awareness of backend UX-affecting concepts like pagination, rate limits, and API error handling.
- Knowledge of frontend security best practices (XSS, CSP, sandboxing, OAuth).
How We Work• Tooling: Next.js, React, TypeScript, Tailwind (or equivalent), Vercel, TanStack Query, Testing Library, Playwright, Storybook.
- Quality Process: Automated CI checks (type, lint, tests, a11y), Vercel PR previews, design token documentation.
- AI Culture: We promote AI-assisted workflows (scaffolding, testing, docs) ・・ always with human review, security guardrails, and code quality checks.
What to Include with Your Application• A portfolio or links to shipped work (live sites preferred), including details about your role and UI ownership.
- GitHub or relevant code samples (ideally using React, Next.js, and TypeScript).
- A short note on a UI you significantly improved ・・ what changed, what the impact was (CLS, TTI, conversion), and how you approached it.
If you're excited about crafting great UIs with purpose ・・ and care deeply about performance, accessibility, and code quality ・・ we・・d love to hear from you.