Docs: 1px grid update (#1736)

* docs: 1px grid update

* docs: border update

Co-authored-by: Alessandra Davila <[email protected]>

src/pages/guidelines/2x-grid/implementation.mdx

@@ -554,7 +554,7 @@ containers and certain components to “hang” into the gutter.
 <Row>
 <Column colLg={2} colMd={2}>
 
-**Condensed**<br/> 2px gutter
+**Condensed**<br/> 1px gutter
 
 </Column>
 <Column colLg={10} colMd={6}>
@@ -710,12 +710,18 @@ Wide and a Narrow grid scenario in the [Mix and match](#mix-and-match) section.
 
 ### The Condensed grid
 
-The Condensed grid collapses the gutter to 2px. To achieve this, containers and
+The Condensed grid collapses the gutter to 1px. To achieve this, containers and
 components bleed 16px into the gutter on either side of the column. This grid
 mode is most often used in conjunction with another grid mode and arguably
 requires the most design skill to incorporate into layouts.
 
-Rows that are adjacent will have a 2px of margin between them to match gutter.
+In order to emphasize the gutters, 1px borders that are darker than the
+background color (in both light and dark themes), must be added to any tiles or
+cards. The borders add just enough clarity to the gutters to stand out, while
+still registering to the user as the background color. The token for these
+borders is `$ui-03`.
+
+Rows that are adjacent will have a 1px of margin between them to match gutter.
 Use vertical helpers here.
 
 <Row>
@@ -758,7 +764,7 @@ UI. See it in action on the
 As mentioned above, fixed components with labels, such as input fields and
 dropdowns, should not hang into the gutter.
 
-![2px gutter](images/2px_gutter.png)
+![1px gutter](images/2px_gutter.png)
 
 <DoDontRow>
   <DoDont caption="Do keep all type (inside and outside containers) aligned with the column grid.">