(window.webpackJsonp=window.webpackJsonp||[]).push([[2572],{"013z":function(e,t,a){"use strict";var n=a("q1tI"),b=a.n(n),o=a("NmYn"),i=a.n(o),l=a("Wbzz"),r=a("Xrax"),c=a("a7k6"),s=a("TSYQ"),d=a.n(s),p=a("QH2O"),m=a.n(p),u=a("qKvR");var h=({title:e,theme:t,tabs:a=[]})=>Object(u.b)("div",{className:d()(m.a.pageHeader,{[m.a.withTabs]:a.length,[m.a.darkMode]:"dark"===t})},Object(u.b)("div",{className:"bx--grid"},Object(u.b)("div",{className:"bx--row"},Object(u.b)("div",{className:"bx--col-lg-12"},Object(u.b)("h1",{id:"page-title",className:m.a.text},e))))),g=a("BAC9");var O=({relativePagePath:e,repository:t})=>{const{site:{siteMetadata:{repository:a}}}=Object(l.useStaticQuery)("1364590287"),{baseUrl:n,subDirectory:b,branch:o}=t||a,i=`${n}/edit/${o}${b}/src/pages${e}`;return n?Object(u.b)("div",{className:"bx--row "+g.row},Object(u.b)("div",{className:"bx--col"},Object(u.b)("a",{className:g.link,href:i},"Edit this page on GitHub"))):null},y=a("FCXl"),j=a("I8xM");class f extends b.a.Component{render(){const{title:e,tabs:t,slug:a}=this.props,n=a.split("/").filter(Boolean).slice(-1)[0],b=t.map(e=>{const t=i()(e,{lower:!0,strict:!0}),b=t===n,o=new RegExp(n+"/?(#.*)?$"),r=a.replace(o,t);return Object(u.b)("li",{key:e,className:d()({[j.selectedItem]:b},j.listItem)},Object(u.b)(l.Link,{className:j.link,to:""+r},e))});return Object(u.b)("div",{className:j.tabsContainer},Object(u.b)("div",{className:"bx--grid"},Object(u.b)("div",{className:"bx--row"},Object(u.b)("div",{className:"bx--col-lg-12 bx--col-no-gutter"},Object(u.b)("nav",{"aria-label":e},Object(u.b)("ul",{className:j.list},b))))))}}var w=f,x=a("MjG9"),k=a("CzIb"),A=a("Asxa"),T=a("OIbQ"),v=a.n(T);var N=({date:e})=>{const t=new Date(e);return e?Object(u.b)(A.c,{className:v.a.row},Object(u.b)(A.a,null,Object(u.b)("div",{className:v.a.text},"Page last updated: ",t.toLocaleDateString("en-GB",{day:"2-digit",year:"numeric",month:"long"})))):null};t.a=({pageContext:e,children:t,location:a,Title:n})=>{const{frontmatter:b={},relativePagePath:o,titleType:s}=e,{tabs:d,title:p,theme:m,description:g,keywords:j,date:f}=b,{interiorTheme:A}=Object(k.a)(),{site:{pathPrefix:T}}=Object(l.useStaticQuery)("2456312558"),v=T?a.pathname.replace(T,""):a.pathname,C=d?v.split("/").filter(Boolean).slice(-1)[0]||i()(d[0],{lower:!0}):"",S=m||A;return Object(u.b)(c.a,{tabs:d,homepage:!1,theme:S,pageTitle:p,pageDescription:g,pageKeywords:j,titleType:s},Object(u.b)(h,{title:n?Object(u.b)(n,null):p,label:"label",tabs:d,theme:S}),d&&Object(u.b)(w,{title:p,slug:v,tabs:d,currentTab:C}),Object(u.b)(x.a,{padded:!0},t,Object(u.b)(O,{relativePagePath:o}),Object(u.b)(N,{date:f})),Object(u.b)(y.a,{pageContext:e,location:a,slug:v,tabs:d,currentTab:C}),Object(u.b)(r.a,null))}},BAC9:function(e,t,a){e.exports={bxTextTruncateEnd:"EditLink-module--bx--text-truncate--end--2pqje",bxTextTruncateFront:"EditLink-module--bx--text-truncate--front--3_lIE",link:"EditLink-module--link--1qzW3",row:"EditLink-module--row--1B9Gk"}},I8xM:function(e,t,a){e.exports={bxTextTruncateEnd:"PageTabs-module--bx--text-truncate--end--267NA",bxTextTruncateFront:"PageTabs-module--bx--text-truncate--front--3xEQF",tabsContainer:"PageTabs-module--tabs-container--8N4k0",list:"PageTabs-module--list--3eFQc",listItem:"PageTabs-module--list-item--nUmtD",link:"PageTabs-module--link--1mDJ1",selectedItem:"PageTabs-module--selected-item--YPVr3"}},OIbQ:function(e,t,a){e.exports={bxTextTruncateEnd:"last-modified-date-module--bx--text-truncate--end--123zi",bxTextTruncateFront:"last-modified-date-module--bx--text-truncate--front--3xeKz",text:"last-modified-date-module--text--24m-4",row:"last-modified-date-module--row--2BquN"}},QH2O:function(e,t,a){e.exports={bxTextTruncateEnd:"PageHeader-module--bx--text-truncate--end--mZWeX",bxTextTruncateFront:"PageHeader-module--bx--text-truncate--front--3zvrI",pageHeader:"PageHeader-module--page-header--3hIan",darkMode:"PageHeader-module--dark-mode--hBrwL",withTabs:"PageHeader-module--with-tabs--3nKxA",text:"PageHeader-module--text--o9LFq"}},"wf+Y":function(e,t,a){"use strict";a.r(t),a.d(t,"_frontmatter",(function(){return l})),a.d(t,"default",(function(){return j}));var n=a("wx14"),b=a("Ff2n"),o=(a("q1tI"),a("7ljp")),i=a("013z");a("qKvR");const l={},r=e=>function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),Object(o.b)("div",t)},c=r("PageDescription"),s=r("AnchorLinks"),d=r("AnchorLink"),p=r("Row"),m=r("Column"),u=r("ResourceCard"),h=r("MdxIcon"),g=r("Caption"),O={_frontmatter:l},y=i.a;function j(e){let{components:t}=e,a=Object(b.a)(e,["components"]);return Object(o.b)(y,Object(n.a)({},O,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)(c,{mdxType:"PageDescription"},Object(o.b)("p",null,"Rapidly build beautiful and accessible experiences. The Carbon kit contains all\nresources you need to get started.")),Object(o.b)(s,{mdxType:"AnchorLinks"},Object(o.b)(d,{mdxType:"AnchorLink"},"Get the kit"),Object(o.b)(d,{mdxType:"AnchorLink"},"Start designing"),Object(o.b)(d,{mdxType:"AnchorLink"},"How to use"),Object(o.b)(d,{mdxType:"AnchorLink"},"Info")),Object(o.b)("h2",null,"Get the kit"),Object(o.b)("h4",null,"1. ",Object(o.b)("strong",{parentName:"h4"},"Install Sketch"),"."),Object(o.b)("p",null,"To design with Carbon you must have the ",Object(o.b)("strong",{parentName:"p"},"most recent version")," of\n",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://www.sketch.com/"}),"Sketch")," installed."),Object(o.b)("h4",null,"2. ",Object(o.b)("strong",{parentName:"h4"},"Choose a theme"),"."),Object(o.b)("p",null,"There are ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/guidelines/color/overview#themes"}),"four Carbon themes"),", two light\n(White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its\nown Sketch library. You can subscribe to as many libraries as you’d like."),Object(o.b)(p,{className:"resource-card-group",mdxType:"Row"},Object(o.b)(m,{colMd:4,colLg:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(u,{onClick:()=>fathom.trackGoal("P0OEN9TS",0),subTitle:"White theme",href:"sketch://add-library/cloud/557b75ff-67d3-41ab-ada5-fa25447218c1",mdxType:"ResourceCard"},Object(o.b)(h,{name:"sketch",mdxType:"MdxIcon"}))),Object(o.b)(m,{colMd:4,colLg:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(u,{onClick:()=>fathom.trackGoal("T7D1HJ3L",0),subTitle:"Gray 10 theme",href:"sketch://add-library/cloud/b4ea2a21-4b1a-4c64-99dc-a1365eff5d5f",mdxType:"ResourceCard"},Object(o.b)(h,{name:"sketch",mdxType:"MdxIcon"}))),Object(o.b)(m,{colMd:4,colLg:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(u,{onClick:()=>fathom.trackGoal("LYFJTPDE",0),subTitle:"Gray 90 theme",href:"sketch://add-library/cloud/a324c6dd-df97-435e-b79f-3a29e04922fc",mdxType:"ResourceCard"},Object(o.b)(h,{name:"sketch",mdxType:"MdxIcon"}))),Object(o.b)(m,{colMd:4,colLg:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(u,{onClick:()=>fathom.trackGoal("3XH0SIBJ",0),subTitle:"Gray 100 theme",href:"sketch://add-library/cloud/9d47a4fd-70dd-44ff-bc57-22c79da8e477",mdxType:"ResourceCard"},Object(o.b)(h,{name:"sketch",mdxType:"MdxIcon"})))),Object(o.b)("br",null),Object(o.b)("br",null),Object(o.b)("h4",null,"3. ",Object(o.b)("strong",{parentName:"h4"},"Bring in additional colors and icons"),"."),Object(o.b)("p",null,"Additional color collections live in the IBM Design Language library. Icons live\nin two different libraries separated by size."),Object(o.b)(p,{className:"resource-card-group",mdxType:"Row"},Object(o.b)(m,{colMd:4,colLg:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(u,{subTitle:"IBM Design Language",href:"sketch://add-library/cloud/4f1cbe6c-6626-405e-8c46-a9ae41a30cba",mdxType:"ResourceCard"},Object(o.b)(h,{name:"sketch",mdxType:"MdxIcon"}))),Object(o.b)(m,{colMd:4,colLg:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(u,{subTitle:"IBM Icons (16px, 20px) library",href:"sketch://add-library/cloud/028e0598-591e-428c-a490-f6ec64b15ea7",mdxType:"ResourceCard"},Object(o.b)(h,{name:"sketch",mdxType:"MdxIcon"}))),Object(o.b)(m,{colMd:4,colLg:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(u,{subTitle:"IBM Icons (24px, 32px) library",href:"sketch://add-library/cloud/d530998a-c94c-4f1c-bc0e-c05417e067e3",mdxType:"ResourceCard"},Object(o.b)(h,{name:"sketch",mdxType:"MdxIcon"})))),Object(o.b)("br",null),Object(o.b)("br",null),Object(o.b)("h4",null,"4. ",Object(o.b)("strong",{parentName:"h4"},"Download the grid templates"),"."),Object(o.b)("p",null,"Visit the\n",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://www.sketch.com/s/3a3f3f2d-94d7-4c16-8e2e-88ba80a6382e"}),"Sketch library"),"\npage and choose ",Object(o.b)("inlineCode",{parentName:"p"},"Download Document")," from the right-side panel."),Object(o.b)("p",null,"Open the file in Sketch. Navigate to ",Object(o.b)("inlineCode",{parentName:"p"},"File → Save as Template"),". You can now\naccess the saved grid template at ",Object(o.b)("inlineCode",{parentName:"p"},"File → New file from Template"),"."),Object(o.b)(p,{className:"resource-card-group",mdxType:"Row"},Object(o.b)(m,{colLg:4,colMd:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(u,{subTitle:"IBM Grid template",href:"https://www.sketch.com/s/3a3f3f2d-94d7-4c16-8e2e-88ba80a6382e",mdxType:"ResourceCard"},Object(o.b)(h,{name:"sketch",mdxType:"MdxIcon"}))),Object(o.b)(m,{colLg:4,colMd:4,noGutterSm:!0,mdxType:"Column"},Object(o.b)(u,{subTitle:"UI Shell template",href:"https://www.sketch.com/s/6a8e1d7b-f00a-4d8d-9d83-79ecf4dc12a0",mdxType:"ResourceCard"},Object(o.b)(h,{name:"sketch",mdxType:"MdxIcon"})))),Object(o.b)("h2",null,"Start designing"),Object(o.b)("p",null,"To get started with Carbon, familiarize yourself with the contents of each\nlibrary."),Object(o.b)("h4",null,Object(o.b)("strong",{parentName:"h4"},"Start with the grid"),"."),Object(o.b)("p",null,"At the top of your screen, navigate to ",Object(o.b)("inlineCode",{parentName:"p"},"File → New file from Template")," and\nselect your grid template. You’ll always be able to find the template here."),Object(o.b)("h4",null,Object(o.b)("strong",{parentName:"h4"},"Icons and color swatches"),"."),Object(o.b)("p",null,"Symbols from both the IBM Design Language library and the Carbon library are\naccessible from any Sketch document. Navigate to\n",Object(o.b)("inlineCode",{parentName:"p"},"Insert → Symbols → Carbon Design System")," or ",Object(o.b)("inlineCode",{parentName:"p"},"IBM Design Language"),"."),Object(o.b)("h4",null,Object(o.b)("strong",{parentName:"h4"},"You’re all set"),"."),Object(o.b)("p",null,"Refer to the content below for a more detailed breakdown of the kit, or head to\nSketch to begin designing."),Object(o.b)("h2",null,"How to use"),Object(o.b)(s,{small:!0,mdxType:"AnchorLinks"},Object(o.b)(d,{mdxType:"AnchorLink"},"Grid"),Object(o.b)(d,{mdxType:"AnchorLink"},"Symbols"),Object(o.b)(d,{mdxType:"AnchorLink"},"Text styles"),Object(o.b)(d,{mdxType:"AnchorLink"},"Layer styles")),Object(o.b)("h3",null,"Grid"),Object(o.b)("p",null,"The ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/guidelines/2x-grid/overview/"}),"IBM 2x Grid")," is fundamental to everything we\ndesign. It is the geometric foundation of all the visual elements in the IBM\nDesign Language, from typography to columns, boxes, icons, and illustrations.\nThe grid provides structure and guidance for all creative decision-making."),Object(o.b)("img",{src:"/78f2bcb634d36680d173463377316538/grid-2.gif",alt:"2x Grid overview"}),Object(o.b)(g,{mdxType:"Caption"},"2x Grid overview"),Object(o.b)("h4",null,"Getting started"),Object(o.b)("p",null,"All designs should start with the 2x Grid. Once you\nhave ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/designing/kits/sketch/#get-the-kit"}),"saved the grid")," as a template, in\nSketch navigate to ",Object(o.b)("strong",{parentName:"p"},"File → New file from Template")," and select the\n",Object(o.b)("inlineCode",{parentName:"p"},"IBM Grid template")," to open a new document with preset grid artboards. Either\nbegin working in the new file or copy/paste an artboard into your working file."),Object(o.b)("h4",null,"Layout"),Object(o.b)("p",null,"The grid layout feature controls and shows the 2x grid columns, gutters, and\npage margins. To create or edit the layout go to ",Object(o.b)("strong",{parentName:"p"},"View → Canvas → Layout\nSettings…"),"."),Object(o.b)("p",null,"To toggle seeing the 2x grid columns on an artboard go to ",Object(o.b)("strong",{parentName:"p"},"View → Show layout"),"\nor use the keyboard shortcut  ",Object(o.b)("inlineCode",{parentName:"p"},"Control+L"),"."),Object(o.b)("h4",null,"Grid"),Object(o.b)("p",null,"To toggle seeing the mini unit grid go to ",Object(o.b)("strong",{parentName:"p"},"View → Show grid")," or use the\nkeyboard shortcut ",Object(o.b)("inlineCode",{parentName:"p"},"Control+G"),"."),Object(o.b)("h4",null,"Breakpoints"),Object(o.b)("p",null,"The layout settings change depending on which size screen you are designing for.\nSee\n",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints"}),"breakpoints"),"."),Object(o.b)("h3",null,"Basic grid"),Object(o.b)("p",null,"This basic grid is not affected by any influencers and would simply react to the\nproduct’s breakpoints. Every layout and break points are included in the grid\ntemplate on the page labeled “Basic grid”."),Object(o.b)("h3",null,"Grids with an influencer"),Object(o.b)("p",null,"An influencer is a component that affects the content on the page. It can either\nappears on a page as the result of a user action or be part of your product’s\npage. These ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/guidelines/2x-grid/overview/#grid-influencers"}),"influencers")," effect\nthe layout grid by scaling and resizing the columns and its content. You can\nfind an assortment of examples of grids with an influences in the grid template\nfile on the page labeled “Grid influencers”."),Object(o.b)("h3",null,"Calculating the Sketch grid"),Object(o.b)("h4",null,"Sketch layout settings"),Object(o.b)("p",null,"Slide-in panels influence the page layout grid; below are some of the\nspecifications for panel combinations and how they impact the grid at all sizes."),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"Breakpoint width","*"," = ",Object(o.b)("strong",{parentName:"li"},"Artboard width")),Object(o.b)("li",{parentName:"ul"},"Breakpoint gutter","*"," = ",Object(o.b)("strong",{parentName:"li"},"Left and right outside margins")),Object(o.b)("li",{parentName:"ul"},"Total panel width (“sidebar nav”) + Left outside margin + Right outside margin\n= ",Object(o.b)("strong",{parentName:"li"},"Total margins")),Object(o.b)("li",{parentName:"ul"},"Artboard width - Total margins = ",Object(o.b)("strong",{parentName:"li"},"Total width")),Object(o.b)("li",{parentName:"ul"},"Total panel width + Left margin = ",Object(o.b)("strong",{parentName:"li"},"Offset"))),Object(o.b)("p",null,"*","Since we are following the Carbon Design responsive guidelines, we referenced\n",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options"}),"this table"),"\nto determine our common breakpoint widths and respective gutter specs."),Object(o.b)("h4",null,"Example"),Object(o.b)("p",null,"Let’s say we want to create a custom grid for a new design that uses the extra\nsmall panel (256px wide) on our x-large 1312px breakpoint. Applying the formula\nabove, your calculations would look like this:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"Breakpoint width (1312px) = 1312px wide artboard"),Object(o.b)("li",{parentName:"ul"},"Breakpoint gutter (32px) = 32px Left outside margin and 32px Right outside\nmargin"),Object(o.b)("li",{parentName:"ul"},"Total panel width (256px) + 16px Left + 16px Right = 288px Total margins"),Object(o.b)("li",{parentName:"ul"},"Artboard width (1312px) - Total margins (272px) = ",Object(o.b)("strong",{parentName:"li"},"1,056px Total width")),Object(o.b)("li",{parentName:"ul"},"Total panel width (256px) + 16px Left = ",Object(o.b)("strong",{parentName:"li"},"272px Offset"))),Object(o.b)("p",null,"*","If the grid influencer would cause the content view size to be smaller than\n1056, then it would follow the next grid breakpoint setting the columns to 8.\nWhich also avoids columns that are smaller than 32."),Object(o.b)("h3",null,"Symbols"),Object(o.b)("p",null,"Carbon ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/components/overview"}),"components"),", ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/contributing/add-ons"}),"add-ons"),", and\n",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/guidelines/icons/library"}),"icons")," live in the design kit as Sketch symbols."),Object(o.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.19444444444444%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpklEQVQoz41R226dMBDk//+lUr8heanUKEnbREdwDL5wMWCDDXZsDhenS0+j0qZSO1pZi5lhdocovL5KPUptqJiYcGq0rTJCWzlYqfe+N35w82/ll9EvWwjRtm5nnMWY3p34fcwpF6hoYlwkOD+l9IQIYhWpWihc1BSassUlh2Ze1mhd16JgVVmmaZYgzBtZ1YKwgvOqqis4ec3rpoaCHiFECckJKnIyz3MUtmCsnaapaWpG6TBopTqtVYB93kEpba113o+jAddo27ZxHK0ZE9refK0eM3WXDt9wP1k9ObNe/FHc9QpmAL5SalmWn2JjTMnF5y/xw9OZlOLx3Hy4zT9+am6fpZCy7/vL5bI764Hlud4x/HIGsRAiiROMs66TFW8entOnhCHC4/iMCbEvLyB2znVdB/xheBOD8voMTQgbkCbvSYYaXsq2Blt4BfHs99N0dfpTvG9ubfgRFJBSBJHm4HPcGe5B9hfno9h7TxmDH9RJGQ65/5/YOZxlbVNDEP9whhimN8AV6L13lOA8ZxDedgAwrzvDuYvhe8fBwgHADu9wHOQ7pT/e/nvuY5QAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(o.b)("img",Object(n.a)({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Carbon symbol menu navigation",title:"Carbon symbol menu navigation",src:"/static/d9fd6a26f1d812b3ea06faf9b500668b/3cbba/carbon-kit.png",srcSet:["/static/d9fd6a26f1d812b3ea06faf9b500668b/7fc1e/carbon-kit.png 288w","/static/d9fd6a26f1d812b3ea06faf9b500668b/a5df1/carbon-kit.png 576w","/static/d9fd6a26f1d812b3ea06faf9b500668b/3cbba/carbon-kit.png 1152w","/static/d9fd6a26f1d812b3ea06faf9b500668b/0b124/carbon-kit.png 1728w","/static/d9fd6a26f1d812b3ea06faf9b500668b/4ea69/carbon-kit.png 2304w","/static/d9fd6a26f1d812b3ea06faf9b500668b/df13e/carbon-kit.png 2720w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(o.b)("h4",null,"Library menu navigation"),Object(o.b)("p",null,"There are two kinds of symbols — library symbols and document symbols. Library\nsymbols are available in any Sketch document, while document symbols are\nspecific to the document in which they are found."),Object(o.b)("p",null,"From the main menu select ",Object(o.b)("strong",{parentName:"p"},"Insert → Symbols → Carbon Design System")," then\nselect the desired symbol to add onto your page."),Object(o.b)("p",null,"Carbon symbols are built to be flexible, and designers should not detach symbols\nfrom the library. Once a symbol is detached, you will no longer receive updates\nas they are released."),Object(o.b)("h4",null,"Structure"),Object(o.b)("p",null,"Symbols are organized by component; after selecting a component, you’ll see the\nvariations and states of that component."),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("p",{parentName:"li"},"To add the whole component, select the desired variant and place it on your\nartboard.")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("p",{parentName:"li"},"For even more configurability, use the individual building blocks found under\nthe ",Object(o.b)("inlineCode",{parentName:"p"},"Items")," folder within the symbol. Be sure your custom design adheres to\nour ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/guidelines/accessibility/overview"}),"design guidelines"),"."))),Object(o.b)("h3",null,"Text styles"),Object(o.b)("p",null,"Text styles are based on typography rules defined by the\n",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://www.ibm.com/design/language/elements/type-basics"}),"IBM Design Language"),"."),Object(o.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"63.19444444444444%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACpUlEQVQ4y3WSy27TUBCGvWHBBjYFIdaoT8ECCffl2PEArNggpKpYpcVCqoooLbXbtHWcJmnie+Jb4rudSx37DGM3iSgqR/o19hzNN7dDBePbR9uHp69Zrrn1bnfw9v2+Sh9edOidnwK9e9Ki97kuvfe7TTO/RPqHaNC87NGcNK51rgY0r3hveSXc4mX/DdezH1N6o/Xk6Iz/wAvX+3sn0heWl5hr2WAaHZU5FboMJ3SY44sWc9wQmUZbYpp9nWn2dOaqqzJi32CEnsYIN/LX5o3yqdGWX1Bqt/vM0FXPtixQFQVkVQN37IMz8sAYmuA4NtioyjquA67r1qr+FVkGXddhqMswMNRSkrVNyg/CjSRJ1Pl8Dpbt5Ko2KMIoKUZeUHh+WADAfxVGUZFm2WI6m0EcJxEmeUW5jrMRRZGBUMzqlLIkEdMcEqyCRGFAAAgKlnb1fSffD4iNMVVsEASJZVkIdN0amKUJqMNxedToA9dUoK35IMg+6Vo5dKycyOOSdJ0S1FEOaRJDnucQRjEYg0GJ8RCGYWLb9n2gZo7L06YGQs+C/jCGs15ADtoz2LtMyfaRQT6feMCeO9BqiTC0bEjTrKqsjOP4PhAddctJEpeTLMFmqhGVy86qk4PUbYJvaxD7Do7GhQgh0+kUY5K6ZSwqwZHdB6Itq6wljqpCrex8fguSJAFWAL7vw+rM6mXEDwLVJTBP07QgpC5xbfP8tmiJYmFbZhEGQVGWZe1HYIExC4wlCIxq4Gg0eo5OfwmELMtwl3etruwCF8BzHKj47qIwXPuXFcKyQoLATco0zafo/DiZTA4Q9m06mbCLxYItiqK2WA2Ls2Kvri5ZRe6zrmOv7xHE4lJYXMh3HMUOsl5SmKgWXlCe51H4wNe+vyWI4oP+f/UHKl6K0+5WoPMAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(o.b)("img",Object(n.a)({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Text styles navigation",title:"Text styles navigation",src:"/static/a7b10d7946cfebaa49024c6c2b6c5bfd/3cbba/text-styles-1.png",srcSet:["/static/a7b10d7946cfebaa49024c6c2b6c5bfd/7fc1e/text-styles-1.png 288w","/static/a7b10d7946cfebaa49024c6c2b6c5bfd/a5df1/text-styles-1.png 576w","/static/a7b10d7946cfebaa49024c6c2b6c5bfd/3cbba/text-styles-1.png 1152w","/static/a7b10d7946cfebaa49024c6c2b6c5bfd/0b124/text-styles-1.png 1728w","/static/a7b10d7946cfebaa49024c6c2b6c5bfd/4ea69/text-styles-1.png 2304w","/static/a7b10d7946cfebaa49024c6c2b6c5bfd/df13e/text-styles-1.png 2720w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(o.b)("h4",null,"Library menu navigation"),Object(o.b)("p",null,"From the main menu select ",Object(o.b)("strong",{parentName:"p"},"Insert → Text Styles → Carbon Design System")," to\ninsert a Carbon type token text style."),Object(o.b)("p",null,"Text styles within components are carefully considered. We do not recommend\ndetaching the symbol to change default styles."),Object(o.b)("h4",null,"Structure"),Object(o.b)("p",null,"Carbon text styles in Sketch are organized similarly to symbols."),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"The first text style level displays\n",Object(o.b)("a",Object(n.a)({parentName:"li"},{href:"/guidelines/themes/overview"}),"theme options")," (i.e., white theme)."),Object(o.b)("li",{parentName:"ul"},"The second level shows the ",Object(o.b)("a",Object(n.a)({parentName:"li"},{href:"/guidelines/typography/overview"}),"Carbon type"),"\ntokens (i.e., body-long-01)."),Object(o.b)("li",{parentName:"ul"},"The third level selects the type color, which is labeled with a\n",Object(o.b)("a",Object(n.a)({parentName:"li"},{href:"/guidelines/color/overview"}),"Carbon color")," token name.")),Object(o.b)("h3",null,"Layer styles"),Object(o.b)("p",null,"Layer styles are color selections for any shape in Sketch."),Object(o.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(o.b)("span",Object(n.a)({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"78.125%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsSAAALEgHS3X78AAACiklEQVQ4y41Ty27TUBC1t2zYle/hN/gAJLZI8AtsWSIQEqsuYMGqCyRKC3Fb9RHRqji2YzsP106T2PEzduI414e5TgJpEyTGOpq54+szD88Iz58+Ew9evBIBbMDQDfH46FjUdX3r+9MWxJcyxNcnEJ88fiB82n0jCI7jSDeOLbVaLckwDMk0zQrc7na7kmVZlW6325WP31vYJvk7km0ZNdtqn3Yt63Ptx+FDwWyZaJoGmpoGVVUrKASNzs1m849Wlz5Z/oWry0s6031FhibXoTWu0Ggo/slx7ZEwJ2H0lGVZgUqpwG3G2B1wfxzH81a7M0+SZB6RHcXjWZyMEYahpevGjoCllOVCx+kUDbOHf0k2mcBxehiPxxiNRqAAjGvXdW2qYkegTLACl3SS46bvLYOUuP8+yyawrBv0HAeUJSdmaZoiCAJbUZS/Ga4I1u11MLYkpIAdy6n6SiUT6ZjFcUKZJrbSaKyXXN4l+lfNbIbbnoOOSYS+i2kasTyLkcaBrWrNbRlSNlwVGX07RVEUSLIcziBE2y2g2BlOftqo1Q2cyTbqap9dmgGujKFdPzvaJCxLVtmytAf9+gJplkFt97H3tY4P3328O/CxezjE+/3bCm/3h4yAj1LPNuSLTcJVr758O8d5/RpxFMLzXF7rAmWONAkxcD0EYQQ/CFkSBYgC19aaxvafkuc5pnnBL8P3fRoJjwKxqq/FfE6+AC1aCB4oikIWRTHZI1vd9pdXfVQ0HQ3aDs/z+IxVhFx4T2n2qhnkoIFm/EyBF3O4QYgFqW7qoB2mDKLqw/uEa6gI+RzSam4veTab0cYksGk8ONlgMNgg5IGW+A/CYoYkjDHsD6oe8rK3ES71HcLf5KqRAA7Kq3cAAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(o.b)("img",Object(n.a)({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Layer styles navigation example",title:"Layer styles navigation example",src:"/static/6aead45d8d7dfd9aab15360eb947b199/3cbba/layer-style-1.png",srcSet:["/static/6aead45d8d7dfd9aab15360eb947b199/7fc1e/layer-style-1.png 288w","/static/6aead45d8d7dfd9aab15360eb947b199/a5df1/layer-style-1.png 576w","/static/6aead45d8d7dfd9aab15360eb947b199/3cbba/layer-style-1.png 1152w","/static/6aead45d8d7dfd9aab15360eb947b199/392b1/layer-style-1.png 1472w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(o.b)(g,{mdxType:"Caption"},"Use predetermined overrides when possible"),Object(o.b)("h4",null,"Library menu navigation"),Object(o.b)("p",null,Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/guidelines/color/overview"}),"Color")," in Carbon is carefully considered, and we\ndiscourage custom layer styles."),Object(o.b)("p",null,"The first layer is the theme selection (i.e., 01 White theme). The second layer\nis core Carbon color tokens (i.e., field-01) for the selected them. The\ninteraction state tokens are nested in a third layer under “state.”"),Object(o.b)("h2",null,"Info"),Object(o.b)("p",null,"If you’re brand new to Sketch, they offer some great\n",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://www.sketchapp.com/docs/"}),"tutorials and help docs"),"."),Object(o.b)("h3",null,"Updates"),Object(o.b)("p",null,"We make small adjustments and bug fixes to the kit on a regular basis. When we\nmake a change to any of the libraries, you will be notified via a red pop-up in\nthe top right corner of the Sketch window."),Object(o.b)("p",null,"The updates are opt-in, however we recommend you keep your kit as up to date as\npossible. Once a change is accepted, you will not be able to revert to the\nprevious version."),Object(o.b)("h3",null,"Migration"),Object(o.b)("p",null,"If you’re using an older version of Carbon, check out the v10\n",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/help/migration-guide/design/"}),"migration docs")," when you’re ready to make the\nswitch."),Object(o.b)("h3",null,"Support"),Object(o.b)("p",null,"Can’t find an answer to your question? Open up an issue on\n",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/carbon-design-system/carbon/issues/new/choose"}),"GitHub"),"."))}j.isMDXComponent=!0}}]);