{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/design/patterns/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"About Constellation patterns","navTitle":null,"slug":"design/patterns/","hidePage":false,"collapsibleGroup":"patterns","group":null,"seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"The Constellation design system is about **configuring**, not customizing, your application. When you configure an application, you are building an application with great end-user-UX through a prescriptive presentation. On the other hand, customization involves building “from scratch”. With Constellation, we’ve built a design system that meets most enterprise application UI needs, out-of-the-box, and allows you to focus on deeper design decisions.\n\nBuilding great applications starts with Constellation **design patterns**— pre-configured combinations of components that are proven to drive user productivity.\n\nEach Constellation pattern solves common user problems by offering repeatable, efficient workflows that help users complete work. Patterns also save you design and development time, enabling you to build consistent, productive, and scalable UX for your application, fast.\n\nLearn how to use each type of pattern below:\n\n- [Starting the work day](/versions/8/design/start-your-work-day)\n- [Managing work](/versions/8/design/manage-your-work)\n- [Completing Tasks](/versions/8/design/complete-your-work-tasks)\n- [Searching for information](/versions/8/design/search-for-information)\n- [Navigating the application](/versions/8/design/navigate-the-application)\n- [Creating custom landing pages](/versions/8/design/create-custom-landing-pages)\n- [Explore data](/versions/8/design/explore-data)\n- [Using contextual information](/versions/8/design/contextual-information)\n\nTo design with Constellation patterns, [download our design kits](/versions/8/design/design-kits)."},"body":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":"About Constellation patterns","navTitle":null,"slug":"design/patterns/","hidePage":false,"collapsibleGroup":"patterns","group":null,"seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"The Constellation design system is about **configuring**, not customizing, your application. When you configure an application, you are building an application with great end-user-UX through a prescriptive presentation. On the other hand, customization involves building “from scratch”. With Constellation, we’ve built a design system that meets most enterprise application UI needs, out-of-the-box, and allows you to focus on deeper design decisions.\n\nBuilding great applications starts with Constellation **design patterns**— pre-configured combinations of components that are proven to drive user productivity.\n\nEach Constellation pattern solves common user problems by offering repeatable, efficient workflows that help users complete work. Patterns also save you design and development time, enabling you to build consistent, productive, and scalable UX for your application, fast.\n\nLearn how to use each type of pattern below:\n\n- [Starting the work day](/versions/8/design/start-your-work-day)\n- [Managing work](/versions/8/design/manage-your-work)\n- [Completing Tasks](/versions/8/design/complete-your-work-tasks)\n- [Searching for information](/versions/8/design/search-for-information)\n- [Navigating the application](/versions/8/design/navigate-the-application)\n- [Creating custom landing pages](/versions/8/design/create-custom-landing-pages)\n- [Explore data](/versions/8/design/explore-data)\n- [Using contextual information](/versions/8/design/contextual-information)\n\nTo design with Constellation patterns, [download our design kits](/versions/8/design/design-kits)."},"body":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"]}