Frontend Architect

Role: Front-End Architect – UI Developer (Design System)

Experience: 8 Years

Employment Type: Permanent

Location: Sydney

Role Overview

The Front-End Architect (UI Developer) will build and maintain a scalable, multi-brand, token-driven design system for enterprise applications. This role owns the technical architecture, component engineering, Storybook documentation, and design-to-code alignment to ensure product teams can ship consistent UI faster with less rework.

Key Responsibilities

• Define the front-end architecture for a scalable design system (repository structure, build, versioning, release workflow).
• Implement a token-driven theming system for multi-brand support (e.g., primitive/semantic tokens mapped to CSS variables and runtime themes).
• Build and maintain a reusable component library (React-based) aligned with approved design standards and accessibility needs.
• Engineer complex enterprise components (e.g., data tables, form systems, navigation, layouts) with scalable patterns, variants, and states.
• Set up and own Storybook as the primary developer documentation hub (stories, controls, MDX/autodocs, usage examples).
• Ensure strong design ↔ code alignment through regular reviews with designers and by preventing token/component drift.
• Implement WCAG-aligned accessibility in components (keyboard navigation, ARIA, focus management, semantics).
• Improve performance and scalability (bundle size, tree-shaking, virtualization for large lists/tables, responsive behavior).
• Establish and maintain governance on the engineering side (contribution guidelines, PR standards, review checklist, deprecation strategy).
• Support adoption by product teams (integration guidance, onboarding, troubleshooting, migration support).

Essential Requirements

• Strong portfolio of work ([PKR1] [MS2] GitHub/Bitbucket links, internal project evidence, or case examples) demonstrating component library/design system development.

Must-Have Skills / Experience

• Proven experience building an enterprise-grade design system or component library (from scratch or major re-architecture).
• Strong expertise in React and modern front-end development (TypeScript preferred).
• Deep understanding of design tokens and token pipelines:
• primitive → semantic/alias → contextual mapping
• implementation via CSS variables and theme switching
• Strong proficiency with Tailwind CSS (or equivalent utility-first approach) and scalable styling strategies.
• Hands-on expertise with Storybook:
• configuration, controls, MDX/autodocs, theming, add-ons
• Strong accessibility knowledge:
• WCAG concepts, ARIA patterns, keyboard interaction, focus management
• Experience building complex UI components:
• tables (sorting, filtering, selection, inline editing, virtualization), form builders, layouts, navigation systems
• Strong engineering practices:
• Git workflows, PR reviews, code standards, linting/formatting, testing practices
• Familiarity with packaging and release:
• npm packages, semantic versioning, changelogs, release automation
• Ability to work closely with designers and convert design intent into production-ready code.

Good-to-Have Skills

• Visual regression testing setup (Chromatic or equivalent).
• Unit/integration testing for UI components (Jest, React Testing Library, Playwright/Cypress).
• Monorepo experience (Nx, Turborepo) and CI/CD pipelines for libraries.
• Experience with documentation platforms (Zeroheight) and linking design docs to dev docs.
• Experience with multi-theme brand systems in large organisations.

Tools / Tech Stack (Expected)

• React, TypeScript, Tailwind CSS (or equivalent), Storybook
• GitHub/GitLab/Bitbucket, npm/yarn/pnpm
• CI/CD pipeline tools, linting (ESLint), formatting (Prettier)
• Accessibility tooling (axe, Storybook a11y add-on, Lighthouse)