{
    "componentChunkName": "component---src-pages-resources-mdx",
    "path": "/resources/",
    "result": {"pageContext":{"frontmatter":{"title":"Resources","Description":"Access files IBM Plex™, icons and grids in our linked repositories, find tools, download design, color and icon packages and watch tutorials. Learn how to request permission to use the IBM logo in IBM materials and discover the importance of designing for accessibility."},"relativePagePath":"/resources.mdx","titleType":"append","MdxNode":{"id":"8f4b53fd-9b19-5237-bc67-8f0c701968c5","children":[],"parent":"6808f8e7-0586-59e8-9911-46ac6d566412","internal":{"content":"---\ntitle: Resources\nDescription:\n  Access files IBM Plex™, icons and grids in our linked repositories, find\n  tools, download design, color and icon packages and watch tutorials. Learn how\n  to request permission to use the IBM logo in IBM materials and discover the\n  importance of designing for accessibility.\n---\n\nimport AddIcon from '@carbon/icons/es/add/16';\n\n<PageDescription>\n\nFind design tools and repositories for the IBM Plex® typeface and other elements used to express the IBM brand. Learn how to request the permission required to use the IBM 8-bar logo in IBM materials. View tutorials and discover the importance of designing for accessibility.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Design tools</AnchorLink>\n  <AnchorLink>Typography</AnchorLink>\n  <AnchorLink>Color</AnchorLink>\n  <AnchorLink>2x Grid</AnchorLink>\n  <AnchorLink>IBM logos</AnchorLink>\n  <AnchorLink>Iconography</AnchorLink>\n  <AnchorLink>Illustration</AnchorLink>\n  <AnchorLink>Photography</AnchorLink>\n  <AnchorLink>Data visualization</AnchorLink>\n  <AnchorLink>Animation</AnchorLink>\n  <AnchorLink>Other IBM resources</AnchorLink>\n</AnchorLinks>\n\n## Design tools\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Design Language library\"\n      href=\"https://www.figma.com/files/902667414815738345/project/35070940/%E2%9C%85-IBM-Design-Language?fuid=834811722516621897\"\n      >\n\n![Figma Icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Carbon all themes library\"\nhref=\"https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=58%3A2763&mode=design&t=eLDxgVJyvZR01HtA-1\"\n>\n\n![Figma Icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## Typography\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Plex® typeface latest release\"\n      aspectRatio=\"2:1\"\n      href=\"https://github.com/IBM/plex/releases/latest\"\n      >\n\n![GitHub icon](../images/resource-cards/github.png)\n\n  </ResourceCard>\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Plex® website\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/plex/\"\n      >\n\n![Eye Icon](../images/resource-cards/eye.png)\n\n  </ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Plex® on Adobe Fonts\"\n      aspectRatio=\"2:1\"\n      href=\"https://fonts.adobe.com/foundries/ibm\"\n      >\n\n![Adove Font Icon](../images/resource-cards/adobe.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Plex® on Google Fonts\"\n      aspectRatio=\"2:1\"\n      href=\"https://fonts.google.com/?query=ibm+plex\"\n      >\n\n![Google Fonts Icon](../images/resource-cards/google-fonts.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## Color\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM color palette (.ase and .clr)\"\n      actionIcon=\"download\"\n      href=\"https://github.com/carbon-design-system/carbon/raw/main/packages/colors/artifacts/IBM_Colors.zip\"\n      >\n\n![Zip Icon](../images/resource-cards/zip.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Color in UI\"\n      href=\"https://www.carbondesignsystem.com/elements/color/overview\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Web Content Accessibility Guidelines (WCAG) 2.1\"\nhref=\"https://www.w3.org/TR/WCAG20/\"\n>\n\n![Color Check Icon](../images/resource-cards/colorwheel.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Color contrast checker\"\nhref=\"https://marijohannessen.github.io/color-contrast-checker/\"\n>\n\n![Color Check Icon](../images/resource-cards/colorwheel.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## 2x Grid\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n  subTitle=\"2x Grid in UI: Overview\"\n  aspectRatio=\"2:1\"\n  href=\"https://carbondesignsystem.com/elements/2x-grid/overview/\"\n>\n\n![carbon icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"2x Grid template for video\"\naspectRatio=\"2:1\"\nactionIcon=\"download\"\nhref=\"https://www.ibm.com/design/language/files/2x_video_grid.ai\"\n>\n\n![illustrator icon](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n  subTitle=\"2x Grid in UI: The mini unit\"\n  aspectRatio=\"2:1\"\n  href=\"https://carbondesignsystem.com/elements/2x-grid/overview#mini-unit\"\n>\n\n![carbon icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## IBM logos\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle={<>Internal IBM logo request<br />(IBM ID required)</>}\n      href=\"https://www.ibm.com/brand/ibm-logos/logo-requests\"\n      >\n\n![ibm logo](../images/resource-cards/ibm.svg)\n\n  </ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n  subTitle={<>Third-party IBM logo request<br />(IBM ID required)</>}\n  href=\"https://ibm.my.workfront.com/requests/new?activeTab=tab-new-helpRequest&projectID=62b5b4ab00bd1899d2b6322f7ff09b9c&path=675712d60004897c9565fc8d16cb11fe\"\n>\n\n![IBM Icon](../images/resource-cards/ibm.svg)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n  subTitle={<>IBM co-branding<br />(IBM ID required)</>}\n  href=\"https://www.ibm.com/brand/ibm-logos/co-branding\"\n>\n\n![Bee Icon](../images/resource-cards/bee.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Rebus patterns\"\nhref=\"https://ibm.box.com/s/vth9qr6j9hvobxvizje5wa0vopv49jwp\"\n>\n\n![box icon](../images/resource-cards/box.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## Iconography\n\n<Title>UI icons</Title>\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"UI icon: Figma library\"\nhref=\"https://www.figma.com/design/J5c0d85dSJn9JnBhSYYLmD/IBM%C2%AE-UI-Icon-Library?node-id=63603-252&p=f&t=lw4WvhAcTTZpwla1-0\"\nactionIcon=\"launch\"\n>\n\n![Figma Icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI icon: Carbon library\"\n      actionIcon=\"launch\"\n      href=\"https://carbondesignsystem.com/elements/icons/library/\"\n      >\n\n![Carbon Design System icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI icon: Starter file\"\n      actionIcon=\"download\"\n      href=\"https://github.ibm.com/brand/ui-icons/raw/master/ui-icon-starter-file.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI icon: Submit a request\"\n      href=\"https://github.ibm.com/brand/ui-icons/issues/new/choose\"\n      >\n\n![Github Icon](../images/resource-cards/github.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n<Title>App icons</Title>\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"App icon: Figma library\"\n      actionIcon=\"launch\"\n      href=\"https://www.figma.com/design/o4FfbuyUsx948IgGJL42r4/IBM%C2%AE-App-Icon-Library?m=auto\"\n      >\n\n![Figma icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"App icon: Starter file\"\n      actionIcon=\"download\"\n      href=\"https://github.ibm.com/brand/App-icons/raw/master/app-icon-starter-file.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"App icon: Builder\"\n      actionIcon=\"download\"\n      href=\"https://github.ibm.com/carbon/app-icons/raw/master/App_Icon_Builder.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"App icon: Submit a request\"\n      actionIcon=\"launch\"\n      href=\"https://github.ibm.com/brand/App-icons/issues/new/choose\"\n      >\n\n![Github Icon](../images/resource-cards/github.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n      subTitle={<>App store graphics<br />(IBM ID required)</>}\n      href=\"https://github.ibm.com/brand/App-icons/tree/master/GooglePlay_FeatureGraphics\"\n      >\n\n![Github Icon](../images/resource-cards/github.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Apple MacOS app icons\"\nhref=\"https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/\"\n>\n\n![Apple Icon](../images/resource-cards/apple.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Apple iOS app icons\"\n      href=\"https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/\"\n      >\n\n![Apple Icon](../images/resource-cards/apple.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Windows UWP app icons\"\n      href=\"https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-design\"\n      >\n\n![Microsoft Icon](../images/resource-cards/microsoft.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Android app icons\"\n      href=\"https://developer.android.com/studio/write/image-asset-studio\"\n      >\n\n![Android Icon](../images/resource-cards/android.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n<Title>Pictograms</Title>\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Pictogram: Figma library\"\n      actionIcon=\"launch\"\n      href=\"https://www.figma.com/design/PkUl9UBuvA41GPpyl84NBc/IBM%C2%AE-Pictogram-Library?m=auto\"\n      >\n\n![Figma Icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Pictogram: Carbon library\"\n      actionIcon=\"launch\"\n      href=\"https://carbondesignsystem.com/elements/pictograms/library/\"\n      >\n\n![Carbon Design System icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Productive pictogram: Master file\"\n      actionIcon=\"download\"\n      href=\"https://github.com/carbon-design-system/carbon/raw/main/packages/pictograms/master/productive-pictogram-master.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Productive pictogram: Starter file\"\n      actionIcon=\"download\"\n      href=\"https://github.ibm.com/brand/Pictograms/raw/master/productive-pictogram-starter-file.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Expressive pictogram: Master file\"\n      actionIcon=\"download\"\n      href=\"https://github.com/carbon-design-system/carbon/raw/main/packages/pictograms/master/expressive-pictogram-master.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Pictogram: Submit a request\"\n      actionIcon=\"launch\"\n      href=\"https://github.ibm.com/brand/Pictograms/issues/new/choose\"\n      >\n\n![Github Icon](../images/resource-cards/github.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## Illustration\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Line style illustration kit\"\n      aspectRatio=\"2:1\"\n      href=\"https://github.com/carbon-design-system/design-language-website/raw/master/src/pages/illustration/Illustration-line-style-kit_v1.ai\"\n      actionIcon=\"download\"\n      >\n\n![illustrator icon](../images/resource-cards/illustrator.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Flat style illustration kit\"\n      aspectRatio=\"2:1\"\n      href=\"https://github.com/carbon-design-system/design-language-website/raw/master/src/pages/illustration/Illustration-flat-style-kit_v1.ai\"\n      actionIcon=\"download\"\n      >\n\n![illustrator icon](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Isometric style illustration kit\"\n      aspectRatio=\"2:1\"\n      href=\"https://github.com/carbon-design-system/design-language-website/raw/master/src/pages/illustration/Illustration-isometric-style-kit_v1.ai\"\n      actionIcon=\"download\"\n      >\n\n![illustrator icon](../images/resource-cards/illustrator.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Photography\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle={<>Photography assets<br />(IBM ID required)</>}\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/brand/imagery/photography/assets\"\n      >\n\n![Bee Icon](../images/resource-cards/bee.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Data visualization\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon data visualization\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.carbondesignsystem.com/data-visualization/getting-started\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon data visualization: Color palettes\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.carbondesignsystem.com/data-visualization/color-palettes/\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Animation\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Motion in UI\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.carbondesignsystem.com/elements/motion/overview\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM motion package\"\n      aspectRatio=\"2:1\"\n      href=\"http://npmjs.com/package/@carbon/motion\"\n      >\n\n![npm Icon](../images/resource-cards/npm.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM motion generator\"\n      aspectRatio=\"2:1\"\n      href=\"https://ibm.github.io/motion/\"\n      >\n\n![GitHub Icon](../images/resource-cards/github.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n       subTitle={<>Video guidance<br />(IBM ID required)</>}\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/brand/video/motion-graphics\"\n      >\n\n![IBM bee Icon](../images/resource-cards/bee.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Other IBM resources\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Getting started with Carbon\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.carbondesignsystem.com/designing/get-started\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle={<>Brand Center resource page<br />(IBM ID required)</>}\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/brand/resources\"\n      >\n\n![Bee Icon](../images/resource-cards/bee.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"00cd3e95192c182466fbb73f57e79354","owner":"gatsby-plugin-mdx","counter":1903},"frontmatter":{"title":"Resources","Description":"Access files IBM Plex™, icons and grids in our linked repositories, find tools, download design, color and icon packages and watch tutorials. Learn how to request permission to use the IBM logo in IBM materials and discover the importance of designing for accessibility."},"exports":{},"rawBody":"---\ntitle: Resources\nDescription:\n  Access files IBM Plex™, icons and grids in our linked repositories, find\n  tools, download design, color and icon packages and watch tutorials. Learn how\n  to request permission to use the IBM logo in IBM materials and discover the\n  importance of designing for accessibility.\n---\n\nimport AddIcon from '@carbon/icons/es/add/16';\n\n<PageDescription>\n\nFind design tools and repositories for the IBM Plex® typeface and other elements used to express the IBM brand. Learn how to request the permission required to use the IBM 8-bar logo in IBM materials. View tutorials and discover the importance of designing for accessibility.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Design tools</AnchorLink>\n  <AnchorLink>Typography</AnchorLink>\n  <AnchorLink>Color</AnchorLink>\n  <AnchorLink>2x Grid</AnchorLink>\n  <AnchorLink>IBM logos</AnchorLink>\n  <AnchorLink>Iconography</AnchorLink>\n  <AnchorLink>Illustration</AnchorLink>\n  <AnchorLink>Photography</AnchorLink>\n  <AnchorLink>Data visualization</AnchorLink>\n  <AnchorLink>Animation</AnchorLink>\n  <AnchorLink>Other IBM resources</AnchorLink>\n</AnchorLinks>\n\n## Design tools\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Design Language library\"\n      href=\"https://www.figma.com/files/902667414815738345/project/35070940/%E2%9C%85-IBM-Design-Language?fuid=834811722516621897\"\n      >\n\n![Figma Icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Carbon all themes library\"\nhref=\"https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=58%3A2763&mode=design&t=eLDxgVJyvZR01HtA-1\"\n>\n\n![Figma Icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## Typography\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Plex® typeface latest release\"\n      aspectRatio=\"2:1\"\n      href=\"https://github.com/IBM/plex/releases/latest\"\n      >\n\n![GitHub icon](../images/resource-cards/github.png)\n\n  </ResourceCard>\n  </Column>\n  <Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Plex® website\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/plex/\"\n      >\n\n![Eye Icon](../images/resource-cards/eye.png)\n\n  </ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Plex® on Adobe Fonts\"\n      aspectRatio=\"2:1\"\n      href=\"https://fonts.adobe.com/foundries/ibm\"\n      >\n\n![Adove Font Icon](../images/resource-cards/adobe.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM Plex® on Google Fonts\"\n      aspectRatio=\"2:1\"\n      href=\"https://fonts.google.com/?query=ibm+plex\"\n      >\n\n![Google Fonts Icon](../images/resource-cards/google-fonts.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## Color\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM color palette (.ase and .clr)\"\n      actionIcon=\"download\"\n      href=\"https://github.com/carbon-design-system/carbon/raw/main/packages/colors/artifacts/IBM_Colors.zip\"\n      >\n\n![Zip Icon](../images/resource-cards/zip.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Color in UI\"\n      href=\"https://www.carbondesignsystem.com/elements/color/overview\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Web Content Accessibility Guidelines (WCAG) 2.1\"\nhref=\"https://www.w3.org/TR/WCAG20/\"\n>\n\n![Color Check Icon](../images/resource-cards/colorwheel.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Color contrast checker\"\nhref=\"https://marijohannessen.github.io/color-contrast-checker/\"\n>\n\n![Color Check Icon](../images/resource-cards/colorwheel.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## 2x Grid\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n  subTitle=\"2x Grid in UI: Overview\"\n  aspectRatio=\"2:1\"\n  href=\"https://carbondesignsystem.com/elements/2x-grid/overview/\"\n>\n\n![carbon icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"2x Grid template for video\"\naspectRatio=\"2:1\"\nactionIcon=\"download\"\nhref=\"https://www.ibm.com/design/language/files/2x_video_grid.ai\"\n>\n\n![illustrator icon](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n  subTitle=\"2x Grid in UI: The mini unit\"\n  aspectRatio=\"2:1\"\n  href=\"https://carbondesignsystem.com/elements/2x-grid/overview#mini-unit\"\n>\n\n![carbon icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## IBM logos\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle={<>Internal IBM logo request<br />(IBM ID required)</>}\n      href=\"https://www.ibm.com/brand/ibm-logos/logo-requests\"\n      >\n\n![ibm logo](../images/resource-cards/ibm.svg)\n\n  </ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n  subTitle={<>Third-party IBM logo request<br />(IBM ID required)</>}\n  href=\"https://ibm.my.workfront.com/requests/new?activeTab=tab-new-helpRequest&projectID=62b5b4ab00bd1899d2b6322f7ff09b9c&path=675712d60004897c9565fc8d16cb11fe\"\n>\n\n![IBM Icon](../images/resource-cards/ibm.svg)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n  subTitle={<>IBM co-branding<br />(IBM ID required)</>}\n  href=\"https://www.ibm.com/brand/ibm-logos/co-branding\"\n>\n\n![Bee Icon](../images/resource-cards/bee.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Rebus patterns\"\nhref=\"https://ibm.box.com/s/vth9qr6j9hvobxvizje5wa0vopv49jwp\"\n>\n\n![box icon](../images/resource-cards/box.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## Iconography\n\n<Title>UI icons</Title>\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"UI icon: Figma library\"\nhref=\"https://www.figma.com/design/J5c0d85dSJn9JnBhSYYLmD/IBM%C2%AE-UI-Icon-Library?node-id=63603-252&p=f&t=lw4WvhAcTTZpwla1-0\"\nactionIcon=\"launch\"\n>\n\n![Figma Icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI icon: Carbon library\"\n      actionIcon=\"launch\"\n      href=\"https://carbondesignsystem.com/elements/icons/library/\"\n      >\n\n![Carbon Design System icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI icon: Starter file\"\n      actionIcon=\"download\"\n      href=\"https://github.ibm.com/brand/ui-icons/raw/master/ui-icon-starter-file.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"UI icon: Submit a request\"\n      href=\"https://github.ibm.com/brand/ui-icons/issues/new/choose\"\n      >\n\n![Github Icon](../images/resource-cards/github.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n<Title>App icons</Title>\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"App icon: Figma library\"\n      actionIcon=\"launch\"\n      href=\"https://www.figma.com/design/o4FfbuyUsx948IgGJL42r4/IBM%C2%AE-App-Icon-Library?m=auto\"\n      >\n\n![Figma icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"App icon: Starter file\"\n      actionIcon=\"download\"\n      href=\"https://github.ibm.com/brand/App-icons/raw/master/app-icon-starter-file.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"App icon: Builder\"\n      actionIcon=\"download\"\n      href=\"https://github.ibm.com/carbon/app-icons/raw/master/App_Icon_Builder.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"App icon: Submit a request\"\n      actionIcon=\"launch\"\n      href=\"https://github.ibm.com/brand/App-icons/issues/new/choose\"\n      >\n\n![Github Icon](../images/resource-cards/github.png)\n\n</ResourceCard>\n</Column>\n\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\n      subTitle={<>App store graphics<br />(IBM ID required)</>}\n      href=\"https://github.ibm.com/brand/App-icons/tree/master/GooglePlay_FeatureGraphics\"\n      >\n\n![Github Icon](../images/resource-cards/github.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n<ResourceCard\nsubTitle=\"Apple MacOS app icons\"\nhref=\"https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/\"\n>\n\n![Apple Icon](../images/resource-cards/apple.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Apple iOS app icons\"\n      href=\"https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/\"\n      >\n\n![Apple Icon](../images/resource-cards/apple.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Windows UWP app icons\"\n      href=\"https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-design\"\n      >\n\n![Microsoft Icon](../images/resource-cards/microsoft.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Android app icons\"\n      href=\"https://developer.android.com/studio/write/image-asset-studio\"\n      >\n\n![Android Icon](../images/resource-cards/android.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n<Title>Pictograms</Title>\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Pictogram: Figma library\"\n      actionIcon=\"launch\"\n      href=\"https://www.figma.com/design/PkUl9UBuvA41GPpyl84NBc/IBM%C2%AE-Pictogram-Library?m=auto\"\n      >\n\n![Figma Icon](../images/resource-cards/figma.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Pictogram: Carbon library\"\n      actionIcon=\"launch\"\n      href=\"https://carbondesignsystem.com/elements/pictograms/library/\"\n      >\n\n![Carbon Design System icon](../images/resource-cards/carbon.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Productive pictogram: Master file\"\n      actionIcon=\"download\"\n      href=\"https://github.com/carbon-design-system/carbon/raw/main/packages/pictograms/master/productive-pictogram-master.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Productive pictogram: Starter file\"\n      actionIcon=\"download\"\n      href=\"https://github.ibm.com/brand/Pictograms/raw/master/productive-pictogram-starter-file.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Expressive pictogram: Master file\"\n      actionIcon=\"download\"\n      href=\"https://github.com/carbon-design-system/carbon/raw/main/packages/pictograms/master/expressive-pictogram-master.ai\"\n      >\n\n![Adobe Illustrator](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Pictogram: Submit a request\"\n      actionIcon=\"launch\"\n      href=\"https://github.ibm.com/brand/Pictograms/issues/new/choose\"\n      >\n\n![Github Icon](../images/resource-cards/github.png)\n\n</ResourceCard>\n</Column>\n</Row>\n\n## Illustration\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Line style illustration kit\"\n      aspectRatio=\"2:1\"\n      href=\"https://github.com/carbon-design-system/design-language-website/raw/master/src/pages/illustration/Illustration-line-style-kit_v1.ai\"\n      actionIcon=\"download\"\n      >\n\n![illustrator icon](../images/resource-cards/illustrator.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Flat style illustration kit\"\n      aspectRatio=\"2:1\"\n      href=\"https://github.com/carbon-design-system/design-language-website/raw/master/src/pages/illustration/Illustration-flat-style-kit_v1.ai\"\n      actionIcon=\"download\"\n      >\n\n![illustrator icon](../images/resource-cards/illustrator.png)\n\n</ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Isometric style illustration kit\"\n      aspectRatio=\"2:1\"\n      href=\"https://github.com/carbon-design-system/design-language-website/raw/master/src/pages/illustration/Illustration-isometric-style-kit_v1.ai\"\n      actionIcon=\"download\"\n      >\n\n![illustrator icon](../images/resource-cards/illustrator.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Photography\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle={<>Photography assets<br />(IBM ID required)</>}\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/brand/imagery/photography/assets\"\n      >\n\n![Bee Icon](../images/resource-cards/bee.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Data visualization\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon data visualization\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.carbondesignsystem.com/data-visualization/getting-started\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Carbon data visualization: Color palettes\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.carbondesignsystem.com/data-visualization/color-palettes/\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Animation\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Motion in UI\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.carbondesignsystem.com/elements/motion/overview\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM motion package\"\n      aspectRatio=\"2:1\"\n      href=\"http://npmjs.com/package/@carbon/motion\"\n      >\n\n![npm Icon](../images/resource-cards/npm.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"IBM motion generator\"\n      aspectRatio=\"2:1\"\n      href=\"https://ibm.github.io/motion/\"\n      >\n\n![GitHub Icon](../images/resource-cards/github.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n       subTitle={<>Video guidance<br />(IBM ID required)</>}\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/brand/video/motion-graphics\"\n      >\n\n![IBM bee Icon](../images/resource-cards/bee.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n\n## Other IBM resources\n\n<Row className=\"resource-card-group\">\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle=\"Getting started with Carbon\"\n      aspectRatio=\"2:1\"\n      href=\"https://www.carbondesignsystem.com/designing/get-started\"\n      >\n\n![carbon Icon](../images/resource-cards/carbon.png)\n\n  </ResourceCard>\n</Column>\n<Column colMd={4} colLg={4} noGutterSm>\n    <ResourceCard\n      subTitle={<>Brand Center resource page<br />(IBM ID required)</>}\n      aspectRatio=\"2:1\"\n      href=\"https://www.ibm.com/brand/resources\"\n      >\n\n![Bee Icon](../images/resource-cards/bee.png)\n\n  </ResourceCard>\n</Column>\n</Row>\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/resources.mdx"}}},
    "staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}