{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/design-tokens/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Design tokens","navTitle":null,"slug":"design/design-tokens/","hidePage":false,"collapsibleGroup":null,"group":"guidelines","seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"Design tokens are tools used to convey key design and UX principles across multiple channels and technologies.\nTokens are used to unify style elements across web, desktop, mobile, tools and applications.\nThey are critical to use with Pega applications, as Pega applications blend native and web design elements.\n\nThere are 4 types of design tokens."},"body":[{"id":"d60be200-afec-5b96-b918-96903cb9a1f3","strapi_component":"table.table","Headers":[{"headerKey":"token","label":"Design token type"},{"headerKey":"description","label":"Description"},{"headerKey":"examples","label":"Examples"}],"TableRows":[{"RowCells":[{"id":"d1df658d-0075-5969-ab03-e6a2801a8390","headerKey":"token","childStrapiComponentTableTableCellValueTextnode":{"value":"Constant"}},{"id":"e1285f41-2547-59b8-93d9-109edf645267","headerKey":"description","childStrapiComponentTableTableCellValueTextnode":{"value":"Raw design elements."}},{"id":"d03e8e33-58c2-5a97-9e53-28d5fa70ab08","headerKey":"examples","childStrapiComponentTableTableCellValueTextnode":{"value":"The exact shade of red to use, spacing scales (e.g. 8px multiples), text sizes, speed of animation"}}]},{"RowCells":[{"id":"29eee90f-eeb4-51f7-9714-f3d97329c6cd","headerKey":"token","childStrapiComponentTableTableCellValueTextnode":{"value":"Meaningful"}},{"id":"0b1f9318-e06a-5ba5-8e01-67906a2531d7","headerKey":"description","childStrapiComponentTableTableCellValueTextnode":{"value":"Tie functional purpose to Constant tokens."}},{"id":"6e006cdc-e519-516a-889c-aaa740a48505","headerKey":"examples","childStrapiComponentTableTableCellValueTextnode":{"value":"A combined token, e.g. Heading 2 that uses multiple Constant tokens (e.g. font-size.l and font-weight.semi-bold"}}]},{"RowCells":[{"id":"f6cdbee0-36b7-5fca-868b-b22c2549d703","headerKey":"token","childStrapiComponentTableTableCellValueTextnode":{"value":"Component-shared"}},{"id":"1f678abf-5736-54ce-a996-80d84476948a","headerKey":"description","childStrapiComponentTableTableCellValueTextnode":{"value":"Repeated component parts that rely on Component tokens. These often use both Constant and Meaningful tokens."}},{"id":"7892d0d1-78b6-53bc-a86f-41983f8f08aa","headerKey":"examples","childStrapiComponentTableTableCellValueTextnode":{"value":"Input border-radius or button border-radius both inheriting from base border-radius"}}]},{"RowCells":[{"id":"214299e0-2980-59dd-bbdd-29c10db036e5","headerKey":"token","childStrapiComponentTableTableCellValueTextnode":{"value":"Component-specific"}},{"id":"0bb8eba6-5958-525f-9c9a-6e771409ddf3","headerKey":"description","childStrapiComponentTableTableCellValueTextnode":{"value":"Most components have a set of specific tokens that define every element of styling from spacing to layout. They may use a combination of Constant, Meaningful, and Component-shared tokens."}},{"id":"b147111a-2689-5ba6-a642-2990b99f1879","headerKey":"examples","childStrapiComponentTableTableCellValueTextnode":{"value":"Checkbox border-radius that may be mapped to an existing Component token or use a fixed value"}}]}]},{"id":"8324bfc1-47eb-5199-8056-e4c02fe6baef","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"Some design tokens are editable when customizing your applications in order to allow for custom branding.\nExamples may include Meaningful tokens such as base.palette.brand-primary or changing basic tokens,\nsuch as the default color family. We refer to those tokens as Public tokens."}},{"id":"b04bc7b1-0dc9-562c-a015-bcb4b872cf0a","strapi_component":"layout.section","subSections":[{"id":"84b5c1d6-a7d6-562d-a38f-f6fe73268310","title":"Meaningful text","childStrapiComponentLayoutSubSectionBodyTextnode":null}],"title":"Typography","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Inter font is the foundation type family in all Pega applications. The font family may be configured via the [Theme](/versions/8/develop/theme) by modifying the _base.font-family_ token.\n\nThe **Constellation design system** supports a range of font sizes with the base font size being represented by the _sm_ token at a value of 14px. The available tokens are displayed below, and they can be modified through the [Theme](/versions/8/develop/theme)."}},{"id":"276690ca-07a1-5954-9321-3a137105c8ba","strapi_component":"content.theme-properties-card","type":"text","colorGroup":null},{"id":"570dd4ca-5602-5172-bd95-e81ee1cd182d","strapi_component":"layout.sub-section","title":"Text primitives","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"#### Sizes"}},{"id":"a5c07862-9267-5176-9e3e-461a2b47e6f1","strapi_component":"content.theme-properties-card","type":"fontSize","colorGroup":null},{"id":"a1c3808f-af82-5bed-8708-f74f3839eac5","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Weights"}},{"id":"d45be3b1-74ea-5e06-a6d2-d9cb16438e27","strapi_component":"content.theme-properties-card","type":"fontWeight","colorGroup":null},{"id":"5d7f61c4-0cad-5f6c-8252-51f882e04f75","strapi_component":"layout.section","subSections":[{"id":"43cf0f18-19fc-56a9-aa53-1d2da380e6e1","title":"Meaningful color","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Color in Constellation is tied to meaning. Below are the colors used to symbolize that meaning or status."}}],"title":"Colors","childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"7d2b2bf5-9c23-535f-aebb-627bedfa6352","strapi_component":"content.theme-properties-card","type":"palette","colorGroup":null},{"id":"9c315a5c-830c-5da0-a083-e4f7b814b14c","strapi_component":"layout.sub-section","title":"Primitive color","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Below is a listing of all base colors currently within the Constellation library.\n\n#### Neutrals"}},{"id":"93d57cd0-f40c-56f2-8791-9dddcc6cd51d","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"neutral"},{"id":"adba99e9-6cb2-582d-9dcb-9c2a4b0e0c7b","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Reds"}},{"id":"9979a9df-2e82-5448-9447-8c517d08da22","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"red"},{"id":"53337aff-6509-5f52-a766-bb11a7ec7d3b","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Oranges"}},{"id":"0f5c871b-dbcf-5468-94be-646073b96328","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"orange"},{"id":"577a7e22-dcc9-5981-b0e9-9a6855ce21a2","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Greens"}},{"id":"0ae25282-7568-5070-9fd1-f61e6d3e6c54","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"green"},{"id":"0f34c70f-2733-5376-be68-232f7939cd67","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Blues"}},{"id":"4d175dfd-b6ba-5f6e-bc98-85ea28ba2c5c","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"blue"},{"id":"f29eb838-4075-5f11-bdff-005ab6b99144","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Purples"}},{"id":"3e1f111c-03a1-5216-8fd5-a609c4c0b90a","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"purple"},{"id":"d854ab0a-992b-5395-9692-ea78998afdf9","strapi_component":"layout.section","subSections":[],"title":"Style elements","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Constellation design system also supports a wide variety of primitive style element groups that control things\nsuch as transparency levels, depth of shadow, spacing, shape, and much more.\n\n#### Spacing\n\nUsed for padding, margins, gutters, gaps, etc."}},{"id":"9584acfe-c38e-5e99-8d15-c643184e4c6e","strapi_component":"content.theme-properties-card","type":"spacing","colorGroup":null},{"id":"fcaa0543-36ec-5325-9f09-67ca0fe43c07","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"Spacing should be measured in REMs, not pixels. Constellation uses a .5 REM grid (equivalent to an 8 pixel grid). Other common spacing patterns are as follows:\n- .125REM (4 pixels) between icon and related text\n- .5REM (8 pixels) between buttons in a row\n-  1REM (16 pixels) between form fields\n-  1.5REM (24 pixels) between sections of content (field groups, form inputs to form footer actions row)\n-  2REM (32 pixels) for default button sizes (icon buttons should follow this too)\n-  3.5REM (44 pixels) for mobile touch button size"}},{"id":"e63ff8b6-c32b-5df6-9f2a-366ce644d6ce","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Shape"}},{"id":"7e327bdf-5f07-5136-8b8c-8311ea2777c6","strapi_component":"content.theme-properties-card","type":"borderRadius","colorGroup":null},{"id":"c01e0bdc-da37-580f-8dd9-77863742b180","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Transparency"}},{"id":"35531814-1891-5536-9b34-21860e11776d","strapi_component":"content.theme-properties-card","type":"transparency","colorGroup":null},{"id":"d0f085c3-3196-5f8b-ae57-22cb140a3d80","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Shadow"}},{"id":"5fc421d9-dce1-5526-ab44-e0ce092fb8ef","strapi_component":"content.theme-properties-card","type":"shadow","colorGroup":null},{"id":"1f690592-d14f-530c-bc42-a46796d8eb8b","strapi_component":"layout.section","subSections":[],"title":"Motion","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Finally, the Constellation design system supports baseline motion primitives."}},{"id":"9e8522ed-3fd4-5d95-8b54-a566bfb6e8e2","strapi_component":"content.theme-properties-card","type":"animation","colorGroup":null}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"Design tokens","navTitle":null,"slug":"design/design-tokens/","hidePage":false,"collapsibleGroup":null,"group":"guidelines","seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"Design tokens are tools used to convey key design and UX principles across multiple channels and technologies.\nTokens are used to unify style elements across web, desktop, mobile, tools and applications.\nThey are critical to use with Pega applications, as Pega applications blend native and web design elements.\n\nThere are 4 types of design tokens."},"body":[{"id":"d60be200-afec-5b96-b918-96903cb9a1f3","strapi_component":"table.table","Headers":[{"headerKey":"token","label":"Design token type"},{"headerKey":"description","label":"Description"},{"headerKey":"examples","label":"Examples"}],"TableRows":[{"RowCells":[{"id":"d1df658d-0075-5969-ab03-e6a2801a8390","headerKey":"token","childStrapiComponentTableTableCellValueTextnode":{"value":"Constant"}},{"id":"e1285f41-2547-59b8-93d9-109edf645267","headerKey":"description","childStrapiComponentTableTableCellValueTextnode":{"value":"Raw design elements."}},{"id":"d03e8e33-58c2-5a97-9e53-28d5fa70ab08","headerKey":"examples","childStrapiComponentTableTableCellValueTextnode":{"value":"The exact shade of red to use, spacing scales (e.g. 8px multiples), text sizes, speed of animation"}}]},{"RowCells":[{"id":"29eee90f-eeb4-51f7-9714-f3d97329c6cd","headerKey":"token","childStrapiComponentTableTableCellValueTextnode":{"value":"Meaningful"}},{"id":"0b1f9318-e06a-5ba5-8e01-67906a2531d7","headerKey":"description","childStrapiComponentTableTableCellValueTextnode":{"value":"Tie functional purpose to Constant tokens."}},{"id":"6e006cdc-e519-516a-889c-aaa740a48505","headerKey":"examples","childStrapiComponentTableTableCellValueTextnode":{"value":"A combined token, e.g. Heading 2 that uses multiple Constant tokens (e.g. font-size.l and font-weight.semi-bold"}}]},{"RowCells":[{"id":"f6cdbee0-36b7-5fca-868b-b22c2549d703","headerKey":"token","childStrapiComponentTableTableCellValueTextnode":{"value":"Component-shared"}},{"id":"1f678abf-5736-54ce-a996-80d84476948a","headerKey":"description","childStrapiComponentTableTableCellValueTextnode":{"value":"Repeated component parts that rely on Component tokens. These often use both Constant and Meaningful tokens."}},{"id":"7892d0d1-78b6-53bc-a86f-41983f8f08aa","headerKey":"examples","childStrapiComponentTableTableCellValueTextnode":{"value":"Input border-radius or button border-radius both inheriting from base border-radius"}}]},{"RowCells":[{"id":"214299e0-2980-59dd-bbdd-29c10db036e5","headerKey":"token","childStrapiComponentTableTableCellValueTextnode":{"value":"Component-specific"}},{"id":"0bb8eba6-5958-525f-9c9a-6e771409ddf3","headerKey":"description","childStrapiComponentTableTableCellValueTextnode":{"value":"Most components have a set of specific tokens that define every element of styling from spacing to layout. They may use a combination of Constant, Meaningful, and Component-shared tokens."}},{"id":"b147111a-2689-5ba6-a642-2990b99f1879","headerKey":"examples","childStrapiComponentTableTableCellValueTextnode":{"value":"Checkbox border-radius that may be mapped to an existing Component token or use a fixed value"}}]}]},{"id":"8324bfc1-47eb-5199-8056-e4c02fe6baef","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"Some design tokens are editable when customizing your applications in order to allow for custom branding.\nExamples may include Meaningful tokens such as base.palette.brand-primary or changing basic tokens,\nsuch as the default color family. We refer to those tokens as Public tokens."}},{"id":"b04bc7b1-0dc9-562c-a015-bcb4b872cf0a","strapi_component":"layout.section","subSections":[{"id":"84b5c1d6-a7d6-562d-a38f-f6fe73268310","title":"Meaningful text","childStrapiComponentLayoutSubSectionBodyTextnode":null}],"title":"Typography","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Inter font is the foundation type family in all Pega applications. The font family may be configured via the [Theme](/versions/8/develop/theme) by modifying the _base.font-family_ token.\n\nThe **Constellation design system** supports a range of font sizes with the base font size being represented by the _sm_ token at a value of 14px. The available tokens are displayed below, and they can be modified through the [Theme](/versions/8/develop/theme)."}},{"id":"276690ca-07a1-5954-9321-3a137105c8ba","strapi_component":"content.theme-properties-card","type":"text","colorGroup":null},{"id":"570dd4ca-5602-5172-bd95-e81ee1cd182d","strapi_component":"layout.sub-section","title":"Text primitives","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"#### Sizes"}},{"id":"a5c07862-9267-5176-9e3e-461a2b47e6f1","strapi_component":"content.theme-properties-card","type":"fontSize","colorGroup":null},{"id":"a1c3808f-af82-5bed-8708-f74f3839eac5","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Weights"}},{"id":"d45be3b1-74ea-5e06-a6d2-d9cb16438e27","strapi_component":"content.theme-properties-card","type":"fontWeight","colorGroup":null},{"id":"5d7f61c4-0cad-5f6c-8252-51f882e04f75","strapi_component":"layout.section","subSections":[{"id":"43cf0f18-19fc-56a9-aa53-1d2da380e6e1","title":"Meaningful color","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Color in Constellation is tied to meaning. Below are the colors used to symbolize that meaning or status."}}],"title":"Colors","childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"7d2b2bf5-9c23-535f-aebb-627bedfa6352","strapi_component":"content.theme-properties-card","type":"palette","colorGroup":null},{"id":"9c315a5c-830c-5da0-a083-e4f7b814b14c","strapi_component":"layout.sub-section","title":"Primitive color","childStrapiComponentLayoutSubSectionBodyTextnode":{"body":"Below is a listing of all base colors currently within the Constellation library.\n\n#### Neutrals"}},{"id":"93d57cd0-f40c-56f2-8791-9dddcc6cd51d","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"neutral"},{"id":"adba99e9-6cb2-582d-9dcb-9c2a4b0e0c7b","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Reds"}},{"id":"9979a9df-2e82-5448-9447-8c517d08da22","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"red"},{"id":"53337aff-6509-5f52-a766-bb11a7ec7d3b","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Oranges"}},{"id":"0f5c871b-dbcf-5468-94be-646073b96328","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"orange"},{"id":"577a7e22-dcc9-5981-b0e9-9a6855ce21a2","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Greens"}},{"id":"0ae25282-7568-5070-9fd1-f61e6d3e6c54","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"green"},{"id":"0f34c70f-2733-5376-be68-232f7939cd67","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Blues"}},{"id":"4d175dfd-b6ba-5f6e-bc98-85ea28ba2c5c","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"blue"},{"id":"f29eb838-4075-5f11-bdff-005ab6b99144","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Purples"}},{"id":"3e1f111c-03a1-5216-8fd5-a609c4c0b90a","strapi_component":"content.theme-properties-card","type":"colors","colorGroup":"purple"},{"id":"d854ab0a-992b-5395-9692-ea78998afdf9","strapi_component":"layout.section","subSections":[],"title":"Style elements","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Constellation design system also supports a wide variety of primitive style element groups that control things\nsuch as transparency levels, depth of shadow, spacing, shape, and much more.\n\n#### Spacing\n\nUsed for padding, margins, gutters, gaps, etc."}},{"id":"9584acfe-c38e-5e99-8d15-c643184e4c6e","strapi_component":"content.theme-properties-card","type":"spacing","colorGroup":null},{"id":"fcaa0543-36ec-5325-9f09-67ca0fe43c07","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"Spacing should be measured in REMs, not pixels. Constellation uses a .5 REM grid (equivalent to an 8 pixel grid). Other common spacing patterns are as follows:\n- .125REM (4 pixels) between icon and related text\n- .5REM (8 pixels) between buttons in a row\n-  1REM (16 pixels) between form fields\n-  1.5REM (24 pixels) between sections of content (field groups, form inputs to form footer actions row)\n-  2REM (32 pixels) for default button sizes (icon buttons should follow this too)\n-  3.5REM (44 pixels) for mobile touch button size"}},{"id":"e63ff8b6-c32b-5df6-9f2a-366ce644d6ce","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Shape"}},{"id":"7e327bdf-5f07-5136-8b8c-8311ea2777c6","strapi_component":"content.theme-properties-card","type":"borderRadius","colorGroup":null},{"id":"c01e0bdc-da37-580f-8dd9-77863742b180","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Transparency"}},{"id":"35531814-1891-5536-9b34-21860e11776d","strapi_component":"content.theme-properties-card","type":"transparency","colorGroup":null},{"id":"d0f085c3-3196-5f8b-ae57-22cb140a3d80","strapi_component":"content.mdx","childStrapiComponentContentMdxBodyTextnode":{"body":"#### Shadow"}},{"id":"5fc421d9-dce1-5526-ab44-e0ce092fb8ef","strapi_component":"content.theme-properties-card","type":"shadow","colorGroup":null},{"id":"1f690592-d14f-530c-bc42-a46796d8eb8b","strapi_component":"layout.section","subSections":[],"title":"Motion","childStrapiComponentLayoutSectionBodyTextnode":{"body":"Finally, the Constellation design system supports baseline motion primitives."}},{"id":"9e8522ed-3fd4-5d95-8b54-a566bfb6e8e2","strapi_component":"content.theme-properties-card","type":"animation","colorGroup":null}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}