https://www.carbondesignsystem.com/

{
  "url": "https://www.carbondesignsystem.com/",
  "timestamp": 1791363344209,
  "fetch": {
    "mode": "simple",
    "timeMs": 515,
    "htmlSizeBytes": 214758,
    "supportsMarkdown": false,
    "markdownAgents": {
      "contentNegotiation": false,
      "mdUrl": {
        "found": false,
        "url": null
      },
      "linkTag": {
        "found": false,
        "url": null
      },
      "linkHeader": {
        "found": false,
        "url": null
      },
      "responseHeaders": {
        "contentSignal": null,
        "xMarkdownTokens": null,
        "vary": null
      },
      "frontmatter": {
        "present": false,
        "fields": [],
        "level": "none"
      },
      "level": "none"
    },
    "statusCode": 200
  },
  "extraction": {
    "title": "Home | Carbon Design System",
    "excerpt": "Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.",
    "byline": null,
    "siteName": "Carbon Design System",
    "lang": "en",
    "contentLength": 1297,
    "metadata": {
      "description": "Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.",
      "ogTitle": "Home | Carbon Design System",
      "ogDescription": "Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.",
      "ogImage": "https://www.carbondesignsystem.com/ogimage.png",
      "ogType": "website",
      "canonical": null,
      "lang": "en",
      "schemas": [],
      "robotsMeta": null,
      "author": null,
      "generator": null,
      "markdownAlternateHref": null
    }
  },
  "markdown": "## Let’s make together\n\nCarbon is IBM’s enterprise-ready, open-source design system, shaped by the IBM Design Language. Get started, and make with us.\n\n## Carbon MCP\n\nConnect AI applications directly to the design system with real-time access to components, tokens, icons, guidance, and code. Generate more consistent, Carbon-compliant experiences with accurate knowledge and best practices.\n\n[Learn about Carbon MCP](https://www.carbondesignsystem.com/getting-started/carbon-mcp/overview)\n\nBuilding blocks\n\nPre-built, reusable assets that enable teams to build consistent digital experiences faster.\n\n[Foundations](https://www.carbondesignsystem.com/building-blocks/foundations/2x-grid)[Components](https://www.carbondesignsystem.com/building-blocks/core/components/overview)[Patterns](https://www.carbondesignsystem.com/building-blocks/core/patterns/overview)[Data visualization](https://www.carbondesignsystem.com/building-blocks/data-visualization/overview)\n\n## Building experiences\n\nThe Universal Experiences framework shapes user experiences across IBM through key moments and journeys. It provides guidance for onboarding, learning, adoption, and growth, helping teams create connected experiences that deliver value at every stage.\n\n[Explore Universal Experiences](https://www.carbondesignsystem.com/building-experiences/overview)\n\nAI\n\nScalable chat, agent, and automation experiences that align with Carbon’s standards.\n\n[Carbon for AI](https://www.carbondesignsystem.com/building-blocks/foundations/carbon-for-ai)[Carbon MCP](https://www.carbondesignsystem.com/getting-started/carbon-mcp/overview)\n\n## The next evolution of Carbon\n\nDiscover the next major evolution of Carbon’s visual direction. Explore the ideas, experiments, and early decisions shaping Carbon v12 and the future of the Design System.\n\n[Follow v12 progress](https://www.carbondesignsystem.com/carbon-next)\n\nContributing\n\nCarbon thrives because it is built by the community, for the community. Help us build it even stronger.\n",
  "fullPageMarkdown": "Home | Carbon Design System\n\n[Carbon Design System](https://www.carbondesignsystem.com/)\n\nSearchEmployee loginLogin\n\n# Let’s maketogetherLet’s make together\n\nCarbon is IBM’s enterprise-ready, open-source design system, shaped by the IBM Design Language. Get started, and make with us.\n\n[\n\nStart designing\n\n](https://www.carbondesignsystem.com/getting-started/designing/overview)[\n\nStart developing\n\n](https://www.carbondesignsystem.com/getting-started/developing/overview)\n\n## Carbon MCP\n\nConnect AI applications directly to the design system with real-time access to components, tokens, icons, guidance, and code. Generate more consistent, Carbon-compliant experiences with accurate knowledge and best practices.\n\n[Learn about Carbon MCP](https://www.carbondesignsystem.com/getting-started/carbon-mcp/overview)\n\nBuilding blocks\n\nPre-built, reusable assets that enable teams to build consistent digital experiences faster.\n\n[Foundations](https://www.carbondesignsystem.com/building-blocks/foundations/2x-grid)[Components](https://www.carbondesignsystem.com/building-blocks/core/components/overview)[Patterns](https://www.carbondesignsystem.com/building-blocks/core/patterns/overview)[Data visualization](https://www.carbondesignsystem.com/building-blocks/data-visualization/overview)\n\n## Building experiences\n\nThe Universal Experiences framework shapes user experiences across IBM through key moments and journeys. It provides guidance for onboarding, learning, adoption, and growth, helping teams create connected experiences that deliver value at every stage.\n\n[Explore Universal Experiences](https://www.carbondesignsystem.com/building-experiences/overview)\n\nAI\n\nScalable chat, agent, and automation experiences that align with Carbon’s standards.\n\n[Carbon for AI](https://www.carbondesignsystem.com/building-blocks/foundations/carbon-for-ai)[Carbon MCP](https://www.carbondesignsystem.com/getting-started/carbon-mcp/overview)\n\n## The next evolution of Carbon\n\nDiscover the next major evolution of Carbon’s visual direction. Explore the ideas, experiments, and early decisions shaping Carbon v12 and the future of the Design System.\n\n[Follow v12 progress](https://www.carbondesignsystem.com/carbon-next)\n\nContributing\n\nCarbon thrives because it is built by the community, for the community. Help us build it even stronger.\n\n[Learn how you can contribute](https://www.carbondesignsystem.com/getting-started/contributing/overview)\n",
  "markdownStats": {
    "images": 0,
    "links": 9,
    "tables": 0,
    "codeBlocks": 0,
    "headings": 4
  },
  "tokens": {
    "htmlTokens": 71482,
    "markdownTokens": 420,
    "reduction": 71062,
    "reductionPercent": 99
  },
  "score": {
    "score": 74,
    "grade": "C",
    "rubricVersion": 3,
    "dimensions": {
      "accessibility": {
        "score": 90,
        "weight": 30,
        "grade": "A",
        "checks": {
          "content_without_js": {
            "score": 100,
            "weight": 55,
            "evidence": "proven",
            "details": "Content available without JavaScript"
          },
          "fast_content_position": {
            "score": 75,
            "weight": 25,
            "evidence": "plausible",
            "details": "Main content starts at 27% of HTML"
          },
          "reasonable_page_size": {
            "score": 80,
            "weight": 20,
            "evidence": "plausible",
            "details": "Page size: 210KB"
          }
        }
      },
      "aiDiscoverability": {
        "score": 76,
        "weight": 25,
        "grade": "B",
        "checks": {
          "robots_allows_ai_bots": {
            "score": 100,
            "weight": 35,
            "evidence": "proven",
            "details": "All major AI search bots allowed"
          },
          "supports_markdown_negotiation": {
            "score": 0,
            "weight": 20,
            "evidence": "plausible",
            "details": "No Markdown for Agents support detected"
          },
          "has_sitemap": {
            "score": 100,
            "weight": 15,
            "evidence": "plausible",
            "details": "Sitemap found"
          },
          "has_robots_txt": {
            "score": 100,
            "weight": 10,
            "evidence": "plausible",
            "details": "robots.txt exists"
          },
          "has_llms_txt": {
            "score": 100,
            "weight": 10,
            "evidence": "speculative",
            "details": "llms.txt exists and is valid"
          },
          "has_content_signals": {
            "score": 60,
            "weight": 10,
            "evidence": "speculative",
            "details": "robots.txt: ai-train=no, search=yes, ai-input=yes",
            "mechanisms": {
              "robotsTxt": true,
              "httpHeader": false,
              "policy": false
            }
          }
        }
      },
      "structuredData": {
        "score": 50,
        "weight": 20,
        "grade": "D",
        "checks": {
          "has_schema_org": {
            "score": 0,
            "weight": 35,
            "evidence": "proven",
            "details": "No JSON-LD / Schema.org found"
          },
          "has_open_graph": {
            "score": 100,
            "weight": 20,
            "evidence": "plausible",
            "details": "All OG tags present"
          },
          "has_meta_description": {
            "score": 100,
            "weight": 20,
            "evidence": "plausible",
            "details": "Meta description: 261 chars"
          },
          "has_canonical_url": {
            "score": 0,
            "weight": 15,
            "evidence": "plausible",
            "details": "No canonical URL"
          },
          "has_lang_attribute": {
            "score": 100,
            "weight": 10,
            "evidence": "plausible",
            "details": "lang=\"en\""
          }
        }
      },
      "semanticHtml": {
        "score": 88,
        "weight": 15,
        "grade": "B",
        "checks": {
          "proper_heading_hierarchy": {
            "score": 100,
            "weight": 30,
            "evidence": "plausible",
            "details": "Clean heading hierarchy"
          },
          "uses_article_or_main": {
            "score": 100,
            "weight": 25,
            "evidence": "plausible",
            "details": "Has <main>"
          },
          "semantic_elements": {
            "score": 42,
            "weight": 20,
            "evidence": "plausible",
            "details": "13 semantic elements, 90 divs (ratio: 13%)"
          },
          "meaningful_alt_texts": {
            "score": 100,
            "weight": 15,
            "evidence": "plausible",
            "details": "No images found"
          },
          "low_div_nesting": {
            "score": 100,
            "weight": 10,
            "evidence": "speculative",
            "details": "Avg div depth: 4.4, max: 7"
          }
        }
      },
      "contentEfficiency": {
        "score": 50,
        "weight": 10,
        "grade": "D",
        "checks": {
          "token_reduction_ratio": {
            "score": 100,
            "weight": 40,
            "evidence": "speculative",
            "details": "99% token reduction (HTML→Markdown)"
          },
          "content_to_noise_ratio": {
            "score": 0,
            "weight": 30,
            "evidence": "speculative",
            "details": "Content ratio: 0.6% (1297 content chars / 214758 HTML bytes)"
          },
          "reasonable_page_weight": {
            "score": 50,
            "weight": 20,
            "evidence": "speculative",
            "details": "HTML size: 210KB"
          },
          "minimal_inline_styles": {
            "score": 0,
            "weight": 10,
            "evidence": "speculative",
            "details": "120/1135 elements with inline styles (10.6%)"
          }
        }
      }
    }
  },
  "recommendations": [
    {
      "id": "add_schema_org",
      "priority": "critical",
      "category": "structuredData",
      "titleKey": "rec.add_schema_org.title",
      "descriptionKey": "rec.add_schema_org.description",
      "howToKey": "rec.add_schema_org.howto",
      "howToStepKeys": null,
      "effort": "moderate",
      "estimatedImpact": 7,
      "maxImpact": 7,
      "evidence": "proven",
      "checkScore": 0,
      "checkDetails": "No JSON-LD / Schema.org found"
    },
    {
      "id": "add_markdown_negotiation",
      "priority": "critical",
      "category": "aiDiscoverability",
      "titleKey": "rec.add_markdown_negotiation.title",
      "descriptionKey": "rec.add_markdown_negotiation.description",
      "howToKey": "rec.add_markdown_negotiation.howto",
      "howToStepKeys": null,
      "effort": "significant",
      "estimatedImpact": 5,
      "maxImpact": 5,
      "evidence": "plausible",
      "checkScore": 0,
      "checkDetails": "No Markdown for Agents support detected"
    },
    {
      "id": "add_canonical_url",
      "priority": "high",
      "category": "structuredData",
      "titleKey": "rec.add_canonical_url.title",
      "descriptionKey": "rec.add_canonical_url.description",
      "howToKey": "rec.add_canonical_url.howto",
      "howToStepKeys": null,
      "effort": "quick-win",
      "estimatedImpact": 3,
      "maxImpact": 3,
      "evidence": "plausible",
      "checkScore": 0,
      "checkDetails": "No canonical URL"
    },
    {
      "id": "improve_content_ratio",
      "priority": "high",
      "category": "contentEfficiency",
      "titleKey": "rec.improve_content_ratio.title",
      "descriptionKey": "rec.improve_content_ratio.description",
      "howToKey": "rec.improve_content_ratio.howto",
      "howToStepKeys": null,
      "effort": "moderate",
      "estimatedImpact": 3,
      "maxImpact": 3,
      "evidence": "speculative",
      "checkScore": 0,
      "checkDetails": "Content ratio: 0.6% (1297 content chars / 214758 HTML bytes)"
    },
    {
      "id": "add_semantic_elements",
      "priority": "medium",
      "category": "semanticHtml",
      "titleKey": "rec.add_semantic_elements.title",
      "descriptionKey": "rec.add_semantic_elements.description",
      "howToKey": "rec.add_semantic_elements.howto",
      "howToStepKeys": null,
      "effort": "moderate",
      "estimatedImpact": 1.7,
      "maxImpact": 3,
      "evidence": "plausible",
      "checkScore": 42,
      "checkDetails": "13 semantic elements, 90 divs (ratio: 13%)"
    },
    {
      "id": "remove_inline_styles",
      "priority": "medium",
      "category": "contentEfficiency",
      "titleKey": "rec.remove_inline_styles.title",
      "descriptionKey": "rec.remove_inline_styles.description",
      "howToKey": "rec.remove_inline_styles.howto",
      "howToStepKeys": null,
      "effort": "moderate",
      "estimatedImpact": 1,
      "maxImpact": 1,
      "evidence": "speculative",
      "checkScore": 0,
      "checkDetails": "120/1135 elements with inline styles (10.6%)"
    }
  ],
  "llmsTxtPreview": "# Carbon Design System\n\n> Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.\n\n## Documentation\n- [Guide](https://www.carbondesignsystem.com/getting-started/migrating/guide)\n\n## Main\n- [Home | Carbon Design System](https://www.carbondesignsystem.com/): Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its fou…\n- [About Carbon](https://www.carbondesignsystem.com/getting-started/about-carbon)\n- [Product Development Lifecycle](https://www.carbondesignsystem.com/getting-started/contributing/product-development-lifecycle)\n- [Overview](https://www.carbondesignsystem.com/getting-started/designing/overview)\n- [Design resources](https://www.carbondesignsystem.com/getting-started/designing/design-resources)\n- [Overview](https://www.carbondesignsystem.com/getting-started/developing/overview)\n- [Carbon Core](https://www.carbondesignsystem.com/getting-started/developing/carbon-core)\n- [React tutorial](https://www.carbondesignsystem.com/getting-started/developing/react-tutorial)\n- [Web Components tutorial](https://www.carbondesignsystem.com/getting-started/developing/web-components-tutorial)\n- [Additional resources](https://www.carbondesignsystem.com/getting-started/developing/additional-resources)\n- [Overview](https://www.carbondesignsystem.com/getting-started/carbon-mcp/overview)\n\n## Support\n- [Contact us](https://www.carbondesignsystem.com/support/contact-us)\n- [FAQs](https://www.carbondesignsystem.com/support/faqs)\n- [Certificate of Originality](https://www.carbondesignsystem.com/support/certificate-of-originality)\n\n",
  "llmsTxtExisting": "# Carbon Design System\n\n> Carbon is IBM's open-source design system for products and digital experiences. Built on the IBM Design Language, it provides working code, design tools, human interface guidelines, and a vibrant community of contributors.\n\nThis file provides LLM-friendly navigation, background context, and active links for the Carbon Design System and its core developer tools.\n\n## Getting Started\n\n- [About Carbon](https://www.carbondesignsystem.com/getting-started/about-carbon): Explore Carbon, IBM’s open-source design system, a complete guide to its components, design principles, UI framework, and developer tools. Learn who it’s for, how it integrates across the IBM ecosystem, and how to implement Carbon for scalable, accessible enterprise web and product design including core usage and product extensions.\n- [Design resources](https://www.carbondesignsystem.com/getting-started/designing/design-resources): Access Carbon design resources, including Figma libraries, templates, color palettes, GitHub repositories, plugins, and AI tools to accelerate your design workflow.\n- [Overview](https://www.carbondesignsystem.com/getting-started/designing/overview): Learn about Carbon Design System, including its design principles, tools, guidelines, and foundational resources for creating consistent IBM digital experiences for designers.\n- [Additional resources](https://www.carbondesignsystem.com/getting-started/developing/additional-resources): Carbon Figma Tools uses AI to turn Figma designs into production-ready Carbon React code, validate Carbon v11 compliance, and accelerate design-to-code workflows.\n- [Carbon Core](https://www.carbondesignsystem.com/getting-started/developing/carbon-core): The Carbon library provides front-end developers and engineers a collection of reusable components to build websites and user interfaces.\n- [Overview](https://www.carbondesignsystem.com/getting-started/developing/overview): Get started developing with Carbon using this checklist covering overview, tutorials, installation and framework setup.\n- [React tutorial](https://www.carbondesignsystem.com/getting-started/developing/react-tutorial): Learn more about building a React application with Carbon and Next.js. This tutorial covers installing components, building pages, connecting APIs, creating custom components, and deploying your app to production.\n- [Web Components tutorial](https://www.carbondesignsystem.com/getting-started/developing/web-components-tutorial): Learn to build a JavaScript and HTML application using Web Components from Carbon. This tutorial shows you how to use Carbon components effectively while introducing web development best practices.\n- [Concepts](https://www.carbondesignsystem.com/getting-started/carbon-mcp/concepts): Understand the tools and content sources that enable Carbon MCP to retrieve information from the Carbon Design System.\n- [Onboarding and setup](https://www.carbondesignsystem.com/getting-started/carbon-mcp/onboarding-and-setup): Set up Carbon MCP, connect your preferred AI client, and install the tools needed to access Carbon resources.\n- [Overview](https://www.carbondesignsystem.com/getting-started/carbon-mcp/overview): Carbon MCP connects your AI client to the Carbon Design System, giving it instant access to components, tokens, icons, guidance, and code.\n- [Prompts](https://www.carbondesignsystem.com/getting-started/carbon-mcp/prompts): A prompt is how you tell an AI what to build, in plain language. Clear, specific prompts get better results in fewer tries and use fewer tokens.\n\n\n- [Token conservation](https://www.carbondesignsystem.com/getting-started/carbon-mcp/token-conservation): Token conservation keeps AI workflows fast and cost-efficient by reducing unnecessary context and responses without losing quality.\n- [Carbon Labs](https://www.carbondesignsystem.com/getting-started/contributing/carbon-labs): Explore Carbon Labs and how to contribute components, patterns, and utilities to this community-organized, early-stage design system incubation space.\n- [Component checklist](https://www.carbondesignsystem.com/getting-started/contributing/component-checklist): Explore the Carbon Design System component checklist, the complete set of requirements across design, code, testing, and documentation that every component must meet.\n- [Enhancing components](https://www.carbondesignsystem.com/getting-started/contributing/enhancing-components): Learn how to improve or contribute to existing Carbon Design System components, from GitHub issues and dev setup to submitting pull requests and design updates.\n- [Overview](https://www.carbondesignsystem.com/getting-started/contributing/overview): Learn how to contribute to the Carbon Design System, from building new components and enhancing existing ones to fixing bugs and improving documentation. \n- [Product Development Lifecycle](https://www.carbondesignsystem.com/getting-started/contributing/product-development-lifecycle): Understand how Carbon uses the Product Development Lifecycle to guide contributions from discovery, delivery, and launch and scale, through to a stable, production-ready component or pattern.\n- [FAQs](https://www.carbondesignsystem.com/getting-started/migrating/faqs): Frequently asked questions about the benefits and process when migrating your product from v10 to v11 of Carbon.\n- [Guide](https://www.carbondesignsystem.com/getting-started/migrating/guide): Ready to make the move to Carbon v11? Our migration guide helps designers and developers learn more about this release and get started migrating to v11.\n\n## Foundations\n\n- [2x Grid](https://www.carbondesignsystem.com/building-blocks/foundations/2x-grid): The IBM Design 2x Grid provides the geometric foundation for typography, layouts, icons, and illustrations, ensuring structure and consistency.\n- [Accessibility](https://www.carbondesignsystem.com/building-blocks/foundations/accessibility): IBM Carbon follows accessibility best practices to help teams create inclusive, accessible web, and software experiences.\n- [Carbon for AI](https://www.carbondesignsystem.com/building-blocks/foundations/carbon-for-ai): Carbon for AI extends the Carbon Design System with a distinct visual and behavioral identity for AI experiences in IBM products.\n- [Color](https://www.carbondesignsystem.com/building-blocks/foundations/color): IBM Carbon color guidance helps teams create consistent, engaging, and accessible user interfaces across digital products and experiences.\n- [Content](https://www.carbondesignsystem.com/building-blocks/foundations/content): Explore Carbon's content guidelines for product interfaces, including content foundations, accessibility writing tips, and IBM style resources.\n- [Icons](https://www.carbondesignsystem.com/building-blocks/foundations/icons): Icons are visual symbols that represent ideas, objects, or actions, helping communicate meaning, indicate interactivity, and draw attention.\n- [Motion](https://www.carbondesignsystem.com/building-blocks/foundations/motion): Carbon motion brings digital experiences to life, guides users through interactions, and provides consistent movement and timing across experiences.\n- [Pictograms](https://www.carbondesignsystem.com/building-blocks/foundations/pictograms): Find IBM Carbon pictogram guidance, examples, and best practices for websites, product UIs, signage, events, and merchandise.\n- [Spacing](https://www.carbondesignsystem.com/building-blocks/foundations/spacing): Carbon’s spacing system provides a consistent approach to layout design, helping create clear, functional, and cohesive user experiences.\n- [Themes](https://www.carbondesignsystem.com/building-blocks/foundations/themes): Themes customize component styles to align with the visual identity and aesthetic requirements of a brand or product.\n- [Typography](https://www.carbondesignsystem.com/building-blocks/foundations/typography): Carbon’s typography system uses IBM Plex with carefully designed scales, styles, and weights to create hierarchy, organize information, and guide users.\n\n\n## Components\n\n- [AI label](https://www.carbondesignsystem.com/building-blocks/core/components/ai-label): The AI label identifies AI in the UI, enabling transparency through visual recognition of the AI icon and triggering the explainability popover.\n- [Accordion](https://www.carbondesignsystem.com/building-blocks/core/components/accordion): An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.\n- [Breadcrumb](https://www.carbondesignsystem.com/building-blocks/core/components/breadcrumb): The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.\n- [Button](https://www.carbondesignsystem.com/building-blocks/core/components/button): Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.\n- [Checkbox](https://www.carbondesignsystem.com/building-blocks/core/components/checkbox): Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.\n- [Code snippet](https://www.carbondesignsystem.com/building-blocks/core/components/code-snippet): Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file.\n- [Contained list](https://www.carbondesignsystem.com/building-blocks/core/components/contained-list): Contained lists group content that is similar or related and can contain read-only or interactive information.\n- [Content switcher](https://www.carbondesignsystem.com/building-blocks/core/components/content-switcher): Content switchers allow users to toggle between two or more content sections within the same space on the screen.\n- [Data table](https://www.carbondesignsystem.com/building-blocks/core/components/data-table): Data tables organize and display data efficiently, with customizable functionality to meet user and product needs. \n- [Date picker](https://www.carbondesignsystem.com/building-blocks/core/components/date-picker): Date and time pickers allow users to select a single or a range of dates and times.\n- [Dropdown](https://www.carbondesignsystem.com/building-blocks/core/components/dropdown): Dropdowns have a list of options that a user can select from. These selections can fill in a form, filter, or sort content.\n- [File uploader](https://www.carbondesignsystem.com/building-blocks/core/components/file-uploader): File uploaders allow users to select one or more files to upload to a specific location.\n- [Form](https://www.carbondesignsystem.com/building-blocks/core/components/form): A form is a group of related input controls that lets users provide data or configure options within a structured interface.\n- [Inline loading](https://www.carbondesignsystem.com/building-blocks/core/components/inline-loading): The inline loading component provides visual feedback to indicate that data is being processed and a task is in progress.\n- [Link](https://www.carbondesignsystem.com/building-blocks/core/components/link): Links are used as navigational elements. They navigate users to another location, such as a different site, resource, or section within the same page.\n- [List](https://www.carbondesignsystem.com/building-blocks/core/components/list): Lists are vertical groupings of related content, with items organized using bullets or numbers to improve readability and structure.\n- [Loading](https://www.carbondesignsystem.com/building-blocks/core/components/loading): Loading indicators are used when retrieving data or performing slow computations and help notify users that a process is underway.\n- [Menu](https://www.carbondesignsystem.com/building-blocks/core/components/menu): A menu is a list of interactive options that appears when users interact with an element or perform a specific action.\n- [Menu buttons](https://www.carbondesignsystem.com/building-blocks/core/components/menu-buttons): Menu buttons, including menu buttons, combo buttons, and overflow menus, open a menu with a list of interactive options.\n- [Modal](https://www.carbondesignsystem.com/building-blocks/core/components/modal): Modals focus the user’s attention exclusively on one task or piece of information by using a window that is displayed on top of the page content.\n- [Notification](https://www.carbondesignsystem.com/building-blocks/core/components/notification): Notifications are messages that communicate information to the user. The four variants of notifications are toast, inline, actionable, and callout.\n- [Number input](https://www.carbondesignsystem.com/building-blocks/core/components/number-input): Number input lets users enter a numeric value and incrementally increase or decrease the value with a two-segment control.\n- [Overview](https://www.carbondesignsystem.com/building-blocks/core/components/overview): Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.\n- [Pagination](https://www.carbondesignsystem.com/building-blocks/core/components/pagination): Pagination splits content or data into several pages, with a control for navigating to the next or previous page.\n- [Popover](https://www.carbondesignsystem.com/building-blocks/core/components/popover): A popover is a layer that appears above page content to provide additional information, context, or actions without leaving the current view.\n- [Progress bar](https://www.carbondesignsystem.com/building-blocks/core/components/progress-bar): A progress bar provides feedback on the status and duration of a process, helping users understand progress and expected wait times.\n- [Progress indicator](https://www.carbondesignsystem.com/building-blocks/core/components/progress-indicator): A progress indicator guides users through any linear, multistep task by showing the user their completed, current, and future steps.\n- [Radio button](https://www.carbondesignsystem.com/building-blocks/core/components/radio-button): Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.\n- [Search](https://www.carbondesignsystem.com/building-blocks/core/components/search): Search enables users to find relevant content by entering words or phrases, reducing the need to navigate through pages or menus.\n- [Select](https://www.carbondesignsystem.com/building-blocks/core/components/select): Select allows users to choose a single option from a list of values, helping ensure accurate input and consistent data selection.\n- [Slider](https://www.carbondesignsystem.com/building-blocks/core/components/slider): Sliders provide a visual way to adjust values by moving a handle along a track, enabling precise selection within a defined range.\n- [Structured list](https://www.carbondesignsystem.com/building-blocks/core/components/structured-list): Structured lists group related content, such as terms and definitions, into a clear format that supports scanning and comprehension.\n- [Tabs](https://www.carbondesignsystem.com/building-blocks/core/components/tabs): Tabs are used to organize related content. They allow the user to navigate between groups of information that appear within the same context.\n- [Tag](https://www.carbondesignsystem.com/building-blocks/core/components/tag): Tags help label, categorize, and organize items using descriptive keywords, making content easier to find, filter, and manage.\n- [Text input](https://www.carbondesignsystem.com/building-blocks/core/components/text-input): Text inputs enable users to enter free-form text for short and long-form entries, supporting a wide range of data input needs.\n- [Tile](https://www.carbondesignsystem.com/building-blocks/core/components/tile): Tiles are flexible containers for displaying a variety of content, including information, guidance, next steps, and getting started resources.\n- [Toggle](https://www.carbondesignsystem.com/building-blocks/core/components/toggle): A toggle lets users quickly switch between two states and is commonly used for on/off settings and controls.\n- [Toggletip](https://www.carbondesignsystem.com/building-blocks/core/components/toggletip): Toggletips display and hide additional information when triggered by a user action and can contain interactive elements.\n- [Tooltip](https://www.carbondesignsystem.com/building-blocks/core/components/tooltip): Tooltips display additional information on hover or focus, providing helpful, contextual, and nonessential guidance that adds clarity for users.\n- [Tree view](https://www.carbondesignsystem.com/building-blocks/core/components/tree-view): A tree view presents content in a hierarchical structure with nested levels, helping users navigate and explore related information.\n- [UI shell header](https://www.carbondesignsystem.com/building-blocks/core/components/ui-shell-header): The UI shell header is part of the Carbon UI shell, providing shared interaction patterns that create a consistent experience across products.\n- [UI shell left panel](https://www.carbondesignsystem.com/building-blocks/core/components/ui-shell-left-panel): The left panel is part of the Carbon UI shell, providing shared interaction patterns that create a consistent experience across products.\n- [UI shell right panel](https://www.carbondesignsystem.com/building-blocks/core/components/ui-shell-right-panel): The right panel is part of the Carbon UI shell, providing shared interaction patterns that create a consistent experience across products.\n\n## Patterns\n\n- [Common actions](https://www.carbondesignsystem.com/building-blocks/core/patterns/common-actions): Common actions appear across components and workflows. To maintain platform consistency, apply these actions only in the prescribed ways.\n- [Dialogs](https://www.carbondesignsystem.com/building-blocks/core/patterns/dialogs): Dialogs are UI patterns that prompt users for input or urgent information without leaving context, with modal and non-modal variants.\n- [Disabled states](https://www.carbondesignsystem.com/building-blocks/core/patterns/disabled-states): A disabled state prevents interaction with a component when permissions, dependencies, or prerequisites are unmet, removing all interactive functionality.\n- [Disclosures](https://www.carbondesignsystem.com/building-blocks/core/patterns/disclosures): Disclosures reveal additional information or controls through user-triggered popovers, supporting menus, settings, and related actions.\n- [Empty states](https://www.carbondesignsystem.com/building-blocks/core/patterns/empty-states): Empty states occur when there is no data to display, often during first-time use or when content has been deleted or is unavailable.\n- [Filtering](https://www.carbondesignsystem.com/building-blocks/core/patterns/filtering): Filtering allows users to refine a displayed data set by adding or removing items based on selected predefined attributes.\n- [Fluid styles](https://www.carbondesignsystem.com/building-blocks/core/patterns/fluid-styles): Fluid variants of select components provide alternative styling that complements default patterns and reflects IBM’s expressive and productive design principles.\n- [Forms](https://www.carbondesignsystem.com/building-blocks/core/patterns/forms): A form is a group of related input controls that lets users provide data or configure options in pages, panels, or dialogs.\n- [Global header](https://www.carbondesignsystem.com/building-blocks/core/patterns/global-header): The global header helps users navigate and orient themselves in the UI through consistent, familiar, and usable interaction patterns.\n- [Loading](https://www.carbondesignsystem.com/building-blocks/core/patterns/loading): Loading patterns communicate that content is being processed and help users understand that data is loading rather than the interface being unresponsive.\n- [Login](https://www.carbondesignsystem.com/building-blocks/core/patterns/login): The login page enables users to access an application by entering credentials or using another supported authentication method.\n- [Notifications](https://www.carbondesignsystem.com/building-blocks/core/patterns/notifications): Notifications communicate information and provide feedback to users, ranging from inline responses to user actions to system-wide messages.\n- [Overflow content](https://www.carbondesignsystem.com/building-blocks/core/patterns/overflow-content): Overflow content is text or components that exceed available space and are reduced, truncated, or limited to fit within the interface.\n- [Overview](https://www.carbondesignsystem.com/building-blocks/core/patterns/overview): Patterns are best-practice solutions that help users achieve goals through reusable combinations of components, templates, flows, and sequences.\n- [Read-only states](https://www.carbondesignsystem.com/building-blocks/core/patterns/read-only-states): Read-only states allow users to review component content without making changes, removing all interactive functionality from the component.\n- [Search](https://www.carbondesignsystem.com/building-blocks/core/patterns/search): Search is a core navigation and discovery pattern. Meeting user expectations requires consistent, predictable, and effective search experiences.\n- [Status indicators](https://www.carbondesignsystem.com/building-blocks/core/patterns/status-indicators): Status indicators communicate severity-level information through distinct shapes and colors, helping users quickly assess status and respond appropriately.\n\n- [Text toolbar](https://www.carbondesignsystem.com/building-blocks/core/patterns/text-toolbar): A text toolbar provides buttons and menus for editing text, searching keywords, attaching files, and embedding links.\n\n## Data Visualization\n\n- [Axes and labels](https://www.carbondesignsystem.com/building-blocks/data-visualization/axes-and-labels): Axes and labels provide essential context for chart data. Use clear, easy-to-understand descriptors and metrics to label charts and axes.\n- [Chart anatomy](https://www.carbondesignsystem.com/building-blocks/data-visualization/chart-anatomy): Chart elements work together to support effective data communication, with each element contributing important context and meaning.\n- [Color palettes](https://www.carbondesignsystem.com/building-blocks/data-visualization/color-palettes): The data visualization color palette is a curated subset of the IBM Design Language palette, designed to maximize accessibility and visual harmony.\n- [Dashboards](https://www.carbondesignsystem.com/building-blocks/data-visualization/dashboards): Dashboards vary widely based on their context and should be carefully designed to meet the needs of each use case.\n- [Flow charts](https://www.carbondesignsystem.com/building-blocks/data-visualization/flow-charts): Uncover complex data relationships and flows to reveal insights and patterns within large or interconnected data sets.\n- [Gantt charts](https://www.carbondesignsystem.com/building-blocks/data-visualization/gantt-charts): A Gantt chart visualizes project tasks against a timeline, showing planned work, schedules, and progress over a defined period.\n- [Legends](https://www.carbondesignsystem.com/building-blocks/data-visualization/legends): Legends summarize visual properties such as colors and textures, helping users understand chart elements and interpret data accurately.\n- [Overview](https://www.carbondesignsystem.com/building-blocks/data-visualization/overview): Carbon charts help teams communicate data clearly through accurate, accessible, and visually engaging data visualizations.\n- [Simple charts](https://www.carbondesignsystem.com/building-blocks/data-visualization/simple-charts): Simple charts present data in an intuitive, easy-to-understand format, helping communicate insights that support the content and context of a page.\n- [Spatial charts](https://www.carbondesignsystem.com/building-blocks/data-visualization/spatial-charts): Discover spatial relationships and hierarchical structures in data through visualizations such as tree maps, circle packs, and geospatial charts.\n\n## Building Experiences\n\n- [Buy](https://www.carbondesignsystem.com/building-experiences/buy): A strong purchase experience helps buyers move from intent to commitment with speed and confidence. \n- [Discover](https://www.carbondesignsystem.com/building-experiences/discover): A strong Discover experience helps people find your solution and quickly understand why it's relevant to their needs. \n- [End use](https://www.carbondesignsystem.com/building-experiences/end-use): Consumable End Use experiences enable confident exits through clear controls, data ownership, and respectful offboarding that builds trust.\n- [Expand](https://www.carbondesignsystem.com/building-experiences/expand): A strong Expand experience helps people scale their solutions, discover complementary offerings, and adopt new capabilities as their needs increase. \n- [Get help](https://www.carbondesignsystem.com/building-experiences/get-help): A strong Get Help experience ensures people can resolve issues quickly, access support resources, and stay productive without losing momentum. \n- [Learn](https://www.carbondesignsystem.com/building-experiences/learn): A strong Learn experience shows how your solution fits user needs and workflows, integrates with tools, and stands out from alternatives.\n- [Onboard](https://www.carbondesignsystem.com/building-experiences/onboard): A great onboarding experience helps users get set up successfully, understand what to do next, and reach first value as quickly as possible. \n- [Overview](https://www.carbondesignsystem.com/building-experiences/overview): Universal Experiences is a framework that defines key user journey moments, helping teams design interactions that consistently deliver value.\n- [Try](https://www.carbondesignsystem.com/building-experiences/try): A strong Try experience helps users experience your product’s value firsthand and validate fit in real-world scenarios. \n- [Use](https://www.carbondesignsystem.com/building-experiences/use): A strong Use experience builds confidence, helps customers complete key tasks, improve skills, and benefit from continuous enhancements over time.\n- [Craft a seamless onboarding journey](https://www.carbondesignsystem.com/articles/craft-a-seamless-onboarding-journey): A seamless onboarding journey helps users feel understood, empowered, and confident.\n- [Create a memorable product experience](https://www.carbondesignsystem.com/articles/create-a-memorable-product-experience): Memorable product experiences create emotional moments that stay with users and keep them coming back.\n- [Create consistency across onboarding emails](https://www.carbondesignsystem.com/articles/create-consistency-across-onboarding-emails): Onboarding email templates create clear and consistent communication for every new user.\n- [Design a paid onboarding experience](https://www.carbondesignsystem.com/articles/design-a-paid-onboarding-experience): Paid onboarding guides users from basics to advanced skills, helping them adopt the product and unlock more value.\n- [Design a trial onboarding experience](https://www.carbondesignsystem.com/articles/design-a-trial-onboarding-experience): Trial onboarding builds trust by showing value early and helping users see the product’s impact before they commit.\n- [Design help resources for seamless problem solving](https://www.carbondesignsystem.com/articles/design-help-resources-for-seamless-problem-solving): Help resources simplify problem solving by removing barriers, speeding resolution, and empowering users to troubleshoot with confidence.\n- [Introduction to onboarding](https://www.carbondesignsystem.com/articles/introduction-to-onboarding): A well‑designed onboarding experience quickly empowers users, reduces friction, and builds confidence from the very start.\n- [Onboard for every stage of the user’s journey](https://www.carbondesignsystem.com/articles/onboard-for-every-stage-of-the-users-journey): Onboarding at every stage provides timely, tailored support through experiences designed to meet users wherever they are today.\n- [Personalize your onboarding experience](https://www.carbondesignsystem.com/articles/personalize-your-onboarding-experience): Personalized onboarding adapts to each user’s goals and behavior, making the experience feel uniquely tailored.\n- [Tools for designing onboarding experiences](https://www.carbondesignsystem.com/articles/tools-for-designing-onboarding-experiences): IBM uses WalkMe, Carbon, and Assist Me to create a flexible onboarding ecosystem that supports users and accelerates success.\n- [Show What’s new to maintain user engagement](https://www.carbondesignsystem.com/tutorials/show-whats-new-to-maintain-user-engagement): What’s new keeps users engaged by surfacing updates in context so important features don’t go unnoticed.\n- [Use personalization to tailor a user’s first product steps](https://www.carbondesignsystem.com/tutorials/use-personalization-to-tailor-a-users-first-product-steps): Personalizing first steps helps new users feel seen, reach value faster, and immediately understand how the product fits their goals.\n\n## Support\n\n- [Certificate of Originality](https://www.carbondesignsystem.com/support/certificate-of-originality): The Certificate of Originality explains IBM Carbon Design System licensing, attribution requirements, and usage terms, clarifying how assets and code can be used within compliant projects.\n- [Contact us](https://www.carbondesignsystem.com/support/contact-us): Have a question about our design system? The Carbon team is here to help you.\n- [FAQs](https://www.carbondesignsystem.com/support/faqs): The FAQ explains what Carbon is, how to contribute, supported technologies, reporting issues, accessibility guidance, browser support, and telemetry data collection and opt-out options.\n\n## Resources\n\n- [Carbon MCP Server](https://mcp.carbondesignsystem.com/mcp): Live Model Context Protocol endpoint for automated AI agent querying of component documentation, code examples, charts, and guidelines.\n- [IBM Design Language](https://www.ibm.com/design/language/): The foundational brand principles, color, typography, and layout rules underlying the Carbon Design System.\n- [Sitemaps Index](https://www.carbondesignsystem.com/pages-sitemap.xml): Machine-readable directory of all pages, articles, patterns, and tutorials on this site.\n- [GitHub - Carbon Repository](https://github.com/carbon-design-system/carbon): The primary open-source code repository hosting React, Web Components, and Elements implementations.\n- [Carbon MCP GitHub](https://github.com/carbon-design-system/carbon-mcp): The issue tracker and onboarding guide for the Carbon MCP server.",
  "emergingProtocols": {
    "oauthProtectedResource": {
      "exists": false,
      "url": "https://www.carbondesignsystem.com/.well-known/oauth-protected-resource"
    },
    "oauthDiscovery": {
      "exists": false,
      "url": "https://www.carbondesignsystem.com/.well-known/oauth-authorization-server"
    },
    "mcpServerCard": {
      "exists": false,
      "url": "https://www.carbondesignsystem.com/.well-known/mcp/server-card.json",
      "draft": true
    },
    "a2aAgentCard": {
      "exists": false,
      "url": "https://www.carbondesignsystem.com/.well-known/agent-card.json"
    },
    "apiCatalog": {
      "exists": false,
      "url": "https://www.carbondesignsystem.com/.well-known/api-catalog"
    },
    "agentSkills": {
      "exists": false,
      "url": "https://www.carbondesignsystem.com/.well-known/agent-skills/index.json",
      "draft": true
    },
    "count": 0,
    "total": 6
  },
  "botAccess": {
    "probed": true,
    "bot": "OAI-SearchBot",
    "controlStatus": 200,
    "botStatus": 200,
    "discriminates": false,
    "refusedAsBot": false,
    "edge": "Cloudflare",
    "verifiable": false,
    "detail": "This origin answers OAI-SearchBot exactly as it answers any other client (200). No edge-level filtering of AI crawlers observed."
  },
  "snippets": [
    {
      "id": "add_canonical_url",
      "title": "Add canonical URL",
      "description": "The canonical URL tells AI agents which version of the page is the \"official\" one, avoiding duplicate content issues.",
      "language": "html",
      "code": "<link rel=\"canonical\" href=\"https://www.carbondesignsystem.com/\">",
      "filename": "<head>"
    },
    {
      "id": "add_schema_org",
      "title": "Add Schema.org JSON-LD",
      "description": "Structured data helps AI agents understand the type, author, and purpose of your content.",
      "language": "html",
      "code": "<script type=\"application/ld+json\">\n{\n  \"@context\": \"https://schema.org\",\n  \"@type\": \"WebPage\",\n  \"name\": \"Home | Carbon Design System\",\n  \"description\": \"Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.\",\n  \"url\": \"https://www.carbondesignsystem.com/\",\n  \"inLanguage\": \"en\",\n  \"isPartOf\": {\n    \"@type\": \"WebSite\",\n    \"name\": \"Carbon Design System\"\n  }\n}\n</script>",
      "filename": "<head>"
    },
    {
      "id": "add_markdown_negotiation",
      "title": "Support Markdown for Agents",
      "description": "Let AI agents request a clean Markdown version of any page via content negotiation, .md alternate URLs, link tags or Link headers.",
      "language": "html",
      "code": "<!-- Mechanism 3: link tag advertising the .md alternate -->\n<link rel=\"alternate\" type=\"text/markdown\" href=\"/page.md\">",
      "filename": "<head>",
      "stacks": [
        {
          "id": "html",
          "label": "HTML <head>",
          "language": "html",
          "filename": "<head>",
          "code": "<!-- Mechanism 3: link tag advertising the .md alternate -->\n<link rel=\"alternate\" type=\"text/markdown\" href=\"/page.md\">"
        },
        {
          "id": "express",
          "label": "Express",
          "language": "javascript",
          "filename": "server.js",
          "code": "// Mechanisms 1 + 4: content negotiation + Link header\napp.get('/page', (req, res) => {\n  res.setHeader('Vary', 'Accept');\n  res.setHeader('Link', '</page.md>; rel=\"alternate\"; type=\"text/markdown\"');\n  if ((req.headers.accept || '').includes('text/markdown')) {\n    res.type('text/markdown; charset=utf-8');\n    return res.send(renderMarkdown('page'));\n  }\n  res.render('page');\n});"
        },
        {
          "id": "fastify",
          "label": "Fastify",
          "language": "javascript",
          "filename": "server.js",
          "code": "// Mechanisms 1 + 4: content negotiation + Link header\nfastify.get('/page', async (req, reply) => {\n  reply.header('Vary', 'Accept');\n  reply.header('Link', '</page.md>; rel=\"alternate\"; type=\"text/markdown\"');\n  if ((req.headers.accept || '').includes('text/markdown')) {\n    return reply.type('text/markdown; charset=utf-8').send(renderMarkdown('page'));\n  }\n  return reply.view('/page.ejs');\n});"
        },
        {
          "id": "nextjs",
          "label": "Next.js",
          "language": "typescript",
          "filename": "app/page/route.ts",
          "code": "// Next.js App Router — Route Handler returning Markdown\nimport { NextRequest } from 'next/server';\nimport { renderMarkdown } from '@/lib/md';\nexport async function GET(req: NextRequest) {\n  const accept = req.headers.get('accept') || '';\n  if (accept.includes('text/markdown')) {\n    return new Response(await renderMarkdown('page'), {\n      headers: {\n        'Content-Type': 'text/markdown; charset=utf-8',\n        'Vary': 'Accept',\n      },\n    });\n  }\n  // Fall through to the page component\n  return new Response(null, { status: 404 });\n}"
        },
        {
          "id": "wordpress",
          "label": "WordPress",
          "language": "php",
          "filename": "functions.php",
          "code": "<?php\n// Mechanism 1: respond to Accept: text/markdown on the same URL\nadd_action('template_redirect', function () {\n    if (!is_singular()) return;\n    $accept = $_SERVER['HTTP_ACCEPT'] ?? '';\n    if (strpos($accept, 'text/markdown') === false) return;\n    header('Content-Type: text/markdown; charset=utf-8');\n    header('Vary: Accept');\n    $post = get_queried_object();\n    echo \"# \" . get_the_title($post) . \"\\n\\n\";\n    echo wp_strip_all_tags(apply_filters('the_content', $post->post_content));\n    exit;\n});"
        },
        {
          "id": "static",
          "label": "Hugo / Jekyll / Astro",
          "language": "txt",
          "filename": "static/page.md",
          "code": "# Mechanism 2: serve .md alongside .html\n# Hugo: place page.md in /static/ — built unchanged\n# Jekyll: drop page.md in /assets/ — copied as-is\n# Astro: src/pages/page.md.ts that exports a GET returning markdown\n\n# Then advertise with mechanism 3 in <head>:\n#   <link rel=\"alternate\" type=\"text/markdown\" href=\"/page.md\">"
        }
      ]
    }
  ]
}

API를 사용하여 프로그래밍 방식으로 가져올 수 있습니다 (곧 출시)