{"componentChunkName":"component---src-pages-get-started-design-index-mdx","path":"/get-started/design/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Design","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started."},"relativePagePath":"/get-started/design/index.mdx","titleType":"prepend","MdxNode":{"id":"97bb8835-208f-5d62-972c-283e63e4dcca","children":[],"parent":"f23dd3a6-d66c-52a1-9600-cd67ae02dc1e","internal":{"content":"---\ntitle: Design\ndescription: Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.\n---\n\n### Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.\n\n<AnchorLinks>\n\n<AnchorLink>Get the kit</AnchorLink>\n<AnchorLink>Start designing</AnchorLink>\n<AnchorLink>Anatomy</AnchorLink>\n<AnchorLink>Info</AnchorLink>\n\n</AnchorLinks>\n\n## Get the kit\n\n#### 1. **Install Sketch**.\n\nTo design with Carbon you must have the **most recent version** of [Sketch](https://www.sketchapp.com/) installed.\n\n#### 2. **Choose a theme**.\n\nThere are [four Carbon themes](/guidelines/color/overview#themes), two light (White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its own Sketch library. You can subscribe to as many libraries as you'd like.\n\n<Row className=\"resource-card-group\">\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the White theme\"\n      href=\"sketch://add-library/cloud/JaVzz\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the Gray 10 theme\"\n      href=\"sketch://add-library/cloud/Onwv2\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the Gray 90 theme\"\n      href=\"sketch://add-library/cloud/eo37p\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the Gray 100 theme\"\n      href=\"sketch://add-library/cloud/d13Ll\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n<br />\n<br />\n\n#### 3. **Bring in additional colors and icons**.\n\nThe full icon library and additional color collections live in the IBM Design Language library.\n\n<Row className=\"resource-card-group\">\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the IBM Design Language library\"\n      href=\"sketch://add-library/cloud/75VZZ\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n<br />\n<br />\n\n#### 4. **Download the grid templates**.\n\nVisit the [Sketch library](https://sketch.cloud/s/ngV7z) page and choose `Download Document` from the right-side panel.\n\n<Row className=\"resource-card-group\">\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Download the IBM Grid template\"\n      href=\"https://sketch.cloud/s/ngV7z\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Download the UI Shell template\"\n      href=\"https://sketch.cloud/s/EjVmA\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n<br />\n<br />\n\nOpen the file in Sketch. Navigate to `File → Save as Template`. You can now access the saved grid template at `File → New file from Template`.\n\n## Start designing\n\nTo get started with Carbon, familiarize yourself with the contents of each library.\n\n#### **Start with the grid**.\n\nAt the top of your screen, navigate to `File → New file from Template` and select your grid template. You'll always be able to find the template here.\n\n#### **Icons and color swatches**.\n\nSymbols from both the IBM Design Language library and the Carbon library are accessible from any Sketch document. Navigate to `Insert → Symbols → Carbon Design System` or `IBM Design Language`.\n\n#### **You're all set**.\n\nRefer to the content below for a more detailed breakdown of the kit, or head to Sketch to begin designing.\n\n## Anatomy\n\nSee the [Sketch library](https://sketch.cloud/s/JaVzz/) page for an overview of the kit.\n\n<AnchorLinks small>\n\n<AnchorLink>Grid</AnchorLink>\n<AnchorLink>Symbols</AnchorLink>\n<AnchorLink>Text styles</AnchorLink>\n<AnchorLink>Layer styles</AnchorLink>\n\n</AnchorLinks>\n\n### Grid\n\nThe IBM 2x Grid is the framework for laying out all visual elements in Carbon.\n\n![2x Grid overview](/images/grid-2.gif)\n\n<Caption>2x Grid overview</Caption>\n\nAll designs should start with the 2x Grid template. Once you have [saved the grid](#get-the-kit) as a template, navigate to `File → New file from Template` and select the grid template.\n\nSee our [layout guidelines](/guidelines/2x-grid/basics/) for a more detailed walkthrough of the 2x Grid.\n\n#### Structure\n\nThe grid template includes templates for all breakpoints along with the necessary formulas to design for custom screen sizes.\n\nTo toggle the grid on and off, use `Control+G`. To toggle the layout guide, use `Control+L`.\n\n### Symbols\n\nCarbon [components](/components/overview), [add-ons](/contributing/add-ons), and [icons](/guidelines/icons/library) live in the design kit as Sketch _symbols_.\n\n![Carbon symbol menu navigation](/images/carbon-kit.png)\n\n#### Library menu navigation\n\nThere are two kinds of symbols — library symbols and document symbols. Library symbols are available in any Sketch document, while document symbols are specific to the document in which they are found.\n\nFrom the `Insert` menu, select `Symbols → Carbon Design System` to add symbols onto your page.\n\nCarbon symbols are built to be flexible, and designers should not detach symbols from the library. Once a symbol is detached, you will no longer receive updates as they are released.\n\n#### Structure\n\nSymbols are organized by component; after selecting a component, you'll see the variations and states of that component.\n\n- To add the whole component, select the desired variant and place it on your artboard.\n\n- For even more configurablility, use the individual building blocks found under the `Items` folder within the symbol. Be sure your custom design adheres to our [design guidelines](/guidelines/accessibility/overview).\n\n### Text styles\n\nText styles are based on typography rules defined by the [IBM Design Language](https://www.ibm.com/design/language/elements/type-basics).\n\n![Text styles navigation](images/text-styles-1.png)\n\n#### Library menu navigation\n\nFrom the main menu select `Insert → Text Styles → Carbon Design System` to insert a Carbon type token text style.\n\nText styles within components are carefully considered. We do not recommend detaching the symbol to change default styles.\n\n#### Structure\n\nCarbon text styles in Sketch are organized similarly to symbols.\n\n- The first text style level displays [theme options](/guidelines/themes) (i.e., white theme).\n- The second level shows the [Carbon type](/guidelines/typography/overview) tokens (i.e., body-long-01).\n- The third level selects the type color, which is labeled with a [Carbon color](/guidelines/color/overview) token name.\n\n### Layer styles\n\nLayer styles are color selections for any shape in Sketch.\n\n![Layer styles navigation example](/images/layer-style-1.png)\n\n<Caption>Use predetermined overrides when possible</Caption>\n\n#### Library menu navigation\n\n[Color](/guidelines/color/overview) in Carbon is carefully considered, and we discourage custom layer styles.\n\nThe first layer is the theme selection (i.e., 01 White theme). The second layer is core Carbon color tokens (i.e., field-01) for the selected them. The interaction state tokens are nested in a third layer under “state”.\n\n## Info\n\nIf you're brand new to Sketch, they offer some great [tutorials and help docs](https://www.sketchapp.com/docs/).\n\n### Updates\n\nWe make small adjustments and bug fixes to the kit on a regular basis. When we make a change to any of the libraries, you will be notified via a red pop-up in the top right corner of the Sketch window.\n\nThe updates are opt-in, however we recommend you keep your kit as up to date as possible. Once a change is accepted, you will not be able to revert to the previous version.\n\n### Migration\n\nIf you're using an older version of Carbon, check out the v10 [migration docs](/updates/v10-migration/designers) when you're ready to make the switch.\n\n### Support\n\nCan't find an answer to your question? Open up an issue on [GitHub](https://github.com/carbon-design-system/carbon/issues/new/choose).\n","type":"Mdx","contentDigest":"1085b1badd904f0d07f5130a5db1e016","counter":1436,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Design","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started."},"exports":{},"rawBody":"---\ntitle: Design\ndescription: Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.\n---\n\n### Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.\n\n<AnchorLinks>\n\n<AnchorLink>Get the kit</AnchorLink>\n<AnchorLink>Start designing</AnchorLink>\n<AnchorLink>Anatomy</AnchorLink>\n<AnchorLink>Info</AnchorLink>\n\n</AnchorLinks>\n\n## Get the kit\n\n#### 1. **Install Sketch**.\n\nTo design with Carbon you must have the **most recent version** of [Sketch](https://www.sketchapp.com/) installed.\n\n#### 2. **Choose a theme**.\n\nThere are [four Carbon themes](/guidelines/color/overview#themes), two light (White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its own Sketch library. You can subscribe to as many libraries as you'd like.\n\n<Row className=\"resource-card-group\">\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the White theme\"\n      href=\"sketch://add-library/cloud/JaVzz\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the Gray 10 theme\"\n      href=\"sketch://add-library/cloud/Onwv2\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the Gray 90 theme\"\n      href=\"sketch://add-library/cloud/eo37p\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the Gray 100 theme\"\n      href=\"sketch://add-library/cloud/d13Ll\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n<br />\n<br />\n\n#### 3. **Bring in additional colors and icons**.\n\nThe full icon library and additional color collections live in the IBM Design Language library.\n\n<Row className=\"resource-card-group\">\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Get the IBM Design Language library\"\n      href=\"sketch://add-library/cloud/75VZZ\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n<br />\n<br />\n\n#### 4. **Download the grid templates**.\n\nVisit the [Sketch library](https://sketch.cloud/s/ngV7z) page and choose `Download Document` from the right-side panel.\n\n<Row className=\"resource-card-group\">\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Download the IBM Grid template\"\n      href=\"https://sketch.cloud/s/ngV7z\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n  <Column colLg={4} colMd={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Download the UI Shell template\"\n      href=\"https://sketch.cloud/s/EjVmA\">\n      <MdxIcon name=\"sketch\" />\n    </ResourceCard>\n  </Column>\n</Row>\n\n<br />\n<br />\n\nOpen the file in Sketch. Navigate to `File → Save as Template`. You can now access the saved grid template at `File → New file from Template`.\n\n## Start designing\n\nTo get started with Carbon, familiarize yourself with the contents of each library.\n\n#### **Start with the grid**.\n\nAt the top of your screen, navigate to `File → New file from Template` and select your grid template. You'll always be able to find the template here.\n\n#### **Icons and color swatches**.\n\nSymbols from both the IBM Design Language library and the Carbon library are accessible from any Sketch document. Navigate to `Insert → Symbols → Carbon Design System` or `IBM Design Language`.\n\n#### **You're all set**.\n\nRefer to the content below for a more detailed breakdown of the kit, or head to Sketch to begin designing.\n\n## Anatomy\n\nSee the [Sketch library](https://sketch.cloud/s/JaVzz/) page for an overview of the kit.\n\n<AnchorLinks small>\n\n<AnchorLink>Grid</AnchorLink>\n<AnchorLink>Symbols</AnchorLink>\n<AnchorLink>Text styles</AnchorLink>\n<AnchorLink>Layer styles</AnchorLink>\n\n</AnchorLinks>\n\n### Grid\n\nThe IBM 2x Grid is the framework for laying out all visual elements in Carbon.\n\n![2x Grid overview](/images/grid-2.gif)\n\n<Caption>2x Grid overview</Caption>\n\nAll designs should start with the 2x Grid template. Once you have [saved the grid](#get-the-kit) as a template, navigate to `File → New file from Template` and select the grid template.\n\nSee our [layout guidelines](/guidelines/2x-grid/basics/) for a more detailed walkthrough of the 2x Grid.\n\n#### Structure\n\nThe grid template includes templates for all breakpoints along with the necessary formulas to design for custom screen sizes.\n\nTo toggle the grid on and off, use `Control+G`. To toggle the layout guide, use `Control+L`.\n\n### Symbols\n\nCarbon [components](/components/overview), [add-ons](/contributing/add-ons), and [icons](/guidelines/icons/library) live in the design kit as Sketch _symbols_.\n\n![Carbon symbol menu navigation](/images/carbon-kit.png)\n\n#### Library menu navigation\n\nThere are two kinds of symbols — library symbols and document symbols. Library symbols are available in any Sketch document, while document symbols are specific to the document in which they are found.\n\nFrom the `Insert` menu, select `Symbols → Carbon Design System` to add symbols onto your page.\n\nCarbon symbols are built to be flexible, and designers should not detach symbols from the library. Once a symbol is detached, you will no longer receive updates as they are released.\n\n#### Structure\n\nSymbols are organized by component; after selecting a component, you'll see the variations and states of that component.\n\n- To add the whole component, select the desired variant and place it on your artboard.\n\n- For even more configurablility, use the individual building blocks found under the `Items` folder within the symbol. Be sure your custom design adheres to our [design guidelines](/guidelines/accessibility/overview).\n\n### Text styles\n\nText styles are based on typography rules defined by the [IBM Design Language](https://www.ibm.com/design/language/elements/type-basics).\n\n![Text styles navigation](images/text-styles-1.png)\n\n#### Library menu navigation\n\nFrom the main menu select `Insert → Text Styles → Carbon Design System` to insert a Carbon type token text style.\n\nText styles within components are carefully considered. We do not recommend detaching the symbol to change default styles.\n\n#### Structure\n\nCarbon text styles in Sketch are organized similarly to symbols.\n\n- The first text style level displays [theme options](/guidelines/themes) (i.e., white theme).\n- The second level shows the [Carbon type](/guidelines/typography/overview) tokens (i.e., body-long-01).\n- The third level selects the type color, which is labeled with a [Carbon color](/guidelines/color/overview) token name.\n\n### Layer styles\n\nLayer styles are color selections for any shape in Sketch.\n\n![Layer styles navigation example](/images/layer-style-1.png)\n\n<Caption>Use predetermined overrides when possible</Caption>\n\n#### Library menu navigation\n\n[Color](/guidelines/color/overview) in Carbon is carefully considered, and we discourage custom layer styles.\n\nThe first layer is the theme selection (i.e., 01 White theme). The second layer is core Carbon color tokens (i.e., field-01) for the selected them. The interaction state tokens are nested in a third layer under “state”.\n\n## Info\n\nIf you're brand new to Sketch, they offer some great [tutorials and help docs](https://www.sketchapp.com/docs/).\n\n### Updates\n\nWe make small adjustments and bug fixes to the kit on a regular basis. When we make a change to any of the libraries, you will be notified via a red pop-up in the top right corner of the Sketch window.\n\nThe updates are opt-in, however we recommend you keep your kit as up to date as possible. Once a change is accepted, you will not be able to revert to the previous version.\n\n### Migration\n\nIf you're using an older version of Carbon, check out the v10 [migration docs](/updates/v10-migration/designers) when you're ready to make the switch.\n\n### Support\n\nCan't find an answer to your question? Open up an issue on [GitHub](https://github.com/carbon-design-system/carbon/issues/new/choose).\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/get-started/design/index.mdx"}}}}