Design Systems Contractor

Position Title: Design Systems Contractor

Location: Islamabad

About the Role:

We are looking for a Design Systems Contractor who thinks of systems before they think of screens. This is not a feature design role — it is a foundational, infrastructure-level design role. The person we are looking for has a deep command of atomic design methodology, understands how well-structured components scale from atoms to full page templates, and knows how to build a design kit that serves multiple product surfaces without fracturing into inconsistency.

The contractor will be responsible for auditing, building, and maintaining the AIO Design Kit across the full product surface portfolio. This means creating a component architecture that is systematic at its foundation and flexible at its surface — one that a designer can extend confidently, and an engineer can implement precisely.

What will be your responsibilities?

Audit the existing AIO Design Kit and produce a structured gap analysis against atomic design principles Rebuild or restructure the component library to reflect a clean atomic hierarchy across all product surfaces Define and implement a complete token and variable system covering all surfaces — color, type, spacing, radius, elevation, and motion Build component logic using Boolean properties, nested variants, and interactive states that accurately represent real product behavior Ensure all components use clean auto layout, behave correctly under dynamic content, and resize predictably in context Write component documentation covering usage rules, variant logic, dos and don'ts, and edge cases

Maintain versioning, deprecation cycles, and change logs for the design kit Collaborate with engineering to validate that token structures and component architectures are implementable Establish naming conventions, file organization standards, and library governance practices Support the product team with kit consultation when new features require new or modified components Conduct periodic live-product audits to identify drift between the design kit and shipped UI Participate in design critiques and design system syncs with the broader product team

What are we looking for and what does it require to be the right fit for this role?

The ideal candidate has a clear mental model of how design systems work at every level of abstraction — from the smallest indivisible element to the largest layout pattern — and the discipline to document and maintain that structure over time. Specifically, we are looking for someone who:

• Thinks in atomic design — understands the hierarchy of atoms, molecules, organisms, layouts, and templates, and builds component libraries that reflect this structure deliberately and legibly.

• Designs for reuse, not one-off use — every component decision is made with its downstream consumers in mind: other designers building features, PMs referencing the kit, and engineers implementing it.

• Treats the design kit as a product in itself — it has users (the product team), it has a backlog, it has a versioning lifecycle, and it degrades if left unmaintained.

• Understands that a design system is only as good as its documentation — component behavior without written guidance is an incomplete component.

DESIGN SYSTEM DEPTH

This role requires hands-on mastery of the full technical stack of modern design systems within Figma. The contractor must be deeply fluent in the following:

Tokens & Variables

• Ability to define and manage a structured token system that covers color (primitive, semantic, and component-level), typography, spacing, border radius, elevation, and motion.

• Proficiency with Figma Variables — creating and managing collections for light/dark modes, brand themes, density variants, and surface-specific overrides without creating library fragmentation.

• Understanding how design tokens map to code-side implementation (e.g., CSS custom properties, JSON token exports), enabling a clean and reliable design-to-development token handoff.

• Ability to scope tokens correctly — knowing when a value should be a global primitive, a semantic alias, or a component-specific token, and why that distinction matters at scale.

Booleans & Component Logic

• Expert use of Figma Boolean properties to control component states, slot visibility, and optional element toggling — so that a single component covers all of its real-world usage scenarios without spawning a sprawl of near-identical variants.

• Building component logic that is intuitive for consumers: properties that are clearly named, grouped logically, and produce predictable visual results without requiring deep system knowledge to use.

• Understanding the relationship between Figma component logic and front-end component props — designing components whose variant architecture maps cleanly to how they will be built in code.

Auto Layout Mastery

• Deep, fluent command of Figma auto layout — including nested auto layout, fill/hug/fixed container behavior, gap handling, padding inheritance, and min/max width constraints.

• Ability to build components that behave correctly under real content conditions: long text, empty states, overflow scenarios, and dynamic content lengths — without manual adjustments.

• Components that resize, reflow, and adapt correctly when dropped into any layout context, removing the need for designers using the kit to fight with positioning and spacing.

• Understanding how auto layout decisions influence the quality and predictability of developer handoff — and structuring components with that downstream impact in mind.

Atomic Design Architecture

• Atoms — the foundational, indivisible elements: color swatches, type styles, spacing units, icon wrappers, border radii, elevation layers. These are the raw materials of the system and must be defined before anything else.

• Molecules — purposeful combinations of atoms that form a discrete UI unit: an input field with a label and helper text, a button with an icon and a label, a badge with a status color. These must be reusable across multiple organism contexts without modification.

• Organisms — complete, self-contained UI sections assembled from molecules and atoms: a navigation bar, a data table, a form panel, a card grid. These represent the level at which designers build page sections.

• Layouts & Templates — the structural scaffolding that defines how organisms are positioned on a screen: grid systems, spacing frameworks, page shells, and surface-specific layout grids for each product context.

• The ability to audit an existing component library against this hierarchy — identify where atoms are being duplicated, where molecules are doing organism-level work, and where missing abstractions are causing inconsistency — and produce a clear remediation plan.

REQUIREMENTS

• 4+ years of experience in design systems work, with a portfolio demonstrating multi-surface or multi-product system architecture

• Demonstrable command of atomic design methodology — able to articulate and apply the atom / molecule / organism / layout hierarchy in a real product context

• Expert-level Figma proficiency: variables, component properties, boolean logic, nested variants, auto layout, and interactive prototyping

• Deep understanding of design token architecture — primitive, semantic, and component-level tokens — and how they enable consistent theming and surface-specific overrides

• Mastery of auto layout at every level of nesting, including edge cases and dynamic content handling

• Strong documentation skills — the ability to write clear, actionable component guidance that a designer or PM can follow without additional explanation

• Experience working across multiple product surfaces within a single design system, managing the tension between surface-specific needs and shared system consistency

Why Join AIO?

Our mission is to revolutionize the US restaurant industry by providing a comprehensive and fully integrated solution that empowers restaurant owners to efficiently manage all aspects of their businesses. Our platform, designed to meet the unique challenges (post COVID-19) faced by restaurants, combines our patented AI technology with unparalleled customer support to help owners increase revenue, reduce costs, and improve their overall profit margins.

We believe that restaurants should be able to focus on delivering exceptional dining experiences to their customers, without the added stress of managing complex and disparate systems. That's why we offer an All-In-One super app platform for all their needs, from front-of-the-house operations like ordering, payment, marketing and rewards, to back-of-the-house management like inventory, staff, and financials.

We are laser focused on becoming a significant player in the $55 billion restaurant tech SaaS market. You will be a part of a world class Silicon Valley funded stealth mode startup.