{"componentChunkName":"component---src-pages-updates-migration-guide-design-mdx","path":"/updates/migration-guide/design/","result":{"pageContext":{"frontmatter":{"title":"Migration guide","description":"This guide includes everything you need to migrate your offering from an earlier version of Carbon to v10.","tabs":["Overview","Design","Develop"]},"relativePagePath":"/updates/migration-guide/design.mdx","titleType":"prepend","MdxNode":{"id":"a11e3780-4be4-53fa-99f1-897ba5be5a07","children":[],"parent":"a26ed0af-9bcb-5f79-a7eb-44d1f4938322","internal":{"content":"---\ntitle: Migration guide\ndescription: This guide includes everything you need to migrate your offering from an earlier version of Carbon to v10.\ntabs: ['Overview', 'Design', 'Develop']\n---\n\n<PageDescription>\n\nThe transition from v9 to v10 is primarily visual. The IBM color palette was updated between versions and a 16 column grid was introduced.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>IBM Design Language</AnchorLink>\n<AnchorLink>Design kit</AnchorLink>\n<AnchorLink>Elements</AnchorLink>\n<AnchorLink>Design migration strategy</AnchorLink>\n\n</AnchorLinks>\n\n## IBM Design Language\n\nCarbon v10 delivers the [IBM Design Language](https://www.ibm.com/design/language/) to product teams. It represents a complete visual refresh of the system, delivering the ethos of IBM Design. Carbon v10 is a modern, open-source framework for building digital products and experiences, with tooling and guidance on color, layout, typography, iconography, motion, patterns, and content. \n\n## Design kit\n\nAll components, colors, icons, typography, motion, and grid elements in the kit align with the IBM Design Language.\n\n### What changed\n\n- Sketch kit delivered with Sketch Cloud\n- New color tokens\n- Updated text styles\n- Updated spacing\n- Icon updates\n- Updated layer styles\n\n#### Sketch libraries\n\nDesigners can subscribe to the design kit library via Sketch Cloud, and updates to the contents of the kit will be pushed to subscribers as they become available.\n\n#### Icons, pictograms, and the full IBM color palette\n\nTo access the IBM Design Language icons, pictograms, and colors, subscribe to the [IBM Design Language libraries](/resources#color-grid-and-icons).\n\n#### Migrating to v10\n\nUpgrading to the v10 kit will not automatically change any files created in previous versions of the kit. Swapping v9 symbols for v10 symbols is a manual process.\n\nAlthough libraries from multiple versions of Carbon can exist in Sketch at the same time, you should avoid using v10 symbols in an app designed with v9.\n\n### Setting up the kit\n\nHead over to the [Get started guide](/get-started/design/sketch#get-the-kit) to set up the new Sketch libraries.\n\n## Elements\n\n### Themes and color\n\nCarbon offers four color themes. See the [theming guidelines](/guidelines/color/overview#themes) to learn how to use the themes, and visit the color migration guide to learn more about color tokens added in v10.\n\n<Row>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrating color\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-color.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Icons\n\nThe [icon library](/guidelines/icons/library) was updated and expanded with v10. The full library of icons and pictograms is available via the IBM Design Language icon [Sketch library](/guidelines/icons/usage#resources).\n\nAny v9 icons should be reviewed against the new icons before publishing. Wherever possible, replace old icons with an updated version.\n\n<Row>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Icon migration\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-icons.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Typography\n\nThe typeface for Carbon remains [IBM Plex](/guidelines/typography/overview/#typeface:-ibm-plex). The [type token](/guidelines/typography/overview#type-tokens-and-sets) architecture was redesigned for better clarity and flexibility, moving from a basic type scale model to a more robust token-based architecture. Work with your development team to discuss how this new architecture might affect your team's workflow.\n\n<Row>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Type migration\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-type.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Motion\n\nCarbon v10 adheres to IBM Design Language [motion standards](/guidelines/motion/basics), designed to bring unity and cohesion to all motion in a user interface. All interactions that include motion should abide by these standards.\n\n### Layout, grid, and spacing\n\nCarbon v10 uses the 16 column [2x Grid](/guidelines/2x-grid/basics). Carbon v10 will default to the 12-column grid with an option to switch to the 16-column grid. Designers starting on new layouts using v10 should use the 16-column grid.\n\nLayout and spacing token names were updated in v10 but the values remain the same.\n\n<Row>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Layout migration\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-layout.md#migrating\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Design migration strategy\n\nThe fastest approach to v10 migration starts with the front-end developer. Developers should update the product's front end code to v10 and conduct a visual review with team designers. The transition should not cause any major breaks in the UI but there will likely be layout and color issues. Product teams using v9 components in their code should see a mostly seamless code transition.\n\nThroughout visual review and iteration process, ask:\n\n- Are you using type tokens?\n- Are you using the color tokens correctly?\n- Is the spacing between components correct?\n- Do animations in the UI match the new motion standards?\n- Does the general layout still work, and does it express the IBM Design Language accurately and effectively?\n\nFollowing this review, work any development and design issues into your team's planning workflow.\n","type":"Mdx","contentDigest":"e7a92064cd1cb52bacc09b356744f283","counter":1687,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Migration guide","description":"This guide includes everything you need to migrate your offering from an earlier version of Carbon to v10.","tabs":["Overview","Design","Develop"]},"exports":{},"rawBody":"---\ntitle: Migration guide\ndescription: This guide includes everything you need to migrate your offering from an earlier version of Carbon to v10.\ntabs: ['Overview', 'Design', 'Develop']\n---\n\n<PageDescription>\n\nThe transition from v9 to v10 is primarily visual. The IBM color palette was updated between versions and a 16 column grid was introduced.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>IBM Design Language</AnchorLink>\n<AnchorLink>Design kit</AnchorLink>\n<AnchorLink>Elements</AnchorLink>\n<AnchorLink>Design migration strategy</AnchorLink>\n\n</AnchorLinks>\n\n## IBM Design Language\n\nCarbon v10 delivers the [IBM Design Language](https://www.ibm.com/design/language/) to product teams. It represents a complete visual refresh of the system, delivering the ethos of IBM Design. Carbon v10 is a modern, open-source framework for building digital products and experiences, with tooling and guidance on color, layout, typography, iconography, motion, patterns, and content. \n\n## Design kit\n\nAll components, colors, icons, typography, motion, and grid elements in the kit align with the IBM Design Language.\n\n### What changed\n\n- Sketch kit delivered with Sketch Cloud\n- New color tokens\n- Updated text styles\n- Updated spacing\n- Icon updates\n- Updated layer styles\n\n#### Sketch libraries\n\nDesigners can subscribe to the design kit library via Sketch Cloud, and updates to the contents of the kit will be pushed to subscribers as they become available.\n\n#### Icons, pictograms, and the full IBM color palette\n\nTo access the IBM Design Language icons, pictograms, and colors, subscribe to the [IBM Design Language libraries](/resources#color-grid-and-icons).\n\n#### Migrating to v10\n\nUpgrading to the v10 kit will not automatically change any files created in previous versions of the kit. Swapping v9 symbols for v10 symbols is a manual process.\n\nAlthough libraries from multiple versions of Carbon can exist in Sketch at the same time, you should avoid using v10 symbols in an app designed with v9.\n\n### Setting up the kit\n\nHead over to the [Get started guide](/get-started/design/sketch#get-the-kit) to set up the new Sketch libraries.\n\n## Elements\n\n### Themes and color\n\nCarbon offers four color themes. See the [theming guidelines](/guidelines/color/overview#themes) to learn how to use the themes, and visit the color migration guide to learn more about color tokens added in v10.\n\n<Row>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Migrating color\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-color.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Icons\n\nThe [icon library](/guidelines/icons/library) was updated and expanded with v10. The full library of icons and pictograms is available via the IBM Design Language icon [Sketch library](/guidelines/icons/usage#resources).\n\nAny v9 icons should be reviewed against the new icons before publishing. Wherever possible, replace old icons with an updated version.\n\n<Row>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Icon migration\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-icons.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Typography\n\nThe typeface for Carbon remains [IBM Plex](/guidelines/typography/overview/#typeface:-ibm-plex). The [type token](/guidelines/typography/overview#type-tokens-and-sets) architecture was redesigned for better clarity and flexibility, moving from a basic type scale model to a more robust token-based architecture. Work with your development team to discuss how this new architecture might affect your team's workflow.\n\n<Row>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Type migration\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-type.md\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n### Motion\n\nCarbon v10 adheres to IBM Design Language [motion standards](/guidelines/motion/basics), designed to bring unity and cohesion to all motion in a user interface. All interactions that include motion should abide by these standards.\n\n### Layout, grid, and spacing\n\nCarbon v10 uses the 16 column [2x Grid](/guidelines/2x-grid/basics). Carbon v10 will default to the 12-column grid with an option to switch to the 16-column grid. Designers starting on new layouts using v10 should use the 16-column grid.\n\nLayout and spacing token names were updated in v10 but the values remain the same.\n\n<Row>\n<Column colLg={4} colMd={4} noGutterSm>\n<ResourceCard\n    subTitle=\"Layout migration\"\n    href=\"https://github.com/carbon-design-system/carbon/blob/master/docs/migration/10.x-layout.md#migrating\"\n    >\n\n<MdxIcon name=\"github\" />\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Design migration strategy\n\nThe fastest approach to v10 migration starts with the front-end developer. Developers should update the product's front end code to v10 and conduct a visual review with team designers. The transition should not cause any major breaks in the UI but there will likely be layout and color issues. Product teams using v9 components in their code should see a mostly seamless code transition.\n\nThroughout visual review and iteration process, ask:\n\n- Are you using type tokens?\n- Are you using the color tokens correctly?\n- Is the spacing between components correct?\n- Do animations in the UI match the new motion standards?\n- Does the general layout still work, and does it express the IBM Design Language accurately and effectively?\n\nFollowing this review, work any development and design issues into your team's planning workflow.\n","fileAbsolutePath":"/zeit/767b4790/src/pages/updates/migration-guide/design.mdx"}}}}