Senior Software Engineer, Design Systems (React, Angular, Typescript, Stencil)

ConnectOS; Manila; Hybrid; PHP 600,000 - 900,000; Full time

Benefits offered by this job

Hybrid Work Arrangement

Medical, Dental, Life Insurance

Paid Vacation & Sick Leave

Competitive salary & annual appraisal

Financial Assistance Program

13th Month Pay

Office wellness facilities

Career growth opportunities

Job summary

ConnectOS is seeking a UI Design Engineer to own our code-first design system and its components built with Stencil and TypeScript, with bindings for React and Angular. You will work closely with UX, software engineers, and product teams to ship accessible, high-quality UI at scale.

The role blends design and development, focusing on reusable foundations, tokens, theming, and robust testing. Hybrid work in Metro Manila is offered with strong career growth opportunities.

Qualifications

• Bachelor's Degree in IT or related field.
• 3+ years building and shipping modern web UIs (front-end).
• Strong TypeScript skills and browser fundamentals (semantic HTML, CSS).
• Experience with React and/or Angular frameworks.
• Experience building reusable UI components with automated testing.
• Familiarity with Storybook workflows.
• Excellent collaboration with Designers and Engineers to deliver UI at scale.
• Strong communication skills to explain technical decisions clearly.

Responsibilities

• Build and evolve the design system with TypeScript, Stencil, and Web Components.
• Create and maintain components with React/Angular bindings for product teams.
• Ensure accessibility and performance in real-world usage.
• Document usage guidance and provide onboarding support to engineers.

Skills

TypeScript

React

Angular

Web accessibility

Semantic HTML & CSS

Testing

Storybook workflows

Communication

Collaboration with Designers/Engineers

Education

Bachelor's Degree in IT

Tools

Stencil

Web Components

Job description

Schedule: Monday to Friday (9am to 6pm PHT)

Job Summary

• You'll own our code-first design system of Web Components built with Stencil and TypeScript, with bindings for React and Angular, documented in Storybook, and accessibility baked in.
• We're looking for a talented and passionate UI Design Engineer to join our team and help shape the future of company's Design System across our leading B2B Enterprise SaaS platform.
• This role sits right at the intersection of design and development: you'll build and evolve the foundations, components, and tooling that enable product teams to ship consistent, accessible, high-quality UI - at speed.
• You'll help us close the gap between "what's designed" and "what's built" by creating a design system that scales, is easy to adopt, and stays trustworthy over time.
• You'll work closely with our UX Team, Software Engineers, and other stakeholders to define standards, deliver production-ready components, and support teams to adopt and use the system effectively.

What are we looking for?

• Bachelor's Degree in any IT related courses.
• More than 3 years building and shipping modern web UIs (front-end engineering).
• Strong TypeScript skills and deep understanding of browser fundamentals (semantic HTML, CSS architecture, performance).
• Professional experience with at least one modern framework (React and/or Angular).
• Experience building reusable UI components with automated testing.
• Comfort working in Storybook workflows.
• Demonstrable experience collaborating closely with Designers and Engineers to deliver high-quality UI at scale.
• Strong communication skills: you can explain complex technical decisions clearly and pragmatically.

Nice to have

• Hands-on experience with Stencil and/or Web Components (custom elements, Shadow DOM, slots, events).
• Experience building or growing a design system / pattern library in a multi-team environment.
• Familiarity with design tokens pipelines and bridging design + code workflows (e.g., token management, versioning, syncing changes).
• Tooling/automation experience: CI pipelines, visual regression testing, release/versioning workflows
• Comfort navigating Figma (enough to collaborate effectively with Design).

What will you do?

Build and evolve company's Design System (code-first)

• Develop and maintain a robust, reusable component library (Stencil + Web Components), with first-class TypeScript, and framework integrations for React and Angular.
• Engineer shared foundations: design tokens, theming, typography, spacing, layout primitives, and interaction patterns.
• Ensure components are high-quality in real-world product contexts: resilient APIs, sensible defaults, predictable extensibility, and clear upgrade paths.

Partner with Product & Engineering

• Take components through the full lifecycle: discovery, technical spec/RFC, implementation, testing, documentation, release, adoption, and ongoing maintenance.
• Guide implementation choices and reduce design-to-dev friction.
• Monitor usage and feedback post-launch and continuously improve components for scalability and performance.

Quality, accessibility, and reliability as defaults

• Build inclusive components that meet WCAG/ARIA best practices; bake accessibility into APIs, states, keyboard interactions, and testing.
• Maintain strong automated test coverage (unit/integration/e2e where appropriate) and protect against regressions with component-level tooling.
• Champion high attention to detail.

Documentation & enablement

• Produce clear technical documentation (usage guidance, do/don't, accessibility notes, examples) and keep it current as the system evolves.
• Troubleshoot issues and support product teams adopting the design system; unblock engineers and help teams use the system correctly.
• Represent and champion design-system initiatives with both technical and non-technical audiences
• Help onboard and ramp up engineers on best practices, patterns, and tooling.

Join the awesome team and enjoy these benefits & perks:

• Hybrid Work Arrangement (3x onsite)
• Medical, Dental Coverage and Life insurance from day 1 of employment
• Paid Vacation and Sick Leave (with Quarterly Sick Leave Conversion)
• Competitive salary package and annual appraisal
• Financial Assistance Program
• Mandatory Government Benefits and 13th Month Pay
• Complimentary Sleeping Quarters, Coffee at no cost
• Complimentary Office Fitness and Wellness Facilities at no cost
• Regular Company Events, Work Life Balance, and Career growth opportunities
• Accessible location at the heart of Metro Manila --- the Mega Tower, EDSA

ConnectOS is certified as a Great Place to Work and is a top-rated Philippines employer of choice.

#ConnectOSCareers #JoinConnectOS #ConnectOSTech

Equal Employment Statement
Employment decisions at ConnectOS will be conducted without consideration of factors such as age', race, color, religion, gender, disability status, sexual orientation, gender identity or expression, genetic information, and marital status. ConnectOS ensures the full confidentiality of the data it processes.