primer · camertron · Oct 23, 2023 · Oct 20, 2023
@@ -1,7 +1,7 @@
 # Contributing
 
 ## Creating pages
-To create a new page, just create a new file in the `pages/design` directory. (Note: pages outside of the `design` subdirectory will not be accessible from `primer.style/design`!)
+To create a new page, just create a new file in the `pages/design` directory. (Note: pages outside of the `design` subdirectory will not be accessible from `primer.style`!)
 
 The URL for each page reflects its path within the `pages` directory, so:
 

@@ -9,7 +9,7 @@ If you are writing documentation, please read the [documentation guidelines](htt
 ## Design guidelines template
 Even though some guidelines follow a different format, most can use the following template as a starting point. Required sections are indicated.
 
-💡 The [action list component](https://primer.style/design/components/action-list) documentation is a good example of design guidelines.
+💡 The [action list component](https://primer.style/components/action-list) documentation is a good example of design guidelines.
 
 | Section                  | Description                                                                        | Notes                                                                                                                                           |
 |--------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|

@@ -1,10 +1,10 @@
-# Primer Design System documentation 
+# Primer Design System documentation
 
-Documentation for all things Primer, including components, UI patterns, foundations, guides, and more. 
+Documentation for all things Primer, including components, UI patterns, foundations, guides, and more.
 
 ## Status
 
-This repository is evolving as our documentation needs change. See our [contribution guides here](https://primer.style/design/guides/contribute/documentation). 
+This repository is evolving as our documentation needs change. See our [contribution guides here](https://primer.style/guides/contribute/documentation).
 
 [Project board](https://github.com/orgs/github/projects/4503/views/16) (GitHub staff only)
 
@@ -24,16 +24,16 @@ This repository is evolving as our documentation needs change. See our [contribu
 
 ## Deployment
 
-We deploy this site using [GitHub Pages](https://pages.github.com/). Every push to a branch other than `main` will deploy to a URL unique to the preview environment. Merges to `main` will automatically deploy the site to `https://primer.style/design/`.
+We deploy this site using [GitHub Pages](https://pages.github.com/). Every push to a branch other than `main` will deploy to a URL unique to the preview environment. Merges to `main` will automatically deploy the site to `https://primer.style/`.
 
 ## FAQ
 
-### How do I add documentation for a new component or edit existing component documentation? 
-- Our [component documentation files are found here](https://github.com/primer/design/tree/main/content/components), and guidelines for adding content can be found under the [Documenting components](https://primer.style/design/guides/contribute/documentation#documenting-components) section of the [Contributing guidelines]((https://primer.style/design/guides/contribute/documentation)).
-- For a more detailed walk-through, check out this [tutorial video](https://www.loom.com/share/ac56f610076f41878d0351b4a1c44a6b?sid=1bd5a46d-a7ea-4e0d-bb08-ed9e8c8bfe12). 
+### How do I add documentation for a new component or edit existing component documentation?
+- Our [component documentation files are found here](https://github.com/primer/design/tree/main/content/components), and guidelines for adding content can be found under the [Documenting components](https://primer.style/guides/contribute/documentation#documenting-components) section of the [Contributing guidelines]((https://primer.style/guides/contribute/documentation)).
+- For a more detailed walk-through, check out this [tutorial video](https://www.loom.com/share/ac56f610076f41878d0351b4a1c44a6b?sid=1bd5a46d-a7ea-4e0d-bb08-ed9e8c8bfe12).
 
-### I need help getting started. 
-- Check out our [getting started guides](https://primer.style/design/guides) or ping us in [Slack](https://github.slack.com/archives/CSGAVNZ19) (GitHub staff only)
+### I need help getting started.
+- Check out our [getting started guides](https://primer.style/guides) or ping us in [Slack](https://github.slack.com/archives/CSGAVNZ19) (GitHub staff only)
 
 ### I noticed a bug in the documentation!
 - Feel free to open a pull request or issue directly in this repository, or ping us in [Slack](https://github.slack.com/archives/CSGAVNZ19) (GitHub staff only)
@@ -419,8 +419,8 @@ On smaller viewports, the menu should always be re-positioned to fit within the
 Here is an overview of [action list](/components/action-menu) items that are compatible with menus:
 
 - **Action**: Triggers an action or dialog. Trailing visuals can be used for keyboard shortcuts.
-- **Single/multi select**: Represented by a [check](/design/foundations/icons/check-16) and never a HTML checkbox. Trailing visuals can be used for keyboard shortcuts.
-- **Submenu**: Represented by a [chevron-right](/design/foundations/icons/chevron-right-16) as a trailing visual.
+- **Single/multi select**: Represented by a [check](/foundations/icons/check-16) and never a HTML checkbox. Trailing visuals can be used for keyboard shortcuts.
+- **Submenu**: Represented by a [chevron-right](/foundations/icons/chevron-right-16) as a trailing visual.
 - **Section header**: To add clarification to a section.
 - **Divider**: To create sections for your selections, actions or submenus.
 

@@ -39,7 +39,7 @@ Grouping buttons with a button group is better than rendering buttons close toge
 - Avoid grouping too many buttons together. It could be overwhelming to the user.
 - Do not use a button group to indicate a selection. Use a [segmented control](/components/segmented-control) instead.
 - Do not use a button group as a replacement for tab navigation. <!-- TODO: link to TabNav once it's merged -->
-- Avoid mixing buttons with text labels with icon-only buttons. However, it is acceptable to group a text-labeled button with an icon-only button with a [down-pointing triangle](https://primer.style/design/foundations/icons/triangle-down-16) that opens a dropdown menu of actions related to the button.
+- Avoid mixing buttons with text labels with icon-only buttons. However, it is acceptable to group a text-labeled button with an icon-only button with a [down-pointing triangle](https://primer.style/foundations/icons/triangle-down-16) that opens a dropdown menu of actions related to the button.
 - Do not group an [invisible](/components/button#invisible) button with buttons of another variant.
 
 ## Options

@@ -485,7 +485,7 @@ When adding an extra action in the footer, it is important to ensure that it sti
   src="https://github.com/primer/design/assets/980622/ae6d19c2-7bfa-4357-be65-341c0728b9a8"
 />
 
-See the [Dialog guidelines](https://primer.style/design/components/dialog) for more details.
+See the [Dialog guidelines](https://primer.style/components/dialog) for more details.
 
 ## Keyboard navigation
 

@@ -148,7 +148,7 @@ import {AccessibilityLink} from '~/src/components/accessibility-link'
   sx={{gap: 3}}
 >
   <Box as="p" mt="0">
-    The <a href="/design/ui-patterns/progressive-disclosure">progressive disclosure pattern</a> may be used to hide or
+    The <a href="/ui-patterns/progressive-disclosure">progressive disclosure pattern</a> may be used to hide or
     show content based on whether a toggle switch is on. Content revealed on toggle switch activation should always come{' '}
     <em>after</em> the toggle switch.
   </Box>

@@ -188,7 +188,7 @@ Examples of interactions:
     </Box>
     <Box as="p">
       Tokens can be added or removed from a group in the way that makes the most sense for your use case. We recommend
-      using an <a href="/design/components/autocomplete">autocomplete</a> component to allow users to sort through a
+      using an <a href="/components/autocomplete">autocomplete</a> component to allow users to sort through a
       list to pick options.
     </Box>
     <Box as="p">

@@ -387,7 +387,7 @@ A tree view can be a frustrating pattern if it forces users to spend a lot of ti
     <p>
       Inform users why the data cannot be retrieved and give them a path to resolve it. The error message cannot appear
       in the tree view because it is not semantically a node in the tree. Instead, the error message should appear in a{' '}
-      <a href="/design/components/dialog">dialog</a> with an optional call-to-action that can resolve the error.
+      <a href="/components/dialog">dialog</a> with an optional call-to-action that can resolve the error.
     </p>
     <p>
       If the user dismisses the dialog, focus should be moved back to the collapsed parent node. If the user clicks a

@@ -312,7 +312,7 @@ If you work with the [functional colors](#color-roles-recipes), this work has al
 
 ### Additional guidance
 
-Reference [Color considerations](https://primer.style/design/guides/accessibility/color-considerations) for additional information about how color relates to compliance, and other focused documentation topics.
+Reference [Color considerations](https://primer.style/guides/accessibility/color-considerations) for additional information about how color relates to compliance, and other focused documentation topics.
 
 ## Color outside the functional system