Company: Vercel
Remote: No
Posted: 2026-03-16
Status: new
Apply: https://vercel.com/careers/design-engineer-us-5709080004
Design Engineer((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f?.[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","zeit-theme","system",null,["light","dark"],{"light":"light-theme","dark":"dark-theme"},true,true)
// Protect Geist code blocks from 1Password DOM flattening
(function() {
const codeBlockSnapshots = new WeakMap();
let isRestoring = false;
function saveSnapshot(codeElement) {
if (!codeBlockSnapshots.has(codeElement)) {
codeBlockSnapshots.set(codeElement, codeElement.cloneNode(true));
}
}
function checkAndRestore(codeElement) {
if (isRestoring) return;
// Check if our specific structure was flattened
const hasOurStructure = codeElement.querySelector('[data-geist-code-block-line]');
const snapshot = codeBlockSnapshots.get(codeElement);
if (!hasOurStructure && snapshot && snapshot.querySelector('[data-geist-code-block-line]')) {
// Our structure was destroyed (likely by 1Password), restore it
isRestoring = true;
codeElement.innerHTML = snapshot.innerHTML;
isRestoring = false;
}
}
function initializeCodeBlocks() {
document.querySelectorAll('code[data-geist-code-block]').forEach(saveSnapshot);
}
// Single global observer for all code blocks
const globalObserver = new MutationObserver(function(mutations) {
if (isRestoring) return;
mutations.forEach(function(mutation) {
// Check if new code blocks were added
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.matches && node.matches('code[data-geist-code-block]')) {
saveSnapshot(node);
} else if (node.querySelectorAll) {
node.querySelectorAll('code[data-geist-code-block]').forEach(saveSnapshot);
}
}
});
// Check if existing code blocks were modified
var target = mutation.target;
if (target.nodeType === 1) {
// Check if the target itself is a protected code block
if (target.matches && target.matches('code[data-geist-code-block]')) {
checkAndRestore(target);
}
// Check if the target contains protected code blocks
else if (target.closest && target.closest('code[data-geist-code-block]')) {
checkAndRestore(target.closest('code[data-geist-code-block]'));
}
}
});
});
// Initialize existing code blocks and start observing
function init() {
initializeCodeBlocks();
globalObserver.observe(document.documentElement, {
childList: true,
subtree: true,
characterData: true
});
}
// Run immediately and after DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
(({protect:a})=>{function b(a){return new Promise((b,c)=>{if(document.querySelector(`script[src="${a}"]`))return void b();let d=document.createElement("script");d.src=a,d.async=!0,d.onload=()=>b(),d.onerror=a=>{console.error("Error loading script",a),c(a)},document.head.appendChild(d)})}var c=class a{#a;#b;#c=0;constructor(){let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,this.#e(),window.addEventListener("online",this.#f),window.addEventListener("visibilitychange",this.#f)}getChallenge=async()=>(await this.#g(),await this.#a.then(a=>"function"==typeof a?a():a));#f=()=>{if(document.hidden)return;let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,window.V_C=[],window.V_C.push=c;let d=document.querySelector('script[src*="c.js"]');d&&d.remove(),this.#c+=1};#e=()=>{if(window.V_C){let a=window.V_C.pop();a&&this.#b(a)}else window.V_C=[],window.V_C.push=this.#b};#g=()=>{let a=new URL("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/a-4-a/c.js",window.location.origin);return a.searchParams.set("i",String(this.#c)),a.searchParams.set("v",String(3)),a.searchParams.set("h",window.location.host),b(a.pathname+a.search)};#h=()=>{window.V_C=void 0};static #d(){let a,b;return{promise:new Promise((c,d)=>{a=c,b=d}),resolve:a,reject:b}}},d=class a{#a=!1;#b;constructor(a){this.#b=a}get loaded(){return this.#a}load=async()=>{this.#a||await this.#f()};#c=()=>{if(typeof globalThis.window>"u")throw Error("KPSDK is not available in the server");if(!window.KPSDK)throw Error("KPSDK is not loaded");let b=this.#b.map(b=>{let c=a.#e(b.path);return{domain:c.host,path:c.pathname,method:b.method}});try{window.KPSDK.configure(b)}catch(a){console.error("Error configuring KPSDK...",a)}};#f=async()=>{let a=this;return new Promise((c,d)=>{let e=()=>{document.removeEventListener("kpsdk-load",e),this.#c()},f=()=>{document.removeEventListener("kpsdk-ready",f),a.#a=!0,c()};document.addEventListener("kpsdk-load",e,{once:!0}),document.addEventListener("kpsdk-ready",f,{once:!0}),b("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/p.js").catch(a=>{document.removeEventListener("kpsdk-load",e),document.removeEventListener("kpsdk-ready",f),d(a)})})};static #e(a){let b;try{b=new URL(a)}catch{b=new URL(a,location.origin)}return b}},e=a=>{let b=a.replace(/[.?+^$[\]\\(){}|-]/g,"\\$&").split("*").join(".*");return RegExp(`^${b}$`)},f=({path:a,pattern:b})=>-1!==a.search(b);async function g(a,b,c){let d=XMLHttpRequest.prototype.open,g=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(a,b,c,e,f){return this._requestUrl=b.toString(),this._requestMethod=a,d.call(this,a,b,c??!0,e,f)},XMLHttpRequest.prototype.send=async function(d){let h=this._requestUrl;if(!h||this._isReexecution)return g.call(this,d);let i=new URL(h,location.href),j=this._requestMethod??"GET",k=c.find(a=>{let b=f({path:i.pathname,pattern:e(a.path)}),c=a.method===j||"*"===a.method;return b&&c});if(!k)return g.call(this,d);let l=await a.getChallenge();if(this.setRequestHeader("x-is-human",JSON.stringify(l)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",j),0!==l.b||b.loaded||((1===l.d||k?.advancedOptions?.checkLevel==="deepAnalysis")&&await b.load(),!b.loaded))return g.call(this,d);this.setRequestHeader("x-is-human",JSON.stringify(l)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",j);let m=new XMLHttpRequest;return m._isReexecution=!0,m.open(j,h,!0),m.setRequestHeader("x-is-human",JSON.stringify(l)),m.setRequestHeader("x-path",i.pathname),m.setRequestHeader("x-method",j),this.timeout&&(m.timeout=this.timeout),this.responseType&&(m.responseType=this.responseType),this.withCredentials&&(m.withCredentials=this.withCredentials),m.onreadystatechange=()=>{Object.defineProperty(this,"readyState",{value:m.readyState,writable:!0,configurable:!0}),m.readyState===XMLHttpRequest.DONE&&(Object.defineProperty(this,"status",{value:m.status,writable:!0,configurable:!0}),Object.defineProperty(this,"statusText",{value:m.statusText,writable:!0,configurable:!0}),Object.defineProperty(this,"response",{value:m.response,writable:!0,configurable:!0}),Object.defineProperty(this,"responseText",{value:m.responseText,writable:!0,configurable:!0}),Object.defineProperty(this,"responseXML",{value:m.responseXML,writable:!0,configurable:!0}),this.getAllResponseHeaders=()=>m.getAllResponseHeaders(),this.getResponseHeader=a=>m.getResponseHeader(a)),this.onreadystatechange&&this.onreadystatechange.call(this,new Event("readystatechange"))},m.onload=a=>{this.onload&&this.onload.call(this,a)},m.onerror=a=>{this.onerror&&this.onerror.call(this,a)},m.onabort=a=>{this.onabort&&this.onabort.call(this,a)},m.ontimeout=a=>{this.ontimeout&&this.ontimeout.call(this,a)},m.onloadstart=a=>{this.onloadstart&&this.onloadstart.call(this,a)},m.onloadend=a=>{this.onloadend&&this.onloadend.call(this,a)},m.onprogress=a=>{this.onprogress&&this.onprogress.call(this,a)},m.send(d)}}!function({protect:a=[]}){let b;for(let b of a)if(b.advancedOptions?.checkLevel!==void 0&&"deepAnalysis"!==b.advancedOptions.checkLevel&&"basic"!==b.advancedOptions.checkLevel)throw Error(`Invalid checkLevel "${b.advancedOptions.checkLevel}" for route "${b.path}". Must be one of: deepAnalysis, basic`);let h=new c,i=new d(a);g(h,i,a).catch(a=>{console.error("Error patching XMLHttpRequest:",a)}),b=window.fetch,window.fetch=async(c,d)=>{let g=new URL(c instanceof Request?c.url:c,location.href),j=g.origin===location.origin,k=d?.method??(c instanceof Request?c.method:"GET"),l=a.find(a=>{let b=f({path:g.pathname,pattern:e(a.path)}),c=a.method===k||"*"===a.method;return b&&c});if(null==l||!j)return b(c,d);let m=await h.getChallenge(),n=new Headers(d?.headers||(c instanceof Request?c.headers:void 0));n.set("x-is-human",JSON.stringify(m)),n.set("x-path",g.pathname),n.set("x-method",k);let o={...d,headers:n};return i.loaded||0!==m.b?b(c,o):1===m.d||l?.advancedOptions?.checkLevel==="deepAnalysis"?(await i.load(),window.fetch(c,o)):b(c,o)}}({protect:a})})({ protect: [{"path":"/api/solution-partners/contact-solution-partner","method":"POST"},{"path":"/api/report-abuse","method":"POST"},{"path":"/api/appeals","method":"POST"},{"path":"/api/ai/gateway-playground/chat/logged-out","method":"POST"}] });ProductsAI Cloudv0Build applications with AIAI SDKThe AI Toolkit for TypeScript
AI GatewayOne endpoint, all your modelsVercel AgentAn agent that knows your stackSandboxAI workflows in live environmentsCore PlatformCI/CDHelping teams ship 6× fasterContent DeliveryFast, scalable, and reliableFluid ComputeServers, in serverless formObservabilityTrace every stepSecurityBot ManagementScalable bot protectionBotIDInvisible CAPTCHAPlatform SecurityDDoS Protection, Firewall
Web Application FirewallGranular, custom protectionResourcesCompanyCustomersTrusted by the best teamsBlogThe latest posts and changesChangelogSee what shippedPressRead the latest newsEventsJoin us at an eventLearnDocsVercel documentationAcademyLinear courses to level upKnowledge BaseFind help quicklyCommunityJoin the conversationOpen Source
Next.jsThe native Next.js platformNuxtThe progressive web framework
SvelteThe web’s efficient UI framework
TurborepoSpeed with Enterprise scaleSolutionsUse Cases
AI AppsDeploy at the speed of AIComposable CommercePower storefronts that convertMarketing SitesLaunch campaigns fastMulti-tenant PlatformsScale apps with one codebaseWeb AppsShip features, not infrastructureToolsMarketplaceExtend and automate workflowsTemplatesJumpstart app developmentPartner FinderGet help from solution partnersUsersPlatform EngineersAutomate away repetition
Design EngineersDeploy for every ideaEnterprisePricing
@media (max-width: 1150px) {
#header-content { display: none; }
}
@media (min-width: 1151px) {
#mobile-menu-toggle { display: none; }
}
DesignUnited StatesFull TimeDesign EngineerCareers /DesignDesignUnited StatesFull TimeAbout Vercel:Vercel gives developers the tools and cloud infrastructure to build, scale, and secure a faster, more personalized web. As the team behind v0, Next.js, and AI SDK, Vercel helps customers like Ramp, Supreme, PayPal, and Under Armour build for the AI-native web. Our mission is to enable the world to ship the best products. That starts with creating a place where everyone can do their best work. Whether you're building on our platform, supporting our customers, or shaping our story: You can just ship things.About the Role:The design team at Vercel is comprised of capable and considerate humans working to solve challenges that are unique, complex, and nuanced—just like the web. Vercel is looking for an experienced individual to join the Design Engineering team at Senior or Staff level. The Design Engineering team is responsible for the highest level of polish, creativity and interaction on Vercel.You will work across the logged out experience of Vercel,shaping the future of Vercel.com, events, and marketing surfaces that introduce the world to Vercel. You'll work on design initiatives and create thoughtful, innovative, systems-based solutions for top-of-funnel experiences, working closely with design, marketing, sales, GTM, Analytics, product design, and engineering.Designers at Vercel have broad creative license, and the freedom to create and lead new, design-driven projects. If you are someone who gets excited about the possibility of creative development, uncovering insights to drive conversion, improving user experience, experimenting, and personalizing, then this might be the right role for you.If you’re based within a pre-determined commuting distance of one of our offices (SF, NY, London, or Berlin), the role includes in-office anchor days on Monday, Tuesday, and Friday. If you're located beyond that distance, the role is fully remote. For location-specific details, please connect with our recruiting team.What You Will Do:Report to our Director of Design Engineering and help Vercel strengthen its acquisition surfaces by driving design leadership and engineering excellence on vercel.com, events, and related experiences.Contribute to the design process by gathering requirements, planning and ideating from the start of a project, and shaping modular systems for repeatable marketing and growth use cases.Demonstrate an understanding of the development workflow, CMS and analytics integrations (Payload, Rudderstack, Clearbit, Sequel.io, etc.), and how to streamline processes with cross-functional partners.Work with designers, marketers, and engineers to collaborate on ideation and ensure high-quality, performant implementations across campaigns and pages.Help lead the technical roadmap for acquisition surfaces, championing iterative improvements to browser performance, accessibility, Core Web Vitals, and SEO.Provide design systems feedback and iteration to help empower the entire company with a first-class, consistent web experience.Advocate for and mentor other design engineers, sharing best practices in frontend craft, animation, experimentation, and performance.Help grow the team and elevate design and engineering within the company.About You:Depth and quality of your experience is more important than years. That said, successful candidates typically have at least 5+ years of development experience.Strong programming skills, experience with application development, and excellent troubleshooting skills.Excellent written and verbal communication skills with a keen eye for detail.Excellent understanding of Next.js and Vercel, CMS platforms like Payload (or Contentful), analytics platforms like Amplitude or Heap, and design tools like Figma.Familiarity with growth experimentation, SEO principles, and marketing/brand campaigns.Skills and understanding on graphic design (layout, typography, color, illustration).Perfectionism with the experience (polish, readability, accessibility, performance).Experience working in or with Software as a Service (SaaS) companies.You have closely collaborated with folks from marketing and design in previous roles.Benefits:Competitive compensation package, including equity.Inclusive Healthcare Package.Learn and Grow - we provide mentorship and send you to events that help you build your network and skills.Flexible Time Off.We will provide you the gear you need to do your role, and a WFH budget for you to outfit your space as needed.The San Francisco, CA base pay range for this role is $196,000-$294,000. Actual salary will be based on job-related skills, experience, and location. Compensation outside of San Francisco may be adjusted based on employee location. The total compensation package may include benefits, equity-based compensation, and eligibility for a company bonus or variable pay program depending on the role. Your recruiter can share more details during the hiring process. Vercel is committed to fostering and empowering an inclusive community within our organization. We do not discriminate on the basis of race, religion, color, gender expression or identity, sexual orientation, national origin, citizenship, age, marital status, veteran status, disability status, or any other characteristic protected by law. Vercel encourages everyone to apply for our available positions, even if they don't necessarily check every box on the job description.Apply for RoleApply Now.Tell us why you’d be a good fit for the Design Engineer role.First NameLast NameEmail AddressPhone NumberResumeUpload your resumeResume should be a PDF under 3.5MB.Are you currently based in any of these countries? Please note these are the only countries where we are accepting applicationsUnited StatesGermanyUnited KingdomArgentinaAustraliaCanadaIndiaJapanOtherWill you require Visa Sponsorship now, or in the future?YesNoYour authorization to work in the country where you live. Please choose the option that describes your work authorization.
I am authorized to work in the country due to my nationalityI am authorized to work in the country based on a valid work permit and do not need a company to sponsor my visaI am authorized to work in the country based on a valid work permit which needs to be sponsored by the company I work forI am not authorized to work in the country and need visa supportOtherDo you live in one of the following states?
Alabama, Alaska, Delaware, Kansas, Maine, Mississippi, Montana, Nebraska, New Mexico, North Dakota, South Dakota, West Virginia, or Wyoming.YesNoBy submitting my application, I acknowledge that I have read and understand Vercel’s Job Applicant Privacy Notice Acknowledge/ConfirmPlease double-check all the information provided above. Ensuring accuracy is crucial, as any errors or omissions may impact the review of your application.I have reviewed and confirmed that all the information provided is accurate and complete.U.S. Standard Demographic Questions.At Vercel, we value belonging and believe in fostering an environment where a diversity of perspectives can thrive. As part of this commitment, we invite you to voluntarily provide demographic information. Your responses will be used (in aggregate only) to help us better understand the diversity of our applicants and identify areas of improvement in our recruitment and hiring process. Your responses, or decision not to respond, will be kept confidential and will only be used in aggregate form for diversity and inclusion efforts. This information will not be associated with your specific application and will not be disclosed to the hiring team or used in the hiring decision in any way.Individuals seeking employment are considered without regard to race, color, religion, national origin, age, sex, marital status, ancestry, physical or mental disability, veteran status, or sexual orientation. Asking the below questions help us comply with federal and state Equal Employment Opportunity/Affirmative Action record keeping, reporting, and other legal requirements.How would you describe your gender identity? (mark all that apply)ManNon-binaryWomanI prefer to self-describeI don't wish to answerHow would you describe your racial/ethnic background? (mark all that apply)Black or of African descentEast AsianHispanic, Latinx or of Spanish OriginIndigenous, American Indian or Alaska NativeMiddle Eastern or North AfricanNative Hawaiian or Pacific IslanderSouth AsianSoutheast AsianWhite or EuropeanI prefer to self-describeI don't wish to answerHow would you describe your sexual orientation? (mark all that apply)AsexualBisexual and/or pansexualGayHeterosexualLesbianQueerI prefer