Your design system
is already built

React
Figma coming soon
Arcade is a professionally crafted design system for high‑quality product development. Get started by checking our video demo or browsing the library documentation.
14 day money-back guarantee
Created by Dmitry Belyaev
Dmitry Belyaev
Amsterdam’s largest park is located mostly in Amstelveen and has a lot to offer. You’ll find a number of attractions in its vast area including the Bosbaan, a rowing course that has hosted the World Rowing Championship twice.
Amsterdam park

Focus on the product

Every time we start working on a new product, we have to setup a million of things before we can even start working on UI. Arcade is your tool to skip that step.

  • RTL support
  • Theming engine
  • Dark mode
  • Translations support
  • Semantic colors
  • Typography
  • Unit design tokens
  • Iconography
  • Layout utilities
  • Responsive component properties
  • Components documentation
  • Theming documentation
  • Screenshot testing
  • Unit testing
  • Accessibility testing
  • Focus ring management
  • Focus trapping
  • Scoped theming
  • Server-side rendering
  • Optimised bundle size
  • Styling approach
  • Components composition
  • Components customisation
  • Release strategy
  • Figma components design
  • Figma auto-layout support
  • Figma variants
  • Typescript support
  • Cross-browser support
  • Framework integrations
  • Design and code alignment
  • Keyboard navigation
  • Screen-reader support
Dmitriy Kovalenko
Lead Software Engineer, ex-Material UI

Arcade is an extremely helpful design system that gives a superpower to not think about the implementation details when building a product. I absolutely love how Arcade helps to solve light/dark theming and RTL. You literally don't think about anything except the UI when building.

Your brand is our default

Arcade has an incredibly flexible theming engine and lands easily on your brand. No more component detaching or style overrides.

Max Trusov
Lead Front-end Developer, Mail.ru

What I like about Arcade is its incredible attention to details. Quality of the code I found in the package, setup for the complex components and focus on accessibility immediately got me excited about the project.

All-inclusive experience

Arcade covers everything required for shipping modern interfaces and supports you at every stage of product development process.

Core components and tokens

Arcade ships more than 40 flexible components to help you save time on UI development. We use our 10+ years of design systems expertise to make component APIs simple yet powerful.

Good deal
2

Documentation

It has not happened, if it’s not documented. We have a thorough technical documentation, best-practices and guidelines.

Type-safety

Everything you import from Arcade is written in Typescript. Your code editor will help before you even open the documentation.

Accessibility

Accessibility is not a buzz word for us, but a responsibility to provide equal opportunity for everyone. We test our components for all aspects of it, starting from color contrast ratios and up to the screen reader navigation.

List view, selected, tab, 1 of 2

Theming CLI and dark mode

Arcade includes a NodeJS command-line interface to create custom themes using the same theming engine as we use internally. All themes support dark mode on the tokens level with no component styles customisation required.

Free updates

Arcade is a one-time purchase, with no recurring subscription. Purchasing it once will give you access to all future updates for free.

Get your design system

One-time payment for the whole system and its future updates

$79

Core library

  • Individual license
  • 40+ flexible components
  • Theming engine
  • Lifetime access
  • Free updates
  • Prioritized support on Github
Working as a team?  

Frequently asked questions

    • Which dependencies does Arcade have?

      In Arcade we're aiming to keep the number of dependencies to the bare minimum. Our only runtime dependencies are React and ReactDOM. We get more into the detail of what we use and out general approach to the development in .
    • Which browsers does Arcade support?

      Arcade is built using the features from the latest stable releases of all major browsers including Chrome, Firefox, Safari and Edge. Arcade doesn't support Internet Explorer 11.
    • What do free updates include?

      We're constantly working on adding new components, as well as improving our already implemented components. All these changes will be available to you for free.

      We're planning to release more packages and tooling around the system sold separately, however all the related changes within the core library are considered to be free updates.
    • What release strategy does Arcade follow?

      We care a lot about keeping your products migration to the new versions as seamless as possible. All regular releases we make are well tested and are built to be backwards compatible. We aim for one major release per year which may contain breaking changes and includes a clear migration guide.
    • What does prioritized support mean?

      We accept tickets from anyone, no matter if you have a license a not. However, we prioritize tickets created by our customers and are opened for changes required for your product as long as they're compatible with our development strategy and other users requirements.
    • How do I purchase a team license?

      When working in a growing team, we don't want you to keep spending money and time on purchasing new licenses. Instead, we're providing an option to buy a team license for $349.

    • Can I apply custom brand styles to Arcade components?

      Arcade already has a theming engine and we're actively working on exposing scripts and tooling for creating custom themes for your product. However, you can already create custom themes by editing the code manually. Check our  for more information.
    • What kind of projects can I use Arcade for?

      You can use Arcade for commercial and non-commercial products, no matter if that's something you build for yourself or for a client. Arcade can be used for open-source projects.
    • What are the Arcade usage restrictions?

      You can't use Arcade for redistributing our components and assets as a different package. This includes design systems, component libraries or tools that are providing access to Arcade package assets without purchasing an Arcade license.

      You can find more information about this in our license and setup examples.
    • What is your refund policy?

      If you are unhappy with your purchase for any reason, send us an email within 14 days and we will refund you in full.
© 2020-2021 Arcade Design. All rights reserved.
Roadmap