From feb07fae52a36575aba1e22cc430a51615dbaee9 Mon Sep 17 00:00:00 2001
From: Shawn Allen <shawn.allen@github.com>
Date: Thu, 10 Jan 2019 00:06:26 -0800
Subject: [PATCH] fix a ton of links

---
 modules/primer-avatars/README.md              |  8 +++---
 modules/primer-box/README.md                  | 10 +++----
 modules/primer-buttons/README.md              |  2 +-
 modules/primer-forms/README.md                |  2 +-
 modules/primer-labels/README.md               |  4 +--
 modules/primer-layout/docs/grid.md            | 28 +++++++++----------
 modules/primer-marketing-support/README.md    |  2 +-
 .../docs/borders.md                           |  2 +-
 .../primer-marketing-utilities/docs/layout.md |  2 +-
 .../primer-marketing-utilities/docs/margin.md |  4 +--
 .../docs/padding.md                           |  4 +--
 modules/primer-support/README.md              |  9 +++---
 modules/primer-support/docs/breakpoints.md    |  2 +-
 modules/primer-support/docs/spacing.md        |  4 +--
 modules/primer-support/docs/typography.md     |  6 ++--
 modules/primer-utilities/docs/flexbox.md      |  6 ++--
 modules/primer-utilities/docs/layout.md       |  8 +++---
 modules/primer-utilities/docs/margin.md       |  4 +--
 modules/primer-utilities/docs/padding.md      |  6 ++--
 19 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/modules/primer-avatars/README.md b/modules/primer-avatars/README.md
index e9d5e275..c3e28faa 100644
--- a/modules/primer-avatars/README.md
+++ b/modules/primer-avatars/README.md
@@ -52,7 +52,7 @@ Add `.avatar` to any `<img>` element to make it an avatar. This resets some key
 Be sure to set `width` and `height` attributes for maximum browser performance.
 
 ```html
-<img class="avatar" alt="jonrohan" src="/jonrohan.png?v=3&s=144" width="72" height="72">
+<img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=144" width="72" height="72">
 ```
 
 ### Small avatars
@@ -60,7 +60,7 @@ Be sure to set `width` and `height` attributes for maximum browser performance.
 We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
 
 ```html
-<img class="avatar avatar-small" alt="jonrohan" src="/jonrohan.png?v=3&s=64" width="32" height="32">
+<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=64" width="32" height="32">
 ```
 
 ### Parent-child avatars
@@ -69,8 +69,8 @@ When you need a larger parent avatar, and a smaller child one, overlaid slightly
 
 ```html
 <div class="avatar-parent-child float-left">
-  <img class="avatar" alt="jonrohan" src="/jonrohan.png?v=3&s=96" width="48" height="48">
-  <img class="avatar avatar-child" alt="josh" src="/josh.png?v=3&s=40" width="20" height="20">
+  <img class="avatar" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" width="48" height="48">
+  <img class="avatar avatar-child" alt="josh" src="https://github.com/josh.png?v=3&s=40" width="20" height="20">
 </div>
 ```
 
diff --git a/modules/primer-box/README.md b/modules/primer-box/README.md
index 16f1d467..43be19af 100644
--- a/modules/primer-box/README.md
+++ b/modules/primer-box/README.md
@@ -260,7 +260,7 @@ Use `Box--danger` to apply a red border to the outside of the box. This theme is
 </div>
 ```
 
-`Box-danger` is often paired with a red heading. See the [subhead](../subhead) docs for more information.
+`Box-danger` is often paired with a red heading. See the [subhead](./subhead) docs for more information.
 
 ```html
 <div class="Subhead border-bottom-0">
@@ -357,7 +357,7 @@ Use the `border-dashed` utility to apply a dashed border to a box.
 ## Boxes with flash alerts
 Use `flash-full` for flash alert inside a box to remove the rounded corners. Place the flash alert above the `Box-body` and underneath the `Box-header`.
 
-Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](../alerts) for more information.
+Flash alerts come in three different colors and can be used with icons and buttons, see the [alert documentation](./alerts) for more information.
 
 ```html
 <div class="Box">
@@ -456,7 +456,7 @@ Use `Counter--gray-dark` for a counter with a dark gray background and white tex
 ## Form elements and buttons in boxes
 To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here's some common examples:
 
-Use [flexbox utilities](../../utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
+Use [flexbox utilities](/css/utilities/flexbox) to center align items, and avoid using floats by using `flex-auto` to have the text fill the remaining space so that the button rests on the far right.
 
 ```html
 <div class="Box Box--condensed">
@@ -562,7 +562,7 @@ You can put forms in boxes. Often form submission buttons are aligned to the bot
   </div>
 ```
 
-When a box is all by itself centered on a page you can use [column widths](../../objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](../../utilities/typography) instead of the built in box title styles.
+When a box is all by itself centered on a page you can use [column widths](/css/objects/grid) to control the width of the box. If needed, break the mold a little and use [typography utilities](/css/utilities/typography) instead of the built in box title styles.
 
 ```html
 <div class="Box Box--spacious col-6 mx-auto text-center">
@@ -583,7 +583,7 @@ When a box is all by itself centered on a page you can use [column widths](../..
 </div>
 ```
 
-Box patterns can also be made with, and modified with [border utilities](../../utilities/borders).
+Box patterns can also be made with, and modified with [border utilities](/css/utilities/borders).
 
 <!-- %enddocs -->
 
diff --git a/modules/primer-buttons/README.md b/modules/primer-buttons/README.md
index f445bec3..cea48be5 100644
--- a/modules/primer-buttons/README.md
+++ b/modules/primer-buttons/README.md
@@ -173,7 +173,7 @@ You can easily append a count to a **small button**. Add the `.with-count` class
 </div>
 ```
 
-You can also use the [counter](../labels#counters) component within buttons:
+You can also use the [counter](./labels#counters) component within buttons:
 
 ```html
 <button class="btn" type="button">
diff --git a/modules/primer-forms/README.md b/modules/primer-forms/README.md
index a7f123ac..d492cbbf 100644
--- a/modules/primer-forms/README.md
+++ b/modules/primer-forms/README.md
@@ -177,7 +177,7 @@ Primer adds light `height` and `vertical-align` styles to `<select>`s for all br
 
 ##### Small
 
-Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).
+Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).
 
 ```html
 <select class="form-select select-sm" aria-label="Preference">
diff --git a/modules/primer-labels/README.md b/modules/primer-labels/README.md
index 2cb29cc1..56bdaf8d 100644
--- a/modules/primer-labels/README.md
+++ b/modules/primer-labels/README.md
@@ -138,7 +138,7 @@ Use the `Counter` component to add a count to navigational elements and buttons.
 <span class="Counter Counter--gray-light">64</span>
 ```
 
-Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](../navigation).
+Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
 
 ```html title="Counter in tabs"
 <div class="tabnav">
@@ -149,7 +149,7 @@ Use the `Counter` in navigation to indicate the number of items without the user
 </div>
 ```
 
-Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](../box).
+Counters can also be used in `Box` headers to indicate the number of items in a list. See more on the [box component](./box).
 
 ```html title="Counter in Box headers"
 <div class="Box">
diff --git a/modules/primer-layout/docs/grid.md b/modules/primer-layout/docs/grid.md
index 5a7e1ffe..c801a591 100644
--- a/modules/primer-layout/docs/grid.md
+++ b/modules/primer-layout/docs/grid.md
@@ -99,7 +99,7 @@ Column widths can be used with any other block or inline-block elements to add p
 
 ## Offset columns
 
-Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](../grid#responsive-grids).
+Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](#responsive-grids).
 
 ```html title="Offset columns"
 <div class="clearfix">
@@ -176,20 +176,20 @@ Use column widths with `d-inline-block` as an alternative to floated grids.
 You can use column widths and other utilities on elements such as lists to create the layout you need while keeping the markup semantically correct.
 ```html title="Inline-block grid list"
 <ul class="list-style-none">
-  <li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/broccolini.png" alt="broccolini" /></li><!--
-  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/jonrohan.png" alt="jonrohan" /></li><!--
-  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/muan.png" alt="muan" /></li><!--
-  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/pmarsceill.png" alt="pmarsceill" /></li><!--
-  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/sophshep.png" alt="sophshep" /></li><!--
-  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/cmwinters.png" alt="cmwinters" /></li><!--
-  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/jeejkang.png" alt="jeejkang" /></li><!--
-  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/mdo.png" alt="mdo" /></li>
+  <li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/broccolini.png" alt="broccolini" /></li><!--
+  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/jonrohan.png" alt="jonrohan" /></li><!--
+  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/muan.png" alt="muan" /></li><!--
+  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/pmarsceill.png" alt="pmarsceill" /></li><!--
+  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/sophshep.png" alt="sophshep" /></li><!--
+  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/cmwinters.png" alt="cmwinters" /></li><!--
+  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/jeejkang.png" alt="jeejkang" /></li><!--
+  --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/mdo.png" alt="mdo" /></li>
 </ul>
 ```
 
 
 ## Display table grids
-Using [display table utilities](../../utilities/layout#display) with columns gives you some alternative layout options.
+Using [display table utilities](/css/utilities/layout#display) with columns gives you some alternative layout options.
 
 A useful example is being able to keep the height of the container equal across a row when the length of content may differ.
 
@@ -206,12 +206,12 @@ A useful example is being able to keep the height of the container equal across
   </div>
 </div>
 ```
-You can also create an alternative [media object](../../utilities/layout#the-media-object) layout with `.display-table` and column widths.
+You can also create an alternative [media object](/css/utilities/layout#the-media-object) layout with `.display-table` and column widths.
 
 ```html title="Table grid alternative"
 <div class="d-table col-12">
   <div class="col-2 d-table-cell v-align-middle">
-    <img class="width-full avatar" src="/github.png" alt="github" />
+    <img class="width-full avatar" src="https://github.com/github.png" alt="github" />
   </div>
   <div class="col-10 d-table-cell v-align-middle pl-4">
     <h1 class="text-normal lh-condensed">GitHub</h1>
@@ -239,14 +239,14 @@ Note that table cells will fill the width of their container even when the total
 
 ## Flexbox grids
 
-You can use [flex utilities](../../utilities/flexbox) on the container and columns to create a flexbox grid.
+You can use [flex utilities](/css/utilities/flexbox) on the container and columns to create a flexbox grid.
 
 This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts.
 
 ```html title="Flexbox grid"
 <div class="d-flex flex-column flex-md-row flex-items-center flex-md-items-center">
   <div class="col-2 d-flex flex-items-center flex-items-center flex-md-items-start">
-    <img class="width-full avatar mb-2 mb-md-0" src="/github.png" alt="github" />
+    <img class="width-full avatar mb-2 mb-md-0" src="https://github.com/github.png" alt="github" />
   </div>
   <div class="col-12 col-md-10 d-flex flex-column flex-justify-center flex-items-center flex-md-items-start pl-md-4">
     <h1 class="text-normal lh-condensed">GitHub</h1>
diff --git a/modules/primer-marketing-support/README.md b/modules/primer-marketing-support/README.md
index 828a0a67..4d33efd9 100644
--- a/modules/primer-marketing-support/README.md
+++ b/modules/primer-marketing-support/README.md
@@ -49,7 +49,7 @@ Starting where the `primer-core` spacing scale ends at spacer 6, the marketing s
 | 11    | 112   |
 | 12    | 128   |
 
-See [primer-marketing-support](../../support/marketing-variables/) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../../utilities/marketing-margin) and [padding](../../utilities/marketing-padding).
+See [primer-marketing-support](https://npm.im/primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/css/utilities/marketing-margin) and [padding](/css/utilities/marketing-padding).
 
 <!-- %enddocs -->
 
diff --git a/modules/primer-marketing-utilities/docs/borders.md b/modules/primer-marketing-utilities/docs/borders.md
index 05e887c3..862522e2 100644
--- a/modules/primer-marketing-utilities/docs/borders.md
+++ b/modules/primer-marketing-utilities/docs/borders.md
@@ -13,7 +13,7 @@ The following border utilities are meant to used in addition to those within pri
 
 ### White border with alpha transparency
 
-Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](..//borders/#border-colors).
+Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](/css/utilities/borders#border-colors).
 
 ```html
 <div class="bg-gray-dark text-white p-3 mb-2">
diff --git a/modules/primer-marketing-utilities/docs/layout.md b/modules/primer-marketing-utilities/docs/layout.md
index 98af1f72..103f4885 100644
--- a/modules/primer-marketing-utilities/docs/layout.md
+++ b/modules/primer-marketing-utilities/docs/layout.md
@@ -5,7 +5,7 @@ path: utilities/marketing-layout
 status: Stable
 ---
 
-Marketing layout utilities build on top of [primer-core utilities](../../utilities/layout/#position), adding the option of responsive positioning.
+Marketing layout utilities build on top of [primer-core utilities](/css/utilities/layout#position), adding the option of responsive positioning.
 
 {:toc}
 
diff --git a/modules/primer-marketing-utilities/docs/margin.md b/modules/primer-marketing-utilities/docs/margin.md
index 34afe033..6743501b 100644
--- a/modules/primer-marketing-utilities/docs/margin.md
+++ b/modules/primer-marketing-utilities/docs/margin.md
@@ -6,7 +6,7 @@ status: Stable
 status_issue: https://github.com/github/design-systems/issues/378
 ---
 
-Marketing margin utilities extend [core margin utilities](../../support/spacing) across the y-axis only. The [marketing scale](../../support/marketing-variables/#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
+Marketing margin utilities extend [core margin utilities](/css/support/spacing) across the y-axis only. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
 
 
 ## Y-axis margin utilities
@@ -27,7 +27,7 @@ Use marketing margin utilities to apply margin to top, bottom, or both y-axis of
 
 ## Responsive y-axis margin utilities
 
-All marketing margin utilities can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All marketing margin utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `m[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
 
 ```html
 <div class="d-inline-block margin-orange">
diff --git a/modules/primer-marketing-utilities/docs/padding.md b/modules/primer-marketing-utilities/docs/padding.md
index d109d07d..941e52a5 100644
--- a/modules/primer-marketing-utilities/docs/padding.md
+++ b/modules/primer-marketing-utilities/docs/padding.md
@@ -6,7 +6,7 @@ status: Stable
 status_issue: https://github.com/github/design-systems/issues/378
 ---
 
-Marketing padding utilities extend [core margin utilities](../../support/spacing) across the y-axis only. The [marketing scale](../../support/marketing-variables/#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
+Marketing padding utilities extend [core margin utilities](/css/utilities/margin) across the y-axis only. The [marketing scale](/css/support/marketing-variables#extended-spacing-scale) starts from spacer 7 up to 12, and steps first by `8px` for spacer 7 and continues in increments of `16px` for spacer 8 to 12.
 
 ## Y-axis padding utilities
 
@@ -26,7 +26,7 @@ Use marketing padding utilities to apply padding to top, bottom, or both y-axis
 
 ## Responsive y-axis padding utilities
 
-All marketing padding utilities can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All marketing padding utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `p[y-direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
 
 ```html
 <div class="d-inline-block margin-orange">
diff --git a/modules/primer-support/README.md b/modules/primer-support/README.md
index 1601db87..f08f6938 100644
--- a/modules/primer-support/README.md
+++ b/modules/primer-support/README.md
@@ -39,10 +39,11 @@ Primer is built on systems that form the foundation of our styles, and inform th
 We use Sass variables to keep color, typography, spacing, and other foundations of our system consistent. Occasionally we use Sass mixins to apply multiple CSS properties, they are a convenient solution for frequently-used verbose patterns.
 
 We've documented variables, mixins, and the systems they are built on for the following:
-- [Breakpoints](./support/breakpoints)
-- [Colors](./support/color-system)
-- [Spacing](./support/spacing)
-- [Typography](./support/typography)
+
+- [Breakpoints](/css/support/breakpoints)
+- [Colors](/css/support/color-system)
+- [Spacing](/css/support/spacing)
+- [Typography](/css/support/typography)
 
 <!-- %enddocs -->
 
diff --git a/modules/primer-support/docs/breakpoints.md b/modules/primer-support/docs/breakpoints.md
index ffed3087..d2709b8c 100644
--- a/modules/primer-support/docs/breakpoints.md
+++ b/modules/primer-support/docs/breakpoints.md
@@ -19,7 +19,7 @@ We use abbreviations for each breakpoint to keep the class names concise. This a
 
 **Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized.
 
-Responsive styles are available for [margin](../../utilities/margin/#responsive-margins), [padding](../../utilities/padding#responsive-padding), [layout](../../utilities/layout), [flexbox](../../utilities/flexbox#responsive-flex-utilities), and the [grid](../../objects/grid#responsive-grids) system.
+Responsive styles are available for [margin](/css/utilities/margin#responsive-margins), [padding](/css/utilities/padding#responsive-padding), [layout](/css/utilities/layout), [flexbox](/css/utilities/flexbox#responsive-flex-utilities), and the [grid](/css/objects/grid#responsive-grids) system.
 
 ## Breakpoint variables
 
diff --git a/modules/primer-support/docs/spacing.md b/modules/primer-support/docs/spacing.md
index c9749e65..37d2404c 100644
--- a/modules/primer-support/docs/spacing.md
+++ b/modules/primer-support/docs/spacing.md
@@ -20,9 +20,9 @@ The spacing scale is a **base-8** scale. We chose a base-8 scale because eight i
 | $spacer-5 | 5 | 32px |
 | $spacer-6 | 6 | 40px |
 
-These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](../../utilities/margin) and [padding](../../utilities/padding) utilities.
+These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](/css/utilities/margin) and [padding](/css/utilities/padding) utilities.
 
-See [primer-marketing-support](../../support/marketing-variables/) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../../utilities/marketing-margin) and [padding](../../utilities/marketing-padding).
+See [primer-marketing-support](/css/support/marketing-variables) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/css/utilities/marketing-margin) and [padding](/css/utilities/marketing-padding).
 
 ## Em-based spacing
 Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers.
diff --git a/modules/primer-support/docs/typography.md b/modules/primer-support/docs/typography.md
index 4eacb6fa..3693aecf 100644
--- a/modules/primer-support/docs/typography.md
+++ b/modules/primer-support/docs/typography.md
@@ -12,7 +12,7 @@ source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/
 
 The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.
 
-Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./../breakpoints) to be larger on desktop.
+Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./breakpoints) to be larger on desktop.
 
 | Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
 | --- | --- | --- | --- | --- |
@@ -25,7 +25,7 @@ Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./../brea
 | 5 | 14px | 14px | 17.5 | 21 |
 | 6 | 12px | 12px | 15 | 18 |
 
-The typography scale is used to create [typography utilities](../../utilities/typography).
+The typography scale is used to create [typography utilities](/css/utilities/typography).
 
 ## Typography variables
 
@@ -64,7 +64,7 @@ $lh-default: 1.5 !default;
 ```
 
 ## Typography Mixins
-Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](../../utilities/typography/#heading-utilities). which requires no additional CSS.
+Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/css/utilities/typography#heading-utilities). which requires no additional CSS.
 
 Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:
 
diff --git a/modules/primer-utilities/docs/flexbox.md b/modules/primer-utilities/docs/flexbox.md
index 64d121cd..f2c935a8 100644
--- a/modules/primer-utilities/docs/flexbox.md
+++ b/modules/primer-utilities/docs/flexbox.md
@@ -576,7 +576,7 @@ Use these classes to adjust the alignment of an individual flex item on the cros
 
 ## Responsive flex utilities
 
-All flexbox utilities can be adjust per [breakpoint](../../objects/grid#breakpoints) using the following formulas:
+All flexbox utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formulas:
 
 - `d-[breakpoint]-[property]` for `display`
 - `flex-[breakpoint]-[property]-[behavior]` for various flex properties
@@ -647,7 +647,7 @@ Here is an example of a media object that is **vertically centered on large scre
 ```html
 <div class="border p-3 d-flex flex-column flex-md-row flex-md-items-center">
   <div class="pr-0 pr-md-3 mb-3 mb-md-0 d-flex flex-justify-center flex-md-justify-start">
-    <img style="max-width:100px; max-height:100px;" src="/images/gravatars/gravatar-user-420.png" />
+    <img style="max-width:100px; max-height:100px;" src="https://avatars1.githubusercontent.com/u/9919?v=4&s=200" />
   </div>
   <div class="d-flex text-center text-md-left">
     <p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
@@ -660,6 +660,6 @@ Here is an example of a media object that is **vertically centered on large scre
 
 ## Flexbox bugs
 
-This section lists flexbox bugs that affect browsers we [currently support](.../styles#user-content-browser-support).
+This section lists flexbox bugs that affect browsers we currently support (**citation needed**).
 
 **1. Minimum content sizing of flex items not honored:** Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply `flex-shrink: 0;` to the items using `d-flex`. This can be applied with the `flex-shrink-0` utility. For more information read [philipwalton/flexbugs](https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored).
diff --git a/modules/primer-utilities/docs/layout.md b/modules/primer-utilities/docs/layout.md
index bf7168cf..c9754814 100644
--- a/modules/primer-utilities/docs/layout.md
+++ b/modules/primer-utilities/docs/layout.md
@@ -52,7 +52,7 @@ element.classList.toggle('d-inline', visible)
 
 ### `display:table` wrapping issues
 
-There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](../../objects/grid#column-widths).
+There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](/css/objects/grid#column-widths).
 
 ```html
 <div class="d-table table-fixed width-full">
@@ -66,7 +66,7 @@ There are known issues with using `display:table` and wrapping long strings, par
 ```
 
 ### Responsive display
-A selection of display utilities are able to be applied or changed per [breakpoint](../../objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
+A selection of display utilities are able to be applied or changed per [breakpoint](/css/objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
 
 In the following example, the `ul` element switches from `display: block` on mobile to  `display: inline-block` at the `md` breakpoint, while the list items remain inline.
 
@@ -118,7 +118,7 @@ Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
 </div>
 ```
 ### Responsive floats
-Float utilities can be applied or changed per [breakpoint](../../objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
+Float utilities can be applied or changed per [breakpoint](/css/objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
 
 Each responsive float utility is applied to the specified breakpoint and up, using the following formula:  `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear.
 
@@ -163,7 +163,7 @@ Use `.width-fit` to set max-width 100%.
 
 ```html
 <div class="one-fourth column">
-  <img class="width-fit bg-gray" src="/images/gravatars/gravatar-user-420.png" alt="width fitted octocat" />
+  <img class="width-fit bg-gray" src="https://github.com/github.png" alt="width fitted octocat" />
 </div>
 ```
 
diff --git a/modules/primer-utilities/docs/margin.md b/modules/primer-utilities/docs/margin.md
index 719c7141..085087a9 100644
--- a/modules/primer-utilities/docs/margin.md
+++ b/modules/primer-utilities/docs/margin.md
@@ -4,7 +4,7 @@ path: utilities/margin
 status: Stable
 ---
 
-Margin utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
+Margin utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
 
 {:toc}
 
@@ -104,7 +104,7 @@ Reset margins built into typography elements or other components with `m-0`, `mt
 
 ## Responsive margins
 
-All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
 
 ```html
 <div class="d-inline-block margin-orange">
diff --git a/modules/primer-utilities/docs/padding.md b/modules/primer-utilities/docs/padding.md
index 51506a08..08523ebc 100644
--- a/modules/primer-utilities/docs/padding.md
+++ b/modules/primer-utilities/docs/padding.md
@@ -4,7 +4,7 @@ path: utilities/padding
 status: Stable
 ---
 
-Padding utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
+Padding utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
 
 {:toc}
 
@@ -86,7 +86,7 @@ Use directional utilities to apply padding to an individual side, or the X and Y
 
 ## Responsive padding
 
-All padding utilities can be adjusted per [breakpoint](../../support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
+All padding utilities can be adjusted per [breakpoint](/css/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
 
 ```html
 <div class="px-sm-2 px-lg-4 d-inline-block padding-green">
@@ -100,7 +100,7 @@ All padding utilities can be adjusted per [breakpoint](../../support/breakpoints
 
 `.p-responsive` is a padding class that adds padding on the left and right sides of an element. On small screens, it gives the element padding of `$spacer-3`, on mid-sized screens it gives the element padding of `$spacer-6`, and on large screens, it gives the element padding of `$spacer-3`.
 
-It is intended to be used with [container styles](../../objects/grid#containers)
+It is intended to be used with [container styles](/css/objects/grid#containers)
 
 ```html
 <div class="container-lg p-responsive">