{"columns":["path","title","description","date","lastModified","image","content","platform","tags","fragments","implementation"],"data":[{"path":"/foundations/behavior/motion","title":"Motion","description":"Spectrum 2 builds on top of the Spectrum 1 motion guidelines for the design system: that motion is always purposeful, intuitive, and seamless. With this ...","date":"","lastModified":1788500996,"image":"/foundations/behavior/media_1924d2e8392f943bcea3f81327795fe857a15d856.png?width=1200&format=pjpg&optimize=medium","content":["Motion\nMotion in Spectrum 2 is still being developed. There’s currently a dedicated working group of subject matter experts from across Adobe whose work will be added to these guidelines. Overview\n\nSp"],"platform":"","tags":["Motion","Directional motion","Linear motion","Diagonal motion","Clockwise motion","Interaction motion","Wayfinding motion","Microinteractions"],"fragments":[],"implementation":""},{"path":"/foundations/behavior/states","title":"States","description":"A change in color is the primary way that a state is communicated. Colors follow a standard progression for user-initiated states: default, hover, down, and ...","date":"","lastModified":1786641624,"image":"/foundations/behavior/media_130bf94d070ec5b7d3c11f6b354c6f649c6c1b9e9.png?width=1200&format=pjpg&optimize=medium","content":["States\n\nA change in color is the primary way that a state is communicated. Colors follow a standard progression for user-initiated states: default, hover, down, and keyboard focus. There are minor upd"],"platform":"","tags":["states","hover","down","keyboard focus","disabled","selected","dragged","drop shadow"],"fragments":[],"implementation":""},{"path":"/foundations/inclusivity/internationalization","title":"Internationalization","description":"The aim of international design is to create experiences that are equally usable, relevant, and meaningful across the globe to amplify the voices of global ...","date":"","lastModified":1788405220,"image":"/foundations/inclusivity/media_1638cfefd4e6c88a522f8881b136c38e012260811.png?width=1200&format=pjpg&optimize=medium","content":["Internationalization\n\nThe aim of international design is to create experiences that are equally usable, relevant, and meaningful across the globe to amplify the voices of global users. Introduction\n\nT"],"platform":"","tags":["international design","localization","text expansion","globalization","cultural differences","iconography","metaphors","user interface localization"],"fragments":[],"implementation":""},{"path":"/foundations/inclusivity/bi-directionality","title":"Bi-directionality","description":"Digital experiences in bi-directional languages, also commonly referred to as \"RTL\" (right-to-left) languages, often require mirroring the interface to accommodate the right-to-left reading pattern.","date":"","lastModified":1788405566,"image":"/foundations/inclusivity/media_1552935ea9f8cafa263d310c7759f8dbe98828fdb.png?width=1200&format=pjpg&optimize=medium","content":["Bi-directionality\n\nDigital experiences in bi-directional languages, also commonly referred to as \"RTL\" (right-to-left) languages, often require mirroring the interface to accommodate the right-to-left"],"platform":"","tags":["bi-directional","RTL","UI mirroring","right-to-left","time icons","back icon","checkmarks","slashes","directional flow","iconography mirroring"],"fragments":[],"implementation":""},{"path":"/support","title":"Support","description":"","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Support"],"platform":"","tags":[],"fragments":[],"implementation":""},{"path":"/content/grammar-and-mechanics","title":"Grammar and mechanics","description":"Our UX writing style follows our in-product voice principles. These guidelines apply to text in U.S. English, our source language for writing in-product content. Defer ...","date":"","lastModified":1788502068,"image":"/content/media_1367e02bb177bb274cca16f4960072791dfe1a65a.png?width=1200&format=pjpg&optimize=medium","content":["Grammar and mechanics\n\nOur UX writing style follows our in-product voice principles.\nThese guidelines apply to text in U.S. English, our source language for writing in-product content. Defer to compon"],"platform":"","tags":["UX writing","AP style","Active voice","Passive voice","Contractions","Contraction considerations","Verb tenses","Readability","Localization"],"fragments":[],"implementation":""},{"path":"/content/voice-and-tone","title":"Voice and tone","description":"Our design principles apply to the words used throughout our products to ensure that language seamlessly integrates with visual design. We apply these principles to ...","date":"","lastModified":1789413150,"image":"/content/media_127a0b0abdcc1c3f61101bff8d0cc382f1869ed51.png?width=1200&format=pjpg&optimize=medium","content":["Voice and tone\nJust as products should look and act consistently, they should also speak consistently. We speak with one voice and vary our tone depending on situational context. Voice\n\nOur design pri"],"platform":"","tags":["voice","tone","brand guidelines","Adobe Style Guide","language guidelines","readability","user experience","tone spectrum"],"fragments":[],"implementation":""},{"path":"/content/writing-for-errors","title":"Writing for errors","description":"An error occurs when users expect one thing to happen, but either something else — or nothing — happens. Errors can cause frustration, confusion, a ...","date":"","lastModified":1788502400,"image":"/content/media_1c55b3f3176b5f73635233a25d7882cc3bd9e4cdb.png?width=1200&format=pjpg&optimize=medium","content":["Writing for errors\nThoughtful error messaging design reduces support requests and helps users understand a system.\nWhat is an error?\n\nAn error occurs when users expect one thing to happen, but either "],"platform":"","tags":["error messages","error prevention","inline validation","toast","alert dialog","disabled states","anatomy of an error message","underlying cause","automatic input correction"],"fragments":[],"implementation":""},{"path":"/content/in-product-word-list","title":"In-product word list","description":"Consistent language builds user trust and strengthens their knowledge that a product is meeting their needs. Using inconsistent vocabulary across Adobe’s apps and products can ...","date":"","lastModified":1788502198,"image":"/content/media_143bb14f9b96ba8665bd23dddca9095729e18c752.png?width=1200&format=pjpg&optimize=medium","content":["In-product word list\nWhat words to use in Adobe’s in-product experiences, and when. Using this resource\n\nConsistent language builds user trust and strengthens their knowledge that a product is meeting"],"platform":"","tags":["UX writing","in-product language","Adobe Brand Guidelines","internal jargon","app vs application","asset terminology"],"fragments":[],"implementation":""},{"path":"/content/writing-for-onboarding","title":"Writing for onboarding","description":"Onboarding is often used interchangeably with “new user experience,” but this term also refers to the process of introducing information for more experienced users about ...","date":"","lastModified":1788502504,"image":"/content/media_118b2932d10eccdfa65b99efd3cdb6b8b54eb2067.png?width=1200&format=pjpg&optimize=medium","content":["Writing for onboarding\nCommunication in user onboarding scenarios frames learning and doing in an encouraging way, prompting “a-ha” moments when people recognize that a product is right for them and t"],"platform":"","tags":["onboarding","new user experience","in-app learning","first mile","Adobe Creative Cloud","Learn framework","user goals","tutorials"],"fragments":[],"implementation":""},{"path":"/getting-started/principles","title":"Principles","description":"Spectrum's foundational principles — rational, human, focused, and collaborative — reflect our core values that guide our decisions and how we work. These principles aren't ...","date":"","lastModified":1789072467,"image":"/getting-started/media_182dffe82dc731b3784bda2e1a6bd598cb45d55e4.png?width=1200&format=pjpg&optimize=medium","content":["Principles\n\nSpectrum's foundational principles — rational, human, focused, and collaborative — reflect our core values that guide our decisions and how we work. These principles aren't just for visual"],"platform":"","tags":[],"fragments":[],"implementation":""},{"path":"/getting-started/whats-new","title":"Great design systems evolve alongside the people who use them","description":"This is Spectrum Hub, a unified home for Spectrum where guidance, documentation, and implementation come together in one connected destination, making it easier to move ...","date":"","lastModified":1790688222,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Release 1.0\n\nSeptember 30, 2026\nGreat design systems evolve alongside the people who use them\n\nThis is Spectrum Hub, a unified home for Spectrum where guidance, documentation, and implementation come "],"platform":"","tags":[],"fragments":[],"implementation":""},{"path":"/content/language-and-inclusivity/inclusive-ux-writing","title":"Inclusive UX writing","description":"Language is an extremely powerful way to promote inclusivity. As folks who make products for other people, we like to believe that we are intimately ...","date":"","lastModified":1788502250,"image":"/content/language-and-inclusivity/media_178bb33dbb5d0b98808ddd739185987031466ed37.png?width=1200&format=pjpg&optimize=medium","content":["Inclusive UX writing\nEveryone building products has the responsibility to prioritize inclusion. Writing the language inside products is an extremely powerful way to do so. Writing to include more peop"],"platform":"","tags":["inclusive UX writing","inclusive language","assistive technology"],"fragments":[],"implementation":""},{"path":"/content/language-and-inclusivity/writing-for-readability","title":"Writing for readability","description":"Writing for a 6th-grade reading level on the Flesch-Kincaid readability scale includes more people, not just those with disabilities that affect comprehension. Write with short ...","date":"","lastModified":1788502303,"image":"/content/language-and-inclusivity/media_15d22b47696566e18718450e0bf945379985dbe7c.png?width=1200&format=pjpg&optimize=medium","content":["Writing for readability\nWhen you make content easier to read, you help people with a wide variety of cognitive and neurological abilities. You’re also helping people who might be reading English as a "],"platform":"","tags":["writing","readability","plain language","localization","internationalization","UX writing","jargon","passive voice","active voice","dyslexia accessibility","Flesch-Kincaid"],"fragments":[],"implementation":""},{"path":"/content/language-and-inclusivity/writing-about-people","title":"Writing about people","description":"The goal of all UX content is to be understandable to all — not just to the people paying for something or for those in ...","date":"","lastModified":1788502283,"image":"/content/language-and-inclusivity/media_176b6fe5c5f1ddcabc3646d9b8a9bef47c9ed8936.png?width=1200&format=pjpg&optimize=medium","content":["Writing about people\nHere are some best practices to follow when writing about people. These apply to identity. Best practices\n\nThe goal of all UX content is to be understandable to all — not just to "],"platform":"","tags":["writing","inclusive design","neutral language","person-first language","identity-first language","avoid stereotypes","self-identification","AI bias"],"fragments":[],"implementation":""},{"path":"/content/language-and-inclusivity/writing-with-visuals","title":"Writing with visuals","description":"UX writing never stands alone. Think and write as if visuals don’t exist, and never rely on images as the sole way to communicate a ...","date":"","lastModified":1788502329,"image":"/content/language-and-inclusivity/media_153f197852dd2b3808ad0bed70f653acbbcadba53.png?width=1200&format=pjpg&optimize=medium","content":["Writing with visuals\nLanguage is not the only means of communication. By thinking and writing as if visuals don’t exist in an experience, you help the greatest number of people get your message. Guide"],"platform":"","tags":["writing","inclusive imagery","modular content","directional language","screen readers","consistent navigation","error prevention"],"fragments":[],"implementation":""},{"path":"/web/swc/components/accordion","title":"Accordion","description":"An accordion displays a list of items that can be expanded or collapsed to show additional content. It can support zero, one, or multiple expanded items at a time.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Accordion implementation\nswc\ncomponent\naccordion Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/accordion/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page"],"platform":"web","tags":["component","expandable","collapsible","progressive disclosure","multiple expansion","content organization"],"fragments":["/fragments/components/accordion/anatomy","/fragments/components/accordion/option-details","/fragments/components/accordion/states","/fragments/components/accordion/behaviors","/fragments/components/accordion/usage-guidelines"],"implementation":"swc"},{"path":"/web/swc/components/action-button","title":"Action button","description":"Action buttons perform tasks or mark selections. They’re suited for task-based workflows where buttons don’t need to draw attention.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Action button implementation\nswc\ncomponent\naction-button Anatomy\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/action-button/anatomy Component options\nhttps://main--spectrum-hub--ado"],"platform":"web","tags":["component","task actions","selection","icon-only","tooltip","hold icon","static color"],"fragments":["/fragments/components/action-button/anatomy","/fragments/components/action-button/option-details","/fragments/components/action-button/states","/fragments/components/action-button/behaviors","/fragments/components/action-button/usage-guidelines","/fragments/components/action-button/internationalization","/fragments/components/action-button/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/avatar","title":"Avatar","description":"An avatar is a thumbnail representation of an entity, such as a user or an organization.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Avatar implementation\nswc\ncomponent\navatar Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/avatar/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/swc"],"platform":"web","tags":["component","user representation","profile image","initials","gradient avatar","guest avatar"],"fragments":["/fragments/components/avatar/anatomy","/fragments/components/avatar/option-details","/fragments/components/avatar/states","/fragments/components/avatar/behaviors","/fragments/components/avatar/usage-guidelines"],"implementation":"swc"},{"path":"/web/swc/components/badge","title":"Badge","description":"Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Badge implementation\nswc\ncomponent\nbadge Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/badge/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/swc/da"],"platform":"web","tags":["component","metadata label","color categorization","status","attention"],"fragments":["/fragments/components/badge/anatomy","/fragments/components/badge/option-details","/fragments/components/badge/states","/fragments/components/badge/behaviors","/fragments/components/badge/usage-guidelines","/fragments/components/badge/internationalization","/fragments/components/badge/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/button","title":"Button","description":"Buttons enable actions or navigation between views. They come in multiple styles to support different levels of emphasis, and are commonly used to guide progression through a flow.","date":"","lastModified":1788886507,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Button implementation\nswc\ncomponent\nbutton Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/button/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/swc"],"platform":"web","tags":["component","actions","navigation","emphasis","pending state","static color","accessibility","internationalization"],"fragments":["/fragments/components/button/anatomy","/fragments/components/button/option-details","/fragments/components/button/states","/fragments/components/button/behaviors","/fragments/components/button/content-standards","/fragments/components/button/internationalization","/fragments/components/button/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/divider","title":"Divider","description":"Dividers group or separate related content to clarify layout. They help establish rhythm, visual hierarchy, and structural boundaries.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Divider implementation\nswc\ncomponent\ndivider Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/divider/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/"],"platform":"web","tags":["component","content separation","layout","visual hierarchy"],"fragments":["/fragments/components/divider/anatomy","/fragments/components/divider/option-details","/fragments/components/divider/states","/fragments/components/divider/usage-guidelines","/fragments/components/divider/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/illustrated-message","title":"Illustrated message","description":"Illustrated messages pair text with imagery to communicate a message with visual emphasis. They’re commonly used in empty states, feedback states, and error messaging.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Illustrated message implementation\nswc\ncomponent\nillustrated-message Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/illustrated-message/anatomy Component options\nhttps://main"],"platform":"web","tags":["component","empty state","error messaging","feedback state","illustrations","attention hierarchy"],"fragments":["/fragments/components/illustrated-message/anatomy","/fragments/components/illustrated-message/option-details","/fragments/components/illustrated-message/states","/fragments/components/illustrated-message/behaviors","/fragments/components/illustrated-message/usage-guidelines"],"implementation":"swc"},{"path":"/web/swc/components/progress-circle","title":"Progress circle","description":"Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Progress circle implementation\nswc\ncomponent\nprogress-circle Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/progress-circle/anatomy Component options\nhttps://main--spectrum-h"],"platform":"web","tags":["component","loading","system progress","determinate","indeterminate"],"fragments":["/fragments/components/progress-circle/anatomy","/fragments/components/progress-circle/option-details","/fragments/components/progress-circle/states","/fragments/components/progress-circle/usage-guidelines"],"implementation":"swc"},{"path":"/web/swc/components/status-light","title":"Status light","description":"Status lights indicate the state or condition of an item. They convey semantic meaning such as statuses and categories.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Status light implementation\nswc\ncomponent\nstatus-light Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/status-light/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","status","semantic meaning","categories","state indicator"],"fragments":["/fragments/components/status-light/anatomy","/fragments/components/status-light/option-details","/fragments/components/status-light/states","/fragments/components/status-light/behaviors","/fragments/components/status-light/usage-guidelines"],"implementation":"swc"},{"path":"/web/swc/components/tabs","title":"Tabs","description":"Tabs organize related content into multiple sections. They allow navigation between views while keeping the content grouped under a single context. Use when content can be divided logically into categories within the same view.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Tabs implementation\nswc\ncomponent\ntabs Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/tabs/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/swc/data/"],"platform":"web","tags":["component","navigation","content organization","sections","icon-only","tooltip"],"fragments":["/fragments/components/tabs/anatomy","/fragments/components/tabs/option-details","/fragments/components/tabs/states","/fragments/components/tabs/behaviors","/fragments/components/tabs/usage-guidelines"],"implementation":"swc"},{"path":"/web/rsp/components/action-bar","title":"Action bar","description":"Action bars provide access to actions for selected items. They support both single- and bulk-selection patterns when multiple operations can be performed at once.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Action bar implementation\nrsp\ncomponent\naction-bar Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/action-bar/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.p"],"platform":"web","tags":["component","bulk actions","selection","overlay","toolbar"],"fragments":["/fragments/components/action-bar/anatomy","/fragments/components/action-bar/option-details","/fragments/components/action-bar/states","/fragments/components/action-bar/behaviors","/fragments/components/action-bar/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/action-button","title":"Action button","description":"Action buttons perform tasks or mark selections. They’re suited for task-based workflows where buttons don’t need to draw attention.","date":"","lastModified":1789072819,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Action button implementation\nrsp\ncomponent\naction-button Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/action-button/anatomy Component options\nhttps://main--spectrum-hub--ad"],"platform":"web","tags":["component","task actions","selection","icon-only","tooltip","hold icon","static color"],"fragments":["/fragments/components/action-button/anatomy","/fragments/components/action-button/option-details","/fragments/components/action-button/states","/fragments/components/action-button/behaviors","/fragments/components/action-button/usage-guidelines","/fragments/components/action-button/internationalization","/fragments/components/action-button/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/accordion","title":"Accordion","description":"An accordion displays a list of items that can be expanded or collapsed to show additional content. It can support zero, one, or multiple expanded items at a time.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Accordion implementation\nrsp\ncomponent\naccordion Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/accordion/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page"],"platform":"web","tags":["component","expandable","collapsible","progressive disclosure","multiple expansion","content organization"],"fragments":["/fragments/components/accordion/anatomy","/fragments/components/accordion/option-details","/fragments/components/accordion/states","/fragments/components/accordion/behaviors","/fragments/components/accordion/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/action-group","title":"Action group","description":"An action group organizes related action buttons into a single visual group. Use it to present multiple, task-specific actions together.","date":"","lastModified":1788366515,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Action group implementation\nrsp\ncomponent\naction-group Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/action-group/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","grouped actions","action buttons","selection","toolbar"],"fragments":["/fragments/components/action-group/anatomy","/fragments/components/action-group/option-details","/fragments/components/action-group/states","/fragments/components/action-group/behaviors","/fragments/components/action-group/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/alert-dialog","title":"Alert dialog","description":"Alert dialogs present critical information that must be acknowledged. They appear over the interface and block further interaction until an action is selected.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Alert dialog implementation\nrsp\ncomponent\nalert-dialog Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/alert-dialog/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","dialog","alert","modal","confirmation"],"fragments":["/fragments/components/alert-dialog/anatomy","/fragments/components/alert-dialog/option-details","/fragments/components/alert-dialog/states","/fragments/components/alert-dialog/behaviors","/fragments/components/alert-dialog/usage-guidelines","/fragments/components/alert-dialog/content-standards","/fragments/components/alert-dialog/internationalization","/fragments/components/alert-dialog/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/button-group","title":"Button group","description":"Button groups organize related buttons into a single group for presenting multiple, related actions.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Button group\nimplementation\nrsp\ncomponent\nbutton-group Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/button-group/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","grouped actions","related actions","alignment","action priority"],"fragments":["/fragments/components/button-group/anatomy","/fragments/components/button-group/option-details","/fragments/components/button-group/states","/fragments/components/button-group/behaviors","/fragments/components/button-group/usage-guidelines","/fragments/components/button-group/internationalization","/fragments/components/button-group/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/badge","title":"Badge","description":"Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Badge\nimplementation\nrsp\ncomponent\nbadge Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/badge/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp/da"],"platform":"web","tags":["component","metadata label","color categorization","status","attention"],"fragments":["/fragments/components/badge/anatomy","/fragments/components/badge/option-details","/fragments/components/badge/states","/fragments/components/badge/behaviors","/fragments/components/badge/usage-guidelines","/fragments/components/badge/internationalization","/fragments/components/badge/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/avatar","title":"Avatar","description":"An avatar is a thumbnail representation of an entity, such as a user or an organization.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Avatar implementation\nrsp\ncomponent\navatar Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/avatar/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp"],"platform":"web","tags":["component","user representation","profile image","initials","gradient avatar","guest avatar"],"fragments":["/fragments/components/avatar/anatomy","/fragments/components/avatar/option-details","/fragments/components/avatar/states","/fragments/components/avatar/behaviors","/fragments/components/avatar/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/avatar-group","title":"Avatar group","description":"An avatar group displays a set of related avatars together. It’s typically used to represent a collection of people or entities.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Avatar group\nimplementation\nrsp\ncomponent\navatar-group Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/avatar-group/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","avatars","user representation","stacked","overflow"],"fragments":["/fragments/components/avatar-group/anatomy","/fragments/components/avatar-group/option-details","/fragments/components/avatar-group/states","/fragments/components/avatar-group/behaviors","/fragments/components/avatar-group/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/calendar","title":"Calendar","description":"Calendars display the days of a selected month and highlight the current day. They support navigating to past or future months and selecting a specific date.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Calendar\nimplementation\nrsp\ncomponent\ncalendar Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/calendar/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/de"],"platform":"web","tags":["component","date selection","date","scheduling"],"fragments":["/fragments/components/calendar/anatomy","/fragments/components/calendar/option-details","/fragments/components/calendar/states","/fragments/components/calendar/behaviors","/fragments/components/calendar/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/checkbox-group","title":"Checkbox group","description":"Checkbox groups organize related checkboxes into a single field. They allow multiple selections and are often used in forms where more than one option can apply.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Checkbox group\nimplementation\nrsp\ncomponent\ncheckbox-group Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/checkbox-group/anatomy Component options\nhttps://main--spectrum-hub-"],"platform":"web","tags":["component","selection","multiple selection","form","grouped inputs"],"fragments":["/fragments/components/checkbox-group/anatomy","/fragments/components/checkbox-group/option-details","/fragments/components/checkbox-group/states","/fragments/components/checkbox-group/internationalization","/fragments/components/checkbox-group/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/checkbox","title":"Checkbox","description":"Checkboxes support selecting one or more items from a list. Each item can be selected independently or in combination with others.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Checkbox\nimplementation\nrsp\ncomponent\ncheckbox Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/checkbox/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/de"],"platform":"web","tags":["component","selection","boolean input","form","toggle"],"fragments":["/fragments/components/checkbox/anatomy","/fragments/components/checkbox/option-details","/fragments/components/checkbox/states","/fragments/components/checkbox/behaviors","/fragments/components/checkbox/usage-guidelines","/fragments/components/checkbox/internationalization","/fragments/components/checkbox/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/cards","title":"Cards","description":"Cards group related content and actions into flexible containers for browsing. They preview key information and reveal more detail on interaction.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Cards\nimplementation\nrsp\ncomponent\ncard Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/cards/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp/dat"],"platform":"web","tags":["component","container","preview","content grouping","media"],"fragments":["/fragments/components/cards/anatomy","/fragments/components/cards/card-types","/fragments/components/cards/behaviors","/fragments/components/cards/usage-guidelines","/fragments/components/cards/internationalization","/fragments/components/cards/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/close-button","title":"Close button","description":"Close buttons appear inside other components to offer an affordance to dismiss or close, such as in a toast or action bar.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Close button\nimplementation\nrsp\ncomponent\nclose-button Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/close-button/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","dismiss","close","icon-only"],"fragments":["/fragments/components/close-button/anatomy","/fragments/components/close-button/option-details","/fragments/components/close-button/states","/fragments/components/close-button/behaviors","/fragments/components/close-button/usage-guidelines","/fragments/components/close-button/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/color-area","title":"Color area","description":"A color area enables visual selection of two color properties at once. It's often paired with a color slider or color wheel.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Color area\nimplementation\nrsp\ncomponent\ncolor-area Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/color-area/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.p"],"platform":"web","tags":["component","color selection","color picker","saturation","brightness"],"fragments":["/fragments/components/color-area/anatomy","/fragments/components/color-area/option-details","/fragments/components/color-area/states","/fragments/components/color-area/behaviors","/fragments/components/color-area/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/color-slider","title":"Color slider","description":"Color sliders adjust a single channel of a color. They’re often used in combination with other color controls to provide fine-tuned visual selection.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Color slider\nimplementation\nrsp\ncomponent\ncolor-slider Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/color-slider/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","color selection","color picker","channel"],"fragments":["/fragments/components/color-slider/anatomy","/fragments/components/color-slider/option-details","/fragments/components/color-slider/states","/fragments/components/color-slider/behaviors","/fragments/components/color-slider/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/combo-box","title":"Combo box","description":"Combo boxes combine a text field with a picker menu. They support filtering longer lists by narrowing options based on typed input. Use when both freeform entry and guided selection are needed.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Combo box\nimplementation\nrsp\ncomponent\ncombo-box Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/combo-box/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page"],"platform":"web","tags":["component","selection","autocomplete","dropdown","form","filtering"],"fragments":["/fragments/components/combo-box/anatomy","/fragments/components/combo-box/option-details","/fragments/components/combo-box/states","/fragments/components/combo-box/behaviors","/fragments/components/combo-box/usage-guidelines","/fragments/components/combo-box/internationalization","/fragments/components/combo-box/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/color-wheel","title":"Color wheel","description":"Color wheels adjust a single color channel using a circular track. They offer a visual, radial interface often paired with other color selection tools for more precise control.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Color wheel\nimplementation\nrsp\ncomponent\ncolor-wheel Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/color-wheel/anatomy Component options\nhttps://main--spectrum-hub--adobe.ae"],"platform":"web","tags":["component","color selection","color picker","hue"],"fragments":["/fragments/components/color-wheel/anatomy","/fragments/components/color-wheel/option-details","/fragments/components/color-wheel/states","/fragments/components/color-wheel/behaviors","/fragments/components/color-wheel/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/contextual-help","title":"Contextual help","description":"Buttons enable actions or navigation between views. They come in multiple styles to support different levels of emphasis, and are commonly used to guide progression through a flow.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Contextual help\nimplementation\nrsp\ncomponent\ncontextual-help Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/contextual-help/anatomy Component options\nhttps://main--spectrum-h"],"platform":"web","tags":["component","help","guidance","popover","information"],"fragments":["/fragments/components/contextual-help/anatomy","/fragments/components/contextual-help/option-details","/fragments/components/contextual-help/states","/fragments/components/contextual-help/behaviors","/fragments/components/contextual-help/usage-guidelines","/fragments/components/contextual-help/content-standards","/fragments/components/contextual-help/internationalization","/fragments/components/contextual-help/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/date-picker","title":"Date picker","description":"Date pickers allow selection of a single date or a date range. They include a calendar within a popover, with optional manual entry. Date range variants support selecting a start and end date in one field.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Date picker\nimplementation\nrsp\ncomponent\ndate-picker Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/date-picker/anatomy Component options\nhttps://main--spectrum-hub--adobe.ae"],"platform":"web","tags":["component","date selection","date input","calendar","form"],"fragments":["/fragments/components/date-picker/anatomy","/fragments/components/date-picker/option-details","/fragments/components/date-picker/states","/fragments/components/date-picker/behaviors","/fragments/components/date-picker/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/divider","title":"Divider","description":"Dividers group or separate related content to clarify layout. They help establish rhythm, visual hierarchy, and structural boundaries.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Divider\nimplementation\nrsp\ncomponent\ndivider Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/divider/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/"],"platform":"web","tags":["component","content separation","layout","visual hierarchy"],"fragments":["/fragments/components/divider/anatomy","/fragments/components/divider/option-details","/fragments/components/divider/states","/fragments/components/divider/usage-guidelines","/fragments/components/divider/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/drop-zone","title":"Drop zone","description":"Drop zones accept dragged and dropped objects. They support upload and file management workflows, and are commonly used to move or add content within an interface.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Drop zone\nimplementation\nrsp\ncomponent\ndrop-zone Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/drop-zone/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page"],"platform":"web","tags":["component","file upload","drag and drop","media"],"fragments":["/fragments/components/drop-zone/anatomy","/fragments/components/drop-zone/option-details","/fragments/components/drop-zone/states","/fragments/components/drop-zone/behaviors","/fragments/components/drop-zone/usage-guidelines","/fragments/components/drop-zone/content-standards"],"implementation":"rsp"},{"path":"/web/rsp/components/field-label","title":"Field label","description":"Buttons enable actions or navigation between views. They come in multiple styles to support different levels of emphasis, and are commonly used to guide progression through a flow.","date":"","lastModified":1790028791,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Field label\nimplementation\nrsp\ncomponent\ntext-field Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/field-label/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem"],"platform":"web","tags":["component","form","label","accessibility"],"fragments":["/fragments/components/field-label/anatomy","/fragments/components/field-label/option-details","/fragments/components/field-label/states","/fragments/components/field-label/behaviors","/fragments/components/field-label/usage-guidelines","/fragments/components/field-label/content-standards","/fragments/components/field-label/internationalization","/fragments/components/field-label/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/help-text","title":"Help text","description":"Help text provides additional context for an input field, such as descriptions, instructions, or error messages. It’s commonly used in forms to clarify what’s expected or to explain validation.","date":"","lastModified":1790028813,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Help text\nimplementation\nrsp\ncomponent\ntext-field Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/help-text/anatomy Component options\n\nhttps://main--spectrum-hub--adobe.aem.pa"],"platform":"web","tags":["component","form","guidance","error message","description"],"fragments":["/fragments/components/help-text/anatomy","/fragments/components/help-text/option-details","/fragments/components/help-text/states","/fragments/components/help-text/behaviors","/fragments/components/help-text/usage-guidelines","/fragments/components/help-text/internationalization","/fragments/components/help-text/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/illustrated-message","title":"Illustrated message","description":"Illustrated messages pair text with imagery to communicate a message with visual emphasis. They’re commonly used in empty states, feedback states, and error messaging.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Illustrated message\nimplementation\nrsp\ncomponent\nillustrated-message Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/illustrated-message/anatomy Component options\nhttps://main"],"platform":"web","tags":["component","empty state","error messaging","feedback state","illustrations","attention hierarchy"],"fragments":["/fragments/components/illustrated-message/anatomy","/fragments/components/illustrated-message/option-details","/fragments/components/illustrated-message/states","/fragments/components/illustrated-message/behaviors","/fragments/components/illustrated-message/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/in-line-alert","title":"In-line alert","description":"In-line alerts display non-modal messages connected to elements in a view. They’re often used in forms to show validation feedback across multiple fields.","date":"","lastModified":1788366598,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["In-line alert\nimplementation\nrsp\ncomponent\nin-line-alert Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/in-line-alert/anatomy Component options\nhttps://main--spectrum-hub--ad"],"platform":"web","tags":["component","alert","notification","feedback","messaging"],"fragments":["/fragments/components/in-line-alert/anatomy","/fragments/components/in-line-alert/option-details","/fragments/components/in-line-alert/states","/fragments/components/in-line-alert/behaviors","/fragments/components/in-line-alert/internationalization"],"implementation":"rsp"},{"path":"/web/rsp/components/link","title":"Link","description":"Links provide navigation to a different location. They can appear within a paragraph or as standalone text.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Link\nimplementation\nrsp\ncomponent\nlink Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp/data/Link.json\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/link/option"],"platform":"web","tags":["component","navigation","hyperlink","body copy","accessibility","quiet link"],"fragments":["/fragments/components/link/option-details","/fragments/components/link/states","/fragments/components/link/usage-guidelines","/fragments/components/link/content-standards","/fragments/components/link/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/menu","title":"Menu","description":"Menus present a list of options or actions. They’re often placed in transient containers like popovers or trays, and support selection or configuration tasks.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Menu\nimplementation\nrsp\ncomponent\nmenu Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/menu/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp/data/"],"platform":"web","tags":["component","actions","selection","dropdown","navigation"],"fragments":["/fragments/components/menu/anatomy","/fragments/components/menu/option-details","/fragments/components/menu/states","/fragments/components/menu/behaviors","/fragments/components/menu/usage-guidelines","/fragments/components/menu/content-standards","/fragments/components/menu/internationalization","/fragments/components/menu/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/number-field","title":"Number field","description":"Number fields accept numeric inputs and allow values to be incremented or decremented. They are commonly used when a defined range or step value is required.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Number field\nimplementation\nrsp\ncomponent\nnumber-field Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/number-field/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","form","numeric input","stepper"],"fragments":["/fragments/components/number-field/anatomy","/fragments/components/number-field/option-details","/fragments/components/number-field/states","/fragments/components/number-field/behaviors","/fragments/components/number-field/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/meter","title":"Meter","description":"Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Meter\nimplementation\nrsp\ncomponent\nmeter Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/meter/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp/da"],"platform":"web","tags":["component","quantity","achievement","user progress","semantic values","labels"],"fragments":["/fragments/components/meter/anatomy","/fragments/components/meter/option-details","/fragments/components/meter/states","/fragments/components/meter/behaviors","/fragments/components/meter/usage-guidelines","/fragments/components/meter/internationalization","/fragments/components/meter/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/list-view","title":"List view","description":"List views display content in a structured, scrollable list. They support sorting, organizing, and selecting multiple items at once.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["List view\nimplementation\nrsp\ncomponent\nlist-view Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/list-view/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page"],"platform":"web","tags":["component","list","selection","collection","data display"],"fragments":["/fragments/components/list-view/anatomy","/fragments/components/list-view/option-details","/fragments/components/list-view/states","/fragments/components/list-view/behaviors","/fragments/components/list-view/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/picker","title":"Picker","description":"Pickers present a list of options in a compact format for selection. They’re sometimes called “dropdowns” or “selects,” and the available options may change based on context.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Picker\nimplementation\nrsp\ncomponent\npicker Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/picker/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp"],"platform":"web","tags":["component","selection","dropdown","form"],"fragments":["/fragments/components/picker/anatomy","/fragments/components/picker/option-details","/fragments/components/picker/states","/fragments/components/picker/behaviors","/fragments/components/picker/usage-guidelines","/fragments/components/picker/internationalization","/fragments/components/picker/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/popover","title":"Popover","description":"Popovers are containers for transient content like menus, options, or additional actions. They float above the interface and stand out visually using stroke and drop shadow.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Popover\nimplementation\nrsp\ncomponent\npopover Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/popover/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/"],"platform":"web","tags":["component","overlay","transient content","container","tray","tip"],"fragments":["/fragments/components/popover/anatomy","/fragments/components/popover/option-details","/fragments/components/popover/states","/fragments/components/popover/behaviors","/fragments/components/popover/usage-guidelines","/fragments/components/popover/internationalization","/fragments/components/popover/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/progress-circle","title":"Progress circle","description":"Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.","date":"","lastModified":1788883109,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Progress circle\nimplementation\nrsp\ncomponent\nprogress-circle Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/progress-circle/anatomy Component options\nhttps://main--spectrum-h"],"platform":"web","tags":["component","loading","system progress","determinate","indeterminate"],"fragments":["/fragments/components/progress-circle/anatomy","/fragments/components/progress-circle/option-details","/fragments/components/progress-circle/states","/fragments/components/progress-circle/usage-guidelines","/fragments/components/progress-circle/internationalization","/fragments/components/progress-circle/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/progress-bar","title":"Progress bar","description":"Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Progress bar\nimplementation\nrsp\ncomponent\nprogress-bar Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/progress-bar/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","loading","system progress","determinate","indeterminate","labels"],"fragments":["/fragments/components/progress-bar/anatomy","/fragments/components/progress-bar/option-details","/fragments/components/progress-bar/states","/fragments/components/progress-bar/behaviors","/fragments/components/progress-bar/usage-guidelines","/fragments/components/progress-bar/internationalization","/fragments/components/progress-bar/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/radio-button","title":"Radio button","description":"Radio buttons present a list of options where only one can be selected at a time. They are styled consistently with other components that support binary selection. Use when all options should be visible and only one can apply.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Radio button\nimplementation\nrsp\ncomponent\nradio-group Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/radio-button/anatomy Component options\nhttps://main--spectrum-hub--adobe."],"platform":"web","tags":["component","selection","single selection","form"],"fragments":["/fragments/components/radio-button/anatomy","/fragments/components/radio-button/option-details","/fragments/components/radio-button/states","/fragments/components/radio-button/behaviors","/fragments/components/radio-button/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/radio-group","title":"Radio group","description":"Radio groups organize related radio buttons into a single selection set. Only one option can be selected at a time.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Radio group\nimplementation\nrsp\ncomponent\nradio-group Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/radio-group/anatomy Component options\nhttps://main--spectrum-hub--adobe.ae"],"platform":"web","tags":["component","selection","single selection","form","grouped inputs"],"fragments":["/fragments/components/radio-group/anatomy","/fragments/components/radio-group/option-details","/fragments/components/radio-group/states","/fragments/components/radio-group/behaviors","/fragments/components/radio-group/usage-guidelines","/fragments/components/radio-group/internationalization","/fragments/components/radio-group/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/segmented-control","title":"Segmented control","description":"Segmented controls display a group of buttons where only one can be selected at a time. They're ideal for toggling between layouts like a list, grid, or map. Avoid using them for navigation or triggering actions.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Segmented control\nimplementation\nrsp\ncomponent\nsegmented-control Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/segmented-control/anatomy Component options\nhttps://main--spec"],"platform":"web","tags":["component","selection","single selection","view switching"],"fragments":["/fragments/components/segmented-control/anatomy","/fragments/components/segmented-control/option-details","/fragments/components/segmented-control/states","/fragments/components/segmented-control/behaviors","/fragments/components/segmented-control/usage-guidelines","/fragments/components/segmented-control/internationalization","/fragments/components/segmented-control/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/search-field","title":"Search field","description":"Search fields enable finding or filtering items based on text input.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Search field implementation\nrsp\ncomponent\nsearch-field Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/search-field/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","search","form","text input"],"fragments":["/fragments/components/search-field/anatomy","/fragments/components/search-field/option-details","/fragments/components/search-field/states","/fragments/components/search-field/behaviors","/fragments/components/search-field/usage-guidelines","/fragments/components/search-field/internationalization","/fragments/components/search-field/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/standard-dialog","title":"Standard dialog","description":"Standard dialogs are containers that appear over the interface to present contextual information, tasks, or workflows. They’re centered on the screen and used for moderately complex actions that require focused attention. Interactions outside the dialog are blocked until it's dismissed or completed.","date":"","lastModified":1788366709,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Standard dialog\nimplementation\nrsp\ncomponent\nstandard-dialog Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/standard-dialog/anatomy Component options\nhttps://main--spectrum-h"],"platform":"web","tags":["component","dialog","modal","overlay"],"fragments":["/fragments/components/standard-dialog/anatomy","/fragments/components/standard-dialog/option-details","/fragments/components/standard-dialog/states","/fragments/components/standard-dialog/behaviors","/fragments/components/standard-dialog/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/side-navigation","title":"Side navigation","description":"Side navigation provides access to the main content areas of a product or section. It can support single-level or multi-level navigation.","date":"","lastModified":1788366675,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Side navigation\nimplementation\nrsp\ncomponent\nside-navigation Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/side-navigation/anatomy Component options\nhttps://main--spectrum-h"],"platform":"web","tags":[],"fragments":["/fragments/components/side-navigation/anatomy","/fragments/components/side-navigation/option-details","/fragments/components/side-navigation/states","/fragments/components/side-navigation/behaviors","/fragments/components/side-navigation/usage-guidelines","/fragments/components/side-navigation/internationalization","/fragments/components/side-navigation/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/select-box","title":"Select box","description":"Select boxes are for choosing one or more options from a visual list. They always pair with a title and may include illustrations. Use them when visual selection improves clarity over pickers or checkboxes.","date":"","lastModified":1788366644,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Select box\nimplementation\nrsp\ncomponent\nselect-box Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/select-box/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.p"],"platform":"web","tags":["component","selection","form","card selection"],"fragments":["/fragments/components/select-box/anatomy","/fragments/components/select-box/option-details","/fragments/components/select-box/states","/fragments/components/select-box/behaviors","/fragments/components/select-box/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/slider","title":"Slider","description":"Sliders select a value along a continuous range. They’re ideal when upper and lower limits are fixed. Use when approximate or fast selection is more important than precision.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Slider\nimplementation\nrsp\ncomponent\nslider Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/slider/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp"],"platform":"web","tags":["component","range input","value selection","form"],"fragments":["/fragments/components/slider/anatomy","/fragments/components/slider/option-details","/fragments/components/slider/states","/fragments/components/slider/behaviors","/fragments/components/slider/usage-guidelines","/fragments/components/slider/internationalization","/fragments/components/slider/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/status-light","title":"Status light","description":"Status lights indicate the state or condition of an item. They convey semantic meaning such as statuses and categories.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Status light\nimplementation\nrsp\ncomponent\nstatus-light Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/status-light/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","status","semantic meaning","categories","state indicator"],"fragments":["/fragments/components/status-light/anatomy","/fragments/components/status-light/option-details","/fragments/components/status-light/states","/fragments/components/status-light/behaviors","/fragments/components/status-light/usage-guidelines","/fragments/components/status-light/internationalization","/fragments/components/status-light/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/swatch-group","title":"Swatch group","description":"Swatch groups organize related swatches into a single container. They’re used to display collections of colors, gradients, textures, or materials for comparison or selection.","date":"","lastModified":1788366801,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Swatch group\nimplementation\nrsp\ncomponent\nswatch-group Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/swatch-group/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","color","color selection","grouped"],"fragments":["/fragments/components/swatch-group/anatomy","/fragments/components/swatch-group/option-details","/fragments/components/swatch-group/states","/fragments/components/swatch-group/behaviors","/fragments/components/swatch-group/usage-guidelines","/fragments/components/swatch-group/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/swatch","title":"Swatch","description":"A swatch shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.","date":"","lastModified":1788366736,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Swatch\nimplementation\nrsp\ncomponent\nswatch Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/swatch/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp"],"platform":"web","tags":["component","color","color selection","preview"],"fragments":["/fragments/components/swatch/anatomy","/fragments/components/swatch/option-details","/fragments/components/swatch/states","/fragments/components/swatch/behaviors","/fragments/components/swatch/usage-guidelines","/fragments/components/swatch/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/switch","title":"Switch","description":"Switches toggle an individual option on or off. They're typically used to activate or deactivate a specific setting.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Switch\nimplementation\nrsp\ncomponent\nswitch Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/switch/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp"],"platform":"web","tags":["component","toggle","boolean input","form"],"fragments":["/fragments/components/switch/anatomy","/fragments/components/switch/option-details","/fragments/components/switch/states","/fragments/components/switch/behaviors","/fragments/components/switch/usage-guidelines","/fragments/components/switch/content-standards","/fragments/components/switch/internationalization","/fragments/components/switch/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/tabs","title":"Tabs","description":"Tabs organize related content into multiple sections. They allow navigation between views while keeping the content grouped under a single context. Use when content can be divided logically into categories within the same view.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Tabs\nimplementation\nrsp\ncomponent\ntabs Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/tabs/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp/data/"],"platform":"web","tags":["component","navigation","content organization","sections","icon-only","tooltip"],"fragments":["/fragments/components/tabs/anatomy","/fragments/components/tabs/option-details","/fragments/components/tabs/states","/fragments/components/tabs/behaviors","/fragments/components/tabs/usage-guidelines","/fragments/components/tabs/internationalization","/fragments/components/tabs/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/table","title":"Table","description":"Tables organize and display structured information in rows and columns. They support scanning, sorting, comparing, and interacting with large amounts of data. Use when multiple data points need to be reviewed or acted on in one place.","date":"","lastModified":1788366801,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Table\nimplementation\nrsp\ncomponent\ntable Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/table/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp/da"],"platform":"web","tags":["component","data display","rows","columns","selection","sorting"],"fragments":["/fragments/components/table/anatomy","/fragments/components/table/option-details","/fragments/components/table/states","/fragments/components/table/behaviors","/fragments/components/table/usage-guidelines","/fragments/components/table/internationalization","/fragments/components/table/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/tag","title":"Tag","description":"Tags categorize content such as keywords or names. They're often grouped to represent a search query or describe an item.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Tag\nimplementation\nrsp\ncomponent\ntag Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/tag/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp/data/Tag"],"platform":"web","tags":["component","label","metadata","removable","categorization"],"fragments":["/fragments/components/tag/anatomy","/fragments/components/tag/option-details","/fragments/components/tag/states","/fragments/components/tag/behaviors","/fragments/components/tag/usage-guidelines","/fragments/components/tag/internationalization","/fragments/components/tag/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/tag-group","title":"Tag group","description":"Tag groups organize multiple tags into a single visual group. They’re used to categorize content like keywords or names that describe an item or search query. Tags within the group can be added, removed, or styled to reflect different types of content.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Tag group\nimplementation\nrsp\ncomponent\ntag-group Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/tag-group/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page"],"platform":"web","tags":["component","labels","metadata","grouped","categorization"],"fragments":["/fragments/components/tag-group/anatomy","/fragments/components/tag-group/option-details","/fragments/components/tag-group/states","/fragments/components/tag-group/behaviors","/fragments/components/tag-group/usage-guidelines","/fragments/components/tag-group/internationalization","/fragments/components/tag-group/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/text-area","title":"Text area","description":"Text areas support longer-form text input compared to a text field. They allow for custom entries and support the same validation options as text fields. Use when more space is needed for input, like comments or descriptions.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Text area\nimplementation\nrsp\ncomponent\ntext-area Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/text-area/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page"],"platform":"web","tags":["component","form","text input","multiline"],"fragments":["/fragments/components/text-area/anatomy","/fragments/components/text-area/option-details","/fragments/components/text-area/states","/fragments/components/text-area/behaviors","/fragments/components/text-area/usage-guidelines","/fragments/components/text-area/internationalization","/fragments/components/text-area/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/takeover-dialog","title":"Takeover dialog","description":"Takeover dialogs are full-screen modals used for complex or immersive workflows. They block access to the rest of the interface and are typically used when multiple steps or tools need focused attention. Use when the task requires the entire screen and shouldn’t be interrupted.","date":"","lastModified":1788366801,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Takeover dialog\nimplementation\nrsp\ncomponent\ntakeover-dialog Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/takeover-dialog/anatomy Component options\nhttps://main--spectrum-h"],"platform":"web","tags":["component","dialog","modal","full screen","overlay"],"fragments":["/fragments/components/takeover-dialog/anatomy","/fragments/components/takeover-dialog/option-details","/fragments/components/takeover-dialog/states","/fragments/components/takeover-dialog/behaviors","/fragments/components/takeover-dialog/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/text-field","title":"Text field","description":"Text fields collect custom text input. They can display optional cues to indicate formatting, validation, or other input requirements.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Text field\nimplementation\nrsp\ncomponent\ntext-field Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/text-field/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.p"],"platform":"web","tags":["component","form","text input"],"fragments":["/fragments/components/text-field/anatomy","/fragments/components/text-field/option-details","/fragments/components/text-field/states","/fragments/components/text-field/behaviors","/fragments/components/text-field/usage-guidelines","/fragments/components/text-field/internationalization","/fragments/components/text-field/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/toast","title":"Toast","description":"Toasts display brief, temporary notifications. They appear briefly without blocking interaction and typically do not require user action.","date":"","lastModified":1788366801,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Toast\nimplementation\nrsp\ncomponent\ntoast Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/toast/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp/da"],"platform":"web","tags":["component","notification","feedback","transient","messaging"],"fragments":["/fragments/components/toast/anatomy","/fragments/components/toast/option-details","/fragments/components/toast/states","/fragments/components/toast/behaviors","/fragments/components/toast/usage-guidelines","/fragments/components/toast/content-standards","/fragments/components/toast/internationalization","/fragments/components/toast/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/tooltip","title":"Tooltip","description":"Tooltips display contextual information related to a specific component. They appear on hover or focus to clarify purpose or behavior.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Tooltip\nimplementation\nrsp\ncomponent\ntooltip Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/tooltip/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/"],"platform":"web","tags":["component","contextual information","hover","focus","icon description"],"fragments":["/fragments/components/tooltip/anatomy","/fragments/components/tooltip/option-details","/fragments/components/tooltip/states","/fragments/components/tooltip/behaviors","/fragments/components/tooltip/usage-guidelines","/fragments/components/tooltip/internationalization","/fragments/components/tooltip/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/tree-view","title":"Tree view","description":"Tree views display nested, hierarchical content in a collapsible structure. They allow for navigation through multiple levels of grouped information.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Tree view\nimplementation\nrsp\ncomponent\ntree-view Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/tree-view/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page"],"platform":"web","tags":["component","hierarchy","navigation","expandable","collapsible","data display"],"fragments":["/fragments/components/tree-view/anatomy","/fragments/components/tree-view/option-details","/fragments/components/tree-view/states","/fragments/components/tree-view/behaviors","/fragments/components/tree-view/usage-guidelines","/fragments/components/tree-view/internationalization","/fragments/components/tree-view/accessibility"],"implementation":"rsp"},{"path":"/foundations/layout-and-structure/spacing/layout-spacing","title":"Layout spacing","description":"Layout spacing governs object relationships, such as the spacing between components, patterns, and regions of a UI. It’s implemented through global tokens, which follow a ...","date":"","lastModified":1786641461,"image":"/foundations/layout-and-structure/spacing/media_145959d12e2036f178463a7e45e822fa344fb1a76.png?width=1200&format=pjpg&optimize=medium","content":["Layout spacing\nLayout spacing defines the relationships between the components, patterns, and regions that make up a product UI. How it works\n\nLayout spacing governs object relationships, such as the "],"platform":"","tags":["layout spacing","global tokens","geometric progression","semantic tokens","8 px grid","linear progression","perceptual spacing","spacing scale"],"fragments":[],"implementation":""},{"path":"/foundations/layout-and-structure/spacing/component-spacing","title":"Component spacing","description":"Internal component spacing governs the space within components. It follows its own geometric scales, each designed to reconcile the type scale and component sizes as ...","date":"","lastModified":1786641398,"image":"/foundations/layout-and-structure/spacing/media_13877deedffd2fff65afeca3121a99c8e583d6145.png?width=1200&format=pjpg&optimize=medium","content":["Component spacing\nComponent spacing defines the internal relationships within a component, ensuring they stay correct at every size and density. How it works\n\nInternal component spacing governs the sp"],"platform":"","tags":["component spacing","semantic tokens","structural templates","density","spacing tokens","collections","containers","base-level tokens","list-level tokens","container-level tokens"],"fragments":[],"implementation":""},{"path":"/foundations/design-data/design-tokens","title":"Design tokens","description":"Design tokens — or tokens — are a methodology for expressing reusable design decisions as structured data.","date":"","lastModified":1786724995,"image":"/foundations/design-data/media_1272cfe47dfa2364061faf1da791213ed4686cf03.png?width=1200&format=pjpg&optimize=medium","content":["Design tokens\nDesign tokens are reusable design decisions that help teams build and maintain consistent Spectrum experiences across products, platforms, and tools. What are design tokens?\n\nDesign toke"],"platform":"","tags":["design tokens","token taxonomy","aliasing","semantic design","color","spacing","typography"],"fragments":[],"implementation":""},{"path":"/foundations/color/colors","title":"Colors","description":"Spectrum’s color system is used for all colored components, text, and icons, for both semantic and non-semantic usage. We also use colors in our data ...","date":"","lastModified":1786640909,"image":"/foundations/color/media_127f8d666908a0c5bb9520cfb763318ace12e2a14.png?width=1200&format=pjpg&optimize=medium","content":["Colors\n\nSpectrum’s color system is used for all colored components, text, and icons, for both semantic and non-semantic usage. We also use colors in our data visualization color palettes. Principles\nA"],"platform":"","tags":["color system","accessibility","WCAG contrast","Leonardo color tool","brand colors","key colors","hue ranges","contrast ratios","two-tone color pairing"],"fragments":[],"implementation":""},{"path":"/foundations/color/grays","title":"Grays","description":"Spectrum 2’s gray system is based on the 11-color system of neutral grays used in Spectrum’s 6.0.0 colors. 11 gray values (per color theme) are ...","date":"","lastModified":1786113471,"image":"/foundations/color/media_1718a6fcd9d08a32e95a5c255aef2fe52a84b2210.png?width=1200&format=pjpg&optimize=medium","content":["Grays\n\nSpectrum 2’s gray system is based on the 11-color system of neutral grays used in Spectrum’s 6.0.0 colors. 11 gray values (per color theme) are used to create background layers, component state"],"platform":"","tags":["gray-system","neutral-grays","Gray-25","Gray-50","Gray-75","Gray-100","Gray-800","accessibility"],"fragments":[],"implementation":""},{"path":"/foundations/color/background-layers","title":"Background layers","description":"Background layers utilize Spectrum’s gray system, which contains many options for greater flexibility.","date":"","lastModified":1786640956,"image":"/foundations/color/media_12f8a344d00de218d60272e8844cbaf73e9579dcb.png?width=1200&format=pjpg&optimize=medium","content":["Background layers\n\nBackground layers utilize Spectrum’s gray system, which contains many options for greater flexibility. Layering system\n\nIn Spectrum, background layers are used differently depending"],"platform":"","tags":["background layers","elevated background","editing contexts","browsing contexts","canvas","Layer 1","Layer 2","Pasteboard","artboard"],"fragments":[],"implementation":""},{"path":"/foundations/layout-and-structure/spacing/overview","title":"Spacing","description":"Spacing communicates structure and relationships. When spacing is done well, an interface becomes immediately understandable.","date":"","lastModified":1786641555,"image":"/foundations/layout-and-structure/spacing/media_16a3b286ff845e016ab5af169d6cc43b54f3a5820.png?width=1200&format=pjpg&optimize=medium","content":["Spacing\n\nSpacing communicates structure and relationships. When spacing is done well, an interface becomes immediately understandable. Principles\n\nSpectrum's spacing system is built on three principle"],"platform":"","tags":["Spacing","Proximity","Negative space","Layout spacing","Component spacing","Relational","Perceptual","Boundaries","Structure","Cognitive load"],"fragments":[],"implementation":""},{"path":"/foundations/attention-hierarchy","title":"Attention hierarchy","description":"Design systems are ultimately communication systems. A main goal of any kind of UI communication — visual, linguistic, motion, and more — is to convey ...","date":"","lastModified":1787558613,"image":"/foundations/media_1ce6d3a99a1370557cc7e007eeb6759d98ac3542b.png?width=1200&format=pjpg&optimize=medium","content":["Attention hierarchy\n\nDesign systems are ultimately communication systems. A main goal of any kind of UI communication — visual, linguistic, motion, and more — is to convey a message in a way that the "],"platform":"","tags":["attention hierarchy","high attention","low attention","UI communication","elevation","contrast"],"fragments":[],"implementation":""},{"path":"/foundations/typography/overview","title":"Typography","description":"Typography creates visual hierarchy, communicates information, and brings consistency across Spectrum experiences. This overview introduces Adobe Clean Spectrum and its features.","date":"","lastModified":1786641249,"image":"/foundations/typography/media_16a9c337a6bdb865078b1b7fd9656ff863a19fa48.png?width=1200&format=pjpg&optimize=medium","content":["Typography\n\nTypography creates visual hierarchy, communicates information, and brings consistency across Spectrum experiences. This overview introduces Adobe Clean Spectrum and its features. Typefaces"],"platform":"","tags":["Typography","Adobe Clean Spectrum","Spectrum VF","variable font","baseline metrics","UI alignment","font family","readability"],"fragments":[],"implementation":""},{"path":"/foundations/typography/applying-the-type-system","title":"Applying the type system","description":"The following examples demonstrate how Spectrum's typography system works in practice. Learn how to combine type styles to create clear visual hierarchy, improve readability, and ...","date":"","lastModified":1786641164,"image":"/foundations/typography/media_1dbd33d29bdeaa9a2297cbfa8e22527dfe7e98eea.png?width=1200&format=pjpg&optimize=medium","content":["Applying the type system\n\nThe following examples demonstrate how Spectrum's typography system works in practice. Learn how to combine type styles to create clear visual hierarchy, improve readability,"],"platform":"","tags":["typography","visual hierarchy","readability","font sizes","monospace numbers","tabular numbers"],"fragments":[],"implementation":""},{"path":"/foundations/typography/typography-system","title":"Typography system","description":"Spectrum's typography system defines the styles, measurements, and behaviors used to create consistent typography across products and platforms. This page covers font weights, font sizes, ...","date":"","lastModified":1786641119,"image":"/foundations/typography/media_1eb618f284fe0a59b0052ba0774707b15ee744421.png?width=1200&format=pjpg&optimize=medium","content":["Typography system\n\nSpectrum's typography system defines the styles, measurements, and behaviors used to create consistent typography across products and platforms. This page covers font weights, font "],"platform":"","tags":["typography","font weights","font sizes","Major Second type scale","1.125 ratio","Bold","ExtraBold"],"fragments":[],"implementation":""},{"path":"/foundations/layout-and-structure/containers","title":"Containers","description":"In Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific contexts. Containers are used across Spectrum ...","date":"","lastModified":1789133577,"image":"/foundations/layout-and-structure/media_1daffa98ca15b1299210db1dd829d7377de85e65a.png?width=1200&format=pjpg&optimize=medium","content":["Containers\n\nContainers separate concepts with distinct purposes. Overview\n\nIn Spectrum 2, containers have more defined rules to help guide in the creation of custom containers for product-specific con"],"platform":"","tags":["containers","cards","select boxes","padding","spacing","background color","emphasis","border","dividers"],"fragments":[],"implementation":""},{"path":"/foundations/brand","title":"Brand","description":"Brand considerations are significantly interwoven into Spectrum 2. What’s covered here is primarily focused on in-app UI considerations. Please note that what’s here is still ...","date":"","lastModified":1789058631,"image":"/foundations/media_1b535db2549466c3c1f81290211e8cb97e3b0277c.png?width=1200&format=pjpg&optimize=medium","content":["Brand\n\nBrand considerations are significantly interwoven into Spectrum 2. What’s covered here is primarily focused on in-app UI considerations. Please note that what’s here is still in progress, and w"],"platform":"","tags":["Brand assets","Product logos","App icons","Loading screens","Brand colors","Gradients","Creative Cloud"],"fragments":[],"implementation":""},{"path":"/foundations/icons-and-illustrations/icon-fundamentals","title":"Icon fundamentals","description":"Spectrum 2 icons are crisp, modern, and clean. They have more personality in the form of rounder corners and motion, and use more playful but ...","date":"","lastModified":1790265735,"image":"/foundations/icons-and-illustrations/media_186e10215cc2ec94ea4794b27b57720bad8aee6ce.png?width=1200&format=pjpg&optimize=medium","content":["Icon fundamentals\nIcons designed to balance personality with function\n\nSpectrum 2 icons are crisp, modern, and clean. They have more personality in the form of rounder corners and motion, and use more"],"platform":"","tags":["icons","outline","monochrome","stroke-weight","iconography"],"fragments":[],"implementation":""},{"path":"/foundations/icons-and-illustrations/illustration","title":"Illustration","description":"The illustrations and graphics in Spectrum 2 have been completely reworked to reflect the significant update of our design system.","date":"","lastModified":1786724743,"image":"/foundations/icons-and-illustrations/media_1e2e92e2f9fe5ea738e0a0e068ed9a5849c918cef.png?width=1200&format=pjpg&optimize=medium","content":["Illustration\n\nThe illustrations and graphics in Spectrum 2 have been completely reworked to reflect the significant update of our design system.\n\nFundamentals\n\nSpectrum 2 (S2) evolved around the need "],"platform":"","tags":["illustrations","gradient illustrations","linear illustrations","brand colors","SVG export"],"fragments":[],"implementation":""},{"path":"/foundations/icons-and-illustrations/using-icons","title":"Using icons","description":"The Spectrum 2 icon library is available as a resource in Figma. Find it under Spectrum 2 design resources.","date":"","lastModified":1790267301,"image":"/foundations/icons-and-illustrations/media_19d660d204b7c5e1a7c63b2222d9d074c750f5bd7.png?width=1200&format=pjpg&optimize=medium","content":["Using icons\nFinding and Requesting icons\n\nThe Spectrum 2 icon library is available as a resource in Figma. Find it under Spectrum 2 design resources.\n\nReach out to the Icons team to request product-sp"],"platform":"","tags":["icons","Workfront","Icon Finder","Noun Project","naming convention","UI icons","workflow icons"],"fragments":[],"implementation":""},{"path":"/foundations/app-frame/content-area-browsing-context","title":"Browsing context: Content area","description":"The app frame content area is the primary focus of a page, and should draw the most attention. This area is flexible and supports several ...","date":"","lastModified":1788501263,"image":"/foundations/app-frame/media_1888eb15925ef38add72e53457d0b49a04da716e6.png?width=1200&format=pjpg&optimize=medium","content":["Browsing context: Content area\n\nThe app frame content area is the primary focus of a page, and should draw the most attention. This area is flexible and supports several different layouts, dependent o"],"platform":"","tags":["app frame","content area","multi-layout sections","horizontal sections","vertical sections","grid layout"],"fragments":[],"implementation":""},{"path":"/foundations/app-frame/header-browsing-context","title":"Browsing context: Header","description":"Because the header contains critical, need-to-know information about where the user is within the greater Adobe ecosystem, it needs to be standardized across all Adobe ...","date":"","lastModified":1788501505,"image":"/foundations/app-frame/media_1888eb15925ef38add72e53457d0b49a04da716e6.png?width=1200&format=pjpg&optimize=medium","content":["Browsing context: Header\n\nBecause the header contains critical, need-to-know information about where the user is within the greater Adobe ecosystem, it needs to be standardized across all Adobe produc"],"platform":"","tags":["App frame header","Top App Bar (TAB)","Product lock-up","Navigation","Universal nav"],"fragments":[],"implementation":""},{"path":"/foundations/app-frame/creating-bluelines-browsing-context","title":"Creating bluelines","description":"Please refer to Adobe Accessibility’s guidance on bluelines and training for Stark. The blueline annotations training on the Adobe Learning Manager is also a helpful ...","date":"","lastModified":1788501366,"image":"/foundations/app-frame/media_1e2f50d49e3390a5bd8d9651aa674dd0d2ac75a42.png?width=1200&format=pjpg&optimize=medium","content":["Creating bluelines\n\nPlease refer to Adobe Accessibility’s guidance on bluelines and training for Stark. The blueline annotations training on the Adobe Learning Manager is also a helpful resource to re"],"platform":"","tags":["app frame","bluelines","accessible names","landmark regions","heading annotations","side navigation","universal navigation","complementary landmark"],"fragments":[],"implementation":""},{"path":"/foundations/app-frame/overview","title":"App frame","description":"The app frame is the core navigation direction for Spectrum 2. It’s designed as a flexible framework that’s readily adaptable to specific product needs while ...","date":"","lastModified":1788501568,"image":"/foundations/app-frame/media_1888eb15925ef38add72e53457d0b49a04da716e6.png?width=1200&format=pjpg&optimize=medium","content":["App frame\n\nThe app frame is the core navigation direction for Spectrum 2. It’s designed as a flexible framework that’s readily adaptable to specific product needs while still creating a shared, predic"],"platform":"","tags":["App frame","Framework","Navigation","Browsing context","Editing context"],"fragments":[],"implementation":""},{"path":"/foundations/app-frame/side-navigation-browsing-context","title":"Browsing context: Side nav","description":"The side navigation is always used in partnership with the header, and never instead of it. When used, the side navigation holds the main categories ...","date":"","lastModified":1788501460,"image":"/foundations/app-frame/media_1888eb15925ef38add72e53457d0b49a04da716e6.png?width=1200&format=pjpg&optimize=medium","content":["Browsing context: Side nav\n\nThe side navigation is always used in partnership with the header, and never instead of it. When used, the side navigation holds the main categories of product functionalit"],"platform":"","tags":["app frame side navigation","side nav"],"fragments":[],"implementation":""},{"path":"/foundations/styles/object-styles/drop-shadow","title":"Drop shadow","description":"Spectrum provides a range of drop shadow styles that communicate elevation, create visual separation, and emphasize important interface elements. Consistent use of shadows reinforces visual ...","date":"","lastModified":1786724538,"image":"/foundations/styles/object-styles/media_1a1e6aacecc174ee4edd6d35eeae75319c8e21fcb.png?width=1200&format=pjpg&optimize=medium","content":["Drop shadow\n\nSpectrum provides a range of drop shadow styles that communicate elevation, create visual separation, and emphasize important interface elements. Consistent use of shadows reinforces visu"],"platform":"","tags":["drop shadow","elevation","ambient shadow","transition shadow","key shadow","dark theme","overlay","shadow tokens"],"fragments":[],"implementation":""},{"path":"/foundations/styles/object-styles/overview","title":"Object styles","description":"Object styles are specific visual shapes or effects that are used to communicate intent or to give cues about an interaction.","date":"","lastModified":1786724558,"image":"/foundations/styles/object-styles/media_1af2e9e68a5b398b0d0fb88b7e60140dc85ff35ce.png?width=1200&format=pjpg&optimize=medium","content":["Object styles\n\nObject styles are specific visual shapes or effects that are used to communicate intent or to give cues about an interaction. Overview\n\nSpectrum’s object styles include rounding, border"],"platform":"","tags":["Object styles","Rounding","Border width","Drop shadow"],"fragments":[],"implementation":""},{"path":"/foundations/styles/object-styles/border-width","title":"Border width","description":"Spectrum provides a range of border width options that create clear separation between interface elements, groups of content, and adjacent surfaces. Consistent use of borders ...","date":"","lastModified":1786724520,"image":"/foundations/styles/object-styles/media_1b798c6042fc06f0d907598c9655262bc38584362.png?width=1200&format=pjpg&optimize=medium","content":["Border width\n\nSpectrum provides a range of border width options that create clear separation between interface elements, groups of content, and adjacent surfaces. Consistent use of borders reinforces "],"platform":"","tags":["border width","divider"],"fragments":[],"implementation":""},{"path":"/foundations/styles/object-styles/rounding","title":"Rounding","description":"Spectrum provides a flexible rounding system with a range of corner radius options that create visually balanced interfaces across different component sizes and layouts. By ...","date":"","lastModified":1786724583,"image":"/foundations/styles/object-styles/media_145c0ebc666db9f1e2fd773b47eb47ceb2e3845a1.png?width=1200&format=pjpg&optimize=medium","content":["Rounding\n\nSpectrum provides a flexible rounding system with a range of corner radius options that create visually balanced interfaces across different component sizes and layouts. By applying rounded "],"platform":"","tags":["rounding","corner radius","nested corners","concentric corners","continuous corners"],"fragments":[],"implementation":""},{"path":"/support/ai-resource-guide","title":"AI resource guide","description":"GitHub Copilot is the current tool of choice for Adobe employees. Learn more on the GitHub Copilot at Adobe website. Instructions for setting up to ...","date":"","lastModified":1790716290,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["AI resource guide\nSpectrum's approach to AI tooling centers on coordinating the offerings of our multi-platform system.\nAI Engineering at Adobe\n\nGitHub Copilot is the current tool of choice for Adobe "],"platform":"","tags":["AI tooling","Protopack","Design data","Figma","Claude Enterprise","Prototyping","design-to-code"],"fragments":[],"implementation":""},{"path":"/getting-started/introduction","title":"Spectrum is Adobe’s design system","description":"A shared foundation for creating experiences across every product and platform. It brings design and engineering together around a common language, while remaining flexible enough ...","date":"","lastModified":1789072291,"image":"/getting-started/media_16f1ef6e6a64f23a423081e860fe4b3dbfeaf73e7.png?width=1200&format=pjpg&optimize=medium","content":["Spectrum is Adobe’s design system\n\nA shared foundation for creating experiences across every product and platform. It brings design and engineering together around a common language, while remaining f"],"platform":"","tags":["Spectrum 2","introduction"],"fragments":[],"implementation":""},{"path":"/web/design-only/components/alert-banner","title":"Alert banner","description":"Alert banners communicate high-priority messages that need immediate attention. They appear prominently in the interface and often prompt an action.","date":"","lastModified":1786561416,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Alert banner Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/alert-banner/anatomy Component options\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/alert-bann"],"platform":"web","tags":[],"fragments":["/fragments/components/alert-banner/anatomy","/fragments/components/alert-banner/option-details","/fragments/components/alert-banner/states","/fragments/components/alert-banner/behaviors","/fragments/components/alert-banner/usage-guidelines","/fragments/components/alert-banner/content-standards","/fragments/components/alert-banner/internationalization","/fragments/components/alert-banner/accessibility"],"implementation":""},{"path":"/web/design-only/components/coach-indicator","title":"Coach indicator","description":"Coach indicators visually connect a UI element to its explanation during a guided experience. They’re typically used in onboarding tours to point from a coach mark to the element being referenced. This helps reinforce context and improve clarity in step-by-step flows.","date":"","lastModified":1786631060,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Coach indicator Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/coach-indicator/anatomy Component options\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/coac"],"platform":"web","tags":[],"fragments":["/fragments/components/coach-indicator/anatomy","/fragments/components/coach-indicator/option-details","/fragments/components/coach-indicator/states","/fragments/components/coach-indicator/behaviors","/fragments/components/coach-indicator/usage-guidelines"],"implementation":""},{"path":"/web/design-only/components/rating","title":"Rating","description":"Ratings allow scoring of an item or experience based on quality or preference. Common examples include images, forum posts, or products.","date":"","lastModified":1786631048,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Rating Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/rating/anatomy Component options\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/rating/option-details "],"platform":"web","tags":[],"fragments":["/fragments/components/rating/anatomy","/fragments/components/rating/option-details","/fragments/components/rating/states","/fragments/components/rating/behaviors","/fragments/components/rating/usage-guidelines"],"implementation":""},{"path":"/web/design-only/components/standard-panel","title":"Standard panel","description":"Standard panels are containers used to group related content or tools in a consistent layout. They support a range of sizes, densities, and configurations to fit different use cases across products. Panels can be placed alongside primary content to provide supporting controls or information.","date":"","lastModified":1786631042,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Standard panel Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/standard-panel/anatomy Component options\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/standa"],"platform":"web","tags":[],"fragments":["/fragments/components/standard-panel/anatomy","/fragments/components/standard-panel/option-details","/fragments/components/standard-panel/states","/fragments/components/standard-panel/behaviors","/fragments/components/standard-panel/usage-guidelines"],"implementation":""},{"path":"/web/design-only/components/tag-field","title":"Tag field","description":"Tag field is an input component for adding and editing multiple tags. It includes standard field label and error options, and is used to capture grouped keywords or descriptors. Tags can be added directly in the field and displayed inline for editing or removal.","date":"","lastModified":1786630973,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Tag field Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/tag-field/anatomy Component options\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/tag-field/option"],"platform":"web","tags":[],"fragments":["/fragments/components/tag-field/anatomy","/fragments/components/tag-field/option-details","/fragments/components/tag-field/states","/fragments/components/tag-field/behaviors","/fragments/components/tag-field/usage-guidelines","/fragments/components/tag-field/internationalization","/fragments/components/tag-field/accessibility"],"implementation":""},{"path":"/web/design-only/components/steplist","title":"Steplist","description":"Steplists show progress across a series of discrete steps in a process. Use them for setups, wizards, or other flows with a fixed number of stages. They can be displayed horizontally or vertically.","date":"","lastModified":1786631035,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Steplist Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/steplist/anatomy Component options\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/steplist/option-de"],"platform":"web","tags":[],"fragments":["/fragments/components/steplist/anatomy","/fragments/components/steplist/option-details","/fragments/components/steplist/states","/fragments/components/steplist/behaviors","/fragments/components/steplist/usage-guidelines"],"implementation":""},{"path":"/web/rsp/components/button","title":"Button","description":"Buttons enable actions or navigation between views. They come in multiple styles to support different levels of emphasis, and are commonly used to guide progression through a flow.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Button\nimplementation\nrsp\ncomponent\nbutton Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/button/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/rsp"],"platform":"web","tags":["component","actions","navigation","emphasis","pending state","static color","accessibility","internationalization"],"fragments":["/fragments/components/button/anatomy","/fragments/components/button/option-details","/fragments/components/button/states","/fragments/components/button/behaviors","/fragments/components/button/usage-guidelines","/fragments/components/button/content-standards","/fragments/components/button/internationalization","/fragments/components/button/accessibility"],"implementation":"rsp"},{"path":"/web/rsp/components/color-handle-and-loupe","title":"Color handle and loupe","description":"Color handles select or adjust a color value along a track or wheel. They’re often paired with a color loupe to preview the selected color in context. The outer border is not included in the handle’s size.","date":"","lastModified":1788536571,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Color handle and loupe\nimplementation\nrsp\ncomponent\ncolor-area Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/color-handle-and-loupe/anatomy Component options\n\nhttps://main--"],"platform":"web","tags":["component","color selection","color picker","color wheel","color slider","color area"],"fragments":["/fragments/components/color-handle-and-loupe/anatomy","/fragments/components/color-handle-and-loupe/option-details","/fragments/components/color-handle-and-loupe/states","/fragments/components/color-handle-and-loupe/behaviors","/fragments/components/color-handle-and-loupe/usage-guidelines"],"implementation":"rsp"},{"path":"/foundations/inclusivity/inclusive-design","title":"Inclusive design","description":"We all differ in our abilities to see, perceive colors, hear, control our motions, concentrate, and understand concepts. Inclusive design makes room for as many ...","date":"","lastModified":1788405093,"image":"/foundations/inclusivity/media_178bb33dbb5d0b98808ddd739185987031466ed37.png?width=1200&format=pjpg&optimize=medium","content":["Inclusive design\n\nWe all differ in our abilities to see, perceive colors, hear, control our motions, concentrate, and understand concepts. Inclusive design makes room for as many people as possible. I"],"platform":"","tags":["inclusive design","accessibility","assistive technology","high contrast","keyboard accessibility","internationalization","responsive design","color naming","co-design","user testing"],"fragments":[],"implementation":""},{"path":"/web/swc/components/close-button","title":"Close button","description":"Close buttons appear inside other components to offer an affordance to dismiss or close, such as in a toast or action bar.","date":"","lastModified":1788886620,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Close button implementation\nswc\ncomponent\nclose-button Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/close-button/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","dismiss","close","icon-only"],"fragments":["/fragments/components/close-button/anatomy","/fragments/components/close-button/option-details","/fragments/components/close-button/states","/fragments/components/close-button/behaviors","/fragments/components/close-button/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/button-group","title":"Button group","description":"Button groups organize related buttons into a single group for presenting multiple, related actions.","date":"","lastModified":1788886573,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Button group implementation\nswc\ncomponent\nbutton-group Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/button-group/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","grouped actions","related actions","alignment","action priority"],"fragments":["/fragments/components/button-group/anatomy","/fragments/components/button-group/option-details","/fragments/components/button-group/states","/fragments/components/button-group/behaviors","/fragments/components/button-group/internationalization","/fragments/components/button-group/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/popover","title":"Popover","description":"Popovers are containers for transient content like menus, options, or additional actions. They float above the interface and stand out visually using stroke and drop shadow.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Popover implementation\nswc\ncomponent\npopover Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/popover/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/"],"platform":"web","tags":["component","overlay","transient content","container","tray","tip"],"fragments":["/fragments/components/popover/anatomy","/fragments/components/popover/option-details","/fragments/components/popover/states","/fragments/components/popover/behaviors","/fragments/components/popover/usage-guidelines","/fragments/components/popover/internationalization","/fragments/components/popover/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/meter","title":"Meter","description":"Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.","date":"","lastModified":1788886731,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Meter implementation\nswc\ncomponent\nmeter Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/meter/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/swc/da"],"platform":"web","tags":["component","quantity","achievement","user progress","semantic values","labels"],"fragments":["/fragments/components/meter/anatomy","/fragments/components/meter/option-details","/fragments/components/meter/states","/fragments/components/meter/behaviors","/fragments/components/meter/internationalization","/fragments/components/meter/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/link","title":"Link","description":"Links provide navigation to a different location. They can appear within a paragraph or as standalone text.","date":"","lastModified":1787762862,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Link implementation\nswc\ncomponent\nlink Component options\nClass\nDescription\nswc-Link\nBase link presentation for explicit-context anchors. Pair with modifiers as needed.\nswc-Link--standalone\nStandalone "],"platform":"web","tags":["component","navigation","hyperlink","body copy","accessibility","quiet link"],"fragments":["/fragments/components/link/option-details","/fragments/components/link/states","/fragments/components/link/behaviors","/fragments/components/link/usage-guidelines","/fragments/components/link/content-standards","/fragments/components/link/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/progress-bar","title":"Progress bar","description":"Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Progress bar implementation\nswc\ncomponent\nprogress-bar Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/progress-bar/anatomy Component options\nhttps://main--spectrum-hub--adobe"],"platform":"web","tags":["component","loading","system progress","determinate","indeterminate","labels"],"fragments":["/fragments/components/progress-bar/anatomy","/fragments/components/progress-bar/option-details","/fragments/components/progress-bar/states","/fragments/components/progress-bar/behaviors","/fragments/components/progress-bar/usage-guidelines","/fragments/components/progress-bar/internationalization","/fragments/components/progress-bar/accessibility"],"implementation":"swc"},{"path":"/web/swc/components/tooltip","title":"Tooltip","description":"Tooltips display contextual information related to a specific component. They appear on hover or focus to clarify purpose or behavior.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Tooltip implementation\nswc\ncomponent\ntooltip Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/tooltip/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page/deps/"],"platform":"web","tags":["component","contextual information","hover","focus","icon description"],"fragments":["/fragments/components/tooltip/anatomy","/fragments/components/tooltip/option-details","/fragments/components/tooltip/states","/fragments/components/tooltip/behaviors","/fragments/components/tooltip/usage-guidelines","/fragments/components/tooltip/internationalization","/fragments/components/tooltip/accessibility"],"implementation":"swc"},{"path":"/img/icons/s2-icon-spectrumlogo-20-n","title":"","description":"","date":"","lastModified":1785525307,"image":"/img/icons/media_105a8a2726ce4c00cc50614a1a74d1cf5beec1c16.svg?width=1200&format=pjpg&optimize=medium","content":[""],"platform":"","tags":[],"fragments":[],"implementation":""},{"path":"/web/rsp/components/breadcrumbs","title":"Breadcrumbs","description":"An accordion displays a list of items that can be expanded or collapsed to show additional content. It can support zero, one, or multiple expanded items at a time.","date":"","lastModified":1787151059,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Breadcrumbs implementation\nrsp\ncomponent\nbreadcrumbs Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/breadcrumbs/anatomy Component options\nhttps://main--spectrum-hub--adobe.ae"],"platform":"web","tags":["breadcrumbs","rsp","component","anatomy","options","states","behaviors","usage-guidelines","accordion"],"fragments":["/fragments/components/breadcrumbs/anatomy","/fragments/components/breadcrumbs/option-details","/fragments/components/breadcrumbs/states","/fragments/components/breadcrumbs/behaviors","/fragments/components/breadcrumbs/usage-guidelines"],"implementation":"rsp"},{"path":"/web/rsp/components/thumbnail","title":"Thumbnail","description":"Thumbnails display a preview of an image, layer, or effect, and appear in a variety of locations as a visual reference.","date":"","lastModified":1788366871,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Thumbnail\nimplementation\nrsp\ncomponent\nthumbnail Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/thumbnail/anatomy Component options\nhttps://main--spectrum-hub--adobe.aem.page"],"platform":"web","tags":["Thumbnail","image"],"fragments":["/fragments/components/thumbnail/anatomy","/fragments/components/thumbnail/option-details","/fragments/components/thumbnail/states","/fragments/components/thumbnail/behaviors","/fragments/components/thumbnail/usage-guidelines"],"implementation":"rsp"},{"path":"/support/contact-us","title":"Contact us","description":"We’re glad you’re excited about Spectrum! Please reach out with questions, feedback, or ideas using the methods outlined here.","date":"","lastModified":1788882239,"image":"/support/media_198327ed8f93840e8552a3999c490f082bc718736.png?width=1200&format=pjpg&optimize=medium","content":["Contact us\n\nWe’re glad you’re excited about Spectrum! Please reach out with questions, feedback, or ideas using the methods outlined here.\n\nPlease keep in mind that our team operates on a limited scal"],"platform":"","tags":["Contact","Slack","Jira","Figma","CCUE","DXUE","Brand","Icons"],"fragments":[],"implementation":""},{"path":"/web/design-only/components/coach-mark","title":"Coach mark","description":"Coach marks are temporary messages that provide guidance during new or unfamiliar experiences. They can appear as a single message or be sequenced into a tour.","date":"","lastModified":1788449335,"image":"/default-meta-image.png?width=1200&format=pjpg&optimize=medium","content":["Coach mark Anatomy\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/coach-mark/anatomy Component options\n\nhttps://main--spectrum-hub--adobe.aem.page/fragments/components/coach-mark/opt"],"platform":"web","tags":["coach mark","tour","guidance","temporary messages","onboarding"],"fragments":["/fragments/components/coach-mark/anatomy","/fragments/components/coach-mark/option-details","/fragments/components/coach-mark/states","/fragments/components/coach-mark/behaviors","/fragments/components/coach-mark/usage-guidelines"],"implementation":""},{"path":"/intelligence/skills/spectrum-web","title":"Bring Spectrum into the work","description":"Spectrum is the system behind Adobe's web experiences. It brings together the components, guidance, behaviors, and implementation foundations teams use to create them. The Spectrum ...","date":"","lastModified":1788926169,"image":"/intelligence/skills/media_1891899a3862e993fd2dcfcabb23f4c1acf295f7c.jpg?width=1200&format=pjpg&optimize=medium","content":["Skill • Spectrum Web\n\nBring Spectrum into the work\n\nSpectrum is the system behind Adobe's web experiences. It brings together the components, guidance, behaviors, and implementation foundations teams "],"platform":"","tags":[],"fragments":[],"implementation":""}],"offset":0,"limit":138,"total":132,":type":"sheet"}