Design System

As a Design System Designer, you’ll shape the visual and interaction framework that the

entire product ecosystem stands on. You’ll build components, patterns, tokens, and

structural guidelines that help teams move quickly, confidently, and consistently all while

ensuring the product looks and feels exceptional.

This role is perfect for someone who loves systems, clarity, reusability, visual precision, and

the intersection of design and engineering.

You’ll collaborate closely with designers and frontend teams to ensure every component

feels refined, scalable, and ready for real-world use.

What You’ll Do

Design Tokens & Foundations

• Create and maintain design tokens that define the product’s visual DNA - colour, spacing, typography, motion, shadows, states, and themes.
• Ensure tokens remain flexible for AI-driven behaviours, dark mode, adaptive surfaces, and future expansions.
• Document token logic clearly so designers and engineers can use them effortlessly.

Component Library & UI Patterns

• Build a robust component library with components that are accessible, scalable, and production ready.
• Define UI patterns (navigation, inputs, feedback states, AI responses, suggestion modules, cards, lists, generative outputs).
• Ensure components work seamlessly across platforms and device types.
• Audit, refine, and maintain quality across all existing and upcoming components.

Design-Engineering Collaboration

• Work closely with frontend engineers to ensure components are implemented thoughtfully and accurately.
• Collaborate using vibe-coding / design-to-code workflows where your understanding of the frontend helps guide component structure and interaction details.
• Align with engineering on naming conventions, token mapping, component APIs, and interaction states.
• Participate in deep product discussions: feasibility, performance, fallback behaviour, accessibility, and usage constraints.

Tech Stack & Frontend Awareness

• Understand how design translates into frontend technologies such as React, HTML/CSS architecture, tokens in code, state logic, and responsive behaviour.
• Provide input on how components should behave in real data scenarios and how they adapt to dynamic AI outputs.
• Work with the engineering team to evolve the design system into a cohesive UI framework, not just a visual library.

System Thinking & Documentation

• Document components in a way that is not only clear, but inspiring - guidelines that people want to follow.
• Maintain versioning, governance, and adoption practices to keep the system healthy and consistent.
• Continuously evaluate usability, redundancy, and system gaps.

What You Bring

• Strong experience with Figma, component architecture, auto-layout, variants, and token-based design principles.
• A passion for systems thinking consistent patterns, scalable rules, and clean structure.
• Understanding of frontend fundamentals - React components, CSS/SCSS/Vite/ grid systems, breakpoints, and state behaviour.
• Confidence collaborating with engineers and speaking the language of implementation.
• A refined eye for UI quality: alignment, pacing, density, accessibility, visual harmony.
• Curiosity for emerging tools and workflows (AI-assisted component generation,automated tokens, vibe-coding tools, design-to-code technologies).

Bonus Experience (not required, but wonderful to have)

• Experience maintaining or contributing to a large-scale design system.
• Knowledge of motion, micro-interactions, and how they fit into scalable components.
• Exposure to LLM-powered or AI-first products, adaptive UI states, or dynamic feedback patterns.