Arcane Design System

  • 2022 - 2025
  • Synaps & Anima
  • Collaboration Front/ Design team
  • Atomic design methodology
  • Documentation

Scalability - Reusability - Accessibility

The Arcane Design System serves as the single source of truth for all Synaps products. Designed as a "system of systems," it provides a scalable framework that connects multiple products and subsystems under a unified umbrella.

Foundations

At the core of every design system, Foundations defines the essential building blocks: colors, typography styles, spacing, guidelines, variables. By maintaining a consistent and coherent identity, Foundations ensures uniformity across all Synaps products.

Web

Inheriting its structure from Foundations, the Web design system includes: variables, variants, properties, …
This design system is made of components used for each of our products existing on web platforms. Under the "Web" design system, we'll find "local design system" made for a specific product.

Versioning

Versioning is an important feature that help the design team to keep track of all changes made to a project. It allow the team to see what were the decisions that were made to a project/component and enables us to revert to it if we ever need.

Rituals - Design critique

The design team develops new components and updates existing ones. Every modification undergoes a thorough team review, either through design critiques or should be posted on Campsite, before receiving approval for implementation.

Monitoring and team collaboration

Our design system is built to evolve with our products. Acknowledging the challenges of tracking component changes, we've spent months refining our synchronization processes. The goal is to ensure seamless collaboration between the design and front-end teams, with variables from Figma serving as the single source of truth. We're also working toward automating the sync between Figma and the front end to streamline implementation and maintain consistency.