Design Systems Engineer (6-Month Contract)

📍 Job Overview

Job Title: Design Systems Engineer (6-Month Contract)

Company: Viventium Software

Location: United States (On-site)

Job Type: Contract

Category: Front-End Engineering / Design Systems

Date Posted: June 03, 2026

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

Remote Status: On-site

🚀 Role Summary

• This role is focused on a forensic audit and remediation of existing front-end components, rather than greenfield development.

• The primary goal is to establish a reliable, accessible, and documented component library based on the current codebase.

• You will collaborate closely with engineering and design teams to create a unified source of truth for UI components.

• This contract position requires deep expertise in Angular, Storybook, and web accessibility standards.

📝 Enhancement Note: While the job title is "Design Systems Engineer," the description clearly indicates a focus on auditing, documenting, and remediating existing components, a "forensic and remediation role," rather than building a design system from scratch. The role requires a strong understanding of how to work with and improve existing codebases to align with design system principles.

📈 Primary Responsibilities

• Conduct a thorough forensic audit of the existing product codebase to identify, catalog, and document all front-end components.

• Evaluate and extend a partial Storybook setup, ensuring it meets current standards (Storybook 8+, CSF3) and covers primitives (buttons, inputs, modals, navigation, data display) with full variant, state, and accessibility coverage.

• Develop a comprehensive component audit document, detailing duplication clusters, prop/API patterns, and a severity-ranked list of accessibility findings.

• Create a consolidation proposal recommending canonical components, deprecated elements, and the reference set for the design team's Figma library rebuild.

• Identify and flag accessibility issues within the shipped code, providing clear guidance for remediation.

• Collaborate daily with the existing tech lead (engineering collaborator) and the design team (primary consumer of output).

• Upgrade and reconfigure the inherited Storybook setup to current best practices and standards.

• Ensure all component stories in Storybook achieve full variant, state, and accessibility coverage.

📝 Enhancement Note: The core responsibilities emphasize "forensic and remediation" work, meaning the candidate will be digging into existing code, identifying issues, and proposing solutions, rather than designing new components from scratch. This requires strong analytical and problem-solving skills within a front-end development context.

🎓 Skills & Qualifications

Education:

• No specific degree is mandated, but a strong portfolio demonstrating equivalent knowledge and experience in front-end development and design systems is essential. Experience:

• Minimum 5-10 years of professional front-end development experience.

• Substantive prior experience on a design system or internal platform/tooling team, having contributed to or owned such initiatives.

• Proven experience in codebase discovery and component auditing.

• Demonstrated ability to identify and remediate complex accessibility failures. Required Skills:

• Angular: Strong current Angular experience (Angular 16+, including standalone components, signals, and modern control flow syntax) is non-negotiable.

• Storybook: Deep familiarity with Storybook's Angular framework (Storybook 8+, CSF3), including authoring patterns, controls, and test integrations.

• Chromatic: Proficiency in using Chromatic for hosting and managing Storybook instances.

• CSS & Front-end Fundamentals: Robust understanding of CSS, responsive design, theming, typographic systems, and motion.

• Accessibility: In-depth knowledge of web accessibility standards (WCAG), ARIA patterns, focus management, and screen reader behavior. This is a critical area for this role.

• Component API Design: Excellent taste and product sense in designing intuitive and effective component APIs, including prop naming and variant structure.

• Codebase Archaeology: Comfort and proficiency in reading unfamiliar codebases and understanding component semantics solely from code.

• AI-Assisted Engineering: Working comfort with tools like Cursor, Claude Code, Copilot, treating AI as a powerful tool with awareness of its limitations, especially in Angular.

• Technical Documentation: Ability to document components clearly and honestly within Storybook and in separate audit documents.

Preferred Skills:

• Experience working closely with design teams, including pairing and co-owning component decisions.

• Experience with consolidation or migration projects, transforming sprawling codebases into a canonical state.

• Prior experience inheriting and upgrading existing Storybook setups, modernizing configurations and addons.

• Familiarity with headless or accessibility-primitive libraries in Angular (e.g., Angular CDK, Spartan/ng, ng-primitives, Shoelace) and articulated views on their application.

• Contributions to open-source design system or developer tooling projects.

• Experience writing public-facing component documentation for diverse audiences (designers, PMs, engineers).

📝 Enhancement Note: The emphasis on Angular 16+ and Storybook 8+ indicates a need for a candidate who is up-to-date with the latest front-end technologies and best practices. The "forensic" nature of the role strongly implies that candidates with experience in code audits, legacy system analysis, and remediation will be highly valued.

📊 Process & Systems Portfolio Requirements

Portfolio Essentials:

• A demonstrable history of contributions to design systems, internal component libraries, or platform tooling.

• Case studies showcasing the audit, documentation, and remediation of existing UI components.

• Examples of well-designed component APIs with clear explanations of design decisions.

• Evidence of work on accessibility improvements within component libraries.

• Projects that highlight collaboration with design and engineering teams.

• Demonstrations of Storybook implementation, including advanced configurations and testing. Process Documentation:

• Ability to document component findings, including duplication, prop patterns, and accessibility issues, in a structured and actionable format.

• Experience creating proposals for component consolidation and standardization.

• Proficiency in documenting component usage and best practices within Storybook.

• Capacity to translate complex technical findings into clear recommendations for design and engineering stakeholders.

📝 Enhancement Note: Given this is a contract role focused on auditing and remediation, the portfolio should heavily emphasize the candidate's ability to analyze existing systems, identify problems (especially technical debt and accessibility issues), and propose practical solutions. Case studies detailing "before and after" scenarios for component libraries or feature improvements would be highly beneficial.

💵 Compensation & Benefits

Salary Range:

• Based on the provided AI data, the estimated salary range is $75 - $80 per hour.

• Methodology: This estimate is derived from the AI's interpretation of the role's seniority (Mid-Senior Level, 5-10 years experience), the contract nature of the position, and the highly specialized technical requirements (Angular 16+, Storybook 8+, advanced accessibility, design systems experience). Given the on-site requirement in the US and the specific skill set, this range reflects market rates for contract front-end engineers with design systems expertise. Regional cost of living and specific company compensation bands would influence the final offer.

Benefits:

• As a 6-month contract role, standard benefits like health insurance, retirement plans, and paid time off may not be fully comprehensive or may differ from full-time employee benefits.

• Potential benefits could include:

  • Competitive hourly rate.

  • Opportunity to work on a critical project impacting product consistency and user experience.

  • Exposure to Viventium Software's development processes and team.

  • Potential for contract extension or future opportunities based on performance. Working Hours:

• Standard full-time work week, estimated at 40 hours per week.

• The role is on-site, implying a typical office schedule, but flexibility may be available and should be discussed during the interview process.

📝 Enhancement Note: The salary range is an estimate based on AI analysis. Actual compensation will depend on Viventium Software's specific budget, the candidate's experience, and negotiation. Benefits for contract roles often differ significantly from full-time positions; candidates should inquire directly about the benefits package.

🎯 Team & Company Context

🏢 Company Culture

Industry: Software (specifically, HR technology/Payroll/Benefits Software). Viventium Software provides HR and payroll solutions for businesses. This context means the operations of the product – its UI stability, consistency, and user experience – directly impact client satisfaction and retention.

Company Size: While not explicitly stated in the provided data, Viventium is a growing SaaS company. Roles within such companies often involve a mix of established processes and opportunities to influence new ones. For operations professionals, this can mean working within defined structures while also having the potential to drive improvements.

Founded: Viventium was founded in 2009. This history suggests a company that has evolved beyond a startup phase, likely possessing more mature operational processes while still maintaining a dynamic environment.

Team Structure:

• The role involves close collaboration with two key partners:

  • Tech Lead: An existing engineering collaborator who is invested in the design system direction. This suggests a supportive engineering environment for this initiative.
  • Design Team: The primary consumers and daily partners for this role. This indicates a strong emphasis on design-engineering alignment.

• The candidate will likely be part of a broader engineering or product development team, with the design system work being a critical sub-function within that larger group. Methodology:

• Data Analysis & Insights: The role necessitates deep code analysis and component auditing to derive insights into the current state of the UI.

• Workflow Planning & Optimization: A core part of the job is proposing and driving the optimization of component usage through consolidation and standardization.

• Automation & Efficiency: Utilizing Storybook and potentially AI tools to streamline documentation and component discovery is key.

Company Website: viventium.com

📝 Enhancement Note: Understanding Viventium's industry (HR tech) helps frame the importance of a consistent and accessible user interface, as it directly impacts business clients. The company's age (founded 2009) suggests a level of maturity in its operations and development processes.

📈 Career & Growth Analysis

Operations Career Level: This role is positioned at a mid-to-senior level, specifically for an engineer with specialized expertise in design systems and front-end architecture. It's not a typical "operations" role in the RevOps/SalesOps sense, but rather a specialized engineering function focused on the operational efficiency and consistency of the front-end codebase.

Reporting Structure: The candidate will report to an engineering manager or tech lead. They will work very closely with the design team, suggesting a highly collaborative, cross-functional reporting matrix.

Operations Impact: The impact of this role is significant for product development efficiency and user experience. By creating a unified, accessible component library, this role will:

• Reduce duplicated development effort by engineers.

• Increase UI consistency across the product, improving user trust and adoption.

• Enhance product accessibility, broadening the user base and ensuring compliance.

• Provide a clear, code-driven foundation for the design team's Figma library, streamlining the design-to-development handoff. Growth Opportunities:

• Skill Specialization: Deepen expertise in Angular, advanced Storybook configurations, and complex accessibility remediation.

• Cross-Functional Leadership: Gain experience in bridging the gap between design and engineering, influencing product architecture from a component perspective.

• Project Ownership: Lead a critical, time-bound project that has direct visibility and impact on the product.

• Potential for Extension: Successful completion of the 6-month contract could lead to extensions or opportunities within Viventium's core engineering teams, especially if the company decides to formalize its design system efforts further.

📝 Enhancement Note: While the job title is "Design Systems Engineer," it's crucial to frame its "operations" impact in terms of front-end development efficiency, consistency, and user experience. The growth opportunities are primarily within specialized front-end engineering and design system architecture.

🌐 Work Environment

Office Type: On-site. This implies a traditional office setting where collaboration and interaction with colleagues happen in person.

Office Location(s): The specific office location within the US is not detailed in the provided data. However, the presence of "America/Chicago" timezone suggests potential operations within that region, but the general "United States" designation means the candidate should confirm the exact site.

Workspace Context:

• Collaborative Environment: The emphasis on close collaboration with a tech lead and the design team suggests a dynamic and interactive workspace.

• Tools & Technology: The engineer will have access to Viventium's development tools and infrastructure, including their codebase, version control (likely Git), and the necessary software for Angular development and Storybook.

• Team Interaction: Daily interaction with engineers and designers will be a key aspect of the work, fostering a shared understanding of component standards and product goals.

Work Schedule: The role is a full-time contract (40 hours/week). While on-site, there might be some flexibility in daily start/end times, but this is typically determined by company policy and team needs. The focus will be on delivering the project milestones within the 6-month timeframe.

📝 Enhancement Note: The "on-site" requirement is a key differentiator. Candidates should be prepared for a traditional office environment and confirm the specific location and any hybrid work policies if they exist, although the primary description leans towards full on-site presence.

📄 Application & Portfolio Review Process

Interview Process:

1. Initial Screening: A review of your resume and portfolio to assess alignment with the technical requirements (Angular, Storybook, accessibility, design systems).

2. Technical Interview(s): In-depth discussions focusing on your Angular expertise, Storybook implementation experience, approach to accessibility, and how you've handled similar design system audit/remediation projects. Expect to discuss specific code examples and architectural decisions.

3. Portfolio Review: A dedicated session where you will walk through selected projects from your portfolio. This is where you'll demonstrate your "codebase archaeology" skills, your process for auditing and documenting components, and your proposed solutions for consolidation. Be prepared to discuss the API design of components you've worked on.

4. Collaboration/Cultural Fit Interview: Discussions with the hiring manager, tech lead, and potentially design team members to assess your collaboration style, problem-solving approach, and how you'd integrate into their team.

5. Final Offer: Based on the performance across all interview stages.

Portfolio Review Tips:

• Highlight "Forensic" Work: Showcase projects where you've analyzed existing codebases, identified issues (especially duplication and accessibility), and implemented improvements.

• Storybook Showcase: Present well-structured Storybook examples, demonstrating comprehensive coverage of variants, states, and accessibility features. Explain your configuration and any challenges you overcame.

• Accessibility Deep Dive: Be ready to explain WCAG guidelines, ARIA patterns, and how you've proactively addressed accessibility in your work. This is a critical requirement.

• API Design Rationale: For any components you've designed or significantly contributed to, be prepared to articulate the reasoning behind prop names, structures, and exposed APIs.

• Collaboration Evidence: If possible, show examples of how you've worked with designers or other engineers, perhaps through process documentation or shared project outcomes.

• Conciseness: Focus on the most relevant projects and be prepared to discuss them in detail, but avoid overwhelming the interviewers with too much information. Tailor your presentation to the role's specific needs.

Challenge Preparation:

• Code Audit Simulation: You might be asked to analyze a small code snippet or a hypothetical component library scenario and identify potential issues or areas for improvement.

• Accessibility Audit Scenario: Be ready to discuss how you would approach auditing a set of components for accessibility compliance.

• Storybook Configuration: Questions might arise about how to configure Storybook for complex Angular projects or integrate specific addons.

• Consolidation Strategy: Prepare to articulate a high-level strategy for consolidating a fragmented component library.

📝 Enhancement Note: The portfolio review is likely to be a crucial stage. Candidates should prepare specific examples that directly address the "forensic and remediation" aspect of the role, demonstrating their ability to analyze, document, and improve existing code and component libraries, with a strong emphasis on accessibility.

🛠 Tools & Technology Stack

Primary Tools:

• Angular: The core framework for front-end development (specifically Angular 16+).

• Storybook: The primary tool for component development, documentation, and testing.

• Chromatic: Used for hosting and managing Storybook instances, essential for collaboration and review.

• CSS: Deep understanding required for styling, theming, and responsive design.

• TypeScript: Standard for modern Angular development.

Analytics & Reporting:

• Storybook's Controls Addon: For interactive component property exploration.

• Accessibility Testing Tools: Such as Axe, Lighthouse, or built-in browser developer tools for auditing.

• Potentially: Internal company dashboards or reporting tools, though not explicitly mentioned for this role's core function.

CRM & Automation:

• Not directly applicable to the core responsibilities of this engineering role, as it's focused on front-end component development and documentation.

• AI-assisted Engineering Tools: Cursor, Claude Code, Copilot, or similar for boilerplate generation and code assistance.

📝 Enhancement Note: The technical stack is heavily focused on the Angular ecosystem and design system tooling. Proficiency in Storybook and a deep understanding of its Angular integration are paramount. Awareness of AI coding assistants is also a requirement.

👥 Team Culture & Values

Operations Values:

• Accuracy & Honesty: In documenting what truly exists in the codebase, rather than what should exist.

• Collaboration: Working closely with design and engineering to achieve a shared understanding and unified output.

• User-Centricity: Prioritizing accessibility and a consistent user experience in all component decisions.

• Efficiency & Optimization: Driving improvements that reduce technical debt and streamline development.

• Technical Excellence: Upholding high standards in code quality, component API design, and accessibility implementation.

Collaboration Style:

• Partnership-Oriented: Working as a close partner with both the tech lead and the design team.

• Transparent Communication: Clearly articulating findings from code audits and proposals for consolidation.

• Iterative Refinement: Willingness to refine documentation, component APIs, and proposals based on feedback.

• Problem-Solving Focus: A proactive approach to identifying and solving complex technical challenges.

📝 Enhancement Note: The culture emphasizes a balance between deep technical work and strong cross-functional collaboration. Honesty in reporting the state of the codebase is critical for the "forensic" nature of the role.

⚡ Challenges & Growth Opportunities

Challenges:

• Codebase Archaeology: Navigating and understanding an unfamiliar, potentially large and complex, existing codebase to identify component patterns and inconsistencies.

• Consolidation Complexity: The "hardest part of the job" is often consolidating disparate components into a canonical set, requiring strong negotiation and decision-making skills.

• Balancing Design Intent with Code Reality: Reconciling existing code limitations with desired design system standards.

• Accessibility Remediation: Identifying and guiding the fixes for accessibility issues, which can be intricate and time-consuming.

• Contract Duration: Working within a 6-month timeframe to deliver significant project outcomes.

Learning & Development Opportunities:

• Deep Dive into Design Systems: Gain hands-on experience in a critical phase of design system maturity: audit, remediation, and consolidation.

• Advanced Angular & Storybook: Further hone skills in modern Angular features and advanced Storybook configurations.

• Cross-Functional Expertise: Develop stronger skills in collaborating with and influencing design teams.

• Accessibility Specialization: Become an expert in identifying and resolving complex web accessibility issues.

• Project Management: Practice managing a discrete, impactful project within a set timeframe.

📝 Enhancement Note: The role presents significant challenges, particularly in dealing with existing technical debt and legacy code. Embracing these challenges is key to growth, as they offer unique learning experiences not found in greenfield projects.

💡 Interview Preparation

Strategy Questions:

• "Describe a time you had to audit a large, unfamiliar codebase to identify components. What was your process, and what were your key findings?"

• "Walk me through a component you designed. What were the trade-offs in its API design (prop naming, structure, etc.)?"

• "How would you approach documenting the existing component library for a product where no formal design system exists?"

• "What are the most common accessibility pitfalls you see in front-end code, and how do you address them?"

• "Describe a situation where you had to advocate for a specific component consolidation or deprecation. How did you approach it?" Company & Culture Questions:

• "What interests you about this specific contract role at Viventium Software, given its focus on remediation?"

• "How do you typically collaborate with designers and engineers on component-related projects?"

• "How do you stay up-to-date with the latest Angular and Storybook best practices?"

• "What are your expectations regarding working on-site in our office?" Portfolio Presentation Strategy:

• Structure: Organize your portfolio presentation logically, perhaps starting with the problem, your approach, the tools used (Storybook, etc.), your findings (audit documents), your proposed solutions (consolidation memos), and the impact.

• Show, Don't Just Tell: Use live demos or screenshots of your Storybook implementations, audit documents, and any code examples that highlight your skills.

• Focus on Process: Emphasize your methodology for auditing code, identifying issues, and documenting findings.

• Highlight Accessibility: Dedicate a clear section to your accessibility work, explaining specific WCAG guidelines you followed or issues you resolved.

• Tell a Story: For each project, frame it as a narrative: the challenge, your actions, and the results. Quantify impact where possible (e.g., "reduced component duplication by X%," "identified Y critical accessibility issues").

📝 Enhancement Note: Be prepared to discuss the "forensic" aspects of your experience in detail. Candidates should anticipate questions that probe their ability to analyze existing systems, identify technical debt, and propose practical, actionable solutions within a defined timeframe.

📌 Application Steps

To apply for this operations position:

• Submit your application through the provided link on recruit.hirebridge.com.

• Tailor your resume to highlight specific experience with Angular, Storybook, accessibility standards (WCAG, ARIA), and past work on design systems or component libraries, especially any "codebase archaeology" or remediation projects.

• Prepare your portfolio to showcase relevant projects. Focus on demonstrating your ability to audit, document, and improve existing component code. Be ready to present case studies of design system contributions, emphasizing accessibility and API design.

• Research Viventium Software to understand their product and market. Consider how a robust, accessible design system would benefit their clients and their internal development efficiency.

• Craft a cover letter (if applicable) or be prepared to articulate in your initial interactions why your specific skills in Angular, Storybook, and accessibility remediation make you the ideal candidate for this 6-month contract.

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