Overview

Arcade is a professionally crafted design system for product design and development teams and individuals. We provide you with core components you would need for every product, focusing on accessibility, scalable component customization and development experience.

As creators of Arcade, we leverage our broad experience of working on design systems and consulting other companies on the topic. We're investing a lot into experimentation with practices that you won't find in other systems yet and that you will see among industry standards in a few years from now.

Inside the package you will find an NPM React package and a Figma library with UI components and utilities.

Key focus areas

Core components

Arcade revolves around the components that you're already familiar with. You can find them used in most of the products around the web and our goal is to make your experience using them as simple as it can get. We take care of all the implementation requirements as accessibility, handling RTL, dark mode and more while you can focus on building the product.

Composition and theming

We don't make assumptions about how your product works and looks. Instead we produce highly-composable atomic pieces of the UI that are easy to compose together based on your product needs. We handle all the layout edge cases for you automatically so combining components becomes as easy as dropping them one into another.

Arcade has a flexible yet easy to use theming approach. We provide you with design tokens like colors or typography values, that you can change based on your brand. Any theme you create will keep the interface working on all viewports and support dark mode out of the box.

Long-term maintenance

We understand that our components can serve as foundation for your own design system so we always think long-term. There is a clear release strategy with guidelines and scripts for easier migrations. Every time new functionality is added – we're making sure it's future-proof and can be scaled further if needed.

At the same time we're huge believers in browser native technologies. We're keeping as few runtime dependencies as possible for avoid getting your product on the libraries you don't need.

  • Runtime peer dependencies: React, ReactDOM
  • Build time dependencies: PostCSS, CSS Modules, Typescript (optional)

Right abstraction

We believe that the future of design system lies in between headless and styled component libraries. While headless libraries allow complete customization, all layout and styling challenges stay out of their scope. On the other hand, styled component libraries usually come with a lot of opinions that might not work for your product.

We're balancing in the middle with a number of headless components as well as incredibly flexible styled components. We don't make product decisions for you but we let you make those decisions faster.