Bento doc

apps/docs/content/components/Bento/index.mdx

@@ -0,0 +1,62 @@
+---
+title: Bento
+description: Use the river component to introduce a feature using a type and media pairing.
+---
+
+import ComponentLayout from '../../../src/layouts/component-layout'
+export default ComponentLayout
+
+As its name suggest this component is inspired by the Japanese bento lunch boxes. Bentos are an assortment of boxes arranged in a neat grid that forms a delightful unit. The intricate and harmonious pairing of contents  makes a successful bento. The idea is to provide the most compelling picture of the product/feature we are presenting by allowing a rich variety of media type to tell and mini story.
+
+![The atomic design framework applied to the bento component explaing how the atomic level primitive form the molecular stage to for the box, then the organism composed of multiple molecules](https://github.com/primer/brand/assets/10632534/acc3a674-ffb4-4319-b924-0330802b66c3)
+
+
+## Usage
+
+Use bentos to present complex feature sets that require the presentation of various types of content. Each bento is composed of a minimum of 3 boxes and a maximum of 7-8. Each box should feature a small amount of content to create focus at the box level.
+
+![An example of individual bento box featuring an icon, text and link on the left and a visual on the right](https://github.com/primer/brand/assets/10632534/af7751cd-bebd-4760-adc5-f6c2d624d15f)
+
+### Boxes
+
+Boxes are the constituent of the bento. Each should focus a clear point by featuring only the relevant content.
+Each box should not be narrower than 4 col. We allow full row width boxes as a breakout.
+
+<DoDontContainer>
+  <Do>
+    <img
+      alt=""
+      src="https://github.com/primer/brand/assets/10632534/40ecee93-7236-4c61-bc2a-f594d6879857"
+    />
+    <Caption>Boxes should be presenting a single piece of information</Caption>
+  </Do>
+  <Dont>
+    <img
+      alt=""
+      src="https://github.com/primer/brand/assets/10632534/1ee3ed94-1050-4cd5-97d0-d2b158e7e5fc"
+    />
+    <Caption>Don’t fit too much information in one box</Caption>
+  </Dont>
+</DoDontContainer>
+
+### Grid
+
+Each bento assortment should fit within the  grid system. The grid determine the size of each box and the density of each collage. The grid layout allows to articulate the composition by adjusting how each box fit with one another.
+
+<DoDontContainer>
+  <Do>
+    <img
+      alt=""
+      src="https://github.com/primer/brand/assets/10632534/58ce10d5-8292-4aff-bcfa-f0ba653fa115"
+    />
+    <Caption>The grid should flex to accommodate the boxes content and size</Caption>
+  </Do>
+  <Dont>
+    <img
+      alt=""
+      src="https://github.com/primer/brand/assets/10632534/89650e43-8c76-4557-a2ab-d09cf41b42f0"
+    />
+    <Caption>Don’t create high density, unstructured grid with offsets</Caption>
+  </Dont>
+</DoDontContainer>
+