Add one image, drop the rest

src/docs/frontend/design-tenets.mdx

@@ -19,13 +19,12 @@ Why disable (grey out)?
 - Informs of the current value (read access)
 
 <Alert level="info">
-  Bonus: where it makes sense, consider <SmartLink to="https://blog.sentry.io/how-we-grew-sentrys-monthly-active-users-by-rethinking-invitations/">prompting the user to request access</SmartLink>.
+  Bonus: where it makes sense, consider <Link href="https://blog.sentry.io/how-we-grew-sentrys-monthly-active-users-by-rethinking-invitations/" remote>prompting the user to request access</Link>.
 </Alert>
 
-<figure>
-  IMAGE HERE
-  In this example, the current user does not have access to modify the "Default Role", but the presence of the setting and the current value is still visible.
-</figure>
+![Disabled Default Role dropdown](../img/connectionNotPrivate.png)
+
+In this example, the current user does not have access to modify the "Default Role", but the presence of the setting and the current value is still visible.
 
 
 ## User navigation that changes visible data should go in URL
@@ -40,11 +39,6 @@ Why preserve state change in the URL?
   Ask yourself this question: "If I was sharing this page with my coworker on Slack, is it important that they see the exact view I'm looking at?" If the answer is "yes", then the state to regenerate that view should be present in the URL.
 </Alert>
 
-<figure>
-  VIDEO HERE
-  The Performance → Transaction Summary page has several navigations that redraw visible data; each of the state changes is preserved in the URL and respects the browser's back and forward buttons.
-</figure>
-
 ## Minimize content refreshes when navigating
 
 When navigating between views or in-page state changes (see above), try to preserve as much content as possible between pages (e.g. header, sidebar, and so on).
@@ -58,36 +52,17 @@ Why minimize content refreshes?
   Note: while there are a few good examples of this in action in the app, we are actually pretty inconsistent applying this design principle.
 </Alert>
 
-<figure>
-  VIDEO HERE
-  Most navigation changes on the Issue page only redraws the content inside the Issue table. The sidebar, global header, search bar, sort button, and even table header remains rendered as content reloads.
-</figure>
-
 ## Use placeholders instead of loading spinners
 
 Spinners should be used carefully. Having multiple spinners on the page is distracting. Reserve spinners for primary content that has an unknown height. Favor the usage of sized placeholder elements where the height of content is known, or the content is secondary to the main goal of the page.
 
-<figure>
-  VIDEO HERE
-  Notice the use of placeholders in the sidebar and chart, and how they reduce layout shift.
-</figure>
-
 Why use placeholders?
 - Less layout shifts / render thrash (see video below)
 - Better perceived performance
 - Avoids having multiple loading spinner animations at once, which looks ugly
 
-<figure>
-  VIDEO HERE
-  Loading spinners cause content to shift repeatedly as the page renders.
-</figure>
-
 ## Ensure that footer remains "sticky" at bottom of viewport
 
 This generally happens with a loading state where the view that is loading has the CSS to render the layout. The loading indicator should be contained within the layout component e.g. `<PageContent>`.
 
 This will avoid having the footer in the middle of the screen and then shifting to the bottom when the view renders.
-
-<figure>
-  IMAGE HERE
-</figure>