Design Engineer

Design Engineer (React / Next.js / TypeScript)

Contract-to-Hire | 15–20 hours/week | Remote (U.S)

About the Role

We'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.