{
"componentChunkName": "component---src-pages-2-x-grid-mdx",
"path": "/2x-grid/",
"result": {"pageContext":{"frontmatter":{"title":"2x Grid","description":"The IBM grid is the framework for all the visual elements and typography. The grid gives you structure and guidance so you can focus on your creative idea."},"relativePagePath":"/2x-grid.mdx","titleType":"append","MdxNode":{"id":"31698f89-b546-5b74-9e24-7f83db9dfcdf","children":[],"parent":"f7f96adc-ed86-5433-b4ad-ed107b50fb81","internal":{"content":"---\ntitle: 2x Grid\ndescription:\n The IBM grid is the framework for all the visual elements and typography. The\n grid gives you structure and guidance so you can focus on your creative idea.\n---\n\nimport v337387156 from '../videos/vimeo/337387156.mp4';\nimport p337387156 from '../videos/vimeo/337387156.jpg';\n\n\n\nThe IBM grid is the framework for all the visual elements and typography. It’s\nfundamental to everything we design. No matter what device or medium you’re\nworking with, the grid gives you just enough structure and guidance so you can\nfocus on your creative idea.\n\n\n\n\n\n Divisions of two\n Constructing the 2x Grid\n Base unit\n Spatial relationships\n 2x Grid in UI\n 2x Grid for video\n\n\n\n\n\n\n## Divisions of two\n\nAt the core of the 2x Grid concept is the idea of divisions of two. This can be\napplied to most surfaces, 3-D objects, and architecture as a means to divide\nspace into a helpful grid system. Dividing your space into 2, 4, 8, 16, 32, or\n64 columns gives you the basis of the system with the purpose of helping you\nmake decisions and organize your content.\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\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\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## Constructing the 2x Grid\n\nEach application of the grid can require a different grid structure. When\nconstructing the grid, keep in mind these different types of grids and choose\nwhich one best serves your need.\n\n\n\n\n\n\n\nNo margin or gutter\n\n\n\n\n\n\n\nMargin with no gutter\n\n\n\n\n\n\n\nMargin and gutter\n\n\n
\n\n\n### Margins\n\nAdd margins to your canvas when you need separation of content from the canvas\nboundaries. In some cases, margins are specified by the production method.\n\n\n\n\n\n\n\n\n\n2x Grid constructed with margins\n\n\n\n\n\n\n\n2x Grid without margins\n\n\n
\n\n\n### Columns and rows\n\nWithin the grid, columns and rows are especially important—they give layouts\ntheir structure. You can choose between 1, 2, 4, 8, and 16 divisions. Stick to\nyour choice throughout your design to maintain structure.\n\n\n\n\n\nColumns only\n\n\n\n\n\n\n\nRows only\n\n\n\n\n\n\n\nColumns and rows\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Gutters\n\nAdd gutters to columns and rows when additional space is needed to separate\ncontent. When using gutters, always align type to the gutters rather than the\ncanvas divisions. Columns and rows must always remain equal.\n\n\n\n\n\n\n\n\n\nWith gutters\n\n\n\n\n\n\n\nWithout gutters\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Base unit\n\nIf the 2x Grid gives your designs structure, base units give them precision.\nUsing a base unit will establish relationships between your grid proportions,\ntypography, dimensions of shapes, and space between elements. You can choose\neither the mini unit or a baseline unit to build your grid and spatial\nrelationships.\n\n\n\n### The mini unit\n\nThe mini unit can vary in size depending on the media. When choosing an\nappropriate unit for your application, consider the viewing distance. Each mini\nunit in the scale below has a type scale pairing and was determined by\nlegibility over distance.\n\n\n\nMini unit sizes based on viewing distance:\n\n| View distance | Mini unit | Media | Minimum Type Size (caption) |\n| ------------- | --------- | --------------------------------- | --------------------------- |\n| 0–0.5m | 2mm | Handheld print | 6pt |\n| 0.5–1m | 4mm | Print viewed within arm’s reach | 12pt |\n| 1–2m | 8mm | Posters and small signage | 24pt |\n| 2–4m | 16mm | Human-scale print | 48pt |\n| 4–8m | 32mm | Print viewed from across a room | 96pt |\n| 8–16m | 64mm | Print viewed from across a street | 192pt |\n\n\n\n\n\n\n\nHandheld card—2mm mini unit\n\n\n\n\n\n\n\nStanding banner—16mm mini unit\n\n\n\n\n\n\n\nBillboard—256mm mini unit\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n Grids above viewed at intended distance—all mini units have the same apparent\n size.\n\n\n#### Mini unit for product and web\n\nThe 8px mini unit guides everything in both software product and web\nenvironments, from the construction of the grid to all the elements that live\nwithin it.\n\n\n\n \n\n\n\n\n \n\n\n\n
\n\n\n### Baseline unit\n\nFor advanced typographic layouts, consider creating a base unit from the leading\nof your document. You can use the leading size or a fraction of it to determine\nthe baseline unit. Although this method requires finer tuning of margins,\ngutters, and type specs, it can help establish vertical rhythm and typographic\nharmony throughout your design.\n\nThe baseline unit can be used to construct all of the grid proportions, or you\ncan take a hybrid approach by using the mini unit to create your grid and a\nbaseline grid to guide your content.\n\n\n\n\n\n\n\nBaseline unit grid\n\n\n\n\n\n\n\nHybrid mini unit grid with baseline\n\n\n
\n\n\n\n\n \n\n\n\n\n \n\n\n \n \n\n
\n\n\n## Spatial relationships\n\nAll spacing between elements can be defined by the base unit. Use the following\nmultiples of your base unit to construct your layout: 1x, 2x, 3x, 4x, 6x, 8x,\n10x, 12x. Consistent and replicated use of spacing ensures spatial rhythm\nbetween all content.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nStanding Banner (mini unit)\n\n\n\n\n\n\n\nIBM Letterhead (baseline unit)\n\n\n
\n\n\n### Aspect relationships\n\nUse common aspect ratios, such as 16:9, 4:3, 3:2, 2:1, and 1:1 for images and\ncontainers. Always measure the width to the columns; the height is determined by\nit.\n\n\n\n## 2x Grid in UI\n\nFor detailed guidance on how to apply the 2x Grid system to products and user\ninterfaces, please visit\n[Carbon Design System](https://carbondesignsystem.com/).\n\n\n\n\n\n \n\n\n\n\n \n\n
\n\n\n## 2x Grid for video\n\nA unique application of the 2x Grid has been derived for the standard 1920x1080\nvideo format. Due to these fixed dimensions and aspect ratio, there is a\nfundamental mini unit of 7.5px which allows for perfectly even divisions of the\ngrid at 30px intervals.\n\nThe 8 column structure pictured below will be sufficient for most layouts. If\nrequired, the canvas can be futher subdivided into 16 columns. It is recommended\nto have all elements ‘snap to grid’ with 30px increments in order to ensure\nproper alignments within the overall layout.\n\n\n\n\n\n \n\n\n\n\n \n\n
\n\n","type":"Mdx","contentDigest":"2db13af36031a742c9b76f2891e0f9aa","owner":"gatsby-plugin-mdx","counter":1900},"frontmatter":{"title":"2x Grid","description":"The IBM grid is the framework for all the visual elements and typography. The grid gives you structure and guidance so you can focus on your creative idea."},"exports":{},"rawBody":"---\ntitle: 2x Grid\ndescription:\n The IBM grid is the framework for all the visual elements and typography. The\n grid gives you structure and guidance so you can focus on your creative idea.\n---\n\nimport v337387156 from '../videos/vimeo/337387156.mp4';\nimport p337387156 from '../videos/vimeo/337387156.jpg';\n\n\n\nThe IBM grid is the framework for all the visual elements and typography. It’s\nfundamental to everything we design. No matter what device or medium you’re\nworking with, the grid gives you just enough structure and guidance so you can\nfocus on your creative idea.\n\n\n\n\n\n Divisions of two\n Constructing the 2x Grid\n Base unit\n Spatial relationships\n 2x Grid in UI\n 2x Grid for video\n\n\n\n\n\n\n## Divisions of two\n\nAt the core of the 2x Grid concept is the idea of divisions of two. This can be\napplied to most surfaces, 3-D objects, and architecture as a means to divide\nspace into a helpful grid system. Dividing your space into 2, 4, 8, 16, 32, or\n64 columns gives you the basis of the system with the purpose of helping you\nmake decisions and organize your content.\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\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\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## Constructing the 2x Grid\n\nEach application of the grid can require a different grid structure. When\nconstructing the grid, keep in mind these different types of grids and choose\nwhich one best serves your need.\n\n\n\n\n\n\n\nNo margin or gutter\n\n\n\n\n\n\n\nMargin with no gutter\n\n\n\n\n\n\n\nMargin and gutter\n\n\n
\n\n\n### Margins\n\nAdd margins to your canvas when you need separation of content from the canvas\nboundaries. In some cases, margins are specified by the production method.\n\n\n\n\n\n\n\n\n\n2x Grid constructed with margins\n\n\n\n\n\n\n\n2x Grid without margins\n\n\n
\n\n\n### Columns and rows\n\nWithin the grid, columns and rows are especially important—they give layouts\ntheir structure. You can choose between 1, 2, 4, 8, and 16 divisions. Stick to\nyour choice throughout your design to maintain structure.\n\n\n\n\n\nColumns only\n\n\n\n\n\n\n\nRows only\n\n\n\n\n\n\n\nColumns and rows\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Gutters\n\nAdd gutters to columns and rows when additional space is needed to separate\ncontent. When using gutters, always align type to the gutters rather than the\ncanvas divisions. Columns and rows must always remain equal.\n\n\n\n\n\n\n\n\n\nWith gutters\n\n\n\n\n\n\n\nWithout gutters\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Base unit\n\nIf the 2x Grid gives your designs structure, base units give them precision.\nUsing a base unit will establish relationships between your grid proportions,\ntypography, dimensions of shapes, and space between elements. You can choose\neither the mini unit or a baseline unit to build your grid and spatial\nrelationships.\n\n\n\n### The mini unit\n\nThe mini unit can vary in size depending on the media. When choosing an\nappropriate unit for your application, consider the viewing distance. Each mini\nunit in the scale below has a type scale pairing and was determined by\nlegibility over distance.\n\n\n\nMini unit sizes based on viewing distance:\n\n| View distance | Mini unit | Media | Minimum Type Size (caption) |\n| ------------- | --------- | --------------------------------- | --------------------------- |\n| 0–0.5m | 2mm | Handheld print | 6pt |\n| 0.5–1m | 4mm | Print viewed within arm’s reach | 12pt |\n| 1–2m | 8mm | Posters and small signage | 24pt |\n| 2–4m | 16mm | Human-scale print | 48pt |\n| 4–8m | 32mm | Print viewed from across a room | 96pt |\n| 8–16m | 64mm | Print viewed from across a street | 192pt |\n\n\n\n\n\n\n\nHandheld card—2mm mini unit\n\n\n\n\n\n\n\nStanding banner—16mm mini unit\n\n\n\n\n\n\n\nBillboard—256mm mini unit\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n Grids above viewed at intended distance—all mini units have the same apparent\n size.\n\n\n#### Mini unit for product and web\n\nThe 8px mini unit guides everything in both software product and web\nenvironments, from the construction of the grid to all the elements that live\nwithin it.\n\n\n\n \n\n\n\n\n \n\n\n\n
\n\n\n### Baseline unit\n\nFor advanced typographic layouts, consider creating a base unit from the leading\nof your document. You can use the leading size or a fraction of it to determine\nthe baseline unit. Although this method requires finer tuning of margins,\ngutters, and type specs, it can help establish vertical rhythm and typographic\nharmony throughout your design.\n\nThe baseline unit can be used to construct all of the grid proportions, or you\ncan take a hybrid approach by using the mini unit to create your grid and a\nbaseline grid to guide your content.\n\n\n\n\n\n\n\nBaseline unit grid\n\n\n\n\n\n\n\nHybrid mini unit grid with baseline\n\n\n
\n\n\n\n\n \n\n\n\n\n \n\n\n \n \n\n
\n\n\n## Spatial relationships\n\nAll spacing between elements can be defined by the base unit. Use the following\nmultiples of your base unit to construct your layout: 1x, 2x, 3x, 4x, 6x, 8x,\n10x, 12x. Consistent and replicated use of spacing ensures spatial rhythm\nbetween all content.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nStanding Banner (mini unit)\n\n\n\n\n\n\n\nIBM Letterhead (baseline unit)\n\n\n
\n\n\n### Aspect relationships\n\nUse common aspect ratios, such as 16:9, 4:3, 3:2, 2:1, and 1:1 for images and\ncontainers. Always measure the width to the columns; the height is determined by\nit.\n\n\n\n## 2x Grid in UI\n\nFor detailed guidance on how to apply the 2x Grid system to products and user\ninterfaces, please visit\n[Carbon Design System](https://carbondesignsystem.com/).\n\n\n\n\n\n \n\n\n\n\n \n\n
\n\n\n## 2x Grid for video\n\nA unique application of the 2x Grid has been derived for the standard 1920x1080\nvideo format. Due to these fixed dimensions and aspect ratio, there is a\nfundamental mini unit of 7.5px which allows for perfectly even divisions of the\ngrid at 30px intervals.\n\nThe 8 column structure pictured below will be sufficient for most layouts. If\nrequired, the canvas can be futher subdivided into 16 columns. It is recommended\nto have all elements ‘snap to grid’ with 30px increments in order to ensure\nproper alignments within the overall layout.\n\n\n\n\n\n \n\n\n\n\n \n\n
\n\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/2x-grid.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}