Senior Software Engineer, Design Systems (UK, SaaS, Hybrid)

ConnectOS; Mandaluyong; Hybrid; PHP 700,000 - 1,100,000; Full time

Benefits offered by this job

Hybrid work arrangement

Medical & dental cover

Life insurance

Paid vacation & sick leave

Annual appraisal

Career growth opportunities

Office wellness facilities

Regular company events

Job summary

ConnectOS in Metro Manila is seeking a UI Design Engineer to advance our code-first Design System. You will build and evolve a reusable component library (Stencil + Web Components) with first-class TypeScript and integrations for React and Angular.

Collaborate with UX and Engineering to define standards, deliver production-ready components, and enable product teams to adopt the system quickly. Hybrid onsite role with strong growth opportunities and benefits.

Qualifications

• Bachelor's Degree in IT-related fields.
• 3+ years building modern web UIs.
• Strong TypeScript skills and browser fundamentals.
• Experience with React and/or Angular.
• Experience building reusable UI components with automated testing.
• Familiarity with Storybook workflows.
• Collaboration with Designers and Engineers to deliver UI at scale.
• Strong communication and decision-explanation skills.

Responsibilities

• Build and evolve the code-first Design System (Stencil + Web Components) with TypeScript and framework integrations for React and Angular.
• Engineer shared foundations: design tokens, theming, typography, spacing, layout primitives, and interaction patterns.
• Ensure components are production-ready with resilient APIs, sensible defaults, and clear upgrade paths.
• Partner with Product & Engineering to guide implementation, reduce design-to-dev friction, and support adoption.
• Maintain accessibility as a default and ensure strong automated test coverage.

Skills

TypeScript

React

Angular

Web accessibility

Design systems

Collaboration

Education

Bachelor's degree in IT related fields

Tools

Stencil

Web Components

Storybook

Testing frameworks

Job description

Schedule: Monday to Friday (11am to 8pm PHT)

• 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.