Design systems / Enterprise design system and React components
Carbon Design System
IBM’s design-system foundation for coherent product interfaces, with guidance that explains when a component earns its place.
Understand the resource
What it is.
Carbon combines IBM’s visual language with component guidance, implementation packages and interactive examples. It is particularly relevant to products with dense information and repeated interactions across many screens. The documentation is useful even before adoption because it gives teams a shared vocabulary for behavior, structure and exceptions.
When it is useful
Use it when several teams need compatible tables, forms, navigation and disclosure patterns in an enterprise product. It can also serve as a review reference when a custom component has attractive styling but unclear keyboard behavior.
A proposed application
Put it to work.
This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.
Try this
Build a settings page where optional deployment details live in an accordion while the required save action remains visible. Start with Carbon’s disclosure behavior, name each section by its contents, and test opening and closing it with Enter and Space before adding application-specific styles.
Result to aim for
A consistent disclosure pattern with visible state, keyboard operation and essential information available without guessing which panel to open.
Before you start
What you need.
- A compatible application stack for the selected Carbon package; the sampled implementation was React.
- Time to map product needs to tokens, components and content guidance.
- Application-level accessibility and regression tests after customization.
The practical boundaries
What to watch for.
- An accordion hides content. Keep instructions that everyone must read and critical errors visible instead of compressing the whole page by default.
- A successful React demo is not proof that a customized application preserves the same semantics, focus behavior or contrast.
- Current documentation discusses several libraries and future work. Pin the package and API you actually adopt rather than mixing examples from different versions.
- Review dependencies and component changes as part of the application’s normal maintenance process; the design-system name is not a security guarantee.
Review record
What we could establish.
- Why included — 2026-10-19: Carbon is IBM’s design system, and its official repository had 9,562 stars and 2,293 forks in the GitHub API snapshot. The accordion guidance was marked updated 9 September 2026; these are authority, adoption and maintenance signals, not a measured growth ranking.
- One public React accordion demo was exercised with Enter and Space. No package was installed, and no claim is made about all Carbon components or a particular application.
The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.
Check current access, terms, licensing and data handling before using a resource with your own material.
Runtime and security evaluation
What the evaluation covers.
A public React accordion opened with Enter and closed with Space while its expanded state and visible content stayed aligned. This covers one default demo in one browser.
Methods: Public HTTP response · Public browser sample · Source review. A completed check covers the stated sample; it is not a safety certification.
- Target
- https://react.carbondesignsystem.com/iframe.html?id=components-accordion--default&globals=theme:white
- Version or capture
- Unversioned public hosted page sampled on 2026-10-19; no installed package version attested.
- Integrity scope
- Recorded document SHA-256 c18b96285d72f81918cf621af9d4c597ea3a7ddd7ca194c2283d785ef5e0102a. This is the HTML response only, not an integrity guarantee for scripts, dependencies or the whole service.
Test conditions
- Fresh anonymous Chromium 155.0.8059.82 context on Windows; 1365 × 900 viewport; reduced motion requested.
- GET and HEAD only; non-GET methods and WebSockets blocked. No owner browser session, account, credentials, private fixtures, uploads or purchases.
- Only the named public controls and synthetic values were used. Screenshots and compact request observations were retained as review evidence.
Individual checks and observations
Public document response
passPublic HTTP response: Navigate to the recorded public target in a fresh anonymous browser.
Observed: The sampled document returned HTTP 200 over HTTPS. Its response body SHA-256 was c18b96285d72f81918cf621af9d4c597ea3a7ddd7ca194c2283d785ef5e0102a; this fingerprints only the recorded HTML response.
Accordion keyboard operation
passPublic browser sample: Focus the first button in the public default React accordion; press Enter, then Space.
Observed: The “Choose your plan” button changed aria-expanded false → true → false. Its supporting content appeared and disappeared, and focus remained on the button.
Primary-source scope review
passSource review: Read the official pages and relevant repository or standard references linked below.
Observed: Reviewed IBM’s design-system overview, the dated accordion guidance and the official repository metadata. No package or installed dependency graph was evaluated.
Broader workflow and assurance coverage
not-runPublic browser sample: Keep authenticated, installation, private-data and broader accessibility workflows outside this bounded pass.
Observed: No package installation, full Storybook sweep, screen-reader test, employee login or application data flow was performed.
Security findings and boundaries
Passive observation of the sampled public pages, response headers and request destinations, plus the specific documented boundaries below. No intrusive scanning or security certification.
Observed · info
Isolated demo request surface
The standalone accordion sample requested only react.carbondesignsystem.com. No non-GET request, HTTP error or page error was observed during its toggle. The main documentation site has a different request surface.
Practical advice · caution
Disclosure is not authorization
Collapsing a panel hides presentation; it must not be used to protect information the current user is not allowed to receive. Apply authorization before rendering or returning sensitive content.
Practical advice · caution
Review the installed implementation
The public Storybook sample does not establish the security of your dependency versions, custom handlers or server data. Pin and review the components you ship.
Practical caveats
- Keep essential instructions and blocking errors discoverable outside optional collapsed sections.
- After styling or adding content, retest state, focus, long labels and keyboard operation in the integrated page.
What remains untested
- No package installation, full Storybook sweep, screen-reader test, employee login or application data flow was performed.
- One browser, one viewport and a short observation window; no cross-browser, assistive-technology or complete accessibility audit.
- Proposed use-case examples in this review were not implemented as a production workflow.
Security limits
- No backend, authenticated authorization, session isolation, vulnerability exploitation, dependency scan or account-data retention assessment was performed.
- The GET/HEAD-only guard can change hosted behavior; blocked background traffic is reported rather than treated as a product defect. Request observations are a bounded sample, not proof of all data handling.
Evaluation sources
Follow the evidence
Sources and further reading.
Keep exploring
More in design systems.
Documentation reviewed
Refero Styles
Turn a visual reference into a starting system an agent can read.
Documentation reviewed
Fudge
Bring references, website feedback and design work into a conversational workspace.
Documentation reviewed
DesignMD
Inspect a website’s visual system before drafting new screens.