lucky.graphics

Decision tool · 7 reviewed systems

Choose a design system your team can actually ship.

Match the system to the product, implementation stack, and hardest requirement. The visual style comes later. A good shortlist reduces custom work without forcing the product into another company's constraints.

Build your shortlist

Original fit model

Scores product context, implementation fit, and the priority most likely to change the decision.

Trade-offs included

Every result shows where the system fits and what must be checked before adoption.

License layers separated

Code licenses do not automatically cover fonts, icons, design files, guideline text, or trademarks.

Design-system fit selector

A shortlist, not an automatic decision

Scores reflect product fit, implementation fit, and the selected priority. They do not measure visual taste or replace a prototype.

Your shortlist

1

Ant Design

Fit score 9/9

First to test

A broad React component library for business applications, with strong coverage for forms, tables, navigation, and operational interfaces.

Strongest when

A React team must ship a feature-dense internal or B2B interface quickly.

Check before adopting

The default visual language is recognizable, and deep brand changes need token discipline rather than scattered CSS overrides.

License boundary

Core packages are MIT-licensed; brand assets and third-party ecosystem packages require their own checks.

2

IBM Carbon

Fit score 9/9

An enterprise system for dense product surfaces, with React and web-component implementations plus a matching chart library.

Strongest when

The product contains tables, filters, notifications, operational workflows, or data visualization.

Check before adopting

Its formal visual language and broad package surface can be more system than a small consumer product needs.

License boundary

The core code is Apache 2.0; verify the terms of any companion brand assets separately.

3

GitHub Primer

Fit score 7/9

GitHub's product system for developer-facing interfaces, with a mature React implementation and a practical token foundation.

Strongest when

The audience is technical and the interface needs repositories, settings, navigation, or code-adjacent workflows.

Check before adopting

A product can look GitHub-like quickly unless typography, color, shape, and density are rethemed as a system.

License boundary

Core packages are open source; GitHub trademarks and brand assets are not granted by the component license.

Original comparison asset

The seven-system decision matrix.

This table separates a finished visual system from a behavior foundation. That distinction explains why two strong systems can produce opposite recommendations for the same React team.

SystemImplementationBest fitLicense boundaryPrimary caution
Material Design 3Jetpack Compose, Flutter, and Material WebAndroid or Flutter is a primary surface and a recognizable platform-native interaction model is useful.Code packages use open-source licenses; guidelines, design files, and Google brand assets have separate terms.Material Web is narrower than the full guideline library, and its official repository states that it is in maintenance mode pending new maintainers. Treat web adoption as a higher-maintenance choice.
IBM CarbonReact, web components, Sass tokens, and Carbon ChartsThe product contains tables, filters, notifications, operational workflows, or data visualization.The core code is Apache 2.0; verify the terms of any companion brand assets separately.Its formal visual language and broad package surface can be more system than a small consumer product needs.
Shopify PolarisCurrent web components for Shopify app surfacesThe product is a Shopify app and should behave like the admin environment around it.Use is tied to products that integrate or interoperate with Shopify; this is not a general-purpose kit for unrelated products.Choosing Polaris for a non-Shopify product removes the platform benefit and can conflict with its use terms.
GitHub PrimerPrimer React, CSS, Octicons, and design tokensThe audience is technical and the interface needs repositories, settings, navigation, or code-adjacent workflows.Core packages are open source; GitHub trademarks and brand assets are not granted by the component license.A product can look GitHub-like quickly unless typography, color, shape, and density are rethemed as a system.
U.S. Web Design SystemHTML, Sass, JavaScript, design tokens, and documented patternsThe service must prioritize clarity, accessibility, forms, public trust, and low-assumption interaction patterns.Code is broadly reusable, but government seals, logos, and agency marks are not general-purpose brand assets.Its visual default signals government service; unrelated brands need a careful token and typography layer rather than cosmetic overrides.
Radix PrimitivesUnstyled React primitivesA React team wants accessible interaction foundations without inheriting another company's finished visual language.MIT-licensed packages; the product team remains responsible for its own visual assets, content, and final accessibility testing.It is a component foundation, not a complete design system; tokens, visual states, documentation, and governance still need to be designed.
Ant DesignReact components, tokens, icons, and charts ecosystemA React team must ship a feature-dense internal or B2B interface quickly.Core packages are MIT-licensed; brand assets and third-party ecosystem packages require their own checks.The default visual language is recognizable, and deep brand changes need token discipline rather than scattered CSS overrides.

How the selector works

A fit score, not a quality ranking.

Each system receives zero to three points for the selected product context, zero to three for implementation fit, and zero to three for the priority. A score of eight does not mean the system is objectively better than one scoring six. It means the documented characteristics align more closely with those three inputs. Changing one input can and should reorder the shortlist.

Product context carries practical constraints. A Shopify embedded app benefits from matching the host admin, so Polaris receives a strong context score there and almost none for an unrelated product. A public-service site values clear forms, accessible defaults, and familiar interaction patterns, which raises USWDS. A distinctive React product gets more value from Radix because the behavior is supplied without a finished brand skin.

Stack fit asks whether the system has a maintained, first-party path for the technology that will ship. Guidelines alone are not implementation. A beautiful Figma library does not remove the engineering cost of missing components, framework adapters, focus behavior, or release maintenance. Treat a community port as a separate dependency with its own maintainer and release risk.

The priority breaks otherwise close decisions. Ant Design rises when speed and dense business workflows matter. Carbon rises when data and system breadth matter. Radix rises when brand control and accessible interaction foundations matter. The score deliberately does not include visual taste because a prototype is a better test of visual fit than a numerical preference.

Two-week evaluation plan

Test the hardest flow, not the prettiest screen.

  1. 01

    Choose one representative flow

    Use a flow with validation, loading, empty, error, permission, and responsive states. A settings form or data table is more revealing than a marketing hero.

  2. 02

    Build it with the top two candidates

    Keep the content and requirements identical. Record which components ship, which need composition, and which require custom behavior.

  3. 03

    Theme a small token set

    Change color, type, radius, density, and focus treatment through the intended token API. Count every override that escapes the token layer.

  4. 04

    Test keyboard and screen readers

    Verify focus order, visible focus, dialog containment, labels, errors, announcements, and zoom. Component claims do not cover your final composition.

  5. 05

    Measure the delivered cost

    Compare package weight, CSS output, runtime behavior, build complexity, and the number of dependencies added to the critical path.

  6. 06

    Write an exit note

    Document what would trigger a migration: missing components, maintenance slowdown, licensing changes, framework changes, or a brand ceiling.

Adoption criteria

Six questions the demo cannot answer.

Coverage

List the components, states, and patterns the real roadmap needs. A system with 50 components can still miss the one workflow that dominates the product.

Composition

Test how primitives combine. Accessibility often breaks between components: popovers inside dialogs, validation inside dynamic forms, or menus inside virtualized tables.

Theming

Confirm that tokens control the properties the brand needs to change. Repeated selector overrides are a warning that upgrades will become expensive.

Maintenance

Read recent releases, migration notes, deprecations, and issue activity. A stable library can release slowly; an abandoned library cannot explain its direction.

Licensing

Read the exact package license and the separate terms for icons, fonts, templates, documentation, and trademarks. Do not treat one repository license as permission for every asset shown in the docs.

Ownership

Name who approves tokens, components, exceptions, and migrations. An adopted library without internal ownership becomes inconsistent as soon as the first product deadline arrives.

Sources and limits

Read the official system before you adopt it.

The comparison uses each project's official documentation and the license notes recorded in the linked Lucky Graphics reviews. Official documentation links were checked November 6, 2026. Package coverage, maintainers, terms, and recommended implementations can change. Recheck the current documentation and the exact package license before a production decision.

The selector does not inspect a codebase, team skills, roadmap, procurement rules, or accessibility test results. It cannot tell whether a visual language fits a brand. Its job is to produce a smaller, explainable shortlist and a repeatable test plan.

Common questions

Before the team commits.

What is the best design system for React?+

There is no universal winner. Carbon and Ant Design offer broad, finished component coverage for enterprise React products. Primer fits developer-facing products. Radix is the stronger starting point when a team needs accessible behavior but wants to design its own visual language. The selector changes the order based on context and priority.

Should a startup build a design system from scratch?+

Usually not at the beginning. A startup needs consistent decisions, not a large internal platform. Start with tokens, a small component set, and an existing behavior layer. Build custom components only where the product has a real interaction or brand requirement that the foundation cannot meet.

Can I copy components from a public design system?+

Only when the applicable license allows it. Code, icons, fonts, Figma libraries, guideline text, and brand assets may use different terms. Read the license for the exact package or file you plan to use. The reviewed entries linked from this page separate those layers where the source does.

Does using an accessible design system make the product accessible?+

No. A system can provide accessible component behavior, focus management, and documented patterns, but the product team still controls labels, heading order, color pairings, content, error messages, keyboard flows, and how components are composed.

How long should a design-system evaluation take?+

We recommend setting a two-week evaluation window rather than letting the comparison stay open-ended. Build the same representative flow with the strongest two candidates, test keyboard and screen-reader behavior, measure the shipped bundle, theme a small token set, and record every component that still needs custom work.

Continue the decision

Turn the shortlist into a system.