This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
Sample data
const codeSnippet =`"scripts": {
"build": "lerna run build --stream --prefix --npm-client yarn",
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
Preview the menu button, combo button, and overflow menu component with the
React live demo. For detailed code usage documentation, see the Storybooks for
-each framework below.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
Preview the progress indicator component with the React live demo. For detailed
-code usage documentation, see the Storybooks for each framework below.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.
Simple charts offer a way to visualize data sets in an intuitive, easy to
understand way. Every chart should tell a story and should reflect the content
-on the page where it is found.
Area charts are similar to line charts, but the areas below the lines are filled with colors or patterns. Stacked charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.
A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is a type of bar graph that is used to compare values across multiple categories.
Stacked bar charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.
Bubble charts use data points and bubbles to plot measures anywhere along a scale. One measure is plotted along each axis. The size of the bubble represents the third measure. You can use bubble charts to represent financial data or any data where measured values are related.
Scatter plot visualizations use data points to plot two measures anywhere along a scale, not only at regular tick marks. You can use scatter plots to explore correlations between different measures.
Stepped line charts plot data at regular intervals, forming a series of steps between data points. You can use line visualizations to show trends over time and compare several data sets.
Users rely on consistent labels for common actions to predict how to interact
with an interface. This list includes the common UI terms and recommended action
-labels for use in IBM UI content and documentation.
AA
Add
Takes an existing object and uses it in a new context (for example, adds an item to the cart, adds a user to a group, or adds a document to a folder).
Where appropriate, combine add with the object (for example, Add user or Add role). Compare Create, Insert, New, and Upload. See also the Add pattern.
Apply
Saves changes without closing the dialog. These properties often affect subsequent system behavior.
Use instead of Save changes. Compare Save and Save as.
Approve
Indicates the user agrees. In a business process, typically initiates the next step.
Assists the user in selecting a file (for example, on a button or link next to an entry field). Typically opens a secondary window where the user can locate and select the desired directory and file.
CC
Cancel
Stops the current action and closes the dialog.
Warn the user of any possible negative consequences of stopping an action from progressing, such as data corruption. Compare Reset. See also the Cancel pattern.
Clear
This action clears all the fields or selections. Also deletes the contents of a document, such as a log. Typically the default selection or value is re-established for controls that always have a selection or value, such as radio buttons.
Where appropriate, combine clear with the object (for example, Clear fields or Clear all). Compare Delete and Remove. See also the Clear pattern.
Close
Closes the current page or window (for example, closing a secondary window containing online help).
Do not use Close alongside OK or Cancel actions. Compare Cancel and Done. See also the Close pattern.
Copy
Creates new instances of the selected objects in a specific destination.
Combine Copy with the object being copied (for example, Copy folder) or the destination (for example, Copy to clipboard) if there are multiple possibilities. Compare New. See also the Copy pattern.
Create
Makes a new object from scratch (for example, creates a calendar event or creates a new document).
In scenarios where the user needs to supply some details or settings as part of the create process, use new to initiate the action and create to apply the user-supplied details or settings to the new object. Compare Add, Copy, Insert, and New.
Customize
Allow a user to make desired changes.
DD
Delete
Destroys an existing object so that it no longer exists (for example, deletes a file from a directory or deletes a value from a table cell).
Where appropriate, combine Delete with the object (for example, Delete column or Delete row). Compare Clear and Remove. See also the Delete pattern
Docs
Opens a separate window containing the landing page for the product documentation.
Use as link text only for the specific link that points to the product documentation from the console menu bar. Compare Learn more.
Done
Indicates that the user has finished working in an environment (for example, editing templates) and wants to return to where he or she came from.
Saves data in a different format external to the system. Typically opens a secondary window for the user to specify the file type and destination (for example, storing table data as a set of comma-separated values).
Moves the cursor to the next element matching the specified criteria (for example, view the next occurrence of a specific word within an email message).
Opens additional, highly contextual information. Insert at the end of inline text or hover text where more information follows but does not fit in the current context.
If space permits, combine Learn more with meaningful text that describes the content you're pointing to. For example, if your user needs some best practices to manage apps in multiple regions, you could use Learn more about regions.
Log in
Enters a site or application. This choice typically opens a form for entry of credentials. Also used on the submission button after users enter their credentials.
Use instead of Sign in. This is to make it visually distinct from Sign up. These options are often side by side and the different words allow for quick recognition. Compare Log out. See also the Login pattern.
Best practice is to use a label corresponding to the specific action (for example, Save or Close or Delete). Use OK only when such a label is not available. Write as shown: two letters, both uppercase.
PP
Play
Starts audio, video, or an animation.
Post
Adds a new comment to an online community or adds status to a log or record.
If you are editing an existing comment, use Save instead.
Preview
Shows how an object or content will appear with formatting applied before the content is published or distributed. Alternatively, provides an incomplete display of an existing object without leaving the current context.
Print
Sends a copy of the currently selected object or the object in view to the printer.
RR
Redo
Redoes an undo action.
Likely used only as a tooltip on an icon button. Compare Undo.
Refresh
Reloads the view of an object when the displayed view has become unsynchronized with the source.
Likely used only as a tooltip on an icon button. See also the Refresh pattern.
Reject
Indicates the user does not approve. In a business process, typically blocks the process from proceeding to the next step.
Removes an object from the current context but the object is not destroyed as a result of the action (for example, removes a user from a group or removes an item from the cart).
Where appropriate, combine Remove with the object that will be removed (for example, Remove user or Remove role). Compare Clear and Delete. See also the Remove pattern.
Reply
Indicates or completes a response to an email or a comment.
Reset
Reverts values back to their last saved state. The last saved state includes the values stored the last time the user clicked Apply. Does not close the dialog or window.
Creates a new object based on the state of the object currently being viewed. The user names the new object and typically identifies its location.
Search
Returns all objects (for example, files, names, or documents) within a defined set (for example, in a folder, directory, database, or the internet) that match some specified criteria.
Creates a user account or registers a user in a system.
Use instead of Register.
Sort
Sorts a list or table column.
Likely used only as a tooltip on an icon button. Can be used without 'ascending' or 'descending' only if the order can be provided to a screen reader in the code for accessibility.
Start
Deploy an app or service to its development or production environment so that it can be used.
Use instead of Launch.
Submit an idea
Opens a separate window containing the IBM Cloud Ideas portal.
Use only as link text on the Support widget from the console menu bar.
TT
Top
Returns to the top of the page.
Use instead of Back to top.
UU
Undo
Reverts to the state before the most recent changes made by the user. Repeated use successively reverts to prior states in reverse chronological order. Applies to changes in data and not to changes made to the view.
\n```\n","type":"Mdx","contentDigest":"53fccf5b341015015487e6f0cab033c3","owner":"gatsby-plugin-mdx","counter":4885},"frontmatter":{"title":"Complex charts","description":"Complex charts are a powerful way to display complex data sets."},"exports":{},"rawBody":"---\ntitle: Complex charts\ndescription: Complex charts are a powerful way to display complex data sets.\n---\n\nimport {\n complexChartDemoGroups,\n getDemoGroupByTitle,\n} from '../../../data/data-visualization';\n\nimport { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon';\nimport ChartDemoGroup from '../../../components/data-visualization/ChartDemoGroup.js';\n\n\n\nComplex charts are a powerful way to display complex data sets. While less\nintuitive than basic charts, the visualizations should still tell a story the\nuser can understand.\n\n\n\n\n\n**Note:** Some of the charts below are not included in the Carbon-charts\nrepository yet. To see our roadmap, make feature requests, or contribute, please\ngo to the\n[carbon-charts repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nAlluvial/sankey diagrams\nHeat maps\nNetwork diagrams\nParallel coordinates\nTree diagrams\nTree maps\nCircle packs\nGeospatial charts\n\n\n\n## Alluvial/sankey diagrams\n\nAlluvial, or Sankey diagrams, are a type flow diagram designed to show two\nindicators of a dataset and how records distribute among them, highlighting\ncorrelations.\n\nMultiple blocks of two indicators can be placed next to each other creating a\nwider alluvial diagram but it’s crucial to consider that this specific kind of\nchart does not show correlations between indicators that are not directly\nconnected. This is usually emphasized using a different set of colors for each\nblock.\n\n
\n \n
\n\n## Heat maps\n\nA heat map is a two-dimensional visualization in which individual values\ncontained in a matrix are represented as colors. This technique makes it easy to\nvisualize complex data at a glance. When it comes to heat maps, the most common\ncolor ranges are expressed in either sequential and diverging color scales\naccording to the type of data represented.\n\n#### Sequential scales\n\nSequential scales use a blended progression, typically of a single color, from\nthe lowest contrast to the highest contrast values, representing lows to highs.\nIt’s best practice to use a sequential scale with values that are all positive\nor all negative. Sequential heat maps can leverage the full range of the palette\n(from 10–100) to maximize contrast. Please note that the 3:1 minimum contrast\nrequirement does not apply to heat maps.\n\n\n\n
\n When cells get extremely small, a white border can hinder the intended effect.\n
\n\n#### Heat map behaviors\n\nAxis ticks and legend can be used to leverage the chart potential giving the\nusers additional information and dedicated kinds of interaction.\n\n\n\n\n\n\n
Exploration of a domain axis hover behavior
\n\n\n\n\n#### Divergent scales\n\nDiverging scales show color progression in two directions: dialing down the\ncontrast of the first hue from one end to a neutral color at the midpoint, then\nincreasing the contrast of the second hue to the other end of the scale. The\nneutral midpoint is often referred to as the \"inflection point\" (for example, a\n0 value midway between -100 and +100).\n\n[Divergent scales](/data-visualization/color-palettes#diverging-palettes)\nrequire three colors for their correspondent values (min, max, and inflection\npoint) and Carbon has provided two approved palettes for divergent\nvisualizations. Although the examples here use the \"discrete\" (stepped scale)\nprovided by the Carbon palette, divergent heat maps often leverage \"continuous\"\nvalues (gradients) to accommodate situations that require more than 10 values.\n\n#### Inflection points\n\nWhile min/max values can be automatically detected from data, inflection points\ncan vary depending on data type. We default to zero in order to accommodate the\nmost common cases and include a feature flag within the code to specify\nexceptions. The data for a divergent heat map does not need to be symmetrical on\neither side of the inflection point. For example, the data set could have a zero\nvalue between -20 and +100 as well.\n\n## Network diagrams\n\nA network diagram is a way of visually representing network architecture. It\nmaps out network structure with a variety of icons and connecting lines. It’s\nideal for sharing the layout of a network because the visual presentation makes\nit easier for users to understand complex connections at a glance. These\ndiagrams are especially useful for isolating problems or when designing a new\nsystem.\n\n### Building blocks\n\nCarbon Charts offers building blocks for network diagrams in the form of\n**React** & **Angular** components.\n\nNote that Carbon Charts does not provide layouts for diagrams. You can utilize\nthese components alongside graphing libraries (such as elkjs), or by composing\nyour own layouts.\n\n**Getting started guides:**\n\n- [React](https://carbon-design-system.github.io/carbon-charts/react/?path=/story/diagrams--start-here)\n- [Angular](https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/diagrams--start-here)\n\nHere's an example using elkjs in react\n\n\n\n\n\n\n\n\n
Example of a network diagram in a swimlane graph from QRadar
\n\n\n\n\n### Node types\n\nThis specific network diagram is comprised of parent and child nodes. In the\nQRadar example, parent nodes convey the story of what happened in an\ninvestigation and can be clustered based on relationship type. Child nodes\nappear under parent nodes and can also be clustered.\n\nNetwork diagrams use the same scale controls that apply to the rest of the data\nvisualization components, however they appear in a floating tile, enabling the\nuser to zoom and pan simultaneously. It’s also helpful to include the expand and\ncollapse all nodes feature, which gives users the ability to easily navigate\nbetween detailed and high-level views of the diagram.\n\n\n\n\n\n\n
\n Detail of child nodes clustered underneath master parent cluster\n
\n\n\n\n\n## Parallel coordinates\n\nParallel coordinate charts visualize individual data elements across multiple\nvariables. Each variable corresponds to a vertical axis and each data element is\ndisplayed as a series of connected points along the axes.\n\nThe parallel coordinate chart is the equivalent of a radar chart with axes —\nmaking it preferable for many use cases. Its strength is that each variable can\nbe completely different and even have its own scale (the units can even be\ndifferent).\n\n\n\n\n\n\n\n\n\n### Parallel coordinate behaviors\n\nHover effects that highlight a specific group or axis can be added to enhance\nbasic parallel coordinate charts. These charts can also include interactive\nfeatures like the brush component. By clicking and dragging along any axis, you\ncan specify a filter for that dimension. The brush component is also used in the\nupdated scatterplot matrix example. See the detail below.\n\n\n\n\n\n\n
Detail of a comparative tooltip interaction on hover
\n\n\n\n\n## Tree diagrams\n\nCarbon Charts supports both tree diagrams and dendrograms. Although the two are\nvery similar, dendrograms tend to offer a more responsive layout for varying\nscreen sizes.\n\n
\n \n
\n\n## Tree maps\n\nTree maps can work for visualizing a part-to-whole relationship among a large\nnumber of categories—as long as the data is hierarchical and exact comparisons\nbetween the categories is not a primary concern.\n\nWhen dealing with large amounts of data in a constrained space, tree structured\nnodelink diagrams (like the network diagram shown above), grow too complex to be\nuseful. Tree maps provide an attractive alternative by maintaining a\nhierarchical structure while displaying rectangular quantities for each category\nand subcategory via area size.\n\n
\n \n
\n\n#### Divergent tree maps\n\nDivergent tree maps combine Carbon's divergent color palette with the\nhierarchical structure of a tree map. Each rectangle has an area proportional to\na specified dimension of the data, but the rectangles can also be colored\nindependently according to an additional indicator.\n\nAs with [heat maps](#heat-maps), the diverging palette shows color progression\nin either direction from an inflection point (for example, a 0 value midway\nbetween -10 and +10). In the example below, the inflection point is simply an\naverage. Tourism can be mapped by the number of visitors to a certain country,\nbut the visualization can also compare this data to a yearly average. For\ninstance, even though one country may have a lot of visitors compared to another\ncountry, tourism for that country may fall below its annual average.\n\n\n\n\n\n\n
\n Example of a divergent tree map adding color as a second variable to a basic\n tree map structure\n
Detail of a comparative tooltip on a divergent tree map
\n\n\n\n\n## Circle packs\n\nA circle pack is a hierarchical visualization of data. It’s equivalent to a\nTreemap or a Dendrogram—where each node of the tree is represented as a circle\nand sub-nodes are represented as circles within a parent. The size of each\ncircle can also be used to represent an additional arbitrary value, such as\npopulation or file size. Color may also be used to assign categories or to\nrepresent an additional variable. Although they’re not as space efficient,\nCircle Packs reveal hierarchical structure better than Treemaps.\n\nFor Circle Packs with more than two levels of hierarchy, zoom functionality\nallows users to explore the data without compromising the contrast accessibility\nof the chart. We advise against disabling the zoom functionality except in cases\nsuch as preview charts, cards that expand to full view with the chart, etc.\n\n
\n \n
\n\n## Geospatial charts\n\n### Geographic overlays\n\n#### Choropleth map\n\nA map that uses differences in shading, coloring, or the placing of symbols\nwithin predefined areas to indicate the average values of a property or quantity\nin those areas.\n\n\n\n\n\n\n\n\n\n### Proportional symbol map\n\nSymbols driven by data are overlayed in geographical regions. A bubble is the\nsymbol most commonly used in this instance—with the area of the circle\nproportional to its value in the dataset.\n\n\n\n\n\n\n\n\n\n### Connection map\n\nConnection Maps are drawn by connecting points placed on a map by straight or\ncurved lines.\n\nWhile Connection Maps are great for showing connections and relationships\ngeographically, they can also be used to display map routes through a single\nchain of links. Connection Maps can also be useful in revealing spatial patterns\nthrough the distribution of connections or by how concentrated connections are\non a map.\n\n\n\n\n\n\n\n\n\n### Geospatial distortions\n\n#### Density-equalizing cartograms\n\nDensity-equalizing cartograms are the most common type of cartogram. In this\nsituation the mapping variable takes the place of the land area or distance in\nthe map, causing the map to become distorted in proportion to the substitute\nvariable.\n\nCartograms are useful for visualizing populations through different lenses — for\ninstance, ethnicities, political parties, or religious affiliation. Carbon does\nnot have a coded component for cartograms but online generators like\n[go-cart.io](https://go-cart.io/) allow you to upload your own data sets and\ndownload an .svg file.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Dorling cartograms\n\nThe Dorling Cartogram is a technique for representing data for areas that avoids\ngeography in favor of (normally) a geometric shape that represents the unit\nareas. Circles are usually chosen since they can be neatly positioned.\n\nAs with the density-equalizing cartogram above, the larger the total population,\nthe larger the representation of the country.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Mapbox\n\nFor more dynamic, real-time mapping, Carbon has created four themes using\n[Mapbox](https://www.mapbox.com/). Mapbox is a developer platform used across\nindustries to create custom maps that can be easily integrated into websites and\napps. These themes can be used as is, or in conjunction with Carbon-styled data\npoints.\n\nThese styles can be used as is, or as a backdrop for other geospatial data sets.\nFor more complex data sets that require the full breadth of the Carbon charts\npalette, we suggest using either the White or the Gray 100 style for the most\naccessible results.\n\n\n\n\n\n\n
Example of a Carbon’s Gray 100 theme style in Mapbox
\n\n\n\n\n#### Applying the Carbon Mapbox themes\n\nFor instructions on how to use Mapbox GL JS please read this\n[Mapbox quickstart documentation](https://docs.mapbox.com/mapbox-gl-js/api/#quickstart).\n\nIn addition to the instructions above, when initializing a new map you can apply\nany of the 4 Carbon themes by providing the stylesheet location to the library.\n\n| Theme | Style sheet location |\n| ---------- | -------------------------------------------------------------- |\n| _White_ | `mapbox://styles/carbondesignsystem/ck7c8cfpp08h61irrudv7f1xg` |\n| _Gray 10_ | `mapbox://styles/carbondesignsystem/ck7c8ce1y05h61ipb2fixfe76` |\n| _Gray 90_ | `mapbox://styles/carbondesignsystem/ck7c8ccac08jj1imhvd2g4qfb` |\n| _Gray 100_ | `mapbox://styles/carbondesignsystem/ck7c89g8708gy1imlz9g5o6h9` |\n\nExample\n\n```html\n\n```\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/complex-charts/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-data-visualization-complex-charts-index-mdx","path":"/data-visualization/complex-charts/","result":{"pageContext":{"frontmatter":{"title":"Complex charts","description":"Complex charts are a powerful way to display complex data sets."},"relativePagePath":"/data-visualization/complex-charts/index.mdx","titleType":"prepend","MdxNode":{"id":"aec5b77b-bc48-598e-8657-7446f9bd01f5","children":[],"parent":"392c95c1-83e4-5a2e-8f31-b27b0f5bc34a","internal":{"content":"---\ntitle: Complex charts\ndescription: Complex charts are a powerful way to display complex data sets.\n---\n\nimport {\n complexChartDemoGroups,\n getDemoGroupByTitle,\n} from '../../../data/data-visualization';\n\nimport { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon';\nimport ChartDemoGroup from '../../../components/data-visualization/ChartDemoGroup.js';\n\n\n\nComplex charts are a powerful way to display complex data sets. While less\nintuitive than basic charts, the visualizations should still tell a story the\nuser can understand.\n\n\n\n\n\n**Note:** Some of the charts below are not included in the Carbon-charts\nrepository yet. To see our roadmap, make feature requests, or contribute, please\ngo to the\n[carbon-charts repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nAlluvial/sankey diagrams\nHeat maps\nNetwork diagrams\nParallel coordinates\nTree diagrams\nTree maps\nCircle packs\nGeospatial charts\n\n\n\n## Alluvial/sankey diagrams\n\nAlluvial, or Sankey diagrams, are a type flow diagram designed to show two\nindicators of a dataset and how records distribute among them, highlighting\ncorrelations.\n\nMultiple blocks of two indicators can be placed next to each other creating a\nwider alluvial diagram but it’s crucial to consider that this specific kind of\nchart does not show correlations between indicators that are not directly\nconnected. This is usually emphasized using a different set of colors for each\nblock.\n\n
\n \n
\n\n## Heat maps\n\nA heat map is a two-dimensional visualization in which individual values\ncontained in a matrix are represented as colors. This technique makes it easy to\nvisualize complex data at a glance. When it comes to heat maps, the most common\ncolor ranges are expressed in either sequential and diverging color scales\naccording to the type of data represented.\n\n#### Sequential scales\n\nSequential scales use a blended progression, typically of a single color, from\nthe lowest contrast to the highest contrast values, representing lows to highs.\nIt’s best practice to use a sequential scale with values that are all positive\nor all negative. Sequential heat maps can leverage the full range of the palette\n(from 10–100) to maximize contrast. Please note that the 3:1 minimum contrast\nrequirement does not apply to heat maps.\n\n\n\n
\n When cells get extremely small, a white border can hinder the intended effect.\n
\n\n#### Heat map behaviors\n\nAxis ticks and legend can be used to leverage the chart potential giving the\nusers additional information and dedicated kinds of interaction.\n\n\n\n\n\n\n
Exploration of a domain axis hover behavior
\n\n\n\n\n#### Divergent scales\n\nDiverging scales show color progression in two directions: dialing down the\ncontrast of the first hue from one end to a neutral color at the midpoint, then\nincreasing the contrast of the second hue to the other end of the scale. The\nneutral midpoint is often referred to as the \"inflection point\" (for example, a\n0 value midway between -100 and +100).\n\n[Divergent scales](/data-visualization/color-palettes#diverging-palettes)\nrequire three colors for their correspondent values (min, max, and inflection\npoint) and Carbon has provided two approved palettes for divergent\nvisualizations. Although the examples here use the \"discrete\" (stepped scale)\nprovided by the Carbon palette, divergent heat maps often leverage \"continuous\"\nvalues (gradients) to accommodate situations that require more than 10 values.\n\n#### Inflection points\n\nWhile min/max values can be automatically detected from data, inflection points\ncan vary depending on data type. We default to zero in order to accommodate the\nmost common cases and include a feature flag within the code to specify\nexceptions. The data for a divergent heat map does not need to be symmetrical on\neither side of the inflection point. For example, the data set could have a zero\nvalue between -20 and +100 as well.\n\n## Network diagrams\n\nA network diagram is a way of visually representing network architecture. It\nmaps out network structure with a variety of icons and connecting lines. It’s\nideal for sharing the layout of a network because the visual presentation makes\nit easier for users to understand complex connections at a glance. These\ndiagrams are especially useful for isolating problems or when designing a new\nsystem.\n\n### Building blocks\n\nCarbon Charts offers building blocks for network diagrams in the form of\n**React** & **Angular** components.\n\nNote that Carbon Charts does not provide layouts for diagrams. You can utilize\nthese components alongside graphing libraries (such as elkjs), or by composing\nyour own layouts.\n\n**Getting started guides:**\n\n- [React](https://carbon-design-system.github.io/carbon-charts/react/?path=/story/diagrams--start-here)\n- [Angular](https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/diagrams--start-here)\n\nHere's an example using elkjs in react\n\n\n\n\n\n\n\n\n
Example of a network diagram in a swimlane graph from QRadar
\n\n\n\n\n### Node types\n\nThis specific network diagram is comprised of parent and child nodes. In the\nQRadar example, parent nodes convey the story of what happened in an\ninvestigation and can be clustered based on relationship type. Child nodes\nappear under parent nodes and can also be clustered.\n\nNetwork diagrams use the same scale controls that apply to the rest of the data\nvisualization components, however they appear in a floating tile, enabling the\nuser to zoom and pan simultaneously. It’s also helpful to include the expand and\ncollapse all nodes feature, which gives users the ability to easily navigate\nbetween detailed and high-level views of the diagram.\n\n\n\n\n\n\n
\n Detail of child nodes clustered underneath master parent cluster\n
\n\n\n\n\n## Parallel coordinates\n\nParallel coordinate charts visualize individual data elements across multiple\nvariables. Each variable corresponds to a vertical axis and each data element is\ndisplayed as a series of connected points along the axes.\n\nThe parallel coordinate chart is the equivalent of a radar chart with axes —\nmaking it preferable for many use cases. Its strength is that each variable can\nbe completely different and even have its own scale (the units can even be\ndifferent).\n\n\n\n\n\n\n\n\n\n### Parallel coordinate behaviors\n\nHover effects that highlight a specific group or axis can be added to enhance\nbasic parallel coordinate charts. These charts can also include interactive\nfeatures like the brush component. By clicking and dragging along any axis, you\ncan specify a filter for that dimension. The brush component is also used in the\nupdated scatterplot matrix example. See the detail below.\n\n\n\n\n\n\n
Detail of a comparative tooltip interaction on hover
\n\n\n\n\n## Tree diagrams\n\nCarbon Charts supports both tree diagrams and dendrograms. Although the two are\nvery similar, dendrograms tend to offer a more responsive layout for varying\nscreen sizes.\n\n
\n \n
\n\n## Tree maps\n\nTree maps can work for visualizing a part-to-whole relationship among a large\nnumber of categories—as long as the data is hierarchical and exact comparisons\nbetween the categories is not a primary concern.\n\nWhen dealing with large amounts of data in a constrained space, tree structured\nnodelink diagrams (like the network diagram shown above), grow too complex to be\nuseful. Tree maps provide an attractive alternative by maintaining a\nhierarchical structure while displaying rectangular quantities for each category\nand subcategory via area size.\n\n
\n \n
\n\n#### Divergent tree maps\n\nDivergent tree maps combine Carbon's divergent color palette with the\nhierarchical structure of a tree map. Each rectangle has an area proportional to\na specified dimension of the data, but the rectangles can also be colored\nindependently according to an additional indicator.\n\nAs with [heat maps](#heat-maps), the diverging palette shows color progression\nin either direction from an inflection point (for example, a 0 value midway\nbetween -10 and +10). In the example below, the inflection point is simply an\naverage. Tourism can be mapped by the number of visitors to a certain country,\nbut the visualization can also compare this data to a yearly average. For\ninstance, even though one country may have a lot of visitors compared to another\ncountry, tourism for that country may fall below its annual average.\n\n\n\n\n\n\n
\n Example of a divergent tree map adding color as a second variable to a basic\n tree map structure\n
Detail of a comparative tooltip on a divergent tree map
\n\n\n\n\n## Circle packs\n\nA circle pack is a hierarchical visualization of data. It’s equivalent to a\nTreemap or a Dendrogram—where each node of the tree is represented as a circle\nand sub-nodes are represented as circles within a parent. The size of each\ncircle can also be used to represent an additional arbitrary value, such as\npopulation or file size. Color may also be used to assign categories or to\nrepresent an additional variable. Although they’re not as space efficient,\nCircle Packs reveal hierarchical structure better than Treemaps.\n\nFor Circle Packs with more than two levels of hierarchy, zoom functionality\nallows users to explore the data without compromising the contrast accessibility\nof the chart. We advise against disabling the zoom functionality except in cases\nsuch as preview charts, cards that expand to full view with the chart, etc.\n\n
\n \n
\n\n## Geospatial charts\n\n### Geographic overlays\n\n#### Choropleth map\n\nA map that uses differences in shading, coloring, or the placing of symbols\nwithin predefined areas to indicate the average values of a property or quantity\nin those areas.\n\n\n\n\n\n\n\n\n\n### Proportional symbol map\n\nSymbols driven by data are overlayed in geographical regions. A bubble is the\nsymbol most commonly used in this instance—with the area of the circle\nproportional to its value in the dataset.\n\n\n\n\n\n\n\n\n\n### Connection map\n\nConnection Maps are drawn by connecting points placed on a map by straight or\ncurved lines.\n\nWhile Connection Maps are great for showing connections and relationships\ngeographically, they can also be used to display map routes through a single\nchain of links. Connection Maps can also be useful in revealing spatial patterns\nthrough the distribution of connections or by how concentrated connections are\non a map.\n\n\n\n\n\n\n\n\n\n### Geospatial distortions\n\n#### Density-equalizing cartograms\n\nDensity-equalizing cartograms are the most common type of cartogram. In this\nsituation the mapping variable takes the place of the land area or distance in\nthe map, causing the map to become distorted in proportion to the substitute\nvariable.\n\nCartograms are useful for visualizing populations through different lenses — for\ninstance, ethnicities, political parties, or religious affiliation. Carbon does\nnot have a coded component for cartograms but online generators like\n[go-cart.io](https://go-cart.io/) allow you to upload your own data sets and\ndownload an .svg file.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Dorling cartograms\n\nThe Dorling Cartogram is a technique for representing data for areas that avoids\ngeography in favor of (normally) a geometric shape that represents the unit\nareas. Circles are usually chosen since they can be neatly positioned.\n\nAs with the density-equalizing cartogram above, the larger the total population,\nthe larger the representation of the country.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Mapbox\n\nFor more dynamic, real-time mapping, Carbon has created four themes using\n[Mapbox](https://www.mapbox.com/). Mapbox is a developer platform used across\nindustries to create custom maps that can be easily integrated into websites and\napps. These themes can be used as is, or in conjunction with Carbon-styled data\npoints.\n\nThese styles can be used as is, or as a backdrop for other geospatial data sets.\nFor more complex data sets that require the full breadth of the Carbon charts\npalette, we suggest using either the White or the Gray 100 style for the most\naccessible results.\n\n\n\n\n\n\n
Example of a Carbon’s Gray 100 theme style in Mapbox
\n\n\n\n\n#### Applying the Carbon Mapbox themes\n\nFor instructions on how to use Mapbox GL JS please read this\n[Mapbox quickstart documentation](https://docs.mapbox.com/mapbox-gl-js/api/#quickstart).\n\nIn addition to the instructions above, when initializing a new map you can apply\nany of the 4 Carbon themes by providing the stylesheet location to the library.\n\n| Theme | Style sheet location |\n| ---------- | -------------------------------------------------------------- |\n| _White_ | `mapbox://styles/carbondesignsystem/ck7c8cfpp08h61irrudv7f1xg` |\n| _Gray 10_ | `mapbox://styles/carbondesignsystem/ck7c8ce1y05h61ipb2fixfe76` |\n| _Gray 90_ | `mapbox://styles/carbondesignsystem/ck7c8ccac08jj1imhvd2g4qfb` |\n| _Gray 100_ | `mapbox://styles/carbondesignsystem/ck7c89g8708gy1imlz9g5o6h9` |\n\nExample\n\n```html\n\n```\n","type":"Mdx","contentDigest":"53fccf5b341015015487e6f0cab033c3","owner":"gatsby-plugin-mdx","counter":4904},"frontmatter":{"title":"Complex charts","description":"Complex charts are a powerful way to display complex data sets."},"exports":{},"rawBody":"---\ntitle: Complex charts\ndescription: Complex charts are a powerful way to display complex data sets.\n---\n\nimport {\n complexChartDemoGroups,\n getDemoGroupByTitle,\n} from '../../../data/data-visualization';\n\nimport { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon';\nimport ChartDemoGroup from '../../../components/data-visualization/ChartDemoGroup.js';\n\n\n\nComplex charts are a powerful way to display complex data sets. While less\nintuitive than basic charts, the visualizations should still tell a story the\nuser can understand.\n\n\n\n\n\n**Note:** Some of the charts below are not included in the Carbon-charts\nrepository yet. To see our roadmap, make feature requests, or contribute, please\ngo to the\n[carbon-charts repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nAlluvial/sankey diagrams\nHeat maps\nNetwork diagrams\nParallel coordinates\nTree diagrams\nTree maps\nCircle packs\nGeospatial charts\n\n\n\n## Alluvial/sankey diagrams\n\nAlluvial, or Sankey diagrams, are a type flow diagram designed to show two\nindicators of a dataset and how records distribute among them, highlighting\ncorrelations.\n\nMultiple blocks of two indicators can be placed next to each other creating a\nwider alluvial diagram but it’s crucial to consider that this specific kind of\nchart does not show correlations between indicators that are not directly\nconnected. This is usually emphasized using a different set of colors for each\nblock.\n\n
\n \n
\n\n## Heat maps\n\nA heat map is a two-dimensional visualization in which individual values\ncontained in a matrix are represented as colors. This technique makes it easy to\nvisualize complex data at a glance. When it comes to heat maps, the most common\ncolor ranges are expressed in either sequential and diverging color scales\naccording to the type of data represented.\n\n#### Sequential scales\n\nSequential scales use a blended progression, typically of a single color, from\nthe lowest contrast to the highest contrast values, representing lows to highs.\nIt’s best practice to use a sequential scale with values that are all positive\nor all negative. Sequential heat maps can leverage the full range of the palette\n(from 10–100) to maximize contrast. Please note that the 3:1 minimum contrast\nrequirement does not apply to heat maps.\n\n\n\n
\n When cells get extremely small, a white border can hinder the intended effect.\n
\n\n#### Heat map behaviors\n\nAxis ticks and legend can be used to leverage the chart potential giving the\nusers additional information and dedicated kinds of interaction.\n\n\n\n\n\n\n
Exploration of a domain axis hover behavior
\n\n\n\n\n#### Divergent scales\n\nDiverging scales show color progression in two directions: dialing down the\ncontrast of the first hue from one end to a neutral color at the midpoint, then\nincreasing the contrast of the second hue to the other end of the scale. The\nneutral midpoint is often referred to as the \"inflection point\" (for example, a\n0 value midway between -100 and +100).\n\n[Divergent scales](/data-visualization/color-palettes#diverging-palettes)\nrequire three colors for their correspondent values (min, max, and inflection\npoint) and Carbon has provided two approved palettes for divergent\nvisualizations. Although the examples here use the \"discrete\" (stepped scale)\nprovided by the Carbon palette, divergent heat maps often leverage \"continuous\"\nvalues (gradients) to accommodate situations that require more than 10 values.\n\n#### Inflection points\n\nWhile min/max values can be automatically detected from data, inflection points\ncan vary depending on data type. We default to zero in order to accommodate the\nmost common cases and include a feature flag within the code to specify\nexceptions. The data for a divergent heat map does not need to be symmetrical on\neither side of the inflection point. For example, the data set could have a zero\nvalue between -20 and +100 as well.\n\n## Network diagrams\n\nA network diagram is a way of visually representing network architecture. It\nmaps out network structure with a variety of icons and connecting lines. It’s\nideal for sharing the layout of a network because the visual presentation makes\nit easier for users to understand complex connections at a glance. These\ndiagrams are especially useful for isolating problems or when designing a new\nsystem.\n\n### Building blocks\n\nCarbon Charts offers building blocks for network diagrams in the form of\n**React** & **Angular** components.\n\nNote that Carbon Charts does not provide layouts for diagrams. You can utilize\nthese components alongside graphing libraries (such as elkjs), or by composing\nyour own layouts.\n\n**Getting started guides:**\n\n- [React](https://carbon-design-system.github.io/carbon-charts/react/?path=/story/diagrams--start-here)\n- [Angular](https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/diagrams--start-here)\n\nHere's an example using elkjs in react\n\n\n\n\n\n\n\n\n
Example of a network diagram in a swimlane graph from QRadar
\n\n\n\n\n### Node types\n\nThis specific network diagram is comprised of parent and child nodes. In the\nQRadar example, parent nodes convey the story of what happened in an\ninvestigation and can be clustered based on relationship type. Child nodes\nappear under parent nodes and can also be clustered.\n\nNetwork diagrams use the same scale controls that apply to the rest of the data\nvisualization components, however they appear in a floating tile, enabling the\nuser to zoom and pan simultaneously. It’s also helpful to include the expand and\ncollapse all nodes feature, which gives users the ability to easily navigate\nbetween detailed and high-level views of the diagram.\n\n\n\n\n\n\n
\n Detail of child nodes clustered underneath master parent cluster\n
\n\n\n\n\n## Parallel coordinates\n\nParallel coordinate charts visualize individual data elements across multiple\nvariables. Each variable corresponds to a vertical axis and each data element is\ndisplayed as a series of connected points along the axes.\n\nThe parallel coordinate chart is the equivalent of a radar chart with axes —\nmaking it preferable for many use cases. Its strength is that each variable can\nbe completely different and even have its own scale (the units can even be\ndifferent).\n\n\n\n\n\n\n\n\n\n### Parallel coordinate behaviors\n\nHover effects that highlight a specific group or axis can be added to enhance\nbasic parallel coordinate charts. These charts can also include interactive\nfeatures like the brush component. By clicking and dragging along any axis, you\ncan specify a filter for that dimension. The brush component is also used in the\nupdated scatterplot matrix example. See the detail below.\n\n\n\n\n\n\n
Detail of a comparative tooltip interaction on hover
\n\n\n\n\n## Tree diagrams\n\nCarbon Charts supports both tree diagrams and dendrograms. Although the two are\nvery similar, dendrograms tend to offer a more responsive layout for varying\nscreen sizes.\n\n
\n \n
\n\n## Tree maps\n\nTree maps can work for visualizing a part-to-whole relationship among a large\nnumber of categories—as long as the data is hierarchical and exact comparisons\nbetween the categories is not a primary concern.\n\nWhen dealing with large amounts of data in a constrained space, tree structured\nnodelink diagrams (like the network diagram shown above), grow too complex to be\nuseful. Tree maps provide an attractive alternative by maintaining a\nhierarchical structure while displaying rectangular quantities for each category\nand subcategory via area size.\n\n
\n \n
\n\n#### Divergent tree maps\n\nDivergent tree maps combine Carbon's divergent color palette with the\nhierarchical structure of a tree map. Each rectangle has an area proportional to\na specified dimension of the data, but the rectangles can also be colored\nindependently according to an additional indicator.\n\nAs with [heat maps](#heat-maps), the diverging palette shows color progression\nin either direction from an inflection point (for example, a 0 value midway\nbetween -10 and +10). In the example below, the inflection point is simply an\naverage. Tourism can be mapped by the number of visitors to a certain country,\nbut the visualization can also compare this data to a yearly average. For\ninstance, even though one country may have a lot of visitors compared to another\ncountry, tourism for that country may fall below its annual average.\n\n\n\n\n\n\n
\n Example of a divergent tree map adding color as a second variable to a basic\n tree map structure\n
Detail of a comparative tooltip on a divergent tree map
\n\n\n\n\n## Circle packs\n\nA circle pack is a hierarchical visualization of data. It’s equivalent to a\nTreemap or a Dendrogram—where each node of the tree is represented as a circle\nand sub-nodes are represented as circles within a parent. The size of each\ncircle can also be used to represent an additional arbitrary value, such as\npopulation or file size. Color may also be used to assign categories or to\nrepresent an additional variable. Although they’re not as space efficient,\nCircle Packs reveal hierarchical structure better than Treemaps.\n\nFor Circle Packs with more than two levels of hierarchy, zoom functionality\nallows users to explore the data without compromising the contrast accessibility\nof the chart. We advise against disabling the zoom functionality except in cases\nsuch as preview charts, cards that expand to full view with the chart, etc.\n\n
\n \n
\n\n## Geospatial charts\n\n### Geographic overlays\n\n#### Choropleth map\n\nA map that uses differences in shading, coloring, or the placing of symbols\nwithin predefined areas to indicate the average values of a property or quantity\nin those areas.\n\n\n\n\n\n\n\n\n\n### Proportional symbol map\n\nSymbols driven by data are overlayed in geographical regions. A bubble is the\nsymbol most commonly used in this instance—with the area of the circle\nproportional to its value in the dataset.\n\n\n\n\n\n\n\n\n\n### Connection map\n\nConnection Maps are drawn by connecting points placed on a map by straight or\ncurved lines.\n\nWhile Connection Maps are great for showing connections and relationships\ngeographically, they can also be used to display map routes through a single\nchain of links. Connection Maps can also be useful in revealing spatial patterns\nthrough the distribution of connections or by how concentrated connections are\non a map.\n\n\n\n\n\n\n\n\n\n### Geospatial distortions\n\n#### Density-equalizing cartograms\n\nDensity-equalizing cartograms are the most common type of cartogram. In this\nsituation the mapping variable takes the place of the land area or distance in\nthe map, causing the map to become distorted in proportion to the substitute\nvariable.\n\nCartograms are useful for visualizing populations through different lenses — for\ninstance, ethnicities, political parties, or religious affiliation. Carbon does\nnot have a coded component for cartograms but online generators like\n[go-cart.io](https://go-cart.io/) allow you to upload your own data sets and\ndownload an .svg file.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Dorling cartograms\n\nThe Dorling Cartogram is a technique for representing data for areas that avoids\ngeography in favor of (normally) a geometric shape that represents the unit\nareas. Circles are usually chosen since they can be neatly positioned.\n\nAs with the density-equalizing cartogram above, the larger the total population,\nthe larger the representation of the country.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Mapbox\n\nFor more dynamic, real-time mapping, Carbon has created four themes using\n[Mapbox](https://www.mapbox.com/). Mapbox is a developer platform used across\nindustries to create custom maps that can be easily integrated into websites and\napps. These themes can be used as is, or in conjunction with Carbon-styled data\npoints.\n\nThese styles can be used as is, or as a backdrop for other geospatial data sets.\nFor more complex data sets that require the full breadth of the Carbon charts\npalette, we suggest using either the White or the Gray 100 style for the most\naccessible results.\n\n\n\n\n\n\n
Example of a Carbon’s Gray 100 theme style in Mapbox
\n\n\n\n\n#### Applying the Carbon Mapbox themes\n\nFor instructions on how to use Mapbox GL JS please read this\n[Mapbox quickstart documentation](https://docs.mapbox.com/mapbox-gl-js/api/#quickstart).\n\nIn addition to the instructions above, when initializing a new map you can apply\nany of the 4 Carbon themes by providing the stylesheet location to the library.\n\n| Theme | Style sheet location |\n| ---------- | -------------------------------------------------------------- |\n| _White_ | `mapbox://styles/carbondesignsystem/ck7c8cfpp08h61irrudv7f1xg` |\n| _Gray 10_ | `mapbox://styles/carbondesignsystem/ck7c8ce1y05h61ipb2fixfe76` |\n| _Gray 90_ | `mapbox://styles/carbondesignsystem/ck7c8ccac08jj1imhvd2g4qfb` |\n| _Gray 100_ | `mapbox://styles/carbondesignsystem/ck7c89g8708gy1imlz9g5o6h9` |\n\nExample\n\n```html\n\n```\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/complex-charts/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/data-visualization/dashboards/page-data.json b/page-data/data-visualization/dashboards/page-data.json
index 64ca28286bd..19647145311 100644
--- a/page-data/data-visualization/dashboards/page-data.json
+++ b/page-data/data-visualization/dashboards/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-data-visualization-dashboards-index-mdx","path":"/data-visualization/dashboards/","result":{"pageContext":{"frontmatter":{"title":"Dashboards","description":"Context is everything. Dashboards will vary widely depending on the context they are designed for and must be carefully considered."},"relativePagePath":"/data-visualization/dashboards/index.mdx","titleType":"prepend","MdxNode":{"id":"262455ec-b920-50d2-b092-a3b8dd44383f","children":[],"parent":"e06d58ae-71f5-5ef4-a4e1-f18320d58b11","internal":{"content":"---\ntitle: Dashboards\ndescription:\n Context is everything. Dashboards will vary widely depending on the context\n they are designed for and must be carefully considered.\n---\n\n\n\nContext is everything. Dashboards will vary widely depending on the context they\nare designed for and must be carefully considered.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature\nrequests, or contribute, please go to carbon-charts\n[GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n## Presentation dashboard\n\nPresentation dashboards show viewers the current status of key performance\nindicators (KPIs) relevant to the business problem. A good presentation\ndashboard provides a big-picture view of the data while serving as a guide for\nthe audience to decide what areas they would like to focus on and explore.\n\nExamples include a car dashboard, a stock market ticker board, or a route map\nwith the locations of nearby gas stations layered on top.\n\n### Best practices\n\n#### Establish a strong hierarchy\n\nPrioritize data by importance, then create a clear visual hierarchy. The most\nimportant data should have the highest contrast and occupy the largest area.\n\nMost people in the west read left to right, then top to bottom. This is known as\nthe\n[F-shaped pattern](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/).\nPlace the most important at the top of the page and follow the F-pattern for the\nremaining elements, finishing with the least important information.\n\n#### Limit the number of metrics\n\nNon-essential information should be provided as needed. Design a dashboard to\nreduce a page's complexity by stripping away anything that could distract a user\nfrom interpreting the information.\n\n#### Use consistent color assignments\n\nAlways use consistent colors for each data set within a dashboard.\n\n#### Use white space to enhance clarity\n\nWhite space either sets elements apart or brings them together to distinguish a\npoint's priority. Space acts as a visual separator and guides a user's eye\nthrough a page. It provides relief and breathing room. According to\n[research](http://www.humanfactors.com/newsletters/yeah_but_can_you_give_me_a_reference.asp)\nconducted by Human Factors International, white space increases comprehension by\nalmost 20 percent.\n\n## Exploration dashboard\n\nExploration dashboards allow users to interact with the data to discover\ninsights and identify patterns. Examples of actions a user may perform on data\ninclude search, sort and filter data, roll up, and drill down. Exploration\ndashboards are intended for people who seek to look beyond a primary view and\nhave to be very interactive.\n\nExamples include financial reports with roll up and drill down capabilities or\ninteractive maps that include zooming in and out. Others include business\npreviews with a search bar and additional data available on demand like opening\nhours and reviews.\n\n### Best practices\n\n#### Consistency is key\n\nAll charts should use the same layout and spacing, and have legends in the same\nposition relative to the charting area. Do not switch measurement systems, like\nimperial to metric.\n\n#### Linked charts\n\nMirror chart modifications like filter and zoom. When a user manipulates one\nchart, other charts showing related data sets should automatically update to\nprovide multi-dimensional views of the user’s action.\n\n#### Annotation\n\nUse annotations to highlight trends, averages, peaks, and valleys to provide\nadditional information. Annotations should help users interpret fluctuations in\nthe data. Avoid annotations that obstruct the view of data.\n","type":"Mdx","contentDigest":"309e8a440752efbd80055bc42fe87a25","owner":"gatsby-plugin-mdx","counter":4884},"frontmatter":{"title":"Dashboards","description":"Context is everything. Dashboards will vary widely depending on the context they are designed for and must be carefully considered."},"exports":{},"rawBody":"---\ntitle: Dashboards\ndescription:\n Context is everything. Dashboards will vary widely depending on the context\n they are designed for and must be carefully considered.\n---\n\n\n\nContext is everything. Dashboards will vary widely depending on the context they\nare designed for and must be carefully considered.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature\nrequests, or contribute, please go to carbon-charts\n[GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n## Presentation dashboard\n\nPresentation dashboards show viewers the current status of key performance\nindicators (KPIs) relevant to the business problem. A good presentation\ndashboard provides a big-picture view of the data while serving as a guide for\nthe audience to decide what areas they would like to focus on and explore.\n\nExamples include a car dashboard, a stock market ticker board, or a route map\nwith the locations of nearby gas stations layered on top.\n\n### Best practices\n\n#### Establish a strong hierarchy\n\nPrioritize data by importance, then create a clear visual hierarchy. The most\nimportant data should have the highest contrast and occupy the largest area.\n\nMost people in the west read left to right, then top to bottom. This is known as\nthe\n[F-shaped pattern](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/).\nPlace the most important at the top of the page and follow the F-pattern for the\nremaining elements, finishing with the least important information.\n\n#### Limit the number of metrics\n\nNon-essential information should be provided as needed. Design a dashboard to\nreduce a page's complexity by stripping away anything that could distract a user\nfrom interpreting the information.\n\n#### Use consistent color assignments\n\nAlways use consistent colors for each data set within a dashboard.\n\n#### Use white space to enhance clarity\n\nWhite space either sets elements apart or brings them together to distinguish a\npoint's priority. Space acts as a visual separator and guides a user's eye\nthrough a page. It provides relief and breathing room. According to\n[research](http://www.humanfactors.com/newsletters/yeah_but_can_you_give_me_a_reference.asp)\nconducted by Human Factors International, white space increases comprehension by\nalmost 20 percent.\n\n## Exploration dashboard\n\nExploration dashboards allow users to interact with the data to discover\ninsights and identify patterns. Examples of actions a user may perform on data\ninclude search, sort and filter data, roll up, and drill down. Exploration\ndashboards are intended for people who seek to look beyond a primary view and\nhave to be very interactive.\n\nExamples include financial reports with roll up and drill down capabilities or\ninteractive maps that include zooming in and out. Others include business\npreviews with a search bar and additional data available on demand like opening\nhours and reviews.\n\n### Best practices\n\n#### Consistency is key\n\nAll charts should use the same layout and spacing, and have legends in the same\nposition relative to the charting area. Do not switch measurement systems, like\nimperial to metric.\n\n#### Linked charts\n\nMirror chart modifications like filter and zoom. When a user manipulates one\nchart, other charts showing related data sets should automatically update to\nprovide multi-dimensional views of the user’s action.\n\n#### Annotation\n\nUse annotations to highlight trends, averages, peaks, and valleys to provide\nadditional information. Annotations should help users interpret fluctuations in\nthe data. Avoid annotations that obstruct the view of data.\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/dashboards/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-data-visualization-dashboards-index-mdx","path":"/data-visualization/dashboards/","result":{"pageContext":{"frontmatter":{"title":"Dashboards","description":"Context is everything. Dashboards will vary widely depending on the context they are designed for and must be carefully considered."},"relativePagePath":"/data-visualization/dashboards/index.mdx","titleType":"prepend","MdxNode":{"id":"262455ec-b920-50d2-b092-a3b8dd44383f","children":[],"parent":"e06d58ae-71f5-5ef4-a4e1-f18320d58b11","internal":{"content":"---\ntitle: Dashboards\ndescription:\n Context is everything. Dashboards will vary widely depending on the context\n they are designed for and must be carefully considered.\n---\n\n\n\nContext is everything. Dashboards will vary widely depending on the context they\nare designed for and must be carefully considered.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature\nrequests, or contribute, please go to carbon-charts\n[GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n## Presentation dashboard\n\nPresentation dashboards show viewers the current status of key performance\nindicators (KPIs) relevant to the business problem. A good presentation\ndashboard provides a big-picture view of the data while serving as a guide for\nthe audience to decide what areas they would like to focus on and explore.\n\nExamples include a car dashboard, a stock market ticker board, or a route map\nwith the locations of nearby gas stations layered on top.\n\n### Best practices\n\n#### Establish a strong hierarchy\n\nPrioritize data by importance, then create a clear visual hierarchy. The most\nimportant data should have the highest contrast and occupy the largest area.\n\nMost people in the west read left to right, then top to bottom. This is known as\nthe\n[F-shaped pattern](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/).\nPlace the most important at the top of the page and follow the F-pattern for the\nremaining elements, finishing with the least important information.\n\n#### Limit the number of metrics\n\nNon-essential information should be provided as needed. Design a dashboard to\nreduce a page's complexity by stripping away anything that could distract a user\nfrom interpreting the information.\n\n#### Use consistent color assignments\n\nAlways use consistent colors for each data set within a dashboard.\n\n#### Use white space to enhance clarity\n\nWhite space either sets elements apart or brings them together to distinguish a\npoint's priority. Space acts as a visual separator and guides a user's eye\nthrough a page. It provides relief and breathing room. According to\n[research](http://www.humanfactors.com/newsletters/yeah_but_can_you_give_me_a_reference.asp)\nconducted by Human Factors International, white space increases comprehension by\nalmost 20 percent.\n\n## Exploration dashboard\n\nExploration dashboards allow users to interact with the data to discover\ninsights and identify patterns. Examples of actions a user may perform on data\ninclude search, sort and filter data, roll up, and drill down. Exploration\ndashboards are intended for people who seek to look beyond a primary view and\nhave to be very interactive.\n\nExamples include financial reports with roll up and drill down capabilities or\ninteractive maps that include zooming in and out. Others include business\npreviews with a search bar and additional data available on demand like opening\nhours and reviews.\n\n### Best practices\n\n#### Consistency is key\n\nAll charts should use the same layout and spacing, and have legends in the same\nposition relative to the charting area. Do not switch measurement systems, like\nimperial to metric.\n\n#### Linked charts\n\nMirror chart modifications like filter and zoom. When a user manipulates one\nchart, other charts showing related data sets should automatically update to\nprovide multi-dimensional views of the user’s action.\n\n#### Annotation\n\nUse annotations to highlight trends, averages, peaks, and valleys to provide\nadditional information. Annotations should help users interpret fluctuations in\nthe data. Avoid annotations that obstruct the view of data.\n","type":"Mdx","contentDigest":"309e8a440752efbd80055bc42fe87a25","owner":"gatsby-plugin-mdx","counter":4905},"frontmatter":{"title":"Dashboards","description":"Context is everything. Dashboards will vary widely depending on the context they are designed for and must be carefully considered."},"exports":{},"rawBody":"---\ntitle: Dashboards\ndescription:\n Context is everything. Dashboards will vary widely depending on the context\n they are designed for and must be carefully considered.\n---\n\n\n\nContext is everything. Dashboards will vary widely depending on the context they\nare designed for and must be carefully considered.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature\nrequests, or contribute, please go to carbon-charts\n[GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n## Presentation dashboard\n\nPresentation dashboards show viewers the current status of key performance\nindicators (KPIs) relevant to the business problem. A good presentation\ndashboard provides a big-picture view of the data while serving as a guide for\nthe audience to decide what areas they would like to focus on and explore.\n\nExamples include a car dashboard, a stock market ticker board, or a route map\nwith the locations of nearby gas stations layered on top.\n\n### Best practices\n\n#### Establish a strong hierarchy\n\nPrioritize data by importance, then create a clear visual hierarchy. The most\nimportant data should have the highest contrast and occupy the largest area.\n\nMost people in the west read left to right, then top to bottom. This is known as\nthe\n[F-shaped pattern](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/).\nPlace the most important at the top of the page and follow the F-pattern for the\nremaining elements, finishing with the least important information.\n\n#### Limit the number of metrics\n\nNon-essential information should be provided as needed. Design a dashboard to\nreduce a page's complexity by stripping away anything that could distract a user\nfrom interpreting the information.\n\n#### Use consistent color assignments\n\nAlways use consistent colors for each data set within a dashboard.\n\n#### Use white space to enhance clarity\n\nWhite space either sets elements apart or brings them together to distinguish a\npoint's priority. Space acts as a visual separator and guides a user's eye\nthrough a page. It provides relief and breathing room. According to\n[research](http://www.humanfactors.com/newsletters/yeah_but_can_you_give_me_a_reference.asp)\nconducted by Human Factors International, white space increases comprehension by\nalmost 20 percent.\n\n## Exploration dashboard\n\nExploration dashboards allow users to interact with the data to discover\ninsights and identify patterns. Examples of actions a user may perform on data\ninclude search, sort and filter data, roll up, and drill down. Exploration\ndashboards are intended for people who seek to look beyond a primary view and\nhave to be very interactive.\n\nExamples include financial reports with roll up and drill down capabilities or\ninteractive maps that include zooming in and out. Others include business\npreviews with a search bar and additional data available on demand like opening\nhours and reviews.\n\n### Best practices\n\n#### Consistency is key\n\nAll charts should use the same layout and spacing, and have legends in the same\nposition relative to the charting area. Do not switch measurement systems, like\nimperial to metric.\n\n#### Linked charts\n\nMirror chart modifications like filter and zoom. When a user manipulates one\nchart, other charts showing related data sets should automatically update to\nprovide multi-dimensional views of the user’s action.\n\n#### Annotation\n\nUse annotations to highlight trends, averages, peaks, and valleys to provide\nadditional information. Annotations should help users interpret fluctuations in\nthe data. Avoid annotations that obstruct the view of data.\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/dashboards/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/data-visualization/getting-started/page-data.json b/page-data/data-visualization/getting-started/page-data.json
index 25d024c185b..5c63a36bd87 100644
--- a/page-data/data-visualization/getting-started/page-data.json
+++ b/page-data/data-visualization/getting-started/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-data-visualization-getting-started-index-mdx","path":"/data-visualization/getting-started/","result":{"pageContext":{"frontmatter":{"title":"Get started","description":"Getting started with Carbon Charts in Vanilla"},"relativePagePath":"/data-visualization/getting-started/index.mdx","titleType":"prepend","MdxNode":{"id":"9249471c-f680-5463-b97c-8cd57495aee2","children":[],"parent":"69fa3d33-c634-5f00-b91c-05f414834e84","internal":{"content":"---\ntitle: Get started\ndescription: Getting started with Carbon Charts in Vanilla\n---\n\n\n\nCarbon charts help you tell accurate and convincing stories around data with\nbeautiful and accessible visualizations.\n\n\n\n\n\n**Note:** Please direct all questions regarding support, bug fixes, and feature\nrequests to the\n[Carbon Charts core team](https://github.com/carbon-design-system/carbon-charts#core-team).\n\n\n\n## Resources\n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n\n### Getting started tutorials\n\nWe have written step-by-step tutorials on how to get simple charting\napplications setup in different environment and using different frameworks.\n\n- [vanilla](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--vanilla)\n- [React](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--react)\n- [Angular](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--angular)\n- [Vue](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--vue)\n\n### List of available components\n\nView available components\n[here](https://github.com/carbon-design-system/carbon-charts#component-status).\n","type":"Mdx","contentDigest":"064ad06854138b99eeba1cd7eb90c7f0","owner":"gatsby-plugin-mdx","counter":4883},"frontmatter":{"title":"Get started","description":"Getting started with Carbon Charts in Vanilla"},"exports":{},"rawBody":"---\ntitle: Get started\ndescription: Getting started with Carbon Charts in Vanilla\n---\n\n\n\nCarbon charts help you tell accurate and convincing stories around data with\nbeautiful and accessible visualizations.\n\n\n\n\n\n**Note:** Please direct all questions regarding support, bug fixes, and feature\nrequests to the\n[Carbon Charts core team](https://github.com/carbon-design-system/carbon-charts#core-team).\n\n\n\n## Resources\n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n\n### Getting started tutorials\n\nWe have written step-by-step tutorials on how to get simple charting\napplications setup in different environment and using different frameworks.\n\n- [vanilla](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--vanilla)\n- [React](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--react)\n- [Angular](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--angular)\n- [Vue](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--vue)\n\n### List of available components\n\nView available components\n[here](https://github.com/carbon-design-system/carbon-charts#component-status).\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/getting-started/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-data-visualization-getting-started-index-mdx","path":"/data-visualization/getting-started/","result":{"pageContext":{"frontmatter":{"title":"Get started","description":"Getting started with Carbon Charts in Vanilla"},"relativePagePath":"/data-visualization/getting-started/index.mdx","titleType":"prepend","MdxNode":{"id":"9249471c-f680-5463-b97c-8cd57495aee2","children":[],"parent":"69fa3d33-c634-5f00-b91c-05f414834e84","internal":{"content":"---\ntitle: Get started\ndescription: Getting started with Carbon Charts in Vanilla\n---\n\n\n\nCarbon charts help you tell accurate and convincing stories around data with\nbeautiful and accessible visualizations.\n\n\n\n\n\n**Note:** Please direct all questions regarding support, bug fixes, and feature\nrequests to the\n[Carbon Charts core team](https://github.com/carbon-design-system/carbon-charts#core-team).\n\n\n\n## Resources\n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n\n### Getting started tutorials\n\nWe have written step-by-step tutorials on how to get simple charting\napplications setup in different environment and using different frameworks.\n\n- [vanilla](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--vanilla)\n- [React](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--react)\n- [Angular](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--angular)\n- [Vue](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--vue)\n\n### List of available components\n\nView available components\n[here](https://github.com/carbon-design-system/carbon-charts#component-status).\n","type":"Mdx","contentDigest":"064ad06854138b99eeba1cd7eb90c7f0","owner":"gatsby-plugin-mdx","counter":4903},"frontmatter":{"title":"Get started","description":"Getting started with Carbon Charts in Vanilla"},"exports":{},"rawBody":"---\ntitle: Get started\ndescription: Getting started with Carbon Charts in Vanilla\n---\n\n\n\nCarbon charts help you tell accurate and convincing stories around data with\nbeautiful and accessible visualizations.\n\n\n\n\n\n**Note:** Please direct all questions regarding support, bug fixes, and feature\nrequests to the\n[Carbon Charts core team](https://github.com/carbon-design-system/carbon-charts#core-team).\n\n\n\n## Resources\n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n \n \n \n\n\n\n\n### Getting started tutorials\n\nWe have written step-by-step tutorials on how to get simple charting\napplications setup in different environment and using different frameworks.\n\n- [vanilla](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--vanilla)\n- [React](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--react)\n- [Angular](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--angular)\n- [Vue](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--vue)\n\n### List of available components\n\nView available components\n[here](https://github.com/carbon-design-system/carbon-charts#component-status).\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/getting-started/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/data-visualization/legends/page-data.json b/page-data/data-visualization/legends/page-data.json
index e099998c494..12d5fd2faf9 100644
--- a/page-data/data-visualization/legends/page-data.json
+++ b/page-data/data-visualization/legends/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-data-visualization-legends-index-mdx","path":"/data-visualization/legends/","result":{"pageContext":{"frontmatter":{"title":"Legends","description":"Legends summarize the distinguishing visual properties such as colors or texture used in the visualization"},"relativePagePath":"/data-visualization/legends/index.mdx","titleType":"prepend","MdxNode":{"id":"d578762a-ed50-5642-ba5e-198b46365b26","children":[],"parent":"fe947b33-85ca-5e59-8ed3-f8a9627ba693","internal":{"content":"---\ntitle: Legends\ndescription:\n Legends summarize the distinguishing visual properties such as colors or\n texture used in the visualization\n---\n\n\n\nLegends summarize the distinguishing visual properties such as colors or texture\nused in the visualization. A legend or key helps the user build the necessary\nassociations to make sense of the chart.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature\nrequests, or contribute, please go to carbon-charts\n[GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nUsage\nPosition\nInteractions\n\n\n\n## Usage\n\n**When possible, avoid using a legend and label data representations directly.**\nLegends rely on visual association, which can make a chart more difficult to\nunderstand.\n\n**Your chart doesn't need a legend if it only presents one data category.** Only\nuse a legend if you can't safely assume there will be enough space to apply\nlabels directly.\n\n**Use clear language and avoid acronyms in legends.** This also applies to\ntitles and axis labels.\n\n\n\n\n\n\n
\n Remove legends to simplify the chart when only one data category is needed or\n only one color is used.\n
\n\n\n\n\n\n\n
\n In-chart labels are ideal for charts with predictable data and ample empty\n space.\n
\n\n\n\n\n\n#### Color and texture\n\nChart legends use color as the default distinguishing property for data sets and\nvalues. Texture can be used instead of, or in addition to, color to make your\nchart accessible for users with visual impairment.\n\n\n\n\n\n\n
\n Texture can improve accessibility. See the accessibility page for all approved\n textures.\n
\n\n\n\n\n## Position\n\nThe legends are positioned at the `bottom` of a chart by default. Depending on\nthe page’s layout and context, you may choose to position the legends at the\n`top`, under the chart title, `left` or `right` of a chart with respect to the\n[graph frame](./chart-anatomy).\n\n#### Bottom (default) and top\n\nPosition the legend at the bottom or top of a chart in situations where space is\nscarce, such as a dashboard.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Left\n\nPosition the legend to the left of the chart when better type alignment is\nneeded. Be sure the surrounding elements of the chart are not too closely\nclustered.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Right\n\nPosition the legend to the right of the chart when space is plentiful, or when\nyou would like to provide the maximum context. In mobile, the legend could\nrevert to a stack.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Overlay (geospatial only)\n\nIn geospatial charts, legends can be overlayed on top of a graph frame as long\nas the legend has a background opacity of 80% of the chart’s background color.\nSince geospatial charts can vary drastically in appearance, the legend can be\nplaced on either side of the chart, top- or bottom-aligned, whatever best\naccommodates the content.\n\nTo demonstrate the legend’s background opacity, we chose to place the legend at\nthe top left in the chart below. See the Master data visualization design file\nfor more detail about geospatial legends.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Interactions\n\n#### Hover to highlight\n\nHovering over the legend of one category lowers the opacity of all other\ncategories in the chart to 30 percent.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Click to isolate\n\nClicking on the legend of one category isolates the information, hiding all\nother categories. The legend gets a checkmark on click, switching to a selected\nstate.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen all categories are selected, checkmarks in legends disappear and the legend\nresets to its default state.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Hidden legends\n\nPlease note that hiding legends is discouraged in data visualizations unless\nonly one category of data is displayed. This design is for mobile displays where\noffering legends at a glance is less essential. In general, hiding legends\nreduces the clarity of the visualization and is inaccessible.\n\n\n\n\n\n\n
\n When legends are hidden, a “View legends” button is added so users can surface\n the legend on tap.\n
\n\n\n\n\n\n\n
\n When clicking on “View legends”, a modal with a list of legends appears with\n options to toggle each data category on and off.\n
\n\n\n\n\n### Legend overflow\n\nUp to two lines of legends are displayed by default. Clicking on **View more**\nexpands the legend area to show all legends. A legend should not be taller than\n30 percent of the chart's height.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen legends exceed 30 percent of the chart, overflow the content and scroll\nvertically.\n\n\n\n\n\n\n\n\n\n\n\n\n\n","type":"Mdx","contentDigest":"e8b843646a35be4a33cb3c46df89b464","owner":"gatsby-plugin-mdx","counter":4887},"frontmatter":{"title":"Legends","description":"Legends summarize the distinguishing visual properties such as colors or texture used in the visualization"},"exports":{},"rawBody":"---\ntitle: Legends\ndescription:\n Legends summarize the distinguishing visual properties such as colors or\n texture used in the visualization\n---\n\n\n\nLegends summarize the distinguishing visual properties such as colors or texture\nused in the visualization. A legend or key helps the user build the necessary\nassociations to make sense of the chart.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature\nrequests, or contribute, please go to carbon-charts\n[GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nUsage\nPosition\nInteractions\n\n\n\n## Usage\n\n**When possible, avoid using a legend and label data representations directly.**\nLegends rely on visual association, which can make a chart more difficult to\nunderstand.\n\n**Your chart doesn't need a legend if it only presents one data category.** Only\nuse a legend if you can't safely assume there will be enough space to apply\nlabels directly.\n\n**Use clear language and avoid acronyms in legends.** This also applies to\ntitles and axis labels.\n\n\n\n\n\n\n
\n Remove legends to simplify the chart when only one data category is needed or\n only one color is used.\n
\n\n\n\n\n\n\n
\n In-chart labels are ideal for charts with predictable data and ample empty\n space.\n
\n\n\n\n\n\n#### Color and texture\n\nChart legends use color as the default distinguishing property for data sets and\nvalues. Texture can be used instead of, or in addition to, color to make your\nchart accessible for users with visual impairment.\n\n\n\n\n\n\n
\n Texture can improve accessibility. See the accessibility page for all approved\n textures.\n
\n\n\n\n\n## Position\n\nThe legends are positioned at the `bottom` of a chart by default. Depending on\nthe page’s layout and context, you may choose to position the legends at the\n`top`, under the chart title, `left` or `right` of a chart with respect to the\n[graph frame](./chart-anatomy).\n\n#### Bottom (default) and top\n\nPosition the legend at the bottom or top of a chart in situations where space is\nscarce, such as a dashboard.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Left\n\nPosition the legend to the left of the chart when better type alignment is\nneeded. Be sure the surrounding elements of the chart are not too closely\nclustered.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Right\n\nPosition the legend to the right of the chart when space is plentiful, or when\nyou would like to provide the maximum context. In mobile, the legend could\nrevert to a stack.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Overlay (geospatial only)\n\nIn geospatial charts, legends can be overlayed on top of a graph frame as long\nas the legend has a background opacity of 80% of the chart’s background color.\nSince geospatial charts can vary drastically in appearance, the legend can be\nplaced on either side of the chart, top- or bottom-aligned, whatever best\naccommodates the content.\n\nTo demonstrate the legend’s background opacity, we chose to place the legend at\nthe top left in the chart below. See the Master data visualization design file\nfor more detail about geospatial legends.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Interactions\n\n#### Hover to highlight\n\nHovering over the legend of one category lowers the opacity of all other\ncategories in the chart to 30 percent.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Click to isolate\n\nClicking on the legend of one category isolates the information, hiding all\nother categories. The legend gets a checkmark on click, switching to a selected\nstate.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen all categories are selected, checkmarks in legends disappear and the legend\nresets to its default state.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Hidden legends\n\nPlease note that hiding legends is discouraged in data visualizations unless\nonly one category of data is displayed. This design is for mobile displays where\noffering legends at a glance is less essential. In general, hiding legends\nreduces the clarity of the visualization and is inaccessible.\n\n\n\n\n\n\n
\n When legends are hidden, a “View legends” button is added so users can surface\n the legend on tap.\n
\n\n\n\n\n\n\n
\n When clicking on “View legends”, a modal with a list of legends appears with\n options to toggle each data category on and off.\n
\n\n\n\n\n### Legend overflow\n\nUp to two lines of legends are displayed by default. Clicking on **View more**\nexpands the legend area to show all legends. A legend should not be taller than\n30 percent of the chart's height.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen legends exceed 30 percent of the chart, overflow the content and scroll\nvertically.\n\n\n\n\n\n\n\n\n\n\n\n\n\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/legends/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-data-visualization-legends-index-mdx","path":"/data-visualization/legends/","result":{"pageContext":{"frontmatter":{"title":"Legends","description":"Legends summarize the distinguishing visual properties such as colors or texture used in the visualization"},"relativePagePath":"/data-visualization/legends/index.mdx","titleType":"prepend","MdxNode":{"id":"d578762a-ed50-5642-ba5e-198b46365b26","children":[],"parent":"fe947b33-85ca-5e59-8ed3-f8a9627ba693","internal":{"content":"---\ntitle: Legends\ndescription:\n Legends summarize the distinguishing visual properties such as colors or\n texture used in the visualization\n---\n\n\n\nLegends summarize the distinguishing visual properties such as colors or texture\nused in the visualization. A legend or key helps the user build the necessary\nassociations to make sense of the chart.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature\nrequests, or contribute, please go to carbon-charts\n[GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nUsage\nPosition\nInteractions\n\n\n\n## Usage\n\n**When possible, avoid using a legend and label data representations directly.**\nLegends rely on visual association, which can make a chart more difficult to\nunderstand.\n\n**Your chart doesn't need a legend if it only presents one data category.** Only\nuse a legend if you can't safely assume there will be enough space to apply\nlabels directly.\n\n**Use clear language and avoid acronyms in legends.** This also applies to\ntitles and axis labels.\n\n\n\n\n\n\n
\n Remove legends to simplify the chart when only one data category is needed or\n only one color is used.\n
\n\n\n\n\n\n\n
\n In-chart labels are ideal for charts with predictable data and ample empty\n space.\n
\n\n\n\n\n\n#### Color and texture\n\nChart legends use color as the default distinguishing property for data sets and\nvalues. Texture can be used instead of, or in addition to, color to make your\nchart accessible for users with visual impairment.\n\n\n\n\n\n\n
\n Texture can improve accessibility. See the accessibility page for all approved\n textures.\n
\n\n\n\n\n## Position\n\nThe legends are positioned at the `bottom` of a chart by default. Depending on\nthe page’s layout and context, you may choose to position the legends at the\n`top`, under the chart title, `left` or `right` of a chart with respect to the\n[graph frame](./chart-anatomy).\n\n#### Bottom (default) and top\n\nPosition the legend at the bottom or top of a chart in situations where space is\nscarce, such as a dashboard.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Left\n\nPosition the legend to the left of the chart when better type alignment is\nneeded. Be sure the surrounding elements of the chart are not too closely\nclustered.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Right\n\nPosition the legend to the right of the chart when space is plentiful, or when\nyou would like to provide the maximum context. In mobile, the legend could\nrevert to a stack.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Overlay (geospatial only)\n\nIn geospatial charts, legends can be overlayed on top of a graph frame as long\nas the legend has a background opacity of 80% of the chart’s background color.\nSince geospatial charts can vary drastically in appearance, the legend can be\nplaced on either side of the chart, top- or bottom-aligned, whatever best\naccommodates the content.\n\nTo demonstrate the legend’s background opacity, we chose to place the legend at\nthe top left in the chart below. See the Master data visualization design file\nfor more detail about geospatial legends.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Interactions\n\n#### Hover to highlight\n\nHovering over the legend of one category lowers the opacity of all other\ncategories in the chart to 30 percent.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Click to isolate\n\nClicking on the legend of one category isolates the information, hiding all\nother categories. The legend gets a checkmark on click, switching to a selected\nstate.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen all categories are selected, checkmarks in legends disappear and the legend\nresets to its default state.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Hidden legends\n\nPlease note that hiding legends is discouraged in data visualizations unless\nonly one category of data is displayed. This design is for mobile displays where\noffering legends at a glance is less essential. In general, hiding legends\nreduces the clarity of the visualization and is inaccessible.\n\n\n\n\n\n\n
\n When legends are hidden, a “View legends” button is added so users can surface\n the legend on tap.\n
\n\n\n\n\n\n\n
\n When clicking on “View legends”, a modal with a list of legends appears with\n options to toggle each data category on and off.\n
\n\n\n\n\n### Legend overflow\n\nUp to two lines of legends are displayed by default. Clicking on **View more**\nexpands the legend area to show all legends. A legend should not be taller than\n30 percent of the chart's height.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen legends exceed 30 percent of the chart, overflow the content and scroll\nvertically.\n\n\n\n\n\n\n\n\n\n\n\n\n\n","type":"Mdx","contentDigest":"e8b843646a35be4a33cb3c46df89b464","owner":"gatsby-plugin-mdx","counter":4906},"frontmatter":{"title":"Legends","description":"Legends summarize the distinguishing visual properties such as colors or texture used in the visualization"},"exports":{},"rawBody":"---\ntitle: Legends\ndescription:\n Legends summarize the distinguishing visual properties such as colors or\n texture used in the visualization\n---\n\n\n\nLegends summarize the distinguishing visual properties such as colors or texture\nused in the visualization. A legend or key helps the user build the necessary\nassociations to make sense of the chart.\n\n\n\n\n\n**Note:** This guidance is a work in progress. To see our roadmap, make feature\nrequests, or contribute, please go to carbon-charts\n[GitHub repository](https://github.com/carbon-design-system/carbon-charts).\n\n\n\n\n\nUsage\nPosition\nInteractions\n\n\n\n## Usage\n\n**When possible, avoid using a legend and label data representations directly.**\nLegends rely on visual association, which can make a chart more difficult to\nunderstand.\n\n**Your chart doesn't need a legend if it only presents one data category.** Only\nuse a legend if you can't safely assume there will be enough space to apply\nlabels directly.\n\n**Use clear language and avoid acronyms in legends.** This also applies to\ntitles and axis labels.\n\n\n\n\n\n\n
\n Remove legends to simplify the chart when only one data category is needed or\n only one color is used.\n
\n\n\n\n\n\n\n
\n In-chart labels are ideal for charts with predictable data and ample empty\n space.\n
\n\n\n\n\n\n#### Color and texture\n\nChart legends use color as the default distinguishing property for data sets and\nvalues. Texture can be used instead of, or in addition to, color to make your\nchart accessible for users with visual impairment.\n\n\n\n\n\n\n
\n Texture can improve accessibility. See the accessibility page for all approved\n textures.\n
\n\n\n\n\n## Position\n\nThe legends are positioned at the `bottom` of a chart by default. Depending on\nthe page’s layout and context, you may choose to position the legends at the\n`top`, under the chart title, `left` or `right` of a chart with respect to the\n[graph frame](./chart-anatomy).\n\n#### Bottom (default) and top\n\nPosition the legend at the bottom or top of a chart in situations where space is\nscarce, such as a dashboard.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Left\n\nPosition the legend to the left of the chart when better type alignment is\nneeded. Be sure the surrounding elements of the chart are not too closely\nclustered.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Right\n\nPosition the legend to the right of the chart when space is plentiful, or when\nyou would like to provide the maximum context. In mobile, the legend could\nrevert to a stack.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Overlay (geospatial only)\n\nIn geospatial charts, legends can be overlayed on top of a graph frame as long\nas the legend has a background opacity of 80% of the chart’s background color.\nSince geospatial charts can vary drastically in appearance, the legend can be\nplaced on either side of the chart, top- or bottom-aligned, whatever best\naccommodates the content.\n\nTo demonstrate the legend’s background opacity, we chose to place the legend at\nthe top left in the chart below. See the Master data visualization design file\nfor more detail about geospatial legends.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Interactions\n\n#### Hover to highlight\n\nHovering over the legend of one category lowers the opacity of all other\ncategories in the chart to 30 percent.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n#### Click to isolate\n\nClicking on the legend of one category isolates the information, hiding all\nother categories. The legend gets a checkmark on click, switching to a selected\nstate.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen all categories are selected, checkmarks in legends disappear and the legend\nresets to its default state.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Hidden legends\n\nPlease note that hiding legends is discouraged in data visualizations unless\nonly one category of data is displayed. This design is for mobile displays where\noffering legends at a glance is less essential. In general, hiding legends\nreduces the clarity of the visualization and is inaccessible.\n\n\n\n\n\n\n
\n When legends are hidden, a “View legends” button is added so users can surface\n the legend on tap.\n
\n\n\n\n\n\n\n
\n When clicking on “View legends”, a modal with a list of legends appears with\n options to toggle each data category on and off.\n
\n\n\n\n\n### Legend overflow\n\nUp to two lines of legends are displayed by default. Clicking on **View more**\nexpands the legend area to show all legends. A legend should not be taller than\n30 percent of the chart's height.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen legends exceed 30 percent of the chart, overflow the content and scroll\nvertically.\n\n\n\n\n\n\n\n\n\n\n\n\n\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/legends/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/data-visualization/simple-charts/page-data.json b/page-data/data-visualization/simple-charts/page-data.json
index c7e590ec170..8273123e3ad 100644
--- a/page-data/data-visualization/simple-charts/page-data.json
+++ b/page-data/data-visualization/simple-charts/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-data-visualization-simple-charts-index-mdx","path":"/data-visualization/simple-charts/","result":{"pageContext":{"frontmatter":{"title":"Simple charts","description":"Simple charts offer a way to visualize data sets in an intuitive, easy to understand way"},"relativePagePath":"/data-visualization/simple-charts/index.mdx","titleType":"prepend","MdxNode":{"id":"8b22a760-7b9d-5b1f-adab-847e0a458136","children":[],"parent":"6843a040-1e72-58e0-9699-185b3a45863b","internal":{"content":"---\ntitle: Simple charts\ndescription:\n Simple charts offer a way to visualize data sets in an intuitive, easy to\n understand way\n---\n\n\n\nSimple charts offer a way to visualize data sets in an intuitive, easy to\nunderstand way. Every chart should tell a story and should reflect the content\non the page where it is found.\n\n\n\nimport { simpleChartDemoGroups } from '../../../data/data-visualization';\n\nimport { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon';\nimport ChartDemoGroup from '../../../components/data-visualization/ChartDemoGroup.js';\n\n\n {simpleChartDemoGroups.map((storybookDemoGroup) => (\n {storybookDemoGroup.title}\n ))}\n\n\n## Resources\n\n\n \n \n \n \n \n\n\n
\n","type":"Mdx","contentDigest":"58687ccb3ba7c90c82f65b520fdc3a60","owner":"gatsby-plugin-mdx","counter":4886},"frontmatter":{"title":"Simple charts","description":"Simple charts offer a way to visualize data sets in an intuitive, easy to understand way"},"exports":{},"rawBody":"---\ntitle: Simple charts\ndescription:\n Simple charts offer a way to visualize data sets in an intuitive, easy to\n understand way\n---\n\n\n\nSimple charts offer a way to visualize data sets in an intuitive, easy to\nunderstand way. Every chart should tell a story and should reflect the content\non the page where it is found.\n\n\n\nimport { simpleChartDemoGroups } from '../../../data/data-visualization';\n\nimport { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon';\nimport ChartDemoGroup from '../../../components/data-visualization/ChartDemoGroup.js';\n\n\n {simpleChartDemoGroups.map((storybookDemoGroup) => (\n {storybookDemoGroup.title}\n ))}\n\n\n## Resources\n\n\n \n \n \n \n \n\n\n
\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/simple-charts/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-data-visualization-simple-charts-index-mdx","path":"/data-visualization/simple-charts/","result":{"pageContext":{"frontmatter":{"title":"Simple charts","description":"Simple charts offer a way to visualize data sets in an intuitive, easy to understand way"},"relativePagePath":"/data-visualization/simple-charts/index.mdx","titleType":"prepend","MdxNode":{"id":"8b22a760-7b9d-5b1f-adab-847e0a458136","children":[],"parent":"6843a040-1e72-58e0-9699-185b3a45863b","internal":{"content":"---\ntitle: Simple charts\ndescription:\n Simple charts offer a way to visualize data sets in an intuitive, easy to\n understand way\n---\n\n\n\nSimple charts offer a way to visualize data sets in an intuitive, easy to\nunderstand way. Every chart should tell a story and should reflect the content\non the page where it is found.\n\n\n\nimport { simpleChartDemoGroups } from '../../../data/data-visualization';\n\nimport { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon';\nimport ChartDemoGroup from '../../../components/data-visualization/ChartDemoGroup.js';\n\n\n {simpleChartDemoGroups.map((storybookDemoGroup) => (\n {storybookDemoGroup.title}\n ))}\n\n\n## Resources\n\n\n \n \n \n \n \n\n\n
\n","type":"Mdx","contentDigest":"58687ccb3ba7c90c82f65b520fdc3a60","owner":"gatsby-plugin-mdx","counter":4907},"frontmatter":{"title":"Simple charts","description":"Simple charts offer a way to visualize data sets in an intuitive, easy to understand way"},"exports":{},"rawBody":"---\ntitle: Simple charts\ndescription:\n Simple charts offer a way to visualize data sets in an intuitive, easy to\n understand way\n---\n\n\n\nSimple charts offer a way to visualize data sets in an intuitive, easy to\nunderstand way. Every chart should tell a story and should reflect the content\non the page where it is found.\n\n\n\nimport { simpleChartDemoGroups } from '../../../data/data-visualization';\n\nimport { AnchorLinks, AnchorLink } from 'gatsby-theme-carbon';\nimport ChartDemoGroup from '../../../components/data-visualization/ChartDemoGroup.js';\n\n\n {simpleChartDemoGroups.map((storybookDemoGroup) => (\n {storybookDemoGroup.title}\n ))}\n\n\n## Resources\n\n\n \n \n \n \n \n\n\n
\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/data-visualization/simple-charts/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/designing/design-resources/page-data.json b/page-data/designing/design-resources/page-data.json
index de9492879ad..2423b279639 100644
--- a/page-data/designing/design-resources/page-data.json
+++ b/page-data/designing/design-resources/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-designing-design-resources-index-mdx","path":"/designing/design-resources/","result":{"pageContext":{"frontmatter":{"title":"Other resources","description":"Everything you need to work with Carbon, including Figma libraries and templates, color palettes, fonts, GitHub repos, and design tools."},"relativePagePath":"/designing/design-resources/index.mdx","titleType":"prepend","MdxNode":{"id":"d878c882-95db-51b6-bea0-08bce97ef2dc","children":[],"parent":"0f68f0d3-dd02-5d79-840b-cd6acc5f21c6","internal":{"content":"---\ntitle: Other resources\ndescription:\n Everything you need to work with Carbon, including Figma libraries and\n templates, color palettes, fonts, GitHub repos, and design tools.\n---\n\n\n\nEverything you need to work with Carbon, including Figma libraries and\ntemplates, color palettes, GitHub repos, and design tools.\n\n\n\n\n Introduction\n Elements\n Fonts\n Data visualization\n Gatsby theme\n GitHub repos\n Native mobile\n Accessibility\n Prototyping tools\n\n\n\n## Introduction\n\nThis page includes Figma kits, tools, templates, and plugins that have been\ncreated to help you get up and running. For a comprehensive list of kits,\nexplore the\n[design kit catalog](https://next.carbondesignsystem.com/design-kits).\n\nTo use the Figma libraries you'll find here, you need a Figma license. IBMers\ncan follow instructions in the\n[Design Toolbox](https://w3.ibm.com/design/toolbox/?_ga=2.66930222.1444443535.1682545160-2098201107.1682093352#/ui-design-tools/figma/README)\nto get a license. To get started with Figma, visit the\n[Design kits](/designing/kits/figma) page.\n\n## Elements\n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n## Fonts\n\nCarbon uses the open-source typeface [IBM Plex](https://github.com/ibm/plex) –\ncarefully designed to meet IBM's needs as a global technology company and\nreflect IBM's spirit, beliefs, and design principles.\n\n## Data visualization\n\nThe Carbon Charts library includes basic and complex chart assets, along with\nusage guidance, theming guidance, palettes, and sample layouts.\n\n\n\n\n \n \n \n\n\n\n## Gatsby theme\n\nThe Gatsby Figma kit has all the components, patterns, and sample layouts that\nhave been developed by teams within the IBM ecosystem. The Gatsby theme site\nincludes the components, guidelines, and everything you need to create and\ncontribute to Carbon sites.\n\n### Image production guidelines\n\nFor anyone interested in contributing to the Carbon Design System website, or\nmaking images for their own Pattern Asset Library (PAL), we follow a set of\nguidelines to ensure consistency across the content in the Gatsby ecosystem. The\nimage production guidelines Figma kit includes guidance, symbols and templates\nto help designers with every aspect of image creation and component specs.\n\n\n\n\n \n \n \n\n \n\n \n\n\n\n \n\n\n\n \n \n \n\n \n\n\n## GitHub repos\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n## Native mobile\n\nThe native mobile kits include everything you need to get your iOS or Android\nproject underway.\n\n\n\n\n \n \n \n\n\n\n## Accessibility\n\nThe IBM Accessibility kit includes checklists, bite-sized guidance, and handoff\nassets to make sure your designs are accessible for implementation.\n\n\n\n\n \n\n\n\n \n\n\n \n \n \n\n\n\n## Prototyping tools\n\n### Carbon Mid-Fidelity kit\n\nThis kit provides designers with a way to visualize concepts and test them out\nbefore committing to high-fidelity designs.\n\n\n\n\n \n \n \n\n \n\n\n### Invision Freehand kit\n\nA Carbon wireframe kit for Invision Freehand is available for teams to create\nlow fidelity wireframes. This kit is maintained by the Cloud PAL community.\n\n\n\n \n\n\n\n \n\n\n\n### Carbon UI Builder\n\nCarbon UI Builder is a visual tool that allows users to assemble product pages\nand layout modules using Carbon Components in a fraction of the time it usually\ntakes.\n\nPages can be exported as:\n\n- Images for presentations\n- Live demo apps for user testing\n- Production-quality code that can be easily incorporated in an existing\n product's frontend\n\n\n\n \n\n\n\n \n\n\n","type":"Mdx","contentDigest":"2944b3cb345bec52763f620b137a0edd","owner":"gatsby-plugin-mdx","counter":4888},"frontmatter":{"title":"Other resources","description":"Everything you need to work with Carbon, including Figma libraries and templates, color palettes, fonts, GitHub repos, and design tools."},"exports":{},"rawBody":"---\ntitle: Other resources\ndescription:\n Everything you need to work with Carbon, including Figma libraries and\n templates, color palettes, fonts, GitHub repos, and design tools.\n---\n\n\n\nEverything you need to work with Carbon, including Figma libraries and\ntemplates, color palettes, GitHub repos, and design tools.\n\n\n\n\n Introduction\n Elements\n Fonts\n Data visualization\n Gatsby theme\n GitHub repos\n Native mobile\n Accessibility\n Prototyping tools\n\n\n\n## Introduction\n\nThis page includes Figma kits, tools, templates, and plugins that have been\ncreated to help you get up and running. For a comprehensive list of kits,\nexplore the\n[design kit catalog](https://next.carbondesignsystem.com/design-kits).\n\nTo use the Figma libraries you'll find here, you need a Figma license. IBMers\ncan follow instructions in the\n[Design Toolbox](https://w3.ibm.com/design/toolbox/?_ga=2.66930222.1444443535.1682545160-2098201107.1682093352#/ui-design-tools/figma/README)\nto get a license. To get started with Figma, visit the\n[Design kits](/designing/kits/figma) page.\n\n## Elements\n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n## Fonts\n\nCarbon uses the open-source typeface [IBM Plex](https://github.com/ibm/plex) –\ncarefully designed to meet IBM's needs as a global technology company and\nreflect IBM's spirit, beliefs, and design principles.\n\n## Data visualization\n\nThe Carbon Charts library includes basic and complex chart assets, along with\nusage guidance, theming guidance, palettes, and sample layouts.\n\n\n\n\n \n \n \n\n\n\n## Gatsby theme\n\nThe Gatsby Figma kit has all the components, patterns, and sample layouts that\nhave been developed by teams within the IBM ecosystem. The Gatsby theme site\nincludes the components, guidelines, and everything you need to create and\ncontribute to Carbon sites.\n\n### Image production guidelines\n\nFor anyone interested in contributing to the Carbon Design System website, or\nmaking images for their own Pattern Asset Library (PAL), we follow a set of\nguidelines to ensure consistency across the content in the Gatsby ecosystem. The\nimage production guidelines Figma kit includes guidance, symbols and templates\nto help designers with every aspect of image creation and component specs.\n\n\n\n\n \n \n \n\n \n\n \n\n\n\n \n\n\n\n \n \n \n\n \n\n\n## GitHub repos\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n## Native mobile\n\nThe native mobile kits include everything you need to get your iOS or Android\nproject underway.\n\n\n\n\n \n \n \n\n\n\n## Accessibility\n\nThe IBM Accessibility kit includes checklists, bite-sized guidance, and handoff\nassets to make sure your designs are accessible for implementation.\n\n\n\n\n \n\n\n\n \n\n\n \n \n \n\n\n\n## Prototyping tools\n\n### Carbon Mid-Fidelity kit\n\nThis kit provides designers with a way to visualize concepts and test them out\nbefore committing to high-fidelity designs.\n\n\n\n\n \n \n \n\n \n\n\n### Invision Freehand kit\n\nA Carbon wireframe kit for Invision Freehand is available for teams to create\nlow fidelity wireframes. This kit is maintained by the Cloud PAL community.\n\n\n\n \n\n\n\n \n\n\n\n### Carbon UI Builder\n\nCarbon UI Builder is a visual tool that allows users to assemble product pages\nand layout modules using Carbon Components in a fraction of the time it usually\ntakes.\n\nPages can be exported as:\n\n- Images for presentations\n- Live demo apps for user testing\n- Production-quality code that can be easily incorporated in an existing\n product's frontend\n\n\n\n \n\n\n\n \n\n\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/designing/design-resources/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-designing-design-resources-index-mdx","path":"/designing/design-resources/","result":{"pageContext":{"frontmatter":{"title":"Other resources","description":"Everything you need to work with Carbon, including Figma libraries and templates, color palettes, fonts, GitHub repos, and design tools."},"relativePagePath":"/designing/design-resources/index.mdx","titleType":"prepend","MdxNode":{"id":"d878c882-95db-51b6-bea0-08bce97ef2dc","children":[],"parent":"0f68f0d3-dd02-5d79-840b-cd6acc5f21c6","internal":{"content":"---\ntitle: Other resources\ndescription:\n Everything you need to work with Carbon, including Figma libraries and\n templates, color palettes, fonts, GitHub repos, and design tools.\n---\n\n\n\nEverything you need to work with Carbon, including Figma libraries and\ntemplates, color palettes, GitHub repos, and design tools.\n\n\n\n\n Introduction\n Elements\n Fonts\n Data visualization\n Gatsby theme\n GitHub repos\n Native mobile\n Accessibility\n Prototyping tools\n\n\n\n## Introduction\n\nThis page includes Figma kits, tools, templates, and plugins that have been\ncreated to help you get up and running. For a comprehensive list of kits,\nexplore the\n[design kit catalog](https://next.carbondesignsystem.com/design-kits).\n\nTo use the Figma libraries you'll find here, you need a Figma license. IBMers\ncan follow instructions in the\n[Design Toolbox](https://w3.ibm.com/design/toolbox/?_ga=2.66930222.1444443535.1682545160-2098201107.1682093352#/ui-design-tools/figma/README)\nto get a license. To get started with Figma, visit the\n[Design kits](/designing/kits/figma) page.\n\n## Elements\n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n## Fonts\n\nCarbon uses the open-source typeface [IBM Plex](https://github.com/ibm/plex) –\ncarefully designed to meet IBM's needs as a global technology company and\nreflect IBM's spirit, beliefs, and design principles.\n\n## Data visualization\n\nThe Carbon Charts library includes basic and complex chart assets, along with\nusage guidance, theming guidance, palettes, and sample layouts.\n\n\n\n\n \n \n \n\n\n\n## Gatsby theme\n\nThe Gatsby Figma kit has all the components, patterns, and sample layouts that\nhave been developed by teams within the IBM ecosystem. The Gatsby theme site\nincludes the components, guidelines, and everything you need to create and\ncontribute to Carbon sites.\n\n### Image production guidelines\n\nFor anyone interested in contributing to the Carbon Design System website, or\nmaking images for their own Pattern Asset Library (PAL), we follow a set of\nguidelines to ensure consistency across the content in the Gatsby ecosystem. The\nimage production guidelines Figma kit includes guidance, symbols and templates\nto help designers with every aspect of image creation and component specs.\n\n\n\n\n \n \n \n\n \n\n \n\n\n\n \n\n\n\n \n \n \n\n \n\n\n## GitHub repos\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n## Native mobile\n\nThe native mobile kits include everything you need to get your iOS or Android\nproject underway.\n\n\n\n\n \n \n \n\n\n\n## Accessibility\n\nThe IBM Accessibility kit includes checklists, bite-sized guidance, and handoff\nassets to make sure your designs are accessible for implementation.\n\n\n\n\n \n\n\n\n \n\n\n \n \n \n\n\n\n## Prototyping tools\n\n### Carbon Mid-Fidelity kit\n\nThis kit provides designers with a way to visualize concepts and test them out\nbefore committing to high-fidelity designs.\n\n\n\n\n \n \n \n\n \n\n\n### Invision Freehand kit\n\nA Carbon wireframe kit for Invision Freehand is available for teams to create\nlow fidelity wireframes. This kit is maintained by the Cloud PAL community.\n\n\n\n \n\n\n\n \n\n\n\n### Carbon UI Builder\n\nCarbon UI Builder is a visual tool that allows users to assemble product pages\nand layout modules using Carbon Components in a fraction of the time it usually\ntakes.\n\nPages can be exported as:\n\n- Images for presentations\n- Live demo apps for user testing\n- Production-quality code that can be easily incorporated in an existing\n product's frontend\n\n\n\n \n\n\n\n \n\n\n","type":"Mdx","contentDigest":"2944b3cb345bec52763f620b137a0edd","owner":"gatsby-plugin-mdx","counter":4908},"frontmatter":{"title":"Other resources","description":"Everything you need to work with Carbon, including Figma libraries and templates, color palettes, fonts, GitHub repos, and design tools."},"exports":{},"rawBody":"---\ntitle: Other resources\ndescription:\n Everything you need to work with Carbon, including Figma libraries and\n templates, color palettes, fonts, GitHub repos, and design tools.\n---\n\n\n\nEverything you need to work with Carbon, including Figma libraries and\ntemplates, color palettes, GitHub repos, and design tools.\n\n\n\n\n Introduction\n Elements\n Fonts\n Data visualization\n Gatsby theme\n GitHub repos\n Native mobile\n Accessibility\n Prototyping tools\n\n\n\n## Introduction\n\nThis page includes Figma kits, tools, templates, and plugins that have been\ncreated to help you get up and running. For a comprehensive list of kits,\nexplore the\n[design kit catalog](https://next.carbondesignsystem.com/design-kits).\n\nTo use the Figma libraries you'll find here, you need a Figma license. IBMers\ncan follow instructions in the\n[Design Toolbox](https://w3.ibm.com/design/toolbox/?_ga=2.66930222.1444443535.1682545160-2098201107.1682093352#/ui-design-tools/figma/README)\nto get a license. To get started with Figma, visit the\n[Design kits](/designing/kits/figma) page.\n\n## Elements\n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n## Fonts\n\nCarbon uses the open-source typeface [IBM Plex](https://github.com/ibm/plex) –\ncarefully designed to meet IBM's needs as a global technology company and\nreflect IBM's spirit, beliefs, and design principles.\n\n## Data visualization\n\nThe Carbon Charts library includes basic and complex chart assets, along with\nusage guidance, theming guidance, palettes, and sample layouts.\n\n\n\n\n \n \n \n\n\n\n## Gatsby theme\n\nThe Gatsby Figma kit has all the components, patterns, and sample layouts that\nhave been developed by teams within the IBM ecosystem. The Gatsby theme site\nincludes the components, guidelines, and everything you need to create and\ncontribute to Carbon sites.\n\n### Image production guidelines\n\nFor anyone interested in contributing to the Carbon Design System website, or\nmaking images for their own Pattern Asset Library (PAL), we follow a set of\nguidelines to ensure consistency across the content in the Gatsby ecosystem. The\nimage production guidelines Figma kit includes guidance, symbols and templates\nto help designers with every aspect of image creation and component specs.\n\n\n\n\n \n \n \n\n \n\n \n\n\n\n \n\n\n\n \n \n \n\n \n\n\n## GitHub repos\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n\n\n## Native mobile\n\nThe native mobile kits include everything you need to get your iOS or Android\nproject underway.\n\n\n\n\n \n \n \n\n\n\n## Accessibility\n\nThe IBM Accessibility kit includes checklists, bite-sized guidance, and handoff\nassets to make sure your designs are accessible for implementation.\n\n\n\n\n \n\n\n\n \n\n\n \n \n \n\n\n\n## Prototyping tools\n\n### Carbon Mid-Fidelity kit\n\nThis kit provides designers with a way to visualize concepts and test them out\nbefore committing to high-fidelity designs.\n\n\n\n\n \n \n \n\n \n\n\n### Invision Freehand kit\n\nA Carbon wireframe kit for Invision Freehand is available for teams to create\nlow fidelity wireframes. This kit is maintained by the Cloud PAL community.\n\n\n\n \n\n\n\n \n\n\n\n### Carbon UI Builder\n\nCarbon UI Builder is a visual tool that allows users to assemble product pages\nand layout modules using Carbon Components in a fraction of the time it usually\ntakes.\n\nPages can be exported as:\n\n- Images for presentations\n- Live demo apps for user testing\n- Production-quality code that can be easily incorporated in an existing\n product's frontend\n\n\n\n \n\n\n\n \n\n\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/designing/design-resources/index.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/designing/get-started/page-data.json b/page-data/designing/get-started/page-data.json
index 0e690182f01..64d441195c8 100644
--- a/page-data/designing/get-started/page-data.json
+++ b/page-data/designing/get-started/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-designing-get-started-mdx","path":"/designing/get-started/","result":{"pageContext":{"frontmatter":{"title":"Get started","description":null},"relativePagePath":"/designing/get-started.mdx","titleType":"prepend","MdxNode":{"id":"6eb9e754-028b-5128-9906-77d0a8f47b8a","children":[],"parent":"fcb2d205-095b-57e8-b188-8500d31ad2b0","internal":{"content":"---\ntitle: Get started\ndescription:\n---\n\n\n\nWelcome to Carbon! If you're just starting out designing with Carbon, you're in\nthe right place. Here's a checklist of everything you need to get up and\nrunning.\n\n\n\n\n\nStep 1: Learn about Carbon\nStep 2: Access the tools\nStep 3: Get the Figma design kits\nStep 4: Review our usage guidance\nStep 5: Explore foundational guidance\nStep 6: Connect with us\n\n\n\n## Step 1: Learn about Carbon\n\nBy adopting Carbon, designers gain a collection of reusable assets to design\nwebsites and user interfaces quickly and efficiently.\n\nThe [IBM Design Language](https://www.ibm.com/design/language/) is the visual\nexpression of IBM's brand, including color, type scale, the grid, and more.\nCarbon translates the design language into code for building digital\nexperiences.\n\nThis is done through elements such as color tokens, type tokens, and spacing\ntokens that are meant to be applied to all sorts of digital experiences through\nguidance and components.\n\n## Step 2: Access the tools\n\n_For IBMers only:_\n\nIBMers should get a license for Figma, our primary design kit tool. You may also\naccess tools we no longer support, Sketch, Adobe XD, and Axure, by heading to\nthe [Design Toolbox](https://w3.ibm.com/design/toolbox/). However, we no longer\nmaintain or update the kits for these tools. We recommend you migrate to Figma\nto get the most updated kits we offer.\n\n\n\n\n \n \n \n\n\n\n## Step 3: Get the Figma design kits\n\nWe maintain the core Carbon kits in [Figma](/designing/kits/figma). These kits\ninclude all the Carbon core components and styles for reuse in your product and\nweb experiences. By using the kits you will automatically receive updates made\nto the Carbon libraries, ensuring your designs stay up-to-date with the latest\nreleases. This allows you to speak the same language and have shared\nfunctionality expectations as your developers in the hand-off and development\ncycle.\n\nHead on over to the [Design kits](/designing/kits/figma) section and follow the\ninstructions to get set up with Figma.\n\n### Core design kits\n\nEveryone using Carbon should use the following Figma core design kits as a\nstarting point for building user interfaces. This brings consistency and speed,\nallowing teams to focus on solving more specific user tasks. Core design kits\ninclude elements, core components, wireframes, and guidelines.\n\n| Maintainer | Design kit | Type |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| IBM Brand | [IBM Pictograms](https://www.figma.com/community/file/1089047716352012639/Pictograms---IBM-Design-Language) | `Elements` |\n| | [IBM Icons](https://www.figma.com/community/file/1089055340263947620/Icons---IBM-Design-Language) | `Elements` |\n| | [v11 Text styles]() | `Elements` |\n| | [IBM Color palette](https://www.figma.com/community/file/1089055766693968230/Color-Styles---IBM-Design-Language) | `Elements` |\n| Carbon Core | [v11 All themes]() | `UI` |\n| | [v11 Gray 10 theme [Deprecated]]() | `UI` |\n| | [v11 Gray 90 theme [Deprecated]]() | `UI` |\n| | [v11 Gray 100 theme [Deprecated]]() | `UI` |\n| Accessibility | [Accessibility toolkit](https://www.figma.com/community/file/1118184491812988116/IBM-Accessibility-Design-Kit) | `Guidelines` |\n\nThe links in the table for Figma Libraries are preview only. Some of the Figma\nkits are for internal IBMers. To learn more about installing Figma Libraries and\navailable external libraries visit the Figma tutorial\n[Figma tutorial](/designing/kits/figma).\n\n### Additional design assets\n\nSupport for v11 Figma kits are prioritized, but\n[Figma v10 kits](https://next.carbondesignsystem.com/design-kits?q=v10&tool[]=figma)\nare also available with limited support. In\n[Other resources](/designing/design-resources/), you'll find links to icon\nlibraries, color palettes, plugins, and more. The Adobe XD kit is no longer\nprioritized or maintained, but you may access it\n[here](https://github.com/IBM/design-kit/tree/master/Adobe%20XD).\n\n## Step 4: Review our usage guidance\n\nOur usage guidance is detailed and thorough, and you'll learn a lot about the\nsystem by reading through the components and patterns documentation.\n\n- [Components](/components/overview): Carbon provides in-depth design usage and\n style guidance for all components. It's important to be familiar with this\n additional UX and visual guidance when you are designing with our components.\n\n- [Patterns](/patterns/overview): We also offer a range of key patterns—best\n practice solutions for how a user achieves a goal. These design patterns have\n been harvested from products built with Carbon, and have been reviewed and\n approved for use by the Carbon governance team.\n\n## Step 5: Explore foundational guidance\n\nThe following sites provide guidance for creating experiences that are\nconsistent, provide an interoperability of experience with other offerings, and\nrepresent IBM as a company.\n\n_Some of this content is accessible to IBMers only._\n\n| **Resource** | **What you'll find** |\n| --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [IBM Brand Center](https://www.ibm.com/brand/) | Home base for the IBM Brand story, visual brand elements, guidelines, and assets. |\n| [IBM Brand Systems](https://www.ibm.com/brand/experience-guides) | Documentation of the rationale behind every visual and verbal detail for IBM businesses, audiences, categories, and offerings. |\n| [IBM Design Language](https://www.ibm.com/design/language/) | IBM’s design philosophy and principles that govern and guide every experience designed by IBM. |\n| [IBM Style](https://ibmdocs-test.mybluemix.net/docs/en/ibm-style?_ga=2.139068405.716538948.1649782752-687898146.1623775061) | A central reference that ensures all IBM content for external audiences is grammatically correct, clear, consistent, appropriate for global audiences, and easy to translate. |\n| [IBM Experience Standards](https://w3.ibm.com/design/experience-standards/) | Provides a shared definition of our standards at IBM, a way to measure excellence, and actionable ways to improve product or service experiences. |\n| [IBM Accessibility](https://www.ibm.com/able/) | Discipline-specific direction on how to make your product more accessible. |\n\n## Step 6: Connect with us\n\n### Join us and the Carbon community\n\n_For IBMers only:_ If you have a question about any aspect of the kits or tools,\nyou can reach out to us on Slack and use that as a way to connect with your\nfellow designers. Chances are someone has had a similar problem to you and will\njump in to help you out.\n\n- [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)\n- [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD)\n- [#carbon-tutorial](https://ibm-studios.slack.com/archives/CJUGA7P6H)\n\nAnd be sure to sign up for the latest Carbon news at\n[#carbon-announcements](https://ibm-studios.slack.com/archives/CJ35H36MP).\n\n### Learn about what we're doing\n\nYou can find out about Carbon's latest changes and future plans on the\n[Releases](/all-about-carbon/releases/) page.\n\nIf you have questions, here are all the ways to [contact us](/help/contact-us).\n\n### Join us at a meetup\n\nAttend one of our [meetups](/whats-happening/meetups) to connect with us and\nlevel up your skills. The bi-weekly design playback is great for getting\nfeedback on work in progress from a group of designers and design leaders\ndedicated to your success.\n\nIf there’s something in particular you’re interested in, we’d love to\n[hear from you](https://github.com/carbon-design-system/carbon-website/issues/new/choose).\n\n### Learn about the benefits\n\nLearn more about the\n[benefits of using Carbon](/all-about-carbon/who-uses-carbon/) as a designer,\nand how Carbon benefits all members of a product team.\n","type":"Mdx","contentDigest":"e630d913c6f98c037400d1ff66a4388c","owner":"gatsby-plugin-mdx","counter":4705},"frontmatter":{"title":"Get started","description":null},"exports":{},"rawBody":"---\ntitle: Get started\ndescription:\n---\n\n\n\nWelcome to Carbon! If you're just starting out designing with Carbon, you're in\nthe right place. Here's a checklist of everything you need to get up and\nrunning.\n\n\n\n\n\nStep 1: Learn about Carbon\nStep 2: Access the tools\nStep 3: Get the Figma design kits\nStep 4: Review our usage guidance\nStep 5: Explore foundational guidance\nStep 6: Connect with us\n\n\n\n## Step 1: Learn about Carbon\n\nBy adopting Carbon, designers gain a collection of reusable assets to design\nwebsites and user interfaces quickly and efficiently.\n\nThe [IBM Design Language](https://www.ibm.com/design/language/) is the visual\nexpression of IBM's brand, including color, type scale, the grid, and more.\nCarbon translates the design language into code for building digital\nexperiences.\n\nThis is done through elements such as color tokens, type tokens, and spacing\ntokens that are meant to be applied to all sorts of digital experiences through\nguidance and components.\n\n## Step 2: Access the tools\n\n_For IBMers only:_\n\nIBMers should get a license for Figma, our primary design kit tool. You may also\naccess tools we no longer support, Sketch, Adobe XD, and Axure, by heading to\nthe [Design Toolbox](https://w3.ibm.com/design/toolbox/). However, we no longer\nmaintain or update the kits for these tools. We recommend you migrate to Figma\nto get the most updated kits we offer.\n\n\n\n\n \n \n \n\n\n\n## Step 3: Get the Figma design kits\n\nWe maintain the core Carbon kits in [Figma](/designing/kits/figma). These kits\ninclude all the Carbon core components and styles for reuse in your product and\nweb experiences. By using the kits you will automatically receive updates made\nto the Carbon libraries, ensuring your designs stay up-to-date with the latest\nreleases. This allows you to speak the same language and have shared\nfunctionality expectations as your developers in the hand-off and development\ncycle.\n\nHead on over to the [Design kits](/designing/kits/figma) section and follow the\ninstructions to get set up with Figma.\n\n### Core design kits\n\nEveryone using Carbon should use the following Figma core design kits as a\nstarting point for building user interfaces. This brings consistency and speed,\nallowing teams to focus on solving more specific user tasks. Core design kits\ninclude elements, core components, wireframes, and guidelines.\n\n| Maintainer | Design kit | Type |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| IBM Brand | [IBM Pictograms](https://www.figma.com/community/file/1089047716352012639/Pictograms---IBM-Design-Language) | `Elements` |\n| | [IBM Icons](https://www.figma.com/community/file/1089055340263947620/Icons---IBM-Design-Language) | `Elements` |\n| | [v11 Text styles]() | `Elements` |\n| | [IBM Color palette](https://www.figma.com/community/file/1089055766693968230/Color-Styles---IBM-Design-Language) | `Elements` |\n| Carbon Core | [v11 All themes]() | `UI` |\n| | [v11 Gray 10 theme [Deprecated]]() | `UI` |\n| | [v11 Gray 90 theme [Deprecated]]() | `UI` |\n| | [v11 Gray 100 theme [Deprecated]]() | `UI` |\n| Accessibility | [Accessibility toolkit](https://www.figma.com/community/file/1118184491812988116/IBM-Accessibility-Design-Kit) | `Guidelines` |\n\nThe links in the table for Figma Libraries are preview only. Some of the Figma\nkits are for internal IBMers. To learn more about installing Figma Libraries and\navailable external libraries visit the Figma tutorial\n[Figma tutorial](/designing/kits/figma).\n\n### Additional design assets\n\nSupport for v11 Figma kits are prioritized, but\n[Figma v10 kits](https://next.carbondesignsystem.com/design-kits?q=v10&tool[]=figma)\nare also available with limited support. In\n[Other resources](/designing/design-resources/), you'll find links to icon\nlibraries, color palettes, plugins, and more. The Adobe XD kit is no longer\nprioritized or maintained, but you may access it\n[here](https://github.com/IBM/design-kit/tree/master/Adobe%20XD).\n\n## Step 4: Review our usage guidance\n\nOur usage guidance is detailed and thorough, and you'll learn a lot about the\nsystem by reading through the components and patterns documentation.\n\n- [Components](/components/overview): Carbon provides in-depth design usage and\n style guidance for all components. It's important to be familiar with this\n additional UX and visual guidance when you are designing with our components.\n\n- [Patterns](/patterns/overview): We also offer a range of key patterns—best\n practice solutions for how a user achieves a goal. These design patterns have\n been harvested from products built with Carbon, and have been reviewed and\n approved for use by the Carbon governance team.\n\n## Step 5: Explore foundational guidance\n\nThe following sites provide guidance for creating experiences that are\nconsistent, provide an interoperability of experience with other offerings, and\nrepresent IBM as a company.\n\n_Some of this content is accessible to IBMers only._\n\n| **Resource** | **What you'll find** |\n| --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [IBM Brand Center](https://www.ibm.com/brand/) | Home base for the IBM Brand story, visual brand elements, guidelines, and assets. |\n| [IBM Brand Systems](https://www.ibm.com/brand/experience-guides) | Documentation of the rationale behind every visual and verbal detail for IBM businesses, audiences, categories, and offerings. |\n| [IBM Design Language](https://www.ibm.com/design/language/) | IBM’s design philosophy and principles that govern and guide every experience designed by IBM. |\n| [IBM Style](https://ibmdocs-test.mybluemix.net/docs/en/ibm-style?_ga=2.139068405.716538948.1649782752-687898146.1623775061) | A central reference that ensures all IBM content for external audiences is grammatically correct, clear, consistent, appropriate for global audiences, and easy to translate. |\n| [IBM Experience Standards](https://w3.ibm.com/design/experience-standards/) | Provides a shared definition of our standards at IBM, a way to measure excellence, and actionable ways to improve product or service experiences. |\n| [IBM Accessibility](https://www.ibm.com/able/) | Discipline-specific direction on how to make your product more accessible. |\n\n## Step 6: Connect with us\n\n### Join us and the Carbon community\n\n_For IBMers only:_ If you have a question about any aspect of the kits or tools,\nyou can reach out to us on Slack and use that as a way to connect with your\nfellow designers. Chances are someone has had a similar problem to you and will\njump in to help you out.\n\n- [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)\n- [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD)\n- [#carbon-tutorial](https://ibm-studios.slack.com/archives/CJUGA7P6H)\n\nAnd be sure to sign up for the latest Carbon news at\n[#carbon-announcements](https://ibm-studios.slack.com/archives/CJ35H36MP).\n\n### Learn about what we're doing\n\nYou can find out about Carbon's latest changes and future plans on the\n[Releases](/all-about-carbon/releases/) page.\n\nIf you have questions, here are all the ways to [contact us](/help/contact-us).\n\n### Join us at a meetup\n\nAttend one of our [meetups](/whats-happening/meetups) to connect with us and\nlevel up your skills. The bi-weekly design playback is great for getting\nfeedback on work in progress from a group of designers and design leaders\ndedicated to your success.\n\nIf there’s something in particular you’re interested in, we’d love to\n[hear from you](https://github.com/carbon-design-system/carbon-website/issues/new/choose).\n\n### Learn about the benefits\n\nLearn more about the\n[benefits of using Carbon](/all-about-carbon/who-uses-carbon/) as a designer,\nand how Carbon benefits all members of a product team.\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/designing/get-started.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-designing-get-started-mdx","path":"/designing/get-started/","result":{"pageContext":{"frontmatter":{"title":"Get started","description":null},"relativePagePath":"/designing/get-started.mdx","titleType":"prepend","MdxNode":{"id":"6eb9e754-028b-5128-9906-77d0a8f47b8a","children":[],"parent":"fcb2d205-095b-57e8-b188-8500d31ad2b0","internal":{"content":"---\ntitle: Get started\ndescription:\n---\n\n\n\nWelcome to Carbon! If you're just starting out designing with Carbon, you're in\nthe right place. Here's a checklist of everything you need to get up and\nrunning.\n\n\n\n\n\nStep 1: Learn about Carbon\nStep 2: Access the tools\nStep 3: Get the Figma design kits\nStep 4: Review our usage guidance\nStep 5: Explore foundational guidance\nStep 6: Connect with us\n\n\n\n## Step 1: Learn about Carbon\n\nBy adopting Carbon, designers gain a collection of reusable assets to design\nwebsites and user interfaces quickly and efficiently.\n\nThe [IBM Design Language](https://www.ibm.com/design/language/) is the visual\nexpression of IBM's brand, including color, type scale, the grid, and more.\nCarbon translates the design language into code for building digital\nexperiences.\n\nThis is done through elements such as color tokens, type tokens, and spacing\ntokens that are meant to be applied to all sorts of digital experiences through\nguidance and components.\n\n## Step 2: Access the tools\n\n_For IBMers only:_\n\nIBMers should get a license for Figma, our primary design kit tool. You may also\naccess tools we no longer support, Sketch, Adobe XD, and Axure, by heading to\nthe [Design Toolbox](https://w3.ibm.com/design/toolbox/). However, we no longer\nmaintain or update the kits for these tools. We recommend you migrate to Figma\nto get the most updated kits we offer.\n\n\n\n\n \n \n \n\n\n\n## Step 3: Get the Figma design kits\n\nWe maintain the core Carbon kits in [Figma](/designing/kits/figma). These kits\ninclude all the Carbon core components and styles for reuse in your product and\nweb experiences. By using the kits you will automatically receive updates made\nto the Carbon libraries, ensuring your designs stay up-to-date with the latest\nreleases. This allows you to speak the same language and have shared\nfunctionality expectations as your developers in the hand-off and development\ncycle.\n\nHead on over to the [Design kits](/designing/kits/figma) section and follow the\ninstructions to get set up with Figma.\n\n### Core design kits\n\nEveryone using Carbon should use the following Figma core design kits as a\nstarting point for building user interfaces. This brings consistency and speed,\nallowing teams to focus on solving more specific user tasks. Core design kits\ninclude elements, core components, wireframes, and guidelines.\n\n| Maintainer | Design kit | Type |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| IBM Brand | [IBM Pictograms](https://www.figma.com/community/file/1089047716352012639/Pictograms---IBM-Design-Language) | `Elements` |\n| | [IBM Icons](https://www.figma.com/community/file/1089055340263947620/Icons---IBM-Design-Language) | `Elements` |\n| | [v11 Text styles]() | `Elements` |\n| | [IBM Color palette](https://www.figma.com/community/file/1089055766693968230/Color-Styles---IBM-Design-Language) | `Elements` |\n| Carbon Core | [v11 All themes]() | `UI` |\n| | [v11 Gray 10 theme [Deprecated]]() | `UI` |\n| | [v11 Gray 90 theme [Deprecated]]() | `UI` |\n| | [v11 Gray 100 theme [Deprecated]]() | `UI` |\n| Accessibility | [Accessibility toolkit](https://www.figma.com/community/file/1118184491812988116/IBM-Accessibility-Design-Kit) | `Guidelines` |\n\nThe links in the table for Figma Libraries are preview only. Some of the Figma\nkits are for internal IBMers. To learn more about installing Figma Libraries and\navailable external libraries visit the Figma tutorial\n[Figma tutorial](/designing/kits/figma).\n\n### Additional design assets\n\nSupport for v11 Figma kits are prioritized, but\n[Figma v10 kits](https://next.carbondesignsystem.com/design-kits?q=v10&tool[]=figma)\nare also available with limited support. In\n[Other resources](/designing/design-resources/), you'll find links to icon\nlibraries, color palettes, plugins, and more. The Adobe XD kit is no longer\nprioritized or maintained, but you may access it\n[here](https://github.com/IBM/design-kit/tree/master/Adobe%20XD).\n\n## Step 4: Review our usage guidance\n\nOur usage guidance is detailed and thorough, and you'll learn a lot about the\nsystem by reading through the components and patterns documentation.\n\n- [Components](/components/overview): Carbon provides in-depth design usage and\n style guidance for all components. It's important to be familiar with this\n additional UX and visual guidance when you are designing with our components.\n\n- [Patterns](/patterns/overview): We also offer a range of key patterns—best\n practice solutions for how a user achieves a goal. These design patterns have\n been harvested from products built with Carbon, and have been reviewed and\n approved for use by the Carbon governance team.\n\n## Step 5: Explore foundational guidance\n\nThe following sites provide guidance for creating experiences that are\nconsistent, provide an interoperability of experience with other offerings, and\nrepresent IBM as a company.\n\n_Some of this content is accessible to IBMers only._\n\n| **Resource** | **What you'll find** |\n| --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [IBM Brand Center](https://www.ibm.com/brand/) | Home base for the IBM Brand story, visual brand elements, guidelines, and assets. |\n| [IBM Brand Systems](https://www.ibm.com/brand/experience-guides) | Documentation of the rationale behind every visual and verbal detail for IBM businesses, audiences, categories, and offerings. |\n| [IBM Design Language](https://www.ibm.com/design/language/) | IBM’s design philosophy and principles that govern and guide every experience designed by IBM. |\n| [IBM Style](https://ibmdocs-test.mybluemix.net/docs/en/ibm-style?_ga=2.139068405.716538948.1649782752-687898146.1623775061) | A central reference that ensures all IBM content for external audiences is grammatically correct, clear, consistent, appropriate for global audiences, and easy to translate. |\n| [IBM Experience Standards](https://w3.ibm.com/design/experience-standards/) | Provides a shared definition of our standards at IBM, a way to measure excellence, and actionable ways to improve product or service experiences. |\n| [IBM Accessibility](https://www.ibm.com/able/) | Discipline-specific direction on how to make your product more accessible. |\n\n## Step 6: Connect with us\n\n### Join us and the Carbon community\n\n_For IBMers only:_ If you have a question about any aspect of the kits or tools,\nyou can reach out to us on Slack and use that as a way to connect with your\nfellow designers. Chances are someone has had a similar problem to you and will\njump in to help you out.\n\n- [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)\n- [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD)\n- [#carbon-tutorial](https://ibm-studios.slack.com/archives/CJUGA7P6H)\n\nAnd be sure to sign up for the latest Carbon news at\n[#carbon-announcements](https://ibm-studios.slack.com/archives/CJ35H36MP).\n\n### Learn about what we're doing\n\nYou can find out about Carbon's latest changes and future plans on the\n[Releases](/all-about-carbon/releases/) page.\n\nIf you have questions, here are all the ways to [contact us](/help/contact-us).\n\n### Join us at a meetup\n\nAttend one of our [meetups](/whats-happening/meetups) to connect with us and\nlevel up your skills. The bi-weekly design playback is great for getting\nfeedback on work in progress from a group of designers and design leaders\ndedicated to your success.\n\nIf there’s something in particular you’re interested in, we’d love to\n[hear from you](https://github.com/carbon-design-system/carbon-website/issues/new/choose).\n\n### Learn about the benefits\n\nLearn more about the\n[benefits of using Carbon](/all-about-carbon/who-uses-carbon/) as a designer,\nand how Carbon benefits all members of a product team.\n","type":"Mdx","contentDigest":"e630d913c6f98c037400d1ff66a4388c","owner":"gatsby-plugin-mdx","counter":4727},"frontmatter":{"title":"Get started","description":null},"exports":{},"rawBody":"---\ntitle: Get started\ndescription:\n---\n\n\n\nWelcome to Carbon! If you're just starting out designing with Carbon, you're in\nthe right place. Here's a checklist of everything you need to get up and\nrunning.\n\n\n\n\n\nStep 1: Learn about Carbon\nStep 2: Access the tools\nStep 3: Get the Figma design kits\nStep 4: Review our usage guidance\nStep 5: Explore foundational guidance\nStep 6: Connect with us\n\n\n\n## Step 1: Learn about Carbon\n\nBy adopting Carbon, designers gain a collection of reusable assets to design\nwebsites and user interfaces quickly and efficiently.\n\nThe [IBM Design Language](https://www.ibm.com/design/language/) is the visual\nexpression of IBM's brand, including color, type scale, the grid, and more.\nCarbon translates the design language into code for building digital\nexperiences.\n\nThis is done through elements such as color tokens, type tokens, and spacing\ntokens that are meant to be applied to all sorts of digital experiences through\nguidance and components.\n\n## Step 2: Access the tools\n\n_For IBMers only:_\n\nIBMers should get a license for Figma, our primary design kit tool. You may also\naccess tools we no longer support, Sketch, Adobe XD, and Axure, by heading to\nthe [Design Toolbox](https://w3.ibm.com/design/toolbox/). However, we no longer\nmaintain or update the kits for these tools. We recommend you migrate to Figma\nto get the most updated kits we offer.\n\n\n\n\n \n \n \n\n\n\n## Step 3: Get the Figma design kits\n\nWe maintain the core Carbon kits in [Figma](/designing/kits/figma). These kits\ninclude all the Carbon core components and styles for reuse in your product and\nweb experiences. By using the kits you will automatically receive updates made\nto the Carbon libraries, ensuring your designs stay up-to-date with the latest\nreleases. This allows you to speak the same language and have shared\nfunctionality expectations as your developers in the hand-off and development\ncycle.\n\nHead on over to the [Design kits](/designing/kits/figma) section and follow the\ninstructions to get set up with Figma.\n\n### Core design kits\n\nEveryone using Carbon should use the following Figma core design kits as a\nstarting point for building user interfaces. This brings consistency and speed,\nallowing teams to focus on solving more specific user tasks. Core design kits\ninclude elements, core components, wireframes, and guidelines.\n\n| Maintainer | Design kit | Type |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| IBM Brand | [IBM Pictograms](https://www.figma.com/community/file/1089047716352012639/Pictograms---IBM-Design-Language) | `Elements` |\n| | [IBM Icons](https://www.figma.com/community/file/1089055340263947620/Icons---IBM-Design-Language) | `Elements` |\n| | [v11 Text styles]() | `Elements` |\n| | [IBM Color palette](https://www.figma.com/community/file/1089055766693968230/Color-Styles---IBM-Design-Language) | `Elements` |\n| Carbon Core | [v11 All themes]() | `UI` |\n| | [v11 Gray 10 theme [Deprecated]]() | `UI` |\n| | [v11 Gray 90 theme [Deprecated]]() | `UI` |\n| | [v11 Gray 100 theme [Deprecated]]() | `UI` |\n| Accessibility | [Accessibility toolkit](https://www.figma.com/community/file/1118184491812988116/IBM-Accessibility-Design-Kit) | `Guidelines` |\n\nThe links in the table for Figma Libraries are preview only. Some of the Figma\nkits are for internal IBMers. To learn more about installing Figma Libraries and\navailable external libraries visit the Figma tutorial\n[Figma tutorial](/designing/kits/figma).\n\n### Additional design assets\n\nSupport for v11 Figma kits are prioritized, but\n[Figma v10 kits](https://next.carbondesignsystem.com/design-kits?q=v10&tool[]=figma)\nare also available with limited support. In\n[Other resources](/designing/design-resources/), you'll find links to icon\nlibraries, color palettes, plugins, and more. The Adobe XD kit is no longer\nprioritized or maintained, but you may access it\n[here](https://github.com/IBM/design-kit/tree/master/Adobe%20XD).\n\n## Step 4: Review our usage guidance\n\nOur usage guidance is detailed and thorough, and you'll learn a lot about the\nsystem by reading through the components and patterns documentation.\n\n- [Components](/components/overview): Carbon provides in-depth design usage and\n style guidance for all components. It's important to be familiar with this\n additional UX and visual guidance when you are designing with our components.\n\n- [Patterns](/patterns/overview): We also offer a range of key patterns—best\n practice solutions for how a user achieves a goal. These design patterns have\n been harvested from products built with Carbon, and have been reviewed and\n approved for use by the Carbon governance team.\n\n## Step 5: Explore foundational guidance\n\nThe following sites provide guidance for creating experiences that are\nconsistent, provide an interoperability of experience with other offerings, and\nrepresent IBM as a company.\n\n_Some of this content is accessible to IBMers only._\n\n| **Resource** | **What you'll find** |\n| --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [IBM Brand Center](https://www.ibm.com/brand/) | Home base for the IBM Brand story, visual brand elements, guidelines, and assets. |\n| [IBM Brand Systems](https://www.ibm.com/brand/experience-guides) | Documentation of the rationale behind every visual and verbal detail for IBM businesses, audiences, categories, and offerings. |\n| [IBM Design Language](https://www.ibm.com/design/language/) | IBM’s design philosophy and principles that govern and guide every experience designed by IBM. |\n| [IBM Style](https://ibmdocs-test.mybluemix.net/docs/en/ibm-style?_ga=2.139068405.716538948.1649782752-687898146.1623775061) | A central reference that ensures all IBM content for external audiences is grammatically correct, clear, consistent, appropriate for global audiences, and easy to translate. |\n| [IBM Experience Standards](https://w3.ibm.com/design/experience-standards/) | Provides a shared definition of our standards at IBM, a way to measure excellence, and actionable ways to improve product or service experiences. |\n| [IBM Accessibility](https://www.ibm.com/able/) | Discipline-specific direction on how to make your product more accessible. |\n\n## Step 6: Connect with us\n\n### Join us and the Carbon community\n\n_For IBMers only:_ If you have a question about any aspect of the kits or tools,\nyou can reach out to us on Slack and use that as a way to connect with your\nfellow designers. Chances are someone has had a similar problem to you and will\njump in to help you out.\n\n- [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)\n- [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD)\n- [#carbon-tutorial](https://ibm-studios.slack.com/archives/CJUGA7P6H)\n\nAnd be sure to sign up for the latest Carbon news at\n[#carbon-announcements](https://ibm-studios.slack.com/archives/CJ35H36MP).\n\n### Learn about what we're doing\n\nYou can find out about Carbon's latest changes and future plans on the\n[Releases](/all-about-carbon/releases/) page.\n\nIf you have questions, here are all the ways to [contact us](/help/contact-us).\n\n### Join us at a meetup\n\nAttend one of our [meetups](/whats-happening/meetups) to connect with us and\nlevel up your skills. The bi-weekly design playback is great for getting\nfeedback on work in progress from a group of designers and design leaders\ndedicated to your success.\n\nIf there’s something in particular you’re interested in, we’d love to\n[hear from you](https://github.com/carbon-design-system/carbon-website/issues/new/choose).\n\n### Learn about the benefits\n\nLearn more about the\n[benefits of using Carbon](/all-about-carbon/who-uses-carbon/) as a designer,\nand how Carbon benefits all members of a product team.\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/designing/get-started.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/designing/kits/figma/page-data.json b/page-data/designing/kits/figma/page-data.json
index 4914fca719c..b58a2149422 100644
--- a/page-data/designing/kits/figma/page-data.json
+++ b/page-data/designing/kits/figma/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-designing-kits-figma-mdx","path":"/designing/kits/figma/","result":{"pageContext":{"frontmatter":{"title":"Design kits","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.","tabs":["Figma","Sketch"]},"relativePagePath":"/designing/kits/figma.mdx","titleType":"prepend","MdxNode":{"id":"0276f7d9-f556-5d08-81d2-8d90719605b6","children":[],"parent":"4aec10c7-2ea9-5cfd-9a73-8efdfae6d68c","internal":{"content":"---\ntitle: Design kits\ndescription:\n Rapidly build beautiful and accessible experiences. The Carbon kit contains\n all resources you need to get started.\ntabs: ['Figma', 'Sketch']\n---\n\n\n\nRapidly build beautiful and accessible experiences. The Carbon kit for Figma\ncontains all resources you need to get started.\n\n\n\n\n\n**All themes are now available in one Figma library!** We have implemented Figma\nmodes and theming variables, allowing us to combine all four themes into one\nlibrary file.\n\n\n\n\n\nInternal users\nExternal users\nStart designing\nFeedback\n\n\n\n## Internal users\n\n### Get the libraries\n\n#### 1. Sign into Figma using IBM SSO\n\nYou should be added to the IBM Figma organization automatically once you sign\nin. You do not need to join or request to join any specific team to access the\nlibraries.\n\n#### 2. Turn on the Carbon themes library\n\nThe `(v11) All themes - Carbon Design System` library (previously referred to as\n(v11) White theme - Carbon Design System) includes all four Carbon themes,\nincluding two light (White and Gray 10) and two dark (Gray 90 and Gray 100).\n\nInside of a design file, navigate to the **Main menu** panel in the top left of\nthe toolbar (A). Open the menu and select **Libraries** from the list (B).\n\n\n\n\n\n\n\n\n\nThen in the Libraries modal that appears, find the team called\n`IBM Design Systems` (C) and switch the toggle beside the\n`(v11) All Themes - Carbon Design System` library to on (D).\n\n\n\n\n\n\n\n\n\n \n\nTo preview the All themes library, visit the following view-only link. To access\nthe v10 Figma theme libraries, see\n[v10 Design Kits](https://v10.carbondesignsystem.com/designing/kits/figma).\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 All themes\"\n href=\"https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-White-Theme---Carbon-Design-System\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n \n\n#### 3. Turn on IBM Design Language libraries \n\nUnder the same team `IBM Design Systems` you can also turn on the following IBM\nDesign Language libraries or visit these view-only links.\n\n- Color styles - IBM Design Language\n- Hover color styles - IBM Design Language\n- Text styles - IBM Design Language\n- Icons - IBM Design Language\n- Pictograms - IBM Design Language\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"Color styles\"\n href=\"https://www.figma.com/file/Gvwx2RnAZzDKTjVuC5xOlO/Color-Styles---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 Hover color styles\"\n href=\"https://www.figma.com/file/hWnMvyDNQ5r4pyACeKNf39/(v11)-Hover-Color-Styles---IBM-Design-Language\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"v11 Text styles\"\n href=\"https://www.figma.com/file/rK06GY6bvEfokuzrFGdtWB/(v11)-Text-Styles---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Icons\"\n href=\"https://www.figma.com/file/J5c0d85dSJn9JnBhSYYLmD/Icons---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Pictograms\"\n href=\"https://www.figma.com/file/PkUl9UBuvA41GPpyl84NBc/Pictograms---IBM-Design-Language?node-id=0%3A1\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n## External users\n\n### Get the libraries\n\n#### 1. Sign into Figma\n\n#### 2. Get the theme libraries\n\nThe `(v11) All themes - Carbon Design System` library (previously referred to as\n(v11) White theme - Carbon Design System) includes all four Carbon themes,\nincluding two light (White and Gray 10) and two dark (Gray 90 and Gray 100).\n\nNavigate to the **Community** icon in the header (A).\n\n\n\n\n\n\n\n\n\nSelect the **Design Systems** category and search for **Carbon Design System**\n(B).\n\n\n\n\n\n\n\n\n\nSee the `(v11) All themes - Carbon Design System` library file.\n\n\n\n\n\n\n\n\n\n#### 3. Duplicate the file of your choice to your workspace\n\n#### 4. Publish as a library to your workspace\n\nTo preview the `(v11) All themes - Carbon Design System` library, visit the\nfollowing view-only link.\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 All themes\"\n href=\"https://www.figma.com/community/file/1157761560874207208\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n#### 5. Bring in additional colors and icons\n\nUse these additional IBM Design Language libraries to have access to color\nstyles, hover color styles, text styles, icons, and pictograms.\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"Color styles\"\n href=\"https://www.figma.com/community/file/1089055766693968230\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 Hover color styles\"\n href=\"https://www.figma.com/community/file/1157767268366811122\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"v11 Text styles\"\n href=\"https://www.figma.com/community/file/1127113732861637625\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Icons\"\n href=\"https://www.figma.com/community/file/1089055340263947620\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Pictograms\"\n href=\"https://www.figma.com/community/file/1089047716352012639\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n## Start designing\n\n### Components\n\nIncluded in the library are all 40 of the Carbon components and their variants.\nTo insert a component, go to the **Asset** panel and find the component you\nwould like to use. Drag it from the asset panel onto the canvas.\n\nView the name of the component in the right sidebar. If the component has\nvariants, you'll see fields underneath the component name to configure the\nproperties and values of that component set.\n\nFor more help on how to use Figma components, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants#Use_variants).\n\n### Grids and Screens\n\nIncluded in the library is an asset called `Screens`. These screens provide a\ncanvas that can be configured at the five 2x grid breakpoints. It also includes\nthe 16 column grid both with and without a left panel grid influencer.\n\n### Color styles\n\nThe Carbon color tokens are surfaced in Figma using styles. To apply a color\nstyle, select an object then in the **Styles** menu you can select a style from\nthe Carbon theme libraries or the IBM Design Language libraries. In addition to\napplying color styles to objects, you can also apply Color styles to Text\nlayers. In addition to the Color style library, we have created a Hover color\nstyles library to incorporate specific hover colors per color grade.\n\nTo learn more about applying color styles in Figma, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360040316193).\n\n### Text styles\n\nTo apply a text style, select a text layer, then in the properties panel, choose\na text style from the `(v11) Text styles - IBM Design Language` library\ndepending on which version you are on. Use color styles to change the color of a\ntext style.\n\nTo learn more about applying text styles in Figma, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-Apply-Text-Styles#apply).\n\n## Feedback\n\nHelp us improve this component by providing feedback, asking questions, and\nleaving any other comments on\n[GitHub](https://github.com/carbon-design-system/carbon-design-kit/issues).\n","type":"Mdx","contentDigest":"d3899970be52f110bd0f58c36d0fb12f","owner":"gatsby-plugin-mdx","counter":4889},"frontmatter":{"title":"Design kits","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.","tabs":["Figma","Sketch"]},"exports":{},"rawBody":"---\ntitle: Design kits\ndescription:\n Rapidly build beautiful and accessible experiences. The Carbon kit contains\n all resources you need to get started.\ntabs: ['Figma', 'Sketch']\n---\n\n\n\nRapidly build beautiful and accessible experiences. The Carbon kit for Figma\ncontains all resources you need to get started.\n\n\n\n\n\n**All themes are now available in one Figma library!** We have implemented Figma\nmodes and theming variables, allowing us to combine all four themes into one\nlibrary file.\n\n\n\n\n\nInternal users\nExternal users\nStart designing\nFeedback\n\n\n\n## Internal users\n\n### Get the libraries\n\n#### 1. Sign into Figma using IBM SSO\n\nYou should be added to the IBM Figma organization automatically once you sign\nin. You do not need to join or request to join any specific team to access the\nlibraries.\n\n#### 2. Turn on the Carbon themes library\n\nThe `(v11) All themes - Carbon Design System` library (previously referred to as\n(v11) White theme - Carbon Design System) includes all four Carbon themes,\nincluding two light (White and Gray 10) and two dark (Gray 90 and Gray 100).\n\nInside of a design file, navigate to the **Main menu** panel in the top left of\nthe toolbar (A). Open the menu and select **Libraries** from the list (B).\n\n\n\n\n\n\n\n\n\nThen in the Libraries modal that appears, find the team called\n`IBM Design Systems` (C) and switch the toggle beside the\n`(v11) All Themes - Carbon Design System` library to on (D).\n\n\n\n\n\n\n\n\n\n \n\nTo preview the All themes library, visit the following view-only link. To access\nthe v10 Figma theme libraries, see\n[v10 Design Kits](https://v10.carbondesignsystem.com/designing/kits/figma).\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 All themes\"\n href=\"https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-White-Theme---Carbon-Design-System\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n \n\n#### 3. Turn on IBM Design Language libraries \n\nUnder the same team `IBM Design Systems` you can also turn on the following IBM\nDesign Language libraries or visit these view-only links.\n\n- Color styles - IBM Design Language\n- Hover color styles - IBM Design Language\n- Text styles - IBM Design Language\n- Icons - IBM Design Language\n- Pictograms - IBM Design Language\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"Color styles\"\n href=\"https://www.figma.com/file/Gvwx2RnAZzDKTjVuC5xOlO/Color-Styles---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 Hover color styles\"\n href=\"https://www.figma.com/file/hWnMvyDNQ5r4pyACeKNf39/(v11)-Hover-Color-Styles---IBM-Design-Language\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"v11 Text styles\"\n href=\"https://www.figma.com/file/rK06GY6bvEfokuzrFGdtWB/(v11)-Text-Styles---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Icons\"\n href=\"https://www.figma.com/file/J5c0d85dSJn9JnBhSYYLmD/Icons---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Pictograms\"\n href=\"https://www.figma.com/file/PkUl9UBuvA41GPpyl84NBc/Pictograms---IBM-Design-Language?node-id=0%3A1\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n## External users\n\n### Get the libraries\n\n#### 1. Sign into Figma\n\n#### 2. Get the theme libraries\n\nThe `(v11) All themes - Carbon Design System` library (previously referred to as\n(v11) White theme - Carbon Design System) includes all four Carbon themes,\nincluding two light (White and Gray 10) and two dark (Gray 90 and Gray 100).\n\nNavigate to the **Community** icon in the header (A).\n\n\n\n\n\n\n\n\n\nSelect the **Design Systems** category and search for **Carbon Design System**\n(B).\n\n\n\n\n\n\n\n\n\nSee the `(v11) All themes - Carbon Design System` library file.\n\n\n\n\n\n\n\n\n\n#### 3. Duplicate the file of your choice to your workspace\n\n#### 4. Publish as a library to your workspace\n\nTo preview the `(v11) All themes - Carbon Design System` library, visit the\nfollowing view-only link.\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 All themes\"\n href=\"https://www.figma.com/community/file/1157761560874207208\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n#### 5. Bring in additional colors and icons\n\nUse these additional IBM Design Language libraries to have access to color\nstyles, hover color styles, text styles, icons, and pictograms.\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"Color styles\"\n href=\"https://www.figma.com/community/file/1089055766693968230\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 Hover color styles\"\n href=\"https://www.figma.com/community/file/1157767268366811122\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"v11 Text styles\"\n href=\"https://www.figma.com/community/file/1127113732861637625\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Icons\"\n href=\"https://www.figma.com/community/file/1089055340263947620\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Pictograms\"\n href=\"https://www.figma.com/community/file/1089047716352012639\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n## Start designing\n\n### Components\n\nIncluded in the library are all 40 of the Carbon components and their variants.\nTo insert a component, go to the **Asset** panel and find the component you\nwould like to use. Drag it from the asset panel onto the canvas.\n\nView the name of the component in the right sidebar. If the component has\nvariants, you'll see fields underneath the component name to configure the\nproperties and values of that component set.\n\nFor more help on how to use Figma components, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants#Use_variants).\n\n### Grids and Screens\n\nIncluded in the library is an asset called `Screens`. These screens provide a\ncanvas that can be configured at the five 2x grid breakpoints. It also includes\nthe 16 column grid both with and without a left panel grid influencer.\n\n### Color styles\n\nThe Carbon color tokens are surfaced in Figma using styles. To apply a color\nstyle, select an object then in the **Styles** menu you can select a style from\nthe Carbon theme libraries or the IBM Design Language libraries. In addition to\napplying color styles to objects, you can also apply Color styles to Text\nlayers. In addition to the Color style library, we have created a Hover color\nstyles library to incorporate specific hover colors per color grade.\n\nTo learn more about applying color styles in Figma, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360040316193).\n\n### Text styles\n\nTo apply a text style, select a text layer, then in the properties panel, choose\na text style from the `(v11) Text styles - IBM Design Language` library\ndepending on which version you are on. Use color styles to change the color of a\ntext style.\n\nTo learn more about applying text styles in Figma, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-Apply-Text-Styles#apply).\n\n## Feedback\n\nHelp us improve this component by providing feedback, asking questions, and\nleaving any other comments on\n[GitHub](https://github.com/carbon-design-system/carbon-design-kit/issues).\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/designing/kits/figma.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-designing-kits-figma-mdx","path":"/designing/kits/figma/","result":{"pageContext":{"frontmatter":{"title":"Design kits","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.","tabs":["Figma","Sketch"]},"relativePagePath":"/designing/kits/figma.mdx","titleType":"prepend","MdxNode":{"id":"0276f7d9-f556-5d08-81d2-8d90719605b6","children":[],"parent":"4aec10c7-2ea9-5cfd-9a73-8efdfae6d68c","internal":{"content":"---\ntitle: Design kits\ndescription:\n Rapidly build beautiful and accessible experiences. The Carbon kit contains\n all resources you need to get started.\ntabs: ['Figma', 'Sketch']\n---\n\n\n\nRapidly build beautiful and accessible experiences. The Carbon kit for Figma\ncontains all resources you need to get started.\n\n\n\n\n\n**All themes are now available in one Figma library!** We have implemented Figma\nmodes and theming variables, allowing us to combine all four themes into one\nlibrary file.\n\n\n\n\n\nInternal users\nExternal users\nStart designing\nFeedback\n\n\n\n## Internal users\n\n### Get the libraries\n\n#### 1. Sign into Figma using IBM SSO\n\nYou should be added to the IBM Figma organization automatically once you sign\nin. You do not need to join or request to join any specific team to access the\nlibraries.\n\n#### 2. Turn on the Carbon themes library\n\nThe `(v11) All themes - Carbon Design System` library (previously referred to as\n(v11) White theme - Carbon Design System) includes all four Carbon themes,\nincluding two light (White and Gray 10) and two dark (Gray 90 and Gray 100).\n\nInside of a design file, navigate to the **Main menu** panel in the top left of\nthe toolbar (A). Open the menu and select **Libraries** from the list (B).\n\n\n\n\n\n\n\n\n\nThen in the Libraries modal that appears, find the team called\n`IBM Design Systems` (C) and switch the toggle beside the\n`(v11) All Themes - Carbon Design System` library to on (D).\n\n\n\n\n\n\n\n\n\n \n\nTo preview the All themes library, visit the following view-only link. To access\nthe v10 Figma theme libraries, see\n[v10 Design Kits](https://v10.carbondesignsystem.com/designing/kits/figma).\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 All themes\"\n href=\"https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-White-Theme---Carbon-Design-System\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n \n\n#### 3. Turn on IBM Design Language libraries \n\nUnder the same team `IBM Design Systems` you can also turn on the following IBM\nDesign Language libraries or visit these view-only links.\n\n- Color styles - IBM Design Language\n- Hover color styles - IBM Design Language\n- Text styles - IBM Design Language\n- Icons - IBM Design Language\n- Pictograms - IBM Design Language\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"Color styles\"\n href=\"https://www.figma.com/file/Gvwx2RnAZzDKTjVuC5xOlO/Color-Styles---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 Hover color styles\"\n href=\"https://www.figma.com/file/hWnMvyDNQ5r4pyACeKNf39/(v11)-Hover-Color-Styles---IBM-Design-Language\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"v11 Text styles\"\n href=\"https://www.figma.com/file/rK06GY6bvEfokuzrFGdtWB/(v11)-Text-Styles---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Icons\"\n href=\"https://www.figma.com/file/J5c0d85dSJn9JnBhSYYLmD/Icons---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Pictograms\"\n href=\"https://www.figma.com/file/PkUl9UBuvA41GPpyl84NBc/Pictograms---IBM-Design-Language?node-id=0%3A1\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n## External users\n\n### Get the libraries\n\n#### 1. Sign into Figma\n\n#### 2. Get the theme libraries\n\nThe `(v11) All themes - Carbon Design System` library (previously referred to as\n(v11) White theme - Carbon Design System) includes all four Carbon themes,\nincluding two light (White and Gray 10) and two dark (Gray 90 and Gray 100).\n\nNavigate to the **Community** icon in the header (A).\n\n\n\n\n\n\n\n\n\nSelect the **Design Systems** category and search for **Carbon Design System**\n(B).\n\n\n\n\n\n\n\n\n\nSee the `(v11) All themes - Carbon Design System` library file.\n\n\n\n\n\n\n\n\n\n#### 3. Duplicate the file of your choice to your workspace\n\n#### 4. Publish as a library to your workspace\n\nTo preview the `(v11) All themes - Carbon Design System` library, visit the\nfollowing view-only link.\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 All themes\"\n href=\"https://www.figma.com/community/file/1157761560874207208\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n#### 5. Bring in additional colors and icons\n\nUse these additional IBM Design Language libraries to have access to color\nstyles, hover color styles, text styles, icons, and pictograms.\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"Color styles\"\n href=\"https://www.figma.com/community/file/1089055766693968230\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 Hover color styles\"\n href=\"https://www.figma.com/community/file/1157767268366811122\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"v11 Text styles\"\n href=\"https://www.figma.com/community/file/1127113732861637625\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Icons\"\n href=\"https://www.figma.com/community/file/1089055340263947620\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Pictograms\"\n href=\"https://www.figma.com/community/file/1089047716352012639\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n## Start designing\n\n### Components\n\nIncluded in the library are all 40 of the Carbon components and their variants.\nTo insert a component, go to the **Asset** panel and find the component you\nwould like to use. Drag it from the asset panel onto the canvas.\n\nView the name of the component in the right sidebar. If the component has\nvariants, you'll see fields underneath the component name to configure the\nproperties and values of that component set.\n\nFor more help on how to use Figma components, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants#Use_variants).\n\n### Grids and Screens\n\nIncluded in the library is an asset called `Screens`. These screens provide a\ncanvas that can be configured at the five 2x grid breakpoints. It also includes\nthe 16 column grid both with and without a left panel grid influencer.\n\n### Color styles\n\nThe Carbon color tokens are surfaced in Figma using styles. To apply a color\nstyle, select an object then in the **Styles** menu you can select a style from\nthe Carbon theme libraries or the IBM Design Language libraries. In addition to\napplying color styles to objects, you can also apply Color styles to Text\nlayers. In addition to the Color style library, we have created a Hover color\nstyles library to incorporate specific hover colors per color grade.\n\nTo learn more about applying color styles in Figma, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360040316193).\n\n### Text styles\n\nTo apply a text style, select a text layer, then in the properties panel, choose\na text style from the `(v11) Text styles - IBM Design Language` library\ndepending on which version you are on. Use color styles to change the color of a\ntext style.\n\nTo learn more about applying text styles in Figma, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-Apply-Text-Styles#apply).\n\n## Feedback\n\nHelp us improve this component by providing feedback, asking questions, and\nleaving any other comments on\n[GitHub](https://github.com/carbon-design-system/carbon-design-kit/issues).\n","type":"Mdx","contentDigest":"d3899970be52f110bd0f58c36d0fb12f","owner":"gatsby-plugin-mdx","counter":4909},"frontmatter":{"title":"Design kits","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.","tabs":["Figma","Sketch"]},"exports":{},"rawBody":"---\ntitle: Design kits\ndescription:\n Rapidly build beautiful and accessible experiences. The Carbon kit contains\n all resources you need to get started.\ntabs: ['Figma', 'Sketch']\n---\n\n\n\nRapidly build beautiful and accessible experiences. The Carbon kit for Figma\ncontains all resources you need to get started.\n\n\n\n\n\n**All themes are now available in one Figma library!** We have implemented Figma\nmodes and theming variables, allowing us to combine all four themes into one\nlibrary file.\n\n\n\n\n\nInternal users\nExternal users\nStart designing\nFeedback\n\n\n\n## Internal users\n\n### Get the libraries\n\n#### 1. Sign into Figma using IBM SSO\n\nYou should be added to the IBM Figma organization automatically once you sign\nin. You do not need to join or request to join any specific team to access the\nlibraries.\n\n#### 2. Turn on the Carbon themes library\n\nThe `(v11) All themes - Carbon Design System` library (previously referred to as\n(v11) White theme - Carbon Design System) includes all four Carbon themes,\nincluding two light (White and Gray 10) and two dark (Gray 90 and Gray 100).\n\nInside of a design file, navigate to the **Main menu** panel in the top left of\nthe toolbar (A). Open the menu and select **Libraries** from the list (B).\n\n\n\n\n\n\n\n\n\nThen in the Libraries modal that appears, find the team called\n`IBM Design Systems` (C) and switch the toggle beside the\n`(v11) All Themes - Carbon Design System` library to on (D).\n\n\n\n\n\n\n\n\n\n \n\nTo preview the All themes library, visit the following view-only link. To access\nthe v10 Figma theme libraries, see\n[v10 Design Kits](https://v10.carbondesignsystem.com/designing/kits/figma).\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 All themes\"\n href=\"https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-White-Theme---Carbon-Design-System\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n \n\n#### 3. Turn on IBM Design Language libraries \n\nUnder the same team `IBM Design Systems` you can also turn on the following IBM\nDesign Language libraries or visit these view-only links.\n\n- Color styles - IBM Design Language\n- Hover color styles - IBM Design Language\n- Text styles - IBM Design Language\n- Icons - IBM Design Language\n- Pictograms - IBM Design Language\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"Color styles\"\n href=\"https://www.figma.com/file/Gvwx2RnAZzDKTjVuC5xOlO/Color-Styles---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 Hover color styles\"\n href=\"https://www.figma.com/file/hWnMvyDNQ5r4pyACeKNf39/(v11)-Hover-Color-Styles---IBM-Design-Language\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"v11 Text styles\"\n href=\"https://www.figma.com/file/rK06GY6bvEfokuzrFGdtWB/(v11)-Text-Styles---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Icons\"\n href=\"https://www.figma.com/file/J5c0d85dSJn9JnBhSYYLmD/Icons---IBM-Design-Language?node-id=129%3A2\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Pictograms\"\n href=\"https://www.figma.com/file/PkUl9UBuvA41GPpyl84NBc/Pictograms---IBM-Design-Language?node-id=0%3A1\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n## External users\n\n### Get the libraries\n\n#### 1. Sign into Figma\n\n#### 2. Get the theme libraries\n\nThe `(v11) All themes - Carbon Design System` library (previously referred to as\n(v11) White theme - Carbon Design System) includes all four Carbon themes,\nincluding two light (White and Gray 10) and two dark (Gray 90 and Gray 100).\n\nNavigate to the **Community** icon in the header (A).\n\n\n\n\n\n\n\n\n\nSelect the **Design Systems** category and search for **Carbon Design System**\n(B).\n\n\n\n\n\n\n\n\n\nSee the `(v11) All themes - Carbon Design System` library file.\n\n\n\n\n\n\n\n\n\n#### 3. Duplicate the file of your choice to your workspace\n\n#### 4. Publish as a library to your workspace\n\nTo preview the `(v11) All themes - Carbon Design System` library, visit the\nfollowing view-only link.\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 All themes\"\n href=\"https://www.figma.com/community/file/1157761560874207208\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n#### 5. Bring in additional colors and icons\n\nUse these additional IBM Design Language libraries to have access to color\nstyles, hover color styles, text styles, icons, and pictograms.\n\n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"Color styles\"\n href=\"https://www.figma.com/community/file/1089055766693968230\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"v11 Hover color styles\"\n href=\"https://www.figma.com/community/file/1157767268366811122\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"v11 Text styles\"\n href=\"https://www.figma.com/community/file/1127113732861637625\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Icons\"\n href=\"https://www.figma.com/community/file/1089055340263947620\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Pictograms\"\n href=\"https://www.figma.com/community/file/1089047716352012639\"\n actionIcon=\"launch\">\n\n\n\n \n\n\n\n## Start designing\n\n### Components\n\nIncluded in the library are all 40 of the Carbon components and their variants.\nTo insert a component, go to the **Asset** panel and find the component you\nwould like to use. Drag it from the asset panel onto the canvas.\n\nView the name of the component in the right sidebar. If the component has\nvariants, you'll see fields underneath the component name to configure the\nproperties and values of that component set.\n\nFor more help on how to use Figma components, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants#Use_variants).\n\n### Grids and Screens\n\nIncluded in the library is an asset called `Screens`. These screens provide a\ncanvas that can be configured at the five 2x grid breakpoints. It also includes\nthe 16 column grid both with and without a left panel grid influencer.\n\n### Color styles\n\nThe Carbon color tokens are surfaced in Figma using styles. To apply a color\nstyle, select an object then in the **Styles** menu you can select a style from\nthe Carbon theme libraries or the IBM Design Language libraries. In addition to\napplying color styles to objects, you can also apply Color styles to Text\nlayers. In addition to the Color style library, we have created a Hover color\nstyles library to incorporate specific hover colors per color grade.\n\nTo learn more about applying color styles in Figma, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360040316193).\n\n### Text styles\n\nTo apply a text style, select a text layer, then in the properties panel, choose\na text style from the `(v11) Text styles - IBM Design Language` library\ndepending on which version you are on. Use color styles to change the color of a\ntext style.\n\nTo learn more about applying text styles in Figma, see the\n[Figma docs](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-Apply-Text-Styles#apply).\n\n## Feedback\n\nHelp us improve this component by providing feedback, asking questions, and\nleaving any other comments on\n[GitHub](https://github.com/carbon-design-system/carbon-design-kit/issues).\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/designing/kits/figma.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/designing/kits/sketch/page-data.json b/page-data/designing/kits/sketch/page-data.json
index 932a70e3038..67a4f131097 100644
--- a/page-data/designing/kits/sketch/page-data.json
+++ b/page-data/designing/kits/sketch/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-designing-kits-sketch-mdx","path":"/designing/kits/sketch/","result":{"pageContext":{"frontmatter":{"title":"Design kits","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.","tabs":["Figma","Sketch"]},"relativePagePath":"/designing/kits/sketch.mdx","titleType":"prepend","MdxNode":{"id":"046adc0d-cf50-5ece-b578-253e72ad17e9","children":[],"parent":"6eb1ae67-6c51-5f50-bea0-c1ee16469bab","internal":{"content":"---\ntitle: Design kits\ndescription:\n Rapidly build beautiful and accessible experiences. The Carbon kit contains\n all resources you need to get started.\ntabs: ['Figma', 'Sketch']\n---\n\n\n\nRapidly build beautiful and accessible experiences. The Carbon kit Sketch\ncontains all resources you need to get started.\n\n\n\n\n\n**We no longer maintain or update Sketch libraries.** The instructions and\nresources listed below may be outdated. We recommend you migrate to Figma to get\nthe most updated kits we offer.\n\n\n\n\n\nGet the kit\nStart designing\nHow to use\nExplore additional kits\nInfo\n\n\n\n## Get the kit\n\n#### 1. **Install Sketch**.\n\nTo design with Carbon you must have the **most recent version** of\n[Sketch](https://www.sketch.com/) installed.\n\n#### 2. **Choose a theme**.\n\nThere are [four Carbon themes](/guidelines/color/overview#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.\n\n\n \n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"White theme\"\n href=\"sketch://add-library/cloud/557b75ff-67d3-41ab-ada5-fa25447218c1\"\n >\n \n \n \n \n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"Gray 10 theme\"\n href=\"sketch://add-library/cloud/b4ea2a21-4b1a-4c64-99dc-a1365eff5d5f\"\n >\n \n \n \n \n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Gray 90 theme\"\n href=\"sketch://add-library/cloud/a324c6dd-df97-435e-b79f-3a29e04922fc\"\n >\n \n \n \n \n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Gray 100 theme\"\n href=\"sketch://add-library/cloud/9d47a4fd-70dd-44ff-bc57-22c79da8e477\"\n >\n \n \n \n\n\n \n \n\n#### 3. **Bring in additional colors and icons**.\n\nAdditional color collections live in the IBM Design Language library. Icons live\nin two different libraries separated by size.\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n\n#### 4. **Download the grid templates**.\n\nVisit the\n[Sketch library](https://www.sketch.com/s/3a3f3f2d-94d7-4c16-8e2e-88ba80a6382e)\npage and choose `Download Document` from the right-side panel.\n\nOpen the file in Sketch. Navigate to `File → Save as Template`. You can now\naccess the saved grid template at `File → New file from Template`.\n\n\n \n \n \n \n \n \n \n \n \n \n\n\n## Start designing\n\nTo get started with Carbon, familiarize yourself with the contents of each\nlibrary.\n\n#### **Start with the grid**.\n\nAt the top of your screen, navigate to `File → New file from Template` and\nselect 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\naccessible from any Sketch document. Navigate to\n`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\nSketch to begin designing.\n\n## How to use\n\n\n\nGrid\nSymbols\nText styles\nLayer styles\n\n\n\n### Grid\n\nThe [IBM 2x Grid](/guidelines/2x-grid/overview/) 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.\n\n\n\n
2x Grid overview
\n\n#### Getting started\n\nAll designs should start with the 2x Grid. Once you\nhave [saved the grid](/designing/kits/sketch/#get-the-kit) as a template, in\nSketch navigate to **File → New file from Template** and select the\n`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.\n\n#### Layout\n\nThe grid layout feature controls and shows the 2x grid columns, gutters, and\npage margins. To create or edit the layout go to **View → Canvas → Layout\nSettings...**.\n\nTo toggle seeing the 2x grid columns on an artboard go to **View → Show layout**\nor use the keyboard shortcut `Control+L`.\n\n#### Grid\n\nTo toggle seeing the mini unit grid go to **View → Show grid** or use the\nkeyboard shortcut `Control+G`.\n\n#### Breakpoints\n\nThe layout settings change depending on which size screen you are designing for.\nSee\n[breakpoints](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints).\n\n### Basic grid\n\nThis 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\".\n\n### Grids with an influencer\n\nAn 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 [influencers](/guidelines/2x-grid/overview/#grid-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\".\n\n### Calculating the Sketch grid\n\n#### Sketch layout settings\n\nSlide-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.\n\n- Breakpoint width\\* = **Artboard width**\n- Breakpoint gutter\\* = **Left and right outside margins**\n- Total panel width (“sidebar nav”) + Left outside margin + Right outside margin\n = **Total margins**\n- Artboard width - Total margins = **Total width**\n- Total panel width + Left margin = **Offset**\n\n\\*Since we are following the Carbon Design responsive guidelines, we referenced\n[this table](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options)\nto determine our common breakpoint widths and respective gutter specs.\n\n#### Example\n\nLet’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:\n\n- Breakpoint width (1312px) = 1312px wide artboard\n- Breakpoint gutter (32px) = 32px Left outside margin and 32px Right outside\n margin\n- Total panel width (256px) + 16px Left + 16px Right = 288px Total margins\n- Artboard width (1312px) - Total margins (272px) = **1,056px Total width**\n- Total panel width (256px) + 16px Left = **272px Offset**\n\n\\*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.\n\n### Symbols\n\nCarbon [components](/components/overview), [add-ons](/contributing/add-ons), and\n[icons](/guidelines/icons/library) live in the design kit as Sketch symbols.\n\n\n\n#### Library menu navigation\n\nThere 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.\n\nFrom the main menu select **Insert → Symbols → Carbon Design System** then\nselect the desired symbol to add onto your page.\n\nCarbon 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.\n\n#### Structure\n\nSymbols are organized by component; after selecting a component, you'll see the\nvariations and states of that component.\n\n- To add the whole component, select the desired variant and place it on your\n artboard.\n\n- For even more configurability, use the individual building blocks found under\n the `Items` folder within the symbol. Be sure your custom design adheres to\n our [design guidelines](/guidelines/accessibility/overview).\n\n### Text styles\n\nText styles are based on typography rules defined by the\n[IBM Design Language](https://www.ibm.com/design/language/elements/type-basics).\n\n\n\n#### Library menu navigation\n\nFrom the main menu select **Insert → Text Styles → Carbon Design System** to\ninsert a Carbon type token text style.\n\nText styles within components are carefully considered. We do not recommend\ndetaching 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\n [theme options](/guidelines/themes/overview) (i.e., white theme).\n- The second level shows the [Carbon type](/guidelines/typography/overview)\n tokens (i.e., body-long-01).\n- The third level selects the type color, which is labeled with a\n [Carbon color](/guidelines/color/overview) token name.\n\n### Layer styles\n\nLayer styles are color selections for any shape in Sketch.\n\n\n\n
Use predetermined overrides when possible
\n\n#### Library menu navigation\n\n[Color](/guidelines/color/overview) in Carbon is carefully considered, and we\ndiscourage custom layer styles.\n\nThe 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.”\n\n## Explore additional kits\n\n### Data visualization\n\nThe Data visualization Sketch file includes basic and complex chart assets,\nalong with usage guidance, theming guidance, palettes, and sample layouts.\nYou'll find even more guidance and assets in this file than on the site.\n\n\n\n\n \n \n \n\n\n\n### Gatsby theme\n\nThe Gatsby Sketch kit has all the components, patterns, and sample layouts that\nhave been developed by teams within the IBM ecosystem. The Gatsby theme site\nincludes the components, guidelines, and everything you need to create and\ncontribute to Carbon sites.\n\n#### Image production guidelines\n\nFor anyone interested in contributing to the Carbon Design System website, or\nmaking images for their own Pattern Asset Library (PAL), we follow a set of\nguidelines to ensure consistency across the content in the Gatsby ecosystem. The\nimage production guidelines Sketch kit includes guidance, symbols and templates\nto help designers with every aspect of image creation and component specs.\n\n\n\n\n \n \n \n\n \n\n \n \n \n\n \n\n\n### Native mobile\n\nThese Carbon native mobile Sketch resources include everything you need to get\nyour iOS or Android project underway. Install the grid template, be inspired by\nthe patterns and examples, and get started with either the Light or Dark theme.\n\n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n\n### Accessibility\n\nThe IBM Accessibility kit includes checklists, bite-sized guidance, and handoff\nassets to make sure your designs are accessible for implementation.\n\n\n\n\n \n \n \n\n\n\n### Carbon Mid-Fi Sketch kit\n\nThis kit provides designers with a way to visualize concepts and test them out\nbefore committing to high-fidelity designs.\n\n\n \n \n \n \n \n\n\n### Text toolbar pattern library\n\n\n\n \n \n \n\n\n\n\n## Info\n\nIf you're brand new to Sketch, they offer some great\n[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\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.\n\nThe 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.\n\n### Migration\n\nThe Sketch libraries work on a continous migration stategy. The v11 updates were\nmade in the same libraries that were used in v10. If your Carbon Sketch\nlibraries are up to date then they are using v11. If you do not wish to use v11\nyet then do not accept the library update pushed on 31 March 2022.\n\n### Support\n\nCan't find an answer to your question? Open up an issue on\n[GitHub](https://github.com/carbon-design-system/carbon/issues/new/choose).\n","type":"Mdx","contentDigest":"cb6fd9275586bbb203c42a54c8e5abd4","owner":"gatsby-plugin-mdx","counter":4891},"frontmatter":{"title":"Design kits","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.","tabs":["Figma","Sketch"]},"exports":{},"rawBody":"---\ntitle: Design kits\ndescription:\n Rapidly build beautiful and accessible experiences. The Carbon kit contains\n all resources you need to get started.\ntabs: ['Figma', 'Sketch']\n---\n\n\n\nRapidly build beautiful and accessible experiences. The Carbon kit Sketch\ncontains all resources you need to get started.\n\n\n\n\n\n**We no longer maintain or update Sketch libraries.** The instructions and\nresources listed below may be outdated. We recommend you migrate to Figma to get\nthe most updated kits we offer.\n\n\n\n\n\nGet the kit\nStart designing\nHow to use\nExplore additional kits\nInfo\n\n\n\n## Get the kit\n\n#### 1. **Install Sketch**.\n\nTo design with Carbon you must have the **most recent version** of\n[Sketch](https://www.sketch.com/) installed.\n\n#### 2. **Choose a theme**.\n\nThere are [four Carbon themes](/guidelines/color/overview#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.\n\n\n \n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"White theme\"\n href=\"sketch://add-library/cloud/557b75ff-67d3-41ab-ada5-fa25447218c1\"\n >\n \n \n \n \n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"Gray 10 theme\"\n href=\"sketch://add-library/cloud/b4ea2a21-4b1a-4c64-99dc-a1365eff5d5f\"\n >\n \n \n \n \n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Gray 90 theme\"\n href=\"sketch://add-library/cloud/a324c6dd-df97-435e-b79f-3a29e04922fc\"\n >\n \n \n \n \n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Gray 100 theme\"\n href=\"sketch://add-library/cloud/9d47a4fd-70dd-44ff-bc57-22c79da8e477\"\n >\n \n \n \n\n\n \n \n\n#### 3. **Bring in additional colors and icons**.\n\nAdditional color collections live in the IBM Design Language library. Icons live\nin two different libraries separated by size.\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n\n#### 4. **Download the grid templates**.\n\nVisit the\n[Sketch library](https://www.sketch.com/s/3a3f3f2d-94d7-4c16-8e2e-88ba80a6382e)\npage and choose `Download Document` from the right-side panel.\n\nOpen the file in Sketch. Navigate to `File → Save as Template`. You can now\naccess the saved grid template at `File → New file from Template`.\n\n\n \n \n \n \n \n \n \n \n \n \n\n\n## Start designing\n\nTo get started with Carbon, familiarize yourself with the contents of each\nlibrary.\n\n#### **Start with the grid**.\n\nAt the top of your screen, navigate to `File → New file from Template` and\nselect 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\naccessible from any Sketch document. Navigate to\n`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\nSketch to begin designing.\n\n## How to use\n\n\n\nGrid\nSymbols\nText styles\nLayer styles\n\n\n\n### Grid\n\nThe [IBM 2x Grid](/guidelines/2x-grid/overview/) 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.\n\n\n\n
2x Grid overview
\n\n#### Getting started\n\nAll designs should start with the 2x Grid. Once you\nhave [saved the grid](/designing/kits/sketch/#get-the-kit) as a template, in\nSketch navigate to **File → New file from Template** and select the\n`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.\n\n#### Layout\n\nThe grid layout feature controls and shows the 2x grid columns, gutters, and\npage margins. To create or edit the layout go to **View → Canvas → Layout\nSettings...**.\n\nTo toggle seeing the 2x grid columns on an artboard go to **View → Show layout**\nor use the keyboard shortcut `Control+L`.\n\n#### Grid\n\nTo toggle seeing the mini unit grid go to **View → Show grid** or use the\nkeyboard shortcut `Control+G`.\n\n#### Breakpoints\n\nThe layout settings change depending on which size screen you are designing for.\nSee\n[breakpoints](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints).\n\n### Basic grid\n\nThis 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\".\n\n### Grids with an influencer\n\nAn 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 [influencers](/guidelines/2x-grid/overview/#grid-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\".\n\n### Calculating the Sketch grid\n\n#### Sketch layout settings\n\nSlide-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.\n\n- Breakpoint width\\* = **Artboard width**\n- Breakpoint gutter\\* = **Left and right outside margins**\n- Total panel width (“sidebar nav”) + Left outside margin + Right outside margin\n = **Total margins**\n- Artboard width - Total margins = **Total width**\n- Total panel width + Left margin = **Offset**\n\n\\*Since we are following the Carbon Design responsive guidelines, we referenced\n[this table](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options)\nto determine our common breakpoint widths and respective gutter specs.\n\n#### Example\n\nLet’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:\n\n- Breakpoint width (1312px) = 1312px wide artboard\n- Breakpoint gutter (32px) = 32px Left outside margin and 32px Right outside\n margin\n- Total panel width (256px) + 16px Left + 16px Right = 288px Total margins\n- Artboard width (1312px) - Total margins (272px) = **1,056px Total width**\n- Total panel width (256px) + 16px Left = **272px Offset**\n\n\\*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.\n\n### Symbols\n\nCarbon [components](/components/overview), [add-ons](/contributing/add-ons), and\n[icons](/guidelines/icons/library) live in the design kit as Sketch symbols.\n\n\n\n#### Library menu navigation\n\nThere 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.\n\nFrom the main menu select **Insert → Symbols → Carbon Design System** then\nselect the desired symbol to add onto your page.\n\nCarbon 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.\n\n#### Structure\n\nSymbols are organized by component; after selecting a component, you'll see the\nvariations and states of that component.\n\n- To add the whole component, select the desired variant and place it on your\n artboard.\n\n- For even more configurability, use the individual building blocks found under\n the `Items` folder within the symbol. Be sure your custom design adheres to\n our [design guidelines](/guidelines/accessibility/overview).\n\n### Text styles\n\nText styles are based on typography rules defined by the\n[IBM Design Language](https://www.ibm.com/design/language/elements/type-basics).\n\n\n\n#### Library menu navigation\n\nFrom the main menu select **Insert → Text Styles → Carbon Design System** to\ninsert a Carbon type token text style.\n\nText styles within components are carefully considered. We do not recommend\ndetaching 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\n [theme options](/guidelines/themes/overview) (i.e., white theme).\n- The second level shows the [Carbon type](/guidelines/typography/overview)\n tokens (i.e., body-long-01).\n- The third level selects the type color, which is labeled with a\n [Carbon color](/guidelines/color/overview) token name.\n\n### Layer styles\n\nLayer styles are color selections for any shape in Sketch.\n\n\n\n
Use predetermined overrides when possible
\n\n#### Library menu navigation\n\n[Color](/guidelines/color/overview) in Carbon is carefully considered, and we\ndiscourage custom layer styles.\n\nThe 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.”\n\n## Explore additional kits\n\n### Data visualization\n\nThe Data visualization Sketch file includes basic and complex chart assets,\nalong with usage guidance, theming guidance, palettes, and sample layouts.\nYou'll find even more guidance and assets in this file than on the site.\n\n\n\n\n \n \n \n\n\n\n### Gatsby theme\n\nThe Gatsby Sketch kit has all the components, patterns, and sample layouts that\nhave been developed by teams within the IBM ecosystem. The Gatsby theme site\nincludes the components, guidelines, and everything you need to create and\ncontribute to Carbon sites.\n\n#### Image production guidelines\n\nFor anyone interested in contributing to the Carbon Design System website, or\nmaking images for their own Pattern Asset Library (PAL), we follow a set of\nguidelines to ensure consistency across the content in the Gatsby ecosystem. The\nimage production guidelines Sketch kit includes guidance, symbols and templates\nto help designers with every aspect of image creation and component specs.\n\n\n\n\n \n \n \n\n \n\n \n \n \n\n \n\n\n### Native mobile\n\nThese Carbon native mobile Sketch resources include everything you need to get\nyour iOS or Android project underway. Install the grid template, be inspired by\nthe patterns and examples, and get started with either the Light or Dark theme.\n\n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n\n### Accessibility\n\nThe IBM Accessibility kit includes checklists, bite-sized guidance, and handoff\nassets to make sure your designs are accessible for implementation.\n\n\n\n\n \n \n \n\n\n\n### Carbon Mid-Fi Sketch kit\n\nThis kit provides designers with a way to visualize concepts and test them out\nbefore committing to high-fidelity designs.\n\n\n \n \n \n \n \n\n\n### Text toolbar pattern library\n\n\n\n \n \n \n\n\n\n\n## Info\n\nIf you're brand new to Sketch, they offer some great\n[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\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.\n\nThe 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.\n\n### Migration\n\nThe Sketch libraries work on a continous migration stategy. The v11 updates were\nmade in the same libraries that were used in v10. If your Carbon Sketch\nlibraries are up to date then they are using v11. If you do not wish to use v11\nyet then do not accept the library update pushed on 31 March 2022.\n\n### Support\n\nCan't find an answer to your question? Open up an issue on\n[GitHub](https://github.com/carbon-design-system/carbon/issues/new/choose).\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/designing/kits/sketch.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-designing-kits-sketch-mdx","path":"/designing/kits/sketch/","result":{"pageContext":{"frontmatter":{"title":"Design kits","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.","tabs":["Figma","Sketch"]},"relativePagePath":"/designing/kits/sketch.mdx","titleType":"prepend","MdxNode":{"id":"046adc0d-cf50-5ece-b578-253e72ad17e9","children":[],"parent":"6eb1ae67-6c51-5f50-bea0-c1ee16469bab","internal":{"content":"---\ntitle: Design kits\ndescription:\n Rapidly build beautiful and accessible experiences. The Carbon kit contains\n all resources you need to get started.\ntabs: ['Figma', 'Sketch']\n---\n\n\n\nRapidly build beautiful and accessible experiences. The Carbon kit Sketch\ncontains all resources you need to get started.\n\n\n\n\n\n**We no longer maintain or update Sketch libraries.** The instructions and\nresources listed below may be outdated. We recommend you migrate to Figma to get\nthe most updated kits we offer.\n\n\n\n\n\nGet the kit\nStart designing\nHow to use\nExplore additional kits\nInfo\n\n\n\n## Get the kit\n\n#### 1. **Install Sketch**.\n\nTo design with Carbon you must have the **most recent version** of\n[Sketch](https://www.sketch.com/) installed.\n\n#### 2. **Choose a theme**.\n\nThere are [four Carbon themes](/guidelines/color/overview#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.\n\n\n \n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"White theme\"\n href=\"sketch://add-library/cloud/557b75ff-67d3-41ab-ada5-fa25447218c1\"\n >\n \n \n \n \n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"Gray 10 theme\"\n href=\"sketch://add-library/cloud/b4ea2a21-4b1a-4c64-99dc-a1365eff5d5f\"\n >\n \n \n \n \n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Gray 90 theme\"\n href=\"sketch://add-library/cloud/a324c6dd-df97-435e-b79f-3a29e04922fc\"\n >\n \n \n \n \n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Gray 100 theme\"\n href=\"sketch://add-library/cloud/9d47a4fd-70dd-44ff-bc57-22c79da8e477\"\n >\n \n \n \n\n\n \n \n\n#### 3. **Bring in additional colors and icons**.\n\nAdditional color collections live in the IBM Design Language library. Icons live\nin two different libraries separated by size.\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n\n#### 4. **Download the grid templates**.\n\nVisit the\n[Sketch library](https://www.sketch.com/s/3a3f3f2d-94d7-4c16-8e2e-88ba80a6382e)\npage and choose `Download Document` from the right-side panel.\n\nOpen the file in Sketch. Navigate to `File → Save as Template`. You can now\naccess the saved grid template at `File → New file from Template`.\n\n\n \n \n \n \n \n \n \n \n \n \n\n\n## Start designing\n\nTo get started with Carbon, familiarize yourself with the contents of each\nlibrary.\n\n#### **Start with the grid**.\n\nAt the top of your screen, navigate to `File → New file from Template` and\nselect 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\naccessible from any Sketch document. Navigate to\n`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\nSketch to begin designing.\n\n## How to use\n\n\n\nGrid\nSymbols\nText styles\nLayer styles\n\n\n\n### Grid\n\nThe [IBM 2x Grid](/guidelines/2x-grid/overview/) 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.\n\n\n\n
2x Grid overview
\n\n#### Getting started\n\nAll designs should start with the 2x Grid. Once you\nhave [saved the grid](/designing/kits/sketch/#get-the-kit) as a template, in\nSketch navigate to **File → New file from Template** and select the\n`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.\n\n#### Layout\n\nThe grid layout feature controls and shows the 2x grid columns, gutters, and\npage margins. To create or edit the layout go to **View → Canvas → Layout\nSettings...**.\n\nTo toggle seeing the 2x grid columns on an artboard go to **View → Show layout**\nor use the keyboard shortcut `Control+L`.\n\n#### Grid\n\nTo toggle seeing the mini unit grid go to **View → Show grid** or use the\nkeyboard shortcut `Control+G`.\n\n#### Breakpoints\n\nThe layout settings change depending on which size screen you are designing for.\nSee\n[breakpoints](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints).\n\n### Basic grid\n\nThis 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\".\n\n### Grids with an influencer\n\nAn 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 [influencers](/guidelines/2x-grid/overview/#grid-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\".\n\n### Calculating the Sketch grid\n\n#### Sketch layout settings\n\nSlide-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.\n\n- Breakpoint width\\* = **Artboard width**\n- Breakpoint gutter\\* = **Left and right outside margins**\n- Total panel width (“sidebar nav”) + Left outside margin + Right outside margin\n = **Total margins**\n- Artboard width - Total margins = **Total width**\n- Total panel width + Left margin = **Offset**\n\n\\*Since we are following the Carbon Design responsive guidelines, we referenced\n[this table](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options)\nto determine our common breakpoint widths and respective gutter specs.\n\n#### Example\n\nLet’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:\n\n- Breakpoint width (1312px) = 1312px wide artboard\n- Breakpoint gutter (32px) = 32px Left outside margin and 32px Right outside\n margin\n- Total panel width (256px) + 16px Left + 16px Right = 288px Total margins\n- Artboard width (1312px) - Total margins (272px) = **1,056px Total width**\n- Total panel width (256px) + 16px Left = **272px Offset**\n\n\\*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.\n\n### Symbols\n\nCarbon [components](/components/overview), [add-ons](/contributing/add-ons), and\n[icons](/guidelines/icons/library) live in the design kit as Sketch symbols.\n\n\n\n#### Library menu navigation\n\nThere 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.\n\nFrom the main menu select **Insert → Symbols → Carbon Design System** then\nselect the desired symbol to add onto your page.\n\nCarbon 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.\n\n#### Structure\n\nSymbols are organized by component; after selecting a component, you'll see the\nvariations and states of that component.\n\n- To add the whole component, select the desired variant and place it on your\n artboard.\n\n- For even more configurability, use the individual building blocks found under\n the `Items` folder within the symbol. Be sure your custom design adheres to\n our [design guidelines](/guidelines/accessibility/overview).\n\n### Text styles\n\nText styles are based on typography rules defined by the\n[IBM Design Language](https://www.ibm.com/design/language/elements/type-basics).\n\n\n\n#### Library menu navigation\n\nFrom the main menu select **Insert → Text Styles → Carbon Design System** to\ninsert a Carbon type token text style.\n\nText styles within components are carefully considered. We do not recommend\ndetaching 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\n [theme options](/guidelines/themes/overview) (i.e., white theme).\n- The second level shows the [Carbon type](/guidelines/typography/overview)\n tokens (i.e., body-long-01).\n- The third level selects the type color, which is labeled with a\n [Carbon color](/guidelines/color/overview) token name.\n\n### Layer styles\n\nLayer styles are color selections for any shape in Sketch.\n\n\n\n
Use predetermined overrides when possible
\n\n#### Library menu navigation\n\n[Color](/guidelines/color/overview) in Carbon is carefully considered, and we\ndiscourage custom layer styles.\n\nThe 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.”\n\n## Explore additional kits\n\n### Data visualization\n\nThe Data visualization Sketch file includes basic and complex chart assets,\nalong with usage guidance, theming guidance, palettes, and sample layouts.\nYou'll find even more guidance and assets in this file than on the site.\n\n\n\n\n \n \n \n\n\n\n### Gatsby theme\n\nThe Gatsby Sketch kit has all the components, patterns, and sample layouts that\nhave been developed by teams within the IBM ecosystem. The Gatsby theme site\nincludes the components, guidelines, and everything you need to create and\ncontribute to Carbon sites.\n\n#### Image production guidelines\n\nFor anyone interested in contributing to the Carbon Design System website, or\nmaking images for their own Pattern Asset Library (PAL), we follow a set of\nguidelines to ensure consistency across the content in the Gatsby ecosystem. The\nimage production guidelines Sketch kit includes guidance, symbols and templates\nto help designers with every aspect of image creation and component specs.\n\n\n\n\n \n \n \n\n \n\n \n \n \n\n \n\n\n### Native mobile\n\nThese Carbon native mobile Sketch resources include everything you need to get\nyour iOS or Android project underway. Install the grid template, be inspired by\nthe patterns and examples, and get started with either the Light or Dark theme.\n\n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n\n### Accessibility\n\nThe IBM Accessibility kit includes checklists, bite-sized guidance, and handoff\nassets to make sure your designs are accessible for implementation.\n\n\n\n\n \n \n \n\n\n\n### Carbon Mid-Fi Sketch kit\n\nThis kit provides designers with a way to visualize concepts and test them out\nbefore committing to high-fidelity designs.\n\n\n \n \n \n \n \n\n\n### Text toolbar pattern library\n\n\n\n \n \n \n\n\n\n\n## Info\n\nIf you're brand new to Sketch, they offer some great\n[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\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.\n\nThe 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.\n\n### Migration\n\nThe Sketch libraries work on a continous migration stategy. The v11 updates were\nmade in the same libraries that were used in v10. If your Carbon Sketch\nlibraries are up to date then they are using v11. If you do not wish to use v11\nyet then do not accept the library update pushed on 31 March 2022.\n\n### Support\n\nCan't find an answer to your question? Open up an issue on\n[GitHub](https://github.com/carbon-design-system/carbon/issues/new/choose).\n","type":"Mdx","contentDigest":"cb6fd9275586bbb203c42a54c8e5abd4","owner":"gatsby-plugin-mdx","counter":4911},"frontmatter":{"title":"Design kits","description":"Rapidly build beautiful and accessible experiences. The Carbon kit contains all resources you need to get started.","tabs":["Figma","Sketch"]},"exports":{},"rawBody":"---\ntitle: Design kits\ndescription:\n Rapidly build beautiful and accessible experiences. The Carbon kit contains\n all resources you need to get started.\ntabs: ['Figma', 'Sketch']\n---\n\n\n\nRapidly build beautiful and accessible experiences. The Carbon kit Sketch\ncontains all resources you need to get started.\n\n\n\n\n\n**We no longer maintain or update Sketch libraries.** The instructions and\nresources listed below may be outdated. We recommend you migrate to Figma to get\nthe most updated kits we offer.\n\n\n\n\n\nGet the kit\nStart designing\nHow to use\nExplore additional kits\nInfo\n\n\n\n## Get the kit\n\n#### 1. **Install Sketch**.\n\nTo design with Carbon you must have the **most recent version** of\n[Sketch](https://www.sketch.com/) installed.\n\n#### 2. **Choose a theme**.\n\nThere are [four Carbon themes](/guidelines/color/overview#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.\n\n\n \n fathom.trackGoal('P0OEN9TS', 0)}\n subTitle=\"White theme\"\n href=\"sketch://add-library/cloud/557b75ff-67d3-41ab-ada5-fa25447218c1\"\n >\n \n \n \n \n fathom.trackGoal('T7D1HJ3L', 0)}\n subTitle=\"Gray 10 theme\"\n href=\"sketch://add-library/cloud/b4ea2a21-4b1a-4c64-99dc-a1365eff5d5f\"\n >\n \n \n \n \n fathom.trackGoal('LYFJTPDE', 0)}\n subTitle=\"Gray 90 theme\"\n href=\"sketch://add-library/cloud/a324c6dd-df97-435e-b79f-3a29e04922fc\"\n >\n \n \n \n \n fathom.trackGoal('3XH0SIBJ', 0)}\n subTitle=\"Gray 100 theme\"\n href=\"sketch://add-library/cloud/9d47a4fd-70dd-44ff-bc57-22c79da8e477\"\n >\n \n \n \n\n\n \n \n\n#### 3. **Bring in additional colors and icons**.\n\nAdditional color collections live in the IBM Design Language library. Icons live\nin two different libraries separated by size.\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n\n#### 4. **Download the grid templates**.\n\nVisit the\n[Sketch library](https://www.sketch.com/s/3a3f3f2d-94d7-4c16-8e2e-88ba80a6382e)\npage and choose `Download Document` from the right-side panel.\n\nOpen the file in Sketch. Navigate to `File → Save as Template`. You can now\naccess the saved grid template at `File → New file from Template`.\n\n\n \n \n \n \n \n \n \n \n \n \n\n\n## Start designing\n\nTo get started with Carbon, familiarize yourself with the contents of each\nlibrary.\n\n#### **Start with the grid**.\n\nAt the top of your screen, navigate to `File → New file from Template` and\nselect 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\naccessible from any Sketch document. Navigate to\n`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\nSketch to begin designing.\n\n## How to use\n\n\n\nGrid\nSymbols\nText styles\nLayer styles\n\n\n\n### Grid\n\nThe [IBM 2x Grid](/guidelines/2x-grid/overview/) 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.\n\n\n\n
2x Grid overview
\n\n#### Getting started\n\nAll designs should start with the 2x Grid. Once you\nhave [saved the grid](/designing/kits/sketch/#get-the-kit) as a template, in\nSketch navigate to **File → New file from Template** and select the\n`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.\n\n#### Layout\n\nThe grid layout feature controls and shows the 2x grid columns, gutters, and\npage margins. To create or edit the layout go to **View → Canvas → Layout\nSettings...**.\n\nTo toggle seeing the 2x grid columns on an artboard go to **View → Show layout**\nor use the keyboard shortcut `Control+L`.\n\n#### Grid\n\nTo toggle seeing the mini unit grid go to **View → Show grid** or use the\nkeyboard shortcut `Control+G`.\n\n#### Breakpoints\n\nThe layout settings change depending on which size screen you are designing for.\nSee\n[breakpoints](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints).\n\n### Basic grid\n\nThis 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\".\n\n### Grids with an influencer\n\nAn 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 [influencers](/guidelines/2x-grid/overview/#grid-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\".\n\n### Calculating the Sketch grid\n\n#### Sketch layout settings\n\nSlide-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.\n\n- Breakpoint width\\* = **Artboard width**\n- Breakpoint gutter\\* = **Left and right outside margins**\n- Total panel width (“sidebar nav”) + Left outside margin + Right outside margin\n = **Total margins**\n- Artboard width - Total margins = **Total width**\n- Total panel width + Left margin = **Offset**\n\n\\*Since we are following the Carbon Design responsive guidelines, we referenced\n[this table](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options)\nto determine our common breakpoint widths and respective gutter specs.\n\n#### Example\n\nLet’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:\n\n- Breakpoint width (1312px) = 1312px wide artboard\n- Breakpoint gutter (32px) = 32px Left outside margin and 32px Right outside\n margin\n- Total panel width (256px) + 16px Left + 16px Right = 288px Total margins\n- Artboard width (1312px) - Total margins (272px) = **1,056px Total width**\n- Total panel width (256px) + 16px Left = **272px Offset**\n\n\\*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.\n\n### Symbols\n\nCarbon [components](/components/overview), [add-ons](/contributing/add-ons), and\n[icons](/guidelines/icons/library) live in the design kit as Sketch symbols.\n\n\n\n#### Library menu navigation\n\nThere 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.\n\nFrom the main menu select **Insert → Symbols → Carbon Design System** then\nselect the desired symbol to add onto your page.\n\nCarbon 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.\n\n#### Structure\n\nSymbols are organized by component; after selecting a component, you'll see the\nvariations and states of that component.\n\n- To add the whole component, select the desired variant and place it on your\n artboard.\n\n- For even more configurability, use the individual building blocks found under\n the `Items` folder within the symbol. Be sure your custom design adheres to\n our [design guidelines](/guidelines/accessibility/overview).\n\n### Text styles\n\nText styles are based on typography rules defined by the\n[IBM Design Language](https://www.ibm.com/design/language/elements/type-basics).\n\n\n\n#### Library menu navigation\n\nFrom the main menu select **Insert → Text Styles → Carbon Design System** to\ninsert a Carbon type token text style.\n\nText styles within components are carefully considered. We do not recommend\ndetaching 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\n [theme options](/guidelines/themes/overview) (i.e., white theme).\n- The second level shows the [Carbon type](/guidelines/typography/overview)\n tokens (i.e., body-long-01).\n- The third level selects the type color, which is labeled with a\n [Carbon color](/guidelines/color/overview) token name.\n\n### Layer styles\n\nLayer styles are color selections for any shape in Sketch.\n\n\n\n
Use predetermined overrides when possible
\n\n#### Library menu navigation\n\n[Color](/guidelines/color/overview) in Carbon is carefully considered, and we\ndiscourage custom layer styles.\n\nThe 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.”\n\n## Explore additional kits\n\n### Data visualization\n\nThe Data visualization Sketch file includes basic and complex chart assets,\nalong with usage guidance, theming guidance, palettes, and sample layouts.\nYou'll find even more guidance and assets in this file than on the site.\n\n\n\n\n \n \n \n\n\n\n### Gatsby theme\n\nThe Gatsby Sketch kit has all the components, patterns, and sample layouts that\nhave been developed by teams within the IBM ecosystem. The Gatsby theme site\nincludes the components, guidelines, and everything you need to create and\ncontribute to Carbon sites.\n\n#### Image production guidelines\n\nFor anyone interested in contributing to the Carbon Design System website, or\nmaking images for their own Pattern Asset Library (PAL), we follow a set of\nguidelines to ensure consistency across the content in the Gatsby ecosystem. The\nimage production guidelines Sketch kit includes guidance, symbols and templates\nto help designers with every aspect of image creation and component specs.\n\n\n\n\n \n \n \n\n \n\n \n \n \n\n \n\n\n### Native mobile\n\nThese Carbon native mobile Sketch resources include everything you need to get\nyour iOS or Android project underway. Install the grid template, be inspired by\nthe patterns and examples, and get started with either the Light or Dark theme.\n\n\n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n\n### Accessibility\n\nThe IBM Accessibility kit includes checklists, bite-sized guidance, and handoff\nassets to make sure your designs are accessible for implementation.\n\n\n\n\n \n \n \n\n\n\n### Carbon Mid-Fi Sketch kit\n\nThis kit provides designers with a way to visualize concepts and test them out\nbefore committing to high-fidelity designs.\n\n\n \n \n \n \n \n\n\n### Text toolbar pattern library\n\n\n\n \n \n \n\n\n\n\n## Info\n\nIf you're brand new to Sketch, they offer some great\n[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\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.\n\nThe 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.\n\n### Migration\n\nThe Sketch libraries work on a continous migration stategy. The v11 updates were\nmade in the same libraries that were used in v10. If your Carbon Sketch\nlibraries are up to date then they are using v11. If you do not wish to use v11\nyet then do not accept the library update pushed on 31 March 2022.\n\n### Support\n\nCan't find an answer to your question? Open up an issue on\n[GitHub](https://github.com/carbon-design-system/carbon/issues/new/choose).\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/designing/kits/sketch.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/developing/angular-tutorial/overview/page-data.json b/page-data/developing/angular-tutorial/overview/page-data.json
index 8010a946195..f7806bcaa4f 100644
--- a/page-data/developing/angular-tutorial/overview/page-data.json
+++ b/page-data/developing/angular-tutorial/overview/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-developing-angular-tutorial-overview-mdx","path":"/developing/angular-tutorial/overview/","result":{"pageContext":{"frontmatter":{"title":"Tutorial overview","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"relativePagePath":"/developing/angular-tutorial/overview.mdx","titleType":"prepend","MdxNode":{"id":"8da820d8-67b9-598d-bd4f-5157580dc1e9","children":[],"parent":"47c4ad2a-84a0-59f0-88bd-297b0f1d8f52","internal":{"content":"---\ntitle: Tutorial overview\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n\n\nWelcome to Carbon! This tutorial will guide you in creating an Angular app with\nthe Carbon Design System. We'll teach you the ins and outs of using Carbon\ncomponents, while introducing web development best practices along the way.\n\n\n\n\n\nThe Angular tutorial is maintained by members of the Carbon community. For\nsupport, contact the\n[Carbon Angular team](https://github.com/carbon-design-system/carbon-tutorial-angular/issues/new).\n\n\n\n\n\nAudience\nPrerequisites\nOutline\n\n\n\nHere's a [preview](https://angular-step-6-carbon-tutorial.netlify.com) of what\nyou will build:\n\n\n\n## Audience\n\nThis tutorial is intended for people with all amounts of web development\nexperience. If you want to jump straight to code, you may want to skip this\ntutorial and go to the [developers getting started](/developing/get-started)\npage.\n\n## Prerequisites\n\n### Angular\n\nThis is a web development tutorial that uses the Carbon Angular components. If\nyou're just getting started with Angular and enjoy learning-by-doing, check out\nthe official Angular [guide](https://angular.io/docs).\n\n### ES6/ES2015\n\nAngular apps often use the latest and greatest from JavaScript (ES6/ES2015).\nYou'll want to be up to speed on the most commonly used features of the\nlanguage.\n[Let's Learn ES6](https://www.youtube.com/playlist?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX)\ncovers those features in depth.\n\n### GitHub\n\nWe'll be using GitHub to build an app together, so if you're new to GitHub, make\nsure you've [made an account](https://github.com/join). Their\n[getting started guide](https://guides.github.com/activities/hello-world) is a\ngreat way to learn GitHub.\n\n### npm\n\nThis tutorial uses [npm](https://www.npmjs.com/) for dependency management. Make\nsure that you have [npm installed](https://www.npmjs.com/get-npm) prior to\nstarting the tutorial so you can follow along step-by-step.\n\n## Outline\n\nEach step in this tutorial illustrates a different aspect of developing web\napplications with Carbon. We recommend starting with step 1, but you can pick up\nany step and take it from there.\n\n1. [**Installing Carbon**](/developing/angular-tutorial/step-1)\n - Create a web app with the UI shell component.\n1. [**Building pages**](/developing/angular-tutorial/step-2)\n - Build out pages with the grid and various components.\n1. [**Using APIs**](/developing/angular-tutorial/step-3)\n - Populate the data table with an external data source.\n1. [**Creating components**](/developing/angular-tutorial/step-4)\n - Extend Carbon by creating your own components.\n1. [**Deploying to IBM Cloud**](/developing/angular-tutorial/step-5)\n - Build and host your app in a production environment.\n","type":"Mdx","contentDigest":"d397f488ce04c68947927e017502375e","owner":"gatsby-plugin-mdx","counter":4890},"frontmatter":{"title":"Tutorial overview","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"exports":{},"rawBody":"---\ntitle: Tutorial overview\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n\n\nWelcome to Carbon! This tutorial will guide you in creating an Angular app with\nthe Carbon Design System. We'll teach you the ins and outs of using Carbon\ncomponents, while introducing web development best practices along the way.\n\n\n\n\n\nThe Angular tutorial is maintained by members of the Carbon community. For\nsupport, contact the\n[Carbon Angular team](https://github.com/carbon-design-system/carbon-tutorial-angular/issues/new).\n\n\n\n\n\nAudience\nPrerequisites\nOutline\n\n\n\nHere's a [preview](https://angular-step-6-carbon-tutorial.netlify.com) of what\nyou will build:\n\n\n\n## Audience\n\nThis tutorial is intended for people with all amounts of web development\nexperience. If you want to jump straight to code, you may want to skip this\ntutorial and go to the [developers getting started](/developing/get-started)\npage.\n\n## Prerequisites\n\n### Angular\n\nThis is a web development tutorial that uses the Carbon Angular components. If\nyou're just getting started with Angular and enjoy learning-by-doing, check out\nthe official Angular [guide](https://angular.io/docs).\n\n### ES6/ES2015\n\nAngular apps often use the latest and greatest from JavaScript (ES6/ES2015).\nYou'll want to be up to speed on the most commonly used features of the\nlanguage.\n[Let's Learn ES6](https://www.youtube.com/playlist?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX)\ncovers those features in depth.\n\n### GitHub\n\nWe'll be using GitHub to build an app together, so if you're new to GitHub, make\nsure you've [made an account](https://github.com/join). Their\n[getting started guide](https://guides.github.com/activities/hello-world) is a\ngreat way to learn GitHub.\n\n### npm\n\nThis tutorial uses [npm](https://www.npmjs.com/) for dependency management. Make\nsure that you have [npm installed](https://www.npmjs.com/get-npm) prior to\nstarting the tutorial so you can follow along step-by-step.\n\n## Outline\n\nEach step in this tutorial illustrates a different aspect of developing web\napplications with Carbon. We recommend starting with step 1, but you can pick up\nany step and take it from there.\n\n1. [**Installing Carbon**](/developing/angular-tutorial/step-1)\n - Create a web app with the UI shell component.\n1. [**Building pages**](/developing/angular-tutorial/step-2)\n - Build out pages with the grid and various components.\n1. [**Using APIs**](/developing/angular-tutorial/step-3)\n - Populate the data table with an external data source.\n1. [**Creating components**](/developing/angular-tutorial/step-4)\n - Extend Carbon by creating your own components.\n1. [**Deploying to IBM Cloud**](/developing/angular-tutorial/step-5)\n - Build and host your app in a production environment.\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/developing/angular-tutorial/overview.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-developing-angular-tutorial-overview-mdx","path":"/developing/angular-tutorial/overview/","result":{"pageContext":{"frontmatter":{"title":"Tutorial overview","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"relativePagePath":"/developing/angular-tutorial/overview.mdx","titleType":"prepend","MdxNode":{"id":"8da820d8-67b9-598d-bd4f-5157580dc1e9","children":[],"parent":"47c4ad2a-84a0-59f0-88bd-297b0f1d8f52","internal":{"content":"---\ntitle: Tutorial overview\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n\n\nWelcome to Carbon! This tutorial will guide you in creating an Angular app with\nthe Carbon Design System. We'll teach you the ins and outs of using Carbon\ncomponents, while introducing web development best practices along the way.\n\n\n\n\n\nThe Angular tutorial is maintained by members of the Carbon community. For\nsupport, contact the\n[Carbon Angular team](https://github.com/carbon-design-system/carbon-tutorial-angular/issues/new).\n\n\n\n\n\nAudience\nPrerequisites\nOutline\n\n\n\nHere's a [preview](https://angular-step-6-carbon-tutorial.netlify.com) of what\nyou will build:\n\n\n\n## Audience\n\nThis tutorial is intended for people with all amounts of web development\nexperience. If you want to jump straight to code, you may want to skip this\ntutorial and go to the [developers getting started](/developing/get-started)\npage.\n\n## Prerequisites\n\n### Angular\n\nThis is a web development tutorial that uses the Carbon Angular components. If\nyou're just getting started with Angular and enjoy learning-by-doing, check out\nthe official Angular [guide](https://angular.io/docs).\n\n### ES6/ES2015\n\nAngular apps often use the latest and greatest from JavaScript (ES6/ES2015).\nYou'll want to be up to speed on the most commonly used features of the\nlanguage.\n[Let's Learn ES6](https://www.youtube.com/playlist?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX)\ncovers those features in depth.\n\n### GitHub\n\nWe'll be using GitHub to build an app together, so if you're new to GitHub, make\nsure you've [made an account](https://github.com/join). Their\n[getting started guide](https://guides.github.com/activities/hello-world) is a\ngreat way to learn GitHub.\n\n### npm\n\nThis tutorial uses [npm](https://www.npmjs.com/) for dependency management. Make\nsure that you have [npm installed](https://www.npmjs.com/get-npm) prior to\nstarting the tutorial so you can follow along step-by-step.\n\n## Outline\n\nEach step in this tutorial illustrates a different aspect of developing web\napplications with Carbon. We recommend starting with step 1, but you can pick up\nany step and take it from there.\n\n1. [**Installing Carbon**](/developing/angular-tutorial/step-1)\n - Create a web app with the UI shell component.\n1. [**Building pages**](/developing/angular-tutorial/step-2)\n - Build out pages with the grid and various components.\n1. [**Using APIs**](/developing/angular-tutorial/step-3)\n - Populate the data table with an external data source.\n1. [**Creating components**](/developing/angular-tutorial/step-4)\n - Extend Carbon by creating your own components.\n1. [**Deploying to IBM Cloud**](/developing/angular-tutorial/step-5)\n - Build and host your app in a production environment.\n","type":"Mdx","contentDigest":"d397f488ce04c68947927e017502375e","owner":"gatsby-plugin-mdx","counter":4910},"frontmatter":{"title":"Tutorial overview","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"exports":{},"rawBody":"---\ntitle: Tutorial overview\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n\n\nWelcome to Carbon! This tutorial will guide you in creating an Angular app with\nthe Carbon Design System. We'll teach you the ins and outs of using Carbon\ncomponents, while introducing web development best practices along the way.\n\n\n\n\n\nThe Angular tutorial is maintained by members of the Carbon community. For\nsupport, contact the\n[Carbon Angular team](https://github.com/carbon-design-system/carbon-tutorial-angular/issues/new).\n\n\n\n\n\nAudience\nPrerequisites\nOutline\n\n\n\nHere's a [preview](https://angular-step-6-carbon-tutorial.netlify.com) of what\nyou will build:\n\n\n\n## Audience\n\nThis tutorial is intended for people with all amounts of web development\nexperience. If you want to jump straight to code, you may want to skip this\ntutorial and go to the [developers getting started](/developing/get-started)\npage.\n\n## Prerequisites\n\n### Angular\n\nThis is a web development tutorial that uses the Carbon Angular components. If\nyou're just getting started with Angular and enjoy learning-by-doing, check out\nthe official Angular [guide](https://angular.io/docs).\n\n### ES6/ES2015\n\nAngular apps often use the latest and greatest from JavaScript (ES6/ES2015).\nYou'll want to be up to speed on the most commonly used features of the\nlanguage.\n[Let's Learn ES6](https://www.youtube.com/playlist?list=PL57atfCFqj2h5fpdZD-doGEIs0NZxeJTX)\ncovers those features in depth.\n\n### GitHub\n\nWe'll be using GitHub to build an app together, so if you're new to GitHub, make\nsure you've [made an account](https://github.com/join). Their\n[getting started guide](https://guides.github.com/activities/hello-world) is a\ngreat way to learn GitHub.\n\n### npm\n\nThis tutorial uses [npm](https://www.npmjs.com/) for dependency management. Make\nsure that you have [npm installed](https://www.npmjs.com/get-npm) prior to\nstarting the tutorial so you can follow along step-by-step.\n\n## Outline\n\nEach step in this tutorial illustrates a different aspect of developing web\napplications with Carbon. We recommend starting with step 1, but you can pick up\nany step and take it from there.\n\n1. [**Installing Carbon**](/developing/angular-tutorial/step-1)\n - Create a web app with the UI shell component.\n1. [**Building pages**](/developing/angular-tutorial/step-2)\n - Build out pages with the grid and various components.\n1. [**Using APIs**](/developing/angular-tutorial/step-3)\n - Populate the data table with an external data source.\n1. [**Creating components**](/developing/angular-tutorial/step-4)\n - Extend Carbon by creating your own components.\n1. [**Deploying to IBM Cloud**](/developing/angular-tutorial/step-5)\n - Build and host your app in a production environment.\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/developing/angular-tutorial/overview.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/developing/angular-tutorial/step-1/page-data.json b/page-data/developing/angular-tutorial/step-1/page-data.json
index fe811bc9b01..1e4a873bd9f 100644
--- a/page-data/developing/angular-tutorial/step-1/page-data.json
+++ b/page-data/developing/angular-tutorial/step-1/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-developing-angular-tutorial-step-1-mdx","path":"/developing/angular-tutorial/step-1/","result":{"pageContext":{"frontmatter":{"title":"1. Installing Carbon","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"relativePagePath":"/developing/angular-tutorial/step-1.mdx","titleType":"prepend","MdxNode":{"id":"08bd00f4-5b23-5894-b075-fda86a87c1f1","children":[],"parent":"4aabceae-feb7-5267-8485-7ca69dcc3a24","internal":{"content":"---\ntitle: 1. Installing Carbon\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n\n\nStarting with the Carbon Angular, there are two ways to begin working with\nCarbon components. By the end, these two methods will produce the same result.\n\n\n\n\n\nPrerequisites\nInstall Angular CLI\nCreate an Angular App\nInstall Carbon\nRun the app\nAdd UI Shell\nCreate pages\nAdd routing\nSubmit pull request\n\n\n\n## Preview\n\nA [preview](https://angular-step-2-carbon-tutorial.netlify.com) of what you will\nbuild:\n\n\n\n\n\n**Note:** If you get lint errors when you copy the code from the snippets, run\n`ng lint --fix` to fix them.\n\n\n\n## Prerequisites\n\n### Fork, clone and branch\n\nThis tutorial has an accompanying GitHub repository called\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nthat we’ll use as a starting point for each step.\n\n### Fork\n\nTo begin, fork\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nusing your GitHub account.\n\n### Clone\n\nGo to your forked repository, copy the SSH or HTTPS URL and in your terminal run\nthe two commands to get the repository in your local file system and enter that\ndirectory.\n\n```bash\ngit clone [your fork SSH/HTTPS]\ncd carbon-tutorial-angular\n```\n\n### Add upstream remote\n\nAdd a remote called `upstream` so we can eventually submit a pull request once\nyou have completed this tutorial step.\n\n##### SSH:\n\n```bash\ngit remote add upstream git@github.com:carbon-design-system/carbon-tutorial-angular.git\n```\n\nOr, if you prefer to use HTTPS instead of SSH with your remotes:\n\n##### HTTPS:\n\n```bash\ngit remote add upstream https://github.com/carbon-design-system/carbon-tutorial-angular.git\n```\n\nVerify that your forked repository remotes are correct:\n\n```bash\ngit remote -v\n```\n\nYour terminal should output something like this:\n\n```bash\norigin\t[your forked repo] (fetch)\norigin\t[your forked repo] (push)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (fetch)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (push)\n```\n\n### Branch\n\nNow that we have our repository set up, let's check out the branch for this\ntutorial step's starting point. Run the two commands:\n\n```bash\ngit fetch upstream\ngit checkout -b angular-step-1 upstream/angular-step-1\n```\n\n### Install Angular CLI\n\nSince we are starting from scratch, we need to first install Angular CLI.\nCurrently you need to install Angular CLI Version 8.x to work through this\ntutorial.\n\n```bash\nnpm install -g @angular/cli\n```\n\n\n\n**Note:** If you are using macOS you might need to execute as a `sudo` command.\n\n\n\n### Create an Angular App\n\nNow that we have our environment set up, starting a new Angular app is easy! If\nyou haven't set up the environment yet, please do so using the steps provided in\nPrerequisites (above). We will be using the Angular CLI to create and generate\nour components. It can also generate services, router, components, and\ndirectives.\n\nTo create a new Angular project with Angular CLI, just run:\n\n```bash\nng new carbon-angular-tutorial\n```\n\nThis will create the new project within the current directory. Make sure you do\nthis within the cloned fork of the project. When you get prompted, enter the\nfollowing.\n\n```bash\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS\n```\n\nThis command will install the Angular app with all the configurations needed.\nWithin the project folder `carbon-angular-tutorial`, the `src` directory should\nhave the following structure:\n\n```bash\ncarbon-angular-tutorial\n...\n ├── src\n ├── app\n │ ├── app-routing.module.ts\n │ ├── app.component.html\n │ ├── app.component.scss\n │ ├── app.component.spec.ts\n │ ├── app.component.ts\n │ └── app.module.ts\n ├── assets\n ├── environments\n │ ├── environment.prod.ts\n │ └── environment.ts\n ├── favicon.ico\n ├── index.html\n ├── main.ts\n ├── polyfills.ts\n ├── styles.scss\n └── test.ts\n```\n\n### Install Carbon\n\nEven though we installed some dependencies while creating the new app, we've yet\nto install the Carbon packages.\n\n- `carbon-components` - Component styles\n- `carbon-components-angular` - Angular components\n- `@carbon/icons` - Carbon icons\n\n```bash\nnpm install carbon-components carbon-components-angular @carbon/icons\n```\n\n#### Import carbon-components styles\n\nIn `src/styles.scss`, import the Carbon styles by adding the following to the\ntop of the file:\n\n```scss path=src/styles.scss\n@import '~carbon-components/scss/globals/scss/styles';\n```\n\n### Run the app\n\nNow we can run our app for a quick preview inside the browser.\n\n```bash\nnpm start\n```\n\nYour app should now be running with the message:\n`** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **`\n\nBefore we start adding components we want to start with an empty project, so\ndelete everything in `app.component.html` except for the `router-outler`. We\nwill also have to delete the test that was associated with this code. So in\n`app.component.spec.ts`, delete the `should render title` and\n`should have as title 'carbon-angular-tutorial'` test.\n\n### Add UI Shell\n\nNext, we're going to create an Angular component called `Header` to use with the\nUI Shell Carbon component. Using Angular CLI we will create this component\ninside the `src/app` directory.\n\n```bash\nng g component header --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/header\n├── header.component.html\n├── header.component.scss\n├── header.component.spec.ts\n└── header.component.ts\n```\n\n#### Import UI Shell\n\nNext we'll import our Carbon UI Shell components into `app.module.ts`,\n`app.component.spec.ts` and `header.component.spec.ts`. Set up the file like so:\n\n\n```javascript path=src/app/app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { HeaderComponent } from './header/header.component';\n\n// carbon-components-angular default imports\nimport { UIShellModule, IconModule } from 'carbon-components-angular';\n\n@NgModule({\n declarations: [\n AppComponent,\n HeaderComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n UIShellModule,\n IconModule\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimport { UIShellModule } from 'carbon-components-angular/ui-shell/ui-shell.module';\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nTestBed.configureTestingModule({\n declarations: [HeaderComponent],\n imports: [UIShellModule]\n});\n```\n\n\n\n\n**Note:** You can find a description of the different components used in UI\nShell in our\n[carbon-components-angular](https://github.com/IBM/carbon-components-angular/tree/master/src/ui-shell)\npackage.\n\n\n\n#### Import and register icons\n\nNow let’s import the icons from our `@carbon/icons` package. To improve tree\nshaking & keep the size of our app small, import only the required icons. To do\nso, import `Notification20`, `UserAvatar20`, and `AppSwitcher20` in\n`app.module.ts`.\n\n\n```javascript path=src/app/header/app.modules.ts\nimport Notification20 from '@carbon/icons/es/notification/20';\nimport UserAvatar20 from '@carbon/icons/es/user--avatar/20';\nimport AppSwitcher20 from '@carbon/icons/es/app-switcher/20';\n```\n\n\nNow you need to register the icon via `IconService` that also needs to be\nimported from `carbon-components-angular` module. After importing IconService\nyou need to inject it in component constructor and us it in OnInit life cycle\ncomponent hook. There are 2 methods for icon registration `.register()` which\naccepts only one icon and `.registerAll()` which accepts array of icons. As we\nare going to use more than one icon we are going to use the later method as\nbelow.\n\n\n```javascript path=src/app/header/header.component.ts\nimport { IconService } from \"carbon-components-angular\";\n...\n\nconstructor(protected iconService: IconService) {}\n\n ngOnInit() {\n this.iconService.registerAll([Notification20]);\n }\n```\n\n\nNext step is to import the `IconModule` in the `AppModule` module where the\n`HeaderComponent` is declared.\n\n\n```javascript path=src/app/header/header.component.ts\nimport { IconModule } from \"carbon-components-angular\";\n...\n\nimports: [\n ...\n IconModule\n]\n```\n\n\nNow the icon is ready to be used in template code. Template in\n`header.component.html` should look like this:\n\n\n```html path=src/app/header/header.component.html\n\n \n Repositories\n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n\nNotice that the icon names are the same as their file path. This how the\ndirective queries the service for the icon.\n\nNext import the header component in `app.component.spec.ts` and add the\ncomponent in `app.component.html`\n\n\n```javascript path=src/app/app.component.spec.ts\nimport { HeaderComponent } from './header/header.component';\n```\n\n\n```javascript path=src/app/app.component.spec.ts\ndeclarations: [HeaderComponent];\n```\n\n```html path=src/app/app.component.html\n\n\n \n\n```\n\nLet's add some padding to the top of the document, so the content is below the\nheader. We are going to do this by using the `cds--header` class provided by\ncarbon. So in `header.component.ts` lets hostbind that class.\n\n```javascript\nimport { Component, HostBinding } from '@angular/core';\n ...\n @HostBinding('class.cds--header') headerClass = true;\n```\n\n### Create pages\n\nNext thing we need to do is create the files for our content. These files will\nbe located in the `app` folder inside of `src`. It should be a sibling of\n`header`.\n\nOur app will have two pages. First, we need a landing page. Go ahead and stop\nyour development server (with `CTRL-C`) and then:\n\n```bash\nng g module home --routing --lint-fix\nng g component home/landing-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/home\n├── landing-page\n│ ├── landing-page.component.html\n│ ├── landing-page.component.scss\n│ ├── landing-page.component.spec.ts\n│ └── landing-page.component.ts\n├── home-routing.module.ts\n└── home-page.module.ts\n```\n\nAnd a repo page:\n\n```bash\nng g module repositories --routing --lint-fix\nng g component repositories/repo-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/repositories\n├── repo-page\n│ ├── repo-page.component.html\n│ ├── repo-page.component.scss\n│ ├── repo-page.component.spec.ts\n│ └── repo-page.component.ts\n├── repositories-routing.module.ts\n└── repositories.module.ts\n```\n\nNow you can restart your server with `npm start`.\n\n### Add routing\n\nWe need to update routing functionality to enable the loading of `repositories`.\nInside `app-routing.module.ts` we'll add the following code in the routes array:\n\n```javascript path=src/app-routing.module.ts\nconst routes: Routes = [\n {\n path: '',\n loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),\n },\n {\n path: 'repos',\n loadChildren: () =>\n import('./repositories/repositories.module').then(\n (m) => m.RepositoriesModule\n ),\n },\n];\n```\n\nAnd modify the `NgModule` declaration to use the hash router:\n\n```javascript path=src/app-routing.module.ts\n@NgModule({\n imports: [RouterModule.forRoot(routes, { useHash: true })],\n exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n```\n\nAnd add routes for the landing and repo pages:\n\n```javascript path=src/app/home/home-routing.module.ts\nimport { LandingPageComponent } from './landing-page/landing-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: LandingPageComponent,\n },\n];\n```\n\n\n\n```javascript path=src/app/repositories/repositories-routing.module.ts\nimport { RepoPageComponent } from './repo-page/repo-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: RepoPageComponent\n }\n];\n```\n\n\n\nAfter that we need to do a couple quick fixes to the UI Shell to have it route\nto the repo page.\n\n```html path=src/app/header/header.component.html\nRepositories\n```\n\nYou should now have a working header that routes to the repos pages without full\npage reload!\n\n### Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step\nand demonstrate a couple related concepts.\n\n#### Continuous integration (CI) check\n\n\n\n**Note:** Before you run any tests, make sure that you are using ChromeHeadless\nin `karma.conf.js` instead of Chrome.\n\n\n\nWe have `lint` and `test` scripts defined in `package.json` that verify file\nformatting for files that have been touched since the last Git commit. You'd\ntypically also have that script run your test suite as part of your CI build. Go\nahead and make sure everything looks good with:\n\n```bash\nng lint --fix\nnpm run lint && npm test\n```\n\n\n\n**Note:** If this gives an error, it's likely that some of your source files are\nnot properly formatted.\n\n\n\n#### Git commit and push\n\nBefore we can create a pull request, we need to stage and commit all of our\nchanges:\n\n```bash\ngit add --all && git commit -m \"feat(tutorial): complete step 1\"\n```\n\nThen, push to your repository:\n\n```bash\ngit push origin angular-step-1\n```\n\n\n\n**Note:** If your Git remote protocol is HTTPS instead of SSH, you may be\nprompted to authenticate with GitHub when you push changes. If your GitHub\naccount has two-factor authentication enabled, we recommend that you follow\nthese instructions to\n[create a personal access token for the command line](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line).\nThat lets you use your token instead of password when performing Git operations\nover HTTPS.\n\n\n\n\n\n**Note:** If you receive a `non-fast-forward` error, it's likely that your\nforked repository is behind the original repository and needs updated. This can\nhappen if the tutorial was updated after you began working on it. To fix, run\n`git pull upstream angular-step-1` to merge the changes into your branch, then\nyou can try pushing again. Or, you can\n[manually merge](https://help.github.com/en/articles/syncing-a-fork) in the\nupstream changes.\n\n\n\n#### Pull request (PR)\n\nFinally, visit\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nto \"Compare & pull request\". In doing so, make sure that you are comparing to\n`angular-step-1` into `base: angular-step-1`. Take notice of the\n[Netlify](https://www.netlify.com) bot that deploys a preview of your PR every\ntime that you push new commits. These previews can be shared and viewed by\nanybody to assist the PR review process.\n\n\n\n**Note:** Your tutorial step will be automatically reviewed based on the status\nof your tests. Ensure that your tests pass when you submit your PR. Expect your\ntutorial step PRs to be reviewed by the Carbon team but not merged. We'll close\nyour PR so we can keep the repository's remote branches pristine and ready for\nthe next person!\n\n\n","type":"Mdx","contentDigest":"11456707698d493c810a9f921d9e3668","owner":"gatsby-plugin-mdx","counter":4892},"frontmatter":{"title":"1. Installing Carbon","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"exports":{},"rawBody":"---\ntitle: 1. Installing Carbon\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n\n\nStarting with the Carbon Angular, there are two ways to begin working with\nCarbon components. By the end, these two methods will produce the same result.\n\n\n\n\n\nPrerequisites\nInstall Angular CLI\nCreate an Angular App\nInstall Carbon\nRun the app\nAdd UI Shell\nCreate pages\nAdd routing\nSubmit pull request\n\n\n\n## Preview\n\nA [preview](https://angular-step-2-carbon-tutorial.netlify.com) of what you will\nbuild:\n\n\n\n\n\n**Note:** If you get lint errors when you copy the code from the snippets, run\n`ng lint --fix` to fix them.\n\n\n\n## Prerequisites\n\n### Fork, clone and branch\n\nThis tutorial has an accompanying GitHub repository called\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nthat we’ll use as a starting point for each step.\n\n### Fork\n\nTo begin, fork\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nusing your GitHub account.\n\n### Clone\n\nGo to your forked repository, copy the SSH or HTTPS URL and in your terminal run\nthe two commands to get the repository in your local file system and enter that\ndirectory.\n\n```bash\ngit clone [your fork SSH/HTTPS]\ncd carbon-tutorial-angular\n```\n\n### Add upstream remote\n\nAdd a remote called `upstream` so we can eventually submit a pull request once\nyou have completed this tutorial step.\n\n##### SSH:\n\n```bash\ngit remote add upstream git@github.com:carbon-design-system/carbon-tutorial-angular.git\n```\n\nOr, if you prefer to use HTTPS instead of SSH with your remotes:\n\n##### HTTPS:\n\n```bash\ngit remote add upstream https://github.com/carbon-design-system/carbon-tutorial-angular.git\n```\n\nVerify that your forked repository remotes are correct:\n\n```bash\ngit remote -v\n```\n\nYour terminal should output something like this:\n\n```bash\norigin\t[your forked repo] (fetch)\norigin\t[your forked repo] (push)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (fetch)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (push)\n```\n\n### Branch\n\nNow that we have our repository set up, let's check out the branch for this\ntutorial step's starting point. Run the two commands:\n\n```bash\ngit fetch upstream\ngit checkout -b angular-step-1 upstream/angular-step-1\n```\n\n### Install Angular CLI\n\nSince we are starting from scratch, we need to first install Angular CLI.\nCurrently you need to install Angular CLI Version 8.x to work through this\ntutorial.\n\n```bash\nnpm install -g @angular/cli\n```\n\n\n\n**Note:** If you are using macOS you might need to execute as a `sudo` command.\n\n\n\n### Create an Angular App\n\nNow that we have our environment set up, starting a new Angular app is easy! If\nyou haven't set up the environment yet, please do so using the steps provided in\nPrerequisites (above). We will be using the Angular CLI to create and generate\nour components. It can also generate services, router, components, and\ndirectives.\n\nTo create a new Angular project with Angular CLI, just run:\n\n```bash\nng new carbon-angular-tutorial\n```\n\nThis will create the new project within the current directory. Make sure you do\nthis within the cloned fork of the project. When you get prompted, enter the\nfollowing.\n\n```bash\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS\n```\n\nThis command will install the Angular app with all the configurations needed.\nWithin the project folder `carbon-angular-tutorial`, the `src` directory should\nhave the following structure:\n\n```bash\ncarbon-angular-tutorial\n...\n ├── src\n ├── app\n │ ├── app-routing.module.ts\n │ ├── app.component.html\n │ ├── app.component.scss\n │ ├── app.component.spec.ts\n │ ├── app.component.ts\n │ └── app.module.ts\n ├── assets\n ├── environments\n │ ├── environment.prod.ts\n │ └── environment.ts\n ├── favicon.ico\n ├── index.html\n ├── main.ts\n ├── polyfills.ts\n ├── styles.scss\n └── test.ts\n```\n\n### Install Carbon\n\nEven though we installed some dependencies while creating the new app, we've yet\nto install the Carbon packages.\n\n- `carbon-components` - Component styles\n- `carbon-components-angular` - Angular components\n- `@carbon/icons` - Carbon icons\n\n```bash\nnpm install carbon-components carbon-components-angular @carbon/icons\n```\n\n#### Import carbon-components styles\n\nIn `src/styles.scss`, import the Carbon styles by adding the following to the\ntop of the file:\n\n```scss path=src/styles.scss\n@import '~carbon-components/scss/globals/scss/styles';\n```\n\n### Run the app\n\nNow we can run our app for a quick preview inside the browser.\n\n```bash\nnpm start\n```\n\nYour app should now be running with the message:\n`** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **`\n\nBefore we start adding components we want to start with an empty project, so\ndelete everything in `app.component.html` except for the `router-outler`. We\nwill also have to delete the test that was associated with this code. So in\n`app.component.spec.ts`, delete the `should render title` and\n`should have as title 'carbon-angular-tutorial'` test.\n\n### Add UI Shell\n\nNext, we're going to create an Angular component called `Header` to use with the\nUI Shell Carbon component. Using Angular CLI we will create this component\ninside the `src/app` directory.\n\n```bash\nng g component header --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/header\n├── header.component.html\n├── header.component.scss\n├── header.component.spec.ts\n└── header.component.ts\n```\n\n#### Import UI Shell\n\nNext we'll import our Carbon UI Shell components into `app.module.ts`,\n`app.component.spec.ts` and `header.component.spec.ts`. Set up the file like so:\n\n\n```javascript path=src/app/app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { HeaderComponent } from './header/header.component';\n\n// carbon-components-angular default imports\nimport { UIShellModule, IconModule } from 'carbon-components-angular';\n\n@NgModule({\n declarations: [\n AppComponent,\n HeaderComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n UIShellModule,\n IconModule\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimport { UIShellModule } from 'carbon-components-angular/ui-shell/ui-shell.module';\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nTestBed.configureTestingModule({\n declarations: [HeaderComponent],\n imports: [UIShellModule]\n});\n```\n\n\n\n\n**Note:** You can find a description of the different components used in UI\nShell in our\n[carbon-components-angular](https://github.com/IBM/carbon-components-angular/tree/master/src/ui-shell)\npackage.\n\n\n\n#### Import and register icons\n\nNow let’s import the icons from our `@carbon/icons` package. To improve tree\nshaking & keep the size of our app small, import only the required icons. To do\nso, import `Notification20`, `UserAvatar20`, and `AppSwitcher20` in\n`app.module.ts`.\n\n\n```javascript path=src/app/header/app.modules.ts\nimport Notification20 from '@carbon/icons/es/notification/20';\nimport UserAvatar20 from '@carbon/icons/es/user--avatar/20';\nimport AppSwitcher20 from '@carbon/icons/es/app-switcher/20';\n```\n\n\nNow you need to register the icon via `IconService` that also needs to be\nimported from `carbon-components-angular` module. After importing IconService\nyou need to inject it in component constructor and us it in OnInit life cycle\ncomponent hook. There are 2 methods for icon registration `.register()` which\naccepts only one icon and `.registerAll()` which accepts array of icons. As we\nare going to use more than one icon we are going to use the later method as\nbelow.\n\n\n```javascript path=src/app/header/header.component.ts\nimport { IconService } from \"carbon-components-angular\";\n...\n\nconstructor(protected iconService: IconService) {}\n\n ngOnInit() {\n this.iconService.registerAll([Notification20]);\n }\n```\n\n\nNext step is to import the `IconModule` in the `AppModule` module where the\n`HeaderComponent` is declared.\n\n\n```javascript path=src/app/header/header.component.ts\nimport { IconModule } from \"carbon-components-angular\";\n...\n\nimports: [\n ...\n IconModule\n]\n```\n\n\nNow the icon is ready to be used in template code. Template in\n`header.component.html` should look like this:\n\n\n```html path=src/app/header/header.component.html\n\n \n Repositories\n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n\nNotice that the icon names are the same as their file path. This how the\ndirective queries the service for the icon.\n\nNext import the header component in `app.component.spec.ts` and add the\ncomponent in `app.component.html`\n\n\n```javascript path=src/app/app.component.spec.ts\nimport { HeaderComponent } from './header/header.component';\n```\n\n\n```javascript path=src/app/app.component.spec.ts\ndeclarations: [HeaderComponent];\n```\n\n```html path=src/app/app.component.html\n\n\n \n\n```\n\nLet's add some padding to the top of the document, so the content is below the\nheader. We are going to do this by using the `cds--header` class provided by\ncarbon. So in `header.component.ts` lets hostbind that class.\n\n```javascript\nimport { Component, HostBinding } from '@angular/core';\n ...\n @HostBinding('class.cds--header') headerClass = true;\n```\n\n### Create pages\n\nNext thing we need to do is create the files for our content. These files will\nbe located in the `app` folder inside of `src`. It should be a sibling of\n`header`.\n\nOur app will have two pages. First, we need a landing page. Go ahead and stop\nyour development server (with `CTRL-C`) and then:\n\n```bash\nng g module home --routing --lint-fix\nng g component home/landing-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/home\n├── landing-page\n│ ├── landing-page.component.html\n│ ├── landing-page.component.scss\n│ ├── landing-page.component.spec.ts\n│ └── landing-page.component.ts\n├── home-routing.module.ts\n└── home-page.module.ts\n```\n\nAnd a repo page:\n\n```bash\nng g module repositories --routing --lint-fix\nng g component repositories/repo-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/repositories\n├── repo-page\n│ ├── repo-page.component.html\n│ ├── repo-page.component.scss\n│ ├── repo-page.component.spec.ts\n│ └── repo-page.component.ts\n├── repositories-routing.module.ts\n└── repositories.module.ts\n```\n\nNow you can restart your server with `npm start`.\n\n### Add routing\n\nWe need to update routing functionality to enable the loading of `repositories`.\nInside `app-routing.module.ts` we'll add the following code in the routes array:\n\n```javascript path=src/app-routing.module.ts\nconst routes: Routes = [\n {\n path: '',\n loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),\n },\n {\n path: 'repos',\n loadChildren: () =>\n import('./repositories/repositories.module').then(\n (m) => m.RepositoriesModule\n ),\n },\n];\n```\n\nAnd modify the `NgModule` declaration to use the hash router:\n\n```javascript path=src/app-routing.module.ts\n@NgModule({\n imports: [RouterModule.forRoot(routes, { useHash: true })],\n exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n```\n\nAnd add routes for the landing and repo pages:\n\n```javascript path=src/app/home/home-routing.module.ts\nimport { LandingPageComponent } from './landing-page/landing-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: LandingPageComponent,\n },\n];\n```\n\n\n\n```javascript path=src/app/repositories/repositories-routing.module.ts\nimport { RepoPageComponent } from './repo-page/repo-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: RepoPageComponent\n }\n];\n```\n\n\n\nAfter that we need to do a couple quick fixes to the UI Shell to have it route\nto the repo page.\n\n```html path=src/app/header/header.component.html\nRepositories\n```\n\nYou should now have a working header that routes to the repos pages without full\npage reload!\n\n### Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step\nand demonstrate a couple related concepts.\n\n#### Continuous integration (CI) check\n\n\n\n**Note:** Before you run any tests, make sure that you are using ChromeHeadless\nin `karma.conf.js` instead of Chrome.\n\n\n\nWe have `lint` and `test` scripts defined in `package.json` that verify file\nformatting for files that have been touched since the last Git commit. You'd\ntypically also have that script run your test suite as part of your CI build. Go\nahead and make sure everything looks good with:\n\n```bash\nng lint --fix\nnpm run lint && npm test\n```\n\n\n\n**Note:** If this gives an error, it's likely that some of your source files are\nnot properly formatted.\n\n\n\n#### Git commit and push\n\nBefore we can create a pull request, we need to stage and commit all of our\nchanges:\n\n```bash\ngit add --all && git commit -m \"feat(tutorial): complete step 1\"\n```\n\nThen, push to your repository:\n\n```bash\ngit push origin angular-step-1\n```\n\n\n\n**Note:** If your Git remote protocol is HTTPS instead of SSH, you may be\nprompted to authenticate with GitHub when you push changes. If your GitHub\naccount has two-factor authentication enabled, we recommend that you follow\nthese instructions to\n[create a personal access token for the command line](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line).\nThat lets you use your token instead of password when performing Git operations\nover HTTPS.\n\n\n\n\n\n**Note:** If you receive a `non-fast-forward` error, it's likely that your\nforked repository is behind the original repository and needs updated. This can\nhappen if the tutorial was updated after you began working on it. To fix, run\n`git pull upstream angular-step-1` to merge the changes into your branch, then\nyou can try pushing again. Or, you can\n[manually merge](https://help.github.com/en/articles/syncing-a-fork) in the\nupstream changes.\n\n\n\n#### Pull request (PR)\n\nFinally, visit\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nto \"Compare & pull request\". In doing so, make sure that you are comparing to\n`angular-step-1` into `base: angular-step-1`. Take notice of the\n[Netlify](https://www.netlify.com) bot that deploys a preview of your PR every\ntime that you push new commits. These previews can be shared and viewed by\nanybody to assist the PR review process.\n\n\n\n**Note:** Your tutorial step will be automatically reviewed based on the status\nof your tests. Ensure that your tests pass when you submit your PR. Expect your\ntutorial step PRs to be reviewed by the Carbon team but not merged. We'll close\nyour PR so we can keep the repository's remote branches pristine and ready for\nthe next person!\n\n\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/developing/angular-tutorial/step-1.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
+{"componentChunkName":"component---src-pages-developing-angular-tutorial-step-1-mdx","path":"/developing/angular-tutorial/step-1/","result":{"pageContext":{"frontmatter":{"title":"1. Installing Carbon","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"relativePagePath":"/developing/angular-tutorial/step-1.mdx","titleType":"prepend","MdxNode":{"id":"08bd00f4-5b23-5894-b075-fda86a87c1f1","children":[],"parent":"4aabceae-feb7-5267-8485-7ca69dcc3a24","internal":{"content":"---\ntitle: 1. Installing Carbon\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n\n\nStarting with the Carbon Angular, there are two ways to begin working with\nCarbon components. By the end, these two methods will produce the same result.\n\n\n\n\n\nPrerequisites\nInstall Angular CLI\nCreate an Angular App\nInstall Carbon\nRun the app\nAdd UI Shell\nCreate pages\nAdd routing\nSubmit pull request\n\n\n\n## Preview\n\nA [preview](https://angular-step-2-carbon-tutorial.netlify.com) of what you will\nbuild:\n\n\n\n\n\n**Note:** If you get lint errors when you copy the code from the snippets, run\n`ng lint --fix` to fix them.\n\n\n\n## Prerequisites\n\n### Fork, clone and branch\n\nThis tutorial has an accompanying GitHub repository called\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nthat we’ll use as a starting point for each step.\n\n### Fork\n\nTo begin, fork\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nusing your GitHub account.\n\n### Clone\n\nGo to your forked repository, copy the SSH or HTTPS URL and in your terminal run\nthe two commands to get the repository in your local file system and enter that\ndirectory.\n\n```bash\ngit clone [your fork SSH/HTTPS]\ncd carbon-tutorial-angular\n```\n\n### Add upstream remote\n\nAdd a remote called `upstream` so we can eventually submit a pull request once\nyou have completed this tutorial step.\n\n##### SSH:\n\n```bash\ngit remote add upstream git@github.com:carbon-design-system/carbon-tutorial-angular.git\n```\n\nOr, if you prefer to use HTTPS instead of SSH with your remotes:\n\n##### HTTPS:\n\n```bash\ngit remote add upstream https://github.com/carbon-design-system/carbon-tutorial-angular.git\n```\n\nVerify that your forked repository remotes are correct:\n\n```bash\ngit remote -v\n```\n\nYour terminal should output something like this:\n\n```bash\norigin\t[your forked repo] (fetch)\norigin\t[your forked repo] (push)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (fetch)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (push)\n```\n\n### Branch\n\nNow that we have our repository set up, let's check out the branch for this\ntutorial step's starting point. Run the two commands:\n\n```bash\ngit fetch upstream\ngit checkout -b angular-step-1 upstream/angular-step-1\n```\n\n### Install Angular CLI\n\nSince we are starting from scratch, we need to first install Angular CLI.\nCurrently you need to install Angular CLI Version 8.x to work through this\ntutorial.\n\n```bash\nnpm install -g @angular/cli\n```\n\n\n\n**Note:** If you are using macOS you might need to execute as a `sudo` command.\n\n\n\n### Create an Angular App\n\nNow that we have our environment set up, starting a new Angular app is easy! If\nyou haven't set up the environment yet, please do so using the steps provided in\nPrerequisites (above). We will be using the Angular CLI to create and generate\nour components. It can also generate services, router, components, and\ndirectives.\n\nTo create a new Angular project with Angular CLI, just run:\n\n```bash\nng new carbon-angular-tutorial\n```\n\nThis will create the new project within the current directory. Make sure you do\nthis within the cloned fork of the project. When you get prompted, enter the\nfollowing.\n\n```bash\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS\n```\n\nThis command will install the Angular app with all the configurations needed.\nWithin the project folder `carbon-angular-tutorial`, the `src` directory should\nhave the following structure:\n\n```bash\ncarbon-angular-tutorial\n...\n ├── src\n ├── app\n │ ├── app-routing.module.ts\n │ ├── app.component.html\n │ ├── app.component.scss\n │ ├── app.component.spec.ts\n │ ├── app.component.ts\n │ └── app.module.ts\n ├── assets\n ├── environments\n │ ├── environment.prod.ts\n │ └── environment.ts\n ├── favicon.ico\n ├── index.html\n ├── main.ts\n ├── polyfills.ts\n ├── styles.scss\n └── test.ts\n```\n\n### Install Carbon\n\nEven though we installed some dependencies while creating the new app, we've yet\nto install the Carbon packages.\n\n- `carbon-components` - Component styles\n- `carbon-components-angular` - Angular components\n- `@carbon/icons` - Carbon icons\n\n```bash\nnpm install carbon-components carbon-components-angular @carbon/icons\n```\n\n#### Import carbon-components styles\n\nIn `src/styles.scss`, import the Carbon styles by adding the following to the\ntop of the file:\n\n```scss path=src/styles.scss\n@import '~carbon-components/scss/globals/scss/styles';\n```\n\n### Run the app\n\nNow we can run our app for a quick preview inside the browser.\n\n```bash\nnpm start\n```\n\nYour app should now be running with the message:\n`** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **`\n\nBefore we start adding components we want to start with an empty project, so\ndelete everything in `app.component.html` except for the `router-outler`. We\nwill also have to delete the test that was associated with this code. So in\n`app.component.spec.ts`, delete the `should render title` and\n`should have as title 'carbon-angular-tutorial'` test.\n\n### Add UI Shell\n\nNext, we're going to create an Angular component called `Header` to use with the\nUI Shell Carbon component. Using Angular CLI we will create this component\ninside the `src/app` directory.\n\n```bash\nng g component header --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/header\n├── header.component.html\n├── header.component.scss\n├── header.component.spec.ts\n└── header.component.ts\n```\n\n#### Import UI Shell\n\nNext we'll import our Carbon UI Shell components into `app.module.ts`,\n`app.component.spec.ts` and `header.component.spec.ts`. Set up the file like so:\n\n\n```javascript path=src/app/app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { HeaderComponent } from './header/header.component';\n\n// carbon-components-angular default imports\nimport { UIShellModule, IconModule } from 'carbon-components-angular';\n\n@NgModule({\n declarations: [\n AppComponent,\n HeaderComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n UIShellModule,\n IconModule\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimport { UIShellModule } from 'carbon-components-angular/ui-shell/ui-shell.module';\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nTestBed.configureTestingModule({\n declarations: [HeaderComponent],\n imports: [UIShellModule]\n});\n```\n\n\n\n\n**Note:** You can find a description of the different components used in UI\nShell in our\n[carbon-components-angular](https://github.com/IBM/carbon-components-angular/tree/master/src/ui-shell)\npackage.\n\n\n\n#### Import and register icons\n\nNow let’s import the icons from our `@carbon/icons` package. To improve tree\nshaking & keep the size of our app small, import only the required icons. To do\nso, import `Notification20`, `UserAvatar20`, and `AppSwitcher20` in\n`app.module.ts`.\n\n\n```javascript path=src/app/header/app.modules.ts\nimport Notification20 from '@carbon/icons/es/notification/20';\nimport UserAvatar20 from '@carbon/icons/es/user--avatar/20';\nimport AppSwitcher20 from '@carbon/icons/es/app-switcher/20';\n```\n\n\nNow you need to register the icon via `IconService` that also needs to be\nimported from `carbon-components-angular` module. After importing IconService\nyou need to inject it in component constructor and us it in OnInit life cycle\ncomponent hook. There are 2 methods for icon registration `.register()` which\naccepts only one icon and `.registerAll()` which accepts array of icons. As we\nare going to use more than one icon we are going to use the later method as\nbelow.\n\n\n```javascript path=src/app/header/header.component.ts\nimport { IconService } from \"carbon-components-angular\";\n...\n\nconstructor(protected iconService: IconService) {}\n\n ngOnInit() {\n this.iconService.registerAll([Notification20]);\n }\n```\n\n\nNext step is to import the `IconModule` in the `AppModule` module where the\n`HeaderComponent` is declared.\n\n\n```javascript path=src/app/header/header.component.ts\nimport { IconModule } from \"carbon-components-angular\";\n...\n\nimports: [\n ...\n IconModule\n]\n```\n\n\nNow the icon is ready to be used in template code. Template in\n`header.component.html` should look like this:\n\n\n```html path=src/app/header/header.component.html\n\n \n Repositories\n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n\nNotice that the icon names are the same as their file path. This how the\ndirective queries the service for the icon.\n\nNext import the header component in `app.component.spec.ts` and add the\ncomponent in `app.component.html`\n\n\n```javascript path=src/app/app.component.spec.ts\nimport { HeaderComponent } from './header/header.component';\n```\n\n\n```javascript path=src/app/app.component.spec.ts\ndeclarations: [HeaderComponent];\n```\n\n```html path=src/app/app.component.html\n\n\n \n\n```\n\nLet's add some padding to the top of the document, so the content is below the\nheader. We are going to do this by using the `cds--header` class provided by\ncarbon. So in `header.component.ts` lets hostbind that class.\n\n```javascript\nimport { Component, HostBinding } from '@angular/core';\n ...\n @HostBinding('class.cds--header') headerClass = true;\n```\n\n### Create pages\n\nNext thing we need to do is create the files for our content. These files will\nbe located in the `app` folder inside of `src`. It should be a sibling of\n`header`.\n\nOur app will have two pages. First, we need a landing page. Go ahead and stop\nyour development server (with `CTRL-C`) and then:\n\n```bash\nng g module home --routing --lint-fix\nng g component home/landing-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/home\n├── landing-page\n│ ├── landing-page.component.html\n│ ├── landing-page.component.scss\n│ ├── landing-page.component.spec.ts\n│ └── landing-page.component.ts\n├── home-routing.module.ts\n└── home-page.module.ts\n```\n\nAnd a repo page:\n\n```bash\nng g module repositories --routing --lint-fix\nng g component repositories/repo-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/repositories\n├── repo-page\n│ ├── repo-page.component.html\n│ ├── repo-page.component.scss\n│ ├── repo-page.component.spec.ts\n│ └── repo-page.component.ts\n├── repositories-routing.module.ts\n└── repositories.module.ts\n```\n\nNow you can restart your server with `npm start`.\n\n### Add routing\n\nWe need to update routing functionality to enable the loading of `repositories`.\nInside `app-routing.module.ts` we'll add the following code in the routes array:\n\n```javascript path=src/app-routing.module.ts\nconst routes: Routes = [\n {\n path: '',\n loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),\n },\n {\n path: 'repos',\n loadChildren: () =>\n import('./repositories/repositories.module').then(\n (m) => m.RepositoriesModule\n ),\n },\n];\n```\n\nAnd modify the `NgModule` declaration to use the hash router:\n\n```javascript path=src/app-routing.module.ts\n@NgModule({\n imports: [RouterModule.forRoot(routes, { useHash: true })],\n exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n```\n\nAnd add routes for the landing and repo pages:\n\n```javascript path=src/app/home/home-routing.module.ts\nimport { LandingPageComponent } from './landing-page/landing-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: LandingPageComponent,\n },\n];\n```\n\n\n\n```javascript path=src/app/repositories/repositories-routing.module.ts\nimport { RepoPageComponent } from './repo-page/repo-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: RepoPageComponent\n }\n];\n```\n\n\n\nAfter that we need to do a couple quick fixes to the UI Shell to have it route\nto the repo page.\n\n```html path=src/app/header/header.component.html\nRepositories\n```\n\nYou should now have a working header that routes to the repos pages without full\npage reload!\n\n### Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step\nand demonstrate a couple related concepts.\n\n#### Continuous integration (CI) check\n\n\n\n**Note:** Before you run any tests, make sure that you are using ChromeHeadless\nin `karma.conf.js` instead of Chrome.\n\n\n\nWe have `lint` and `test` scripts defined in `package.json` that verify file\nformatting for files that have been touched since the last Git commit. You'd\ntypically also have that script run your test suite as part of your CI build. Go\nahead and make sure everything looks good with:\n\n```bash\nng lint --fix\nnpm run lint && npm test\n```\n\n\n\n**Note:** If this gives an error, it's likely that some of your source files are\nnot properly formatted.\n\n\n\n#### Git commit and push\n\nBefore we can create a pull request, we need to stage and commit all of our\nchanges:\n\n```bash\ngit add --all && git commit -m \"feat(tutorial): complete step 1\"\n```\n\nThen, push to your repository:\n\n```bash\ngit push origin angular-step-1\n```\n\n\n\n**Note:** If your Git remote protocol is HTTPS instead of SSH, you may be\nprompted to authenticate with GitHub when you push changes. If your GitHub\naccount has two-factor authentication enabled, we recommend that you follow\nthese instructions to\n[create a personal access token for the command line](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line).\nThat lets you use your token instead of password when performing Git operations\nover HTTPS.\n\n\n\n\n\n**Note:** If you receive a `non-fast-forward` error, it's likely that your\nforked repository is behind the original repository and needs updated. This can\nhappen if the tutorial was updated after you began working on it. To fix, run\n`git pull upstream angular-step-1` to merge the changes into your branch, then\nyou can try pushing again. Or, you can\n[manually merge](https://help.github.com/en/articles/syncing-a-fork) in the\nupstream changes.\n\n\n\n#### Pull request (PR)\n\nFinally, visit\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nto \"Compare & pull request\". In doing so, make sure that you are comparing to\n`angular-step-1` into `base: angular-step-1`. Take notice of the\n[Netlify](https://www.netlify.com) bot that deploys a preview of your PR every\ntime that you push new commits. These previews can be shared and viewed by\nanybody to assist the PR review process.\n\n\n\n**Note:** Your tutorial step will be automatically reviewed based on the status\nof your tests. Ensure that your tests pass when you submit your PR. Expect your\ntutorial step PRs to be reviewed by the Carbon team but not merged. We'll close\nyour PR so we can keep the repository's remote branches pristine and ready for\nthe next person!\n\n\n","type":"Mdx","contentDigest":"11456707698d493c810a9f921d9e3668","owner":"gatsby-plugin-mdx","counter":4912},"frontmatter":{"title":"1. Installing Carbon","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"exports":{},"rawBody":"---\ntitle: 1. Installing Carbon\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n\n\nStarting with the Carbon Angular, there are two ways to begin working with\nCarbon components. By the end, these two methods will produce the same result.\n\n\n\n\n\nPrerequisites\nInstall Angular CLI\nCreate an Angular App\nInstall Carbon\nRun the app\nAdd UI Shell\nCreate pages\nAdd routing\nSubmit pull request\n\n\n\n## Preview\n\nA [preview](https://angular-step-2-carbon-tutorial.netlify.com) of what you will\nbuild:\n\n\n\n\n\n**Note:** If you get lint errors when you copy the code from the snippets, run\n`ng lint --fix` to fix them.\n\n\n\n## Prerequisites\n\n### Fork, clone and branch\n\nThis tutorial has an accompanying GitHub repository called\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nthat we’ll use as a starting point for each step.\n\n### Fork\n\nTo begin, fork\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nusing your GitHub account.\n\n### Clone\n\nGo to your forked repository, copy the SSH or HTTPS URL and in your terminal run\nthe two commands to get the repository in your local file system and enter that\ndirectory.\n\n```bash\ngit clone [your fork SSH/HTTPS]\ncd carbon-tutorial-angular\n```\n\n### Add upstream remote\n\nAdd a remote called `upstream` so we can eventually submit a pull request once\nyou have completed this tutorial step.\n\n##### SSH:\n\n```bash\ngit remote add upstream git@github.com:carbon-design-system/carbon-tutorial-angular.git\n```\n\nOr, if you prefer to use HTTPS instead of SSH with your remotes:\n\n##### HTTPS:\n\n```bash\ngit remote add upstream https://github.com/carbon-design-system/carbon-tutorial-angular.git\n```\n\nVerify that your forked repository remotes are correct:\n\n```bash\ngit remote -v\n```\n\nYour terminal should output something like this:\n\n```bash\norigin\t[your forked repo] (fetch)\norigin\t[your forked repo] (push)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (fetch)\nupstream\tgit@github.com:carbon-design-system/carbon-tutorial-angular.git (push)\n```\n\n### Branch\n\nNow that we have our repository set up, let's check out the branch for this\ntutorial step's starting point. Run the two commands:\n\n```bash\ngit fetch upstream\ngit checkout -b angular-step-1 upstream/angular-step-1\n```\n\n### Install Angular CLI\n\nSince we are starting from scratch, we need to first install Angular CLI.\nCurrently you need to install Angular CLI Version 8.x to work through this\ntutorial.\n\n```bash\nnpm install -g @angular/cli\n```\n\n\n\n**Note:** If you are using macOS you might need to execute as a `sudo` command.\n\n\n\n### Create an Angular App\n\nNow that we have our environment set up, starting a new Angular app is easy! If\nyou haven't set up the environment yet, please do so using the steps provided in\nPrerequisites (above). We will be using the Angular CLI to create and generate\nour components. It can also generate services, router, components, and\ndirectives.\n\nTo create a new Angular project with Angular CLI, just run:\n\n```bash\nng new carbon-angular-tutorial\n```\n\nThis will create the new project within the current directory. Make sure you do\nthis within the cloned fork of the project. When you get prompted, enter the\nfollowing.\n\n```bash\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS\n```\n\nThis command will install the Angular app with all the configurations needed.\nWithin the project folder `carbon-angular-tutorial`, the `src` directory should\nhave the following structure:\n\n```bash\ncarbon-angular-tutorial\n...\n ├── src\n ├── app\n │ ├── app-routing.module.ts\n │ ├── app.component.html\n │ ├── app.component.scss\n │ ├── app.component.spec.ts\n │ ├── app.component.ts\n │ └── app.module.ts\n ├── assets\n ├── environments\n │ ├── environment.prod.ts\n │ └── environment.ts\n ├── favicon.ico\n ├── index.html\n ├── main.ts\n ├── polyfills.ts\n ├── styles.scss\n └── test.ts\n```\n\n### Install Carbon\n\nEven though we installed some dependencies while creating the new app, we've yet\nto install the Carbon packages.\n\n- `carbon-components` - Component styles\n- `carbon-components-angular` - Angular components\n- `@carbon/icons` - Carbon icons\n\n```bash\nnpm install carbon-components carbon-components-angular @carbon/icons\n```\n\n#### Import carbon-components styles\n\nIn `src/styles.scss`, import the Carbon styles by adding the following to the\ntop of the file:\n\n```scss path=src/styles.scss\n@import '~carbon-components/scss/globals/scss/styles';\n```\n\n### Run the app\n\nNow we can run our app for a quick preview inside the browser.\n\n```bash\nnpm start\n```\n\nYour app should now be running with the message:\n`** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **`\n\nBefore we start adding components we want to start with an empty project, so\ndelete everything in `app.component.html` except for the `router-outler`. We\nwill also have to delete the test that was associated with this code. So in\n`app.component.spec.ts`, delete the `should render title` and\n`should have as title 'carbon-angular-tutorial'` test.\n\n### Add UI Shell\n\nNext, we're going to create an Angular component called `Header` to use with the\nUI Shell Carbon component. Using Angular CLI we will create this component\ninside the `src/app` directory.\n\n```bash\nng g component header --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/header\n├── header.component.html\n├── header.component.scss\n├── header.component.spec.ts\n└── header.component.ts\n```\n\n#### Import UI Shell\n\nNext we'll import our Carbon UI Shell components into `app.module.ts`,\n`app.component.spec.ts` and `header.component.spec.ts`. Set up the file like so:\n\n\n```javascript path=src/app/app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { HeaderComponent } from './header/header.component';\n\n// carbon-components-angular default imports\nimport { UIShellModule, IconModule } from 'carbon-components-angular';\n\n@NgModule({\n declarations: [\n AppComponent,\n HeaderComponent\n ],\n imports: [\n BrowserModule,\n AppRoutingModule,\n UIShellModule,\n IconModule\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nimport { UIShellModule } from 'carbon-components-angular/ui-shell/ui-shell.module';\n```\n\n\n\n```javascript path=src/app/app.component.spec.ts,src/app/header/header.component.spec.ts\nTestBed.configureTestingModule({\n declarations: [HeaderComponent],\n imports: [UIShellModule]\n});\n```\n\n\n\n\n**Note:** You can find a description of the different components used in UI\nShell in our\n[carbon-components-angular](https://github.com/IBM/carbon-components-angular/tree/master/src/ui-shell)\npackage.\n\n\n\n#### Import and register icons\n\nNow let’s import the icons from our `@carbon/icons` package. To improve tree\nshaking & keep the size of our app small, import only the required icons. To do\nso, import `Notification20`, `UserAvatar20`, and `AppSwitcher20` in\n`app.module.ts`.\n\n\n```javascript path=src/app/header/app.modules.ts\nimport Notification20 from '@carbon/icons/es/notification/20';\nimport UserAvatar20 from '@carbon/icons/es/user--avatar/20';\nimport AppSwitcher20 from '@carbon/icons/es/app-switcher/20';\n```\n\n\nNow you need to register the icon via `IconService` that also needs to be\nimported from `carbon-components-angular` module. After importing IconService\nyou need to inject it in component constructor and us it in OnInit life cycle\ncomponent hook. There are 2 methods for icon registration `.register()` which\naccepts only one icon and `.registerAll()` which accepts array of icons. As we\nare going to use more than one icon we are going to use the later method as\nbelow.\n\n\n```javascript path=src/app/header/header.component.ts\nimport { IconService } from \"carbon-components-angular\";\n...\n\nconstructor(protected iconService: IconService) {}\n\n ngOnInit() {\n this.iconService.registerAll([Notification20]);\n }\n```\n\n\nNext step is to import the `IconModule` in the `AppModule` module where the\n`HeaderComponent` is declared.\n\n\n```javascript path=src/app/header/header.component.ts\nimport { IconModule } from \"carbon-components-angular\";\n...\n\nimports: [\n ...\n IconModule\n]\n```\n\n\nNow the icon is ready to be used in template code. Template in\n`header.component.html` should look like this:\n\n\n```html path=src/app/header/header.component.html\n\n \n Repositories\n \n \n \n \n \n \n \n \n \n \n \n \n\n```\n\n\nNotice that the icon names are the same as their file path. This how the\ndirective queries the service for the icon.\n\nNext import the header component in `app.component.spec.ts` and add the\ncomponent in `app.component.html`\n\n\n```javascript path=src/app/app.component.spec.ts\nimport { HeaderComponent } from './header/header.component';\n```\n\n\n```javascript path=src/app/app.component.spec.ts\ndeclarations: [HeaderComponent];\n```\n\n```html path=src/app/app.component.html\n\n\n \n\n```\n\nLet's add some padding to the top of the document, so the content is below the\nheader. We are going to do this by using the `cds--header` class provided by\ncarbon. So in `header.component.ts` lets hostbind that class.\n\n```javascript\nimport { Component, HostBinding } from '@angular/core';\n ...\n @HostBinding('class.cds--header') headerClass = true;\n```\n\n### Create pages\n\nNext thing we need to do is create the files for our content. These files will\nbe located in the `app` folder inside of `src`. It should be a sibling of\n`header`.\n\nOur app will have two pages. First, we need a landing page. Go ahead and stop\nyour development server (with `CTRL-C`) and then:\n\n```bash\nng g module home --routing --lint-fix\nng g component home/landing-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/home\n├── landing-page\n│ ├── landing-page.component.html\n│ ├── landing-page.component.scss\n│ ├── landing-page.component.spec.ts\n│ └── landing-page.component.ts\n├── home-routing.module.ts\n└── home-page.module.ts\n```\n\nAnd a repo page:\n\n```bash\nng g module repositories --routing --lint-fix\nng g component repositories/repo-page --lint-fix\n```\n\n##### Folder structure\n\n```bash\nsrc/app/repositories\n├── repo-page\n│ ├── repo-page.component.html\n│ ├── repo-page.component.scss\n│ ├── repo-page.component.spec.ts\n│ └── repo-page.component.ts\n├── repositories-routing.module.ts\n└── repositories.module.ts\n```\n\nNow you can restart your server with `npm start`.\n\n### Add routing\n\nWe need to update routing functionality to enable the loading of `repositories`.\nInside `app-routing.module.ts` we'll add the following code in the routes array:\n\n```javascript path=src/app-routing.module.ts\nconst routes: Routes = [\n {\n path: '',\n loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),\n },\n {\n path: 'repos',\n loadChildren: () =>\n import('./repositories/repositories.module').then(\n (m) => m.RepositoriesModule\n ),\n },\n];\n```\n\nAnd modify the `NgModule` declaration to use the hash router:\n\n```javascript path=src/app-routing.module.ts\n@NgModule({\n imports: [RouterModule.forRoot(routes, { useHash: true })],\n exports: [RouterModule],\n})\nexport class AppRoutingModule {}\n```\n\nAnd add routes for the landing and repo pages:\n\n```javascript path=src/app/home/home-routing.module.ts\nimport { LandingPageComponent } from './landing-page/landing-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: LandingPageComponent,\n },\n];\n```\n\n\n\n```javascript path=src/app/repositories/repositories-routing.module.ts\nimport { RepoPageComponent } from './repo-page/repo-page.component';\n\nconst routes: Routes = [\n {\n path: '',\n component: RepoPageComponent\n }\n];\n```\n\n\n\nAfter that we need to do a couple quick fixes to the UI Shell to have it route\nto the repo page.\n\n```html path=src/app/header/header.component.html\nRepositories\n```\n\nYou should now have a working header that routes to the repos pages without full\npage reload!\n\n### Submit pull request\n\nWe're going to submit a pull request to verify completion of this tutorial step\nand demonstrate a couple related concepts.\n\n#### Continuous integration (CI) check\n\n\n\n**Note:** Before you run any tests, make sure that you are using ChromeHeadless\nin `karma.conf.js` instead of Chrome.\n\n\n\nWe have `lint` and `test` scripts defined in `package.json` that verify file\nformatting for files that have been touched since the last Git commit. You'd\ntypically also have that script run your test suite as part of your CI build. Go\nahead and make sure everything looks good with:\n\n```bash\nng lint --fix\nnpm run lint && npm test\n```\n\n\n\n**Note:** If this gives an error, it's likely that some of your source files are\nnot properly formatted.\n\n\n\n#### Git commit and push\n\nBefore we can create a pull request, we need to stage and commit all of our\nchanges:\n\n```bash\ngit add --all && git commit -m \"feat(tutorial): complete step 1\"\n```\n\nThen, push to your repository:\n\n```bash\ngit push origin angular-step-1\n```\n\n\n\n**Note:** If your Git remote protocol is HTTPS instead of SSH, you may be\nprompted to authenticate with GitHub when you push changes. If your GitHub\naccount has two-factor authentication enabled, we recommend that you follow\nthese instructions to\n[create a personal access token for the command line](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line).\nThat lets you use your token instead of password when performing Git operations\nover HTTPS.\n\n\n\n\n\n**Note:** If you receive a `non-fast-forward` error, it's likely that your\nforked repository is behind the original repository and needs updated. This can\nhappen if the tutorial was updated after you began working on it. To fix, run\n`git pull upstream angular-step-1` to merge the changes into your branch, then\nyou can try pushing again. Or, you can\n[manually merge](https://help.github.com/en/articles/syncing-a-fork) in the\nupstream changes.\n\n\n\n#### Pull request (PR)\n\nFinally, visit\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nto \"Compare & pull request\". In doing so, make sure that you are comparing to\n`angular-step-1` into `base: angular-step-1`. Take notice of the\n[Netlify](https://www.netlify.com) bot that deploys a preview of your PR every\ntime that you push new commits. These previews can be shared and viewed by\nanybody to assist the PR review process.\n\n\n\n**Note:** Your tutorial step will be automatically reviewed based on the status\nof your tests. Ensure that your tests pass when you submit your PR. Expect your\ntutorial step PRs to be reviewed by the Carbon team but not merged. We'll close\nyour PR so we can keep the repository's remote branches pristine and ready for\nthe next person!\n\n\n","fileAbsolutePath":"/home/runner/work/carbon-website/carbon-website/src/pages/developing/angular-tutorial/step-1.mdx"}}},"staticQueryHashes":["1364590287","137577622","2102389209","2456312558","2746626797","3018647132","3037994772","768070550"]}
\ No newline at end of file
diff --git a/page-data/developing/angular-tutorial/step-2/page-data.json b/page-data/developing/angular-tutorial/step-2/page-data.json
index 5b9c6240d0d..44e57e24efa 100644
--- a/page-data/developing/angular-tutorial/step-2/page-data.json
+++ b/page-data/developing/angular-tutorial/step-2/page-data.json
@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-developing-angular-tutorial-step-2-mdx","path":"/developing/angular-tutorial/step-2/","result":{"pageContext":{"frontmatter":{"title":"2. Building pages","tabs":["Overview","Step 1","Step 2","Step 3","Step 4","Step 5","Wrapping up"]},"relativePagePath":"/developing/angular-tutorial/step-2.mdx","titleType":"prepend","MdxNode":{"id":"2fa2076a-8ae6-58a7-918a-69f9459e82a3","children":[],"parent":"535b1383-72c5-50be-b8d8-963096afdb7e","internal":{"content":"---\ntitle: 2. Building pages\ntabs:\n ['Overview', 'Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5', 'Wrapping up']\n---\n\nimport Preview from 'components/Preview';\n\n\n\nNow that we have a base Angular app, it's time to build a few static pages. In\nthis step, we'll become comfortable with the Carbon UI Shell, grid and various\nCarbon components.\n\n\n\n\n\nFork, clone and branch\nAdd grid\nAdd landing page grid\nBuild landing page\nStyle landing page\nAdd repo page grid\nBuild repo page\nStyle repo page\nSubmit pull request\n\n\n\n## Preview\n\nA [preview](https://angular-step-3-carbon-tutorial.netlify.com) of what you'll\nbuild:\n\n\n\n\n\n**Note:** If you get lint errors when you copy the code from the snippets, run\n`ng lint --fix` to fix them.\n\n\n\n## Fork, clone and branch\n\nThis tutorial has an accompanying GitHub repository called\n[carbon-tutorial-angular](https://github.com/carbon-design-system/carbon-tutorial-angular)\nthat we'll use as a starting point for each step. If you haven't forked and\ncloned that repository yet, and haven't added the upstream remote, go ahead and\ndo so by following the\n[step 1 instructions](/developing/angular-tutorial/step-1#fork-clone-and-branch).\n\n### Branch\n\nWith your repository all set up, let's check out the branch for this tutorial\nstep's starting point.\n\n```bash\ngit fetch upstream\ngit checkout -b angular-step-2 upstream/angular-step-2\n```\n\n\n\n**Note:** This builds on top of step 1, but be sure to check out the upstream\nstep 2 branch because it includes the static assets required to get through this\nstep.\n\n\n\n### Build and start app\n\nInstall the app's dependencies (in case you're starting fresh in your current\ndirectory and not continuing from the previous step):\n\n```bash\nnpm install\n```\n\nThen, start the app:\n\n```bash\nnpm start\n```\n\nYou should see something similar to where the\n[previous step](/developing/angular-tutorial/step-1) left off.\n\n## Add grid\n\nIn our last step we added our styles, components and icon packages. Now we are\ngoing to build the pages with the grid component.\n\nIn `styles.scss`, we need to configure our grid to use 16 columns instead of the\ndefault 12 columns. We do this by adding `grid-columns-16: true` in our\n`$feature-flags`. `$feature-flags` **must** be set before importing from\n`carbon-components`, otherwise they won't take affect.\n\n\n```css path=src/styles.scss\n$feature-flags: (\n grid-columns-16: true\n);\n```\n\n\nNext we'll import our Carbon grid component into `home.module.ts` and\n`landing-page.component.spec.ts`.\n\n```javascript path=src/app/home/landing-page/landing-page.component.spec.ts,src/app/home/home.module.ts\nimport { GridModule } from 'carbon-components-angular';\n...\n@NgModule({\n ...\n imports: [GridModule]\n})\n```\n\n## Add landing page grid\n\nLet's add our grid elements to `landing-page.component.html`.\n\nIn order to use the grid, we need to wrap everything in a `
`. We\ncan continue to make rows by adding a `
` inside the grid, as well as\nmake columns within those rows by adding\n`
Landing page grid\n\n\n\n**Pro tip:** `CTRL-L` toggles the layout in Sketch.\n\n\n\nWe'll break this down into three rows. The first row with the gray background\ndoesn't appear to need any columns. The second row with the white background\nlooks like it has two columns of different widths. The third row with the gray\nbackground looks like it has four columns of equal width.\n\nWe'll make rows like so:\n\n```html path=src/app/home/landing-page/landing-page.component.html\n
\n
\n
1
\n
\n
\n
7/16
\n
\n 8/16\n
\n
\n
\n
1/4
\n
1/4
\n
1/4
\n
1/4
\n
\n
\n```\n\nWe added a class of `cds--grid--full-width` to the grid container since our rows\nneed to expand the whole page without any margins. We also added some custom\nclasses like `landing-page`, `landing-page__banner`, `landing-page__r2`, etc.,\nwhich we will use later.\n\nAlso, take notice of the second row. The tab content only covers 7 columns at\nthis large viewport to prevent overly-large line lengths, so we needed to add a\n1 column offset `cds--offset-lg-1` to the second column to fill the full 16\ncolumns in the grid. Then, both of those columns have `'md': 4` so they are of\nequal width at medium-sized viewports.\n\n## Build landing page\n\nWe'll start adding HTML elements and components by row.\n\n### First row\n\nIn our first row we'll need a `Breadcrumb` component. First, let's import the\ncomponents we need in `home.module.ts` and `landing-page.component.spec.ts`.\n\n```javascript path=src/app/home/home.module.ts\nimport { BreadcrumbModule, GridModule } from 'carbon-components-angular';\n```\n\n\n\n```javascript path=src/app/home/landing-page/landing-page.component.spec.ts\nimports: [BreadcrumbModule, GridModule];\n```\n\nWe can now add our component to the first row, along with a header, like so:\n\n```html path=src/app/home/landing-page/landing-page.component.html\n
\n
\n \n Getting started \n \n
Design & build with Carbon
\n
\n
\n```\n\nYou may notice that the styles look off. Don't worry, we'll fix these later.\n\n### Second row\n\nIn our second row we'll need `Tabs` and `Button` components also in\n`home.module.ts` and `landing-page.component.spec.ts`. We'll update the\n`carbon-components-angular` import to:\n\n\n```javascript path=src/app/home/home.module.ts\nimport {\n BreadcrumbModule,\n ButtonModule,\n GridModule,\n TabsModule,\n} from 'carbon-components-angular';\n```\n\n\n```javascript path=src/app/home/landing-page/landing-page.component.spec.ts\nimports: [BreadcrumbModule, ButtonModule, GridModule, TabsModule];\n```\n\nNow we need to modify the second row to use the `Tab` component.\n\n```html path=src/app/home/landing-page/landing-page.component.html\n
\n
\n \n \n
\n
\n
7/16
\n \n 8/16\n
\n
\n
\n \n \n
\n
\n
\n Rapidly build beautiful and accessible experiences. The Carbon kit\n contains all resources you need to get started.\n
\n
\n
\n \n \n
\n
\n
\n Carbon provides styles and components in Vanilla, React, Angular,\n and Vue for anyone building on the web.\n
\n
\n
\n \n \n
\n
\n```\n\n\n\n**Note:** We're using the grid for the page layout, but we also need to apply\nthe grid within the tab content. When doing so, make sure the nested grid has\nthe expected `grid` > `row` > `col` DOM structure.\n\n\n\nHold up! If you were to run\n[DAP](https://www.ibm.com/able/dynamic-assessment-plug-in.html) to check for\naccessibility violations, you'd see\n`Multiple navigation landmarks must have unique labels specified with aria-label or aria-labelledby`\nbecause both the `Breadcrumb` and `Tabs` components use `
