Website: bug bash small fixes

packages/components/NEW-COMPONENT-CHECKLIST.md

@@ -11,7 +11,7 @@ The following should be available as resources for the Project Kickoff.
 
 ## Project Kickoff
 
-A project kickoff will be scheduled before the project start date. The kickoff will be used to align on project scope, timelines, and milestones and as a space to discuss any open questions. In attendance should be Design System team leadership, lead Designer and Engineer on the project, and Design/Engineer buddies (if applicable).
+A project kickoff will be scheduled before the project start date. The kickoff will be used to align on project scope, timelines, and milestones and as a space to discuss any open questions. In attendance should be Design Systems Team leadership, lead Designer and Engineer on the project, and Design/Engineer buddies (if applicable).
 
 ## Design Checklist
 The design checklist has 4 primary parts:

packages/components/README.md

@@ -48,7 +48,7 @@ Finally, add this line to the top of your app's style file (`app.scss` or simila
 @import '@hashicorp/design-system-components';
 ```
 
-⚠️ **Notice**: our component library assumes that a `*, *::before, *::after { box-sizing: border-box; }` reset is applied globally in the CSS of the application. If in your use case this is not true, please speak with the design system team (we can try to find a workaround).
+⚠️ **Notice**: our component library assumes that a `*, *::before, *::after { box-sizing: border-box; }` reset is applied globally in the CSS of the application. If in your use case this is not true, please speak with the Design Systems Team (we can try to find a workaround).
 
 Usage
 ------------------------------------------------------------------------------

website/app/controllers/index.js

@@ -16,7 +16,7 @@ export default class IndexController extends Controller {
     {
       title: 'Content',
       description:
-        'Structured guidelines on tone and voice, user communication and more.',
+        'Structured guidelines on tone and voice, user communication, and more.',
       route: 'content',
     },
     {

website/app/templates/about.hbs

@@ -16,7 +16,7 @@
     <p class="doc-text-body">The HashiCorp Design Systems Team creates and maintains the Helios Design System. This
       includes the Figma components, web components, documentation, and more. Read through our
       <a class="doc-link-generic" href="/about/overview/" target="_blank" rel="noopener noreferrer">overview</a>
-      for more details, and to see why adopting the design system is the future for product teams.
+      for more details.
     </p>
 
     <h2 class="doc-text-h2">Principles</h2>

website/docs/about/overview.md

@@ -14,7 +14,7 @@ Design systems are often equated with a UI kit or component library. In reality,
 
 ## What is Helios
 
-**Helios** is the design system built by the HashiCorp Design System Team. It’s commonly referred to as **HDS**.
+**Helios** is the design system built by the HashiCorp Design Systems Team. It’s commonly referred to as **HDS**.
 
 Helios is available and recommended for all HashiCorp product teams using Ember.js. We also support teams using alternative frameworks or libraries, such as React, on a case-by-case basis via our design assets, [tokens](/foundations/tokens), and best practice guidance.
 
@@ -28,23 +28,23 @@ For more information on how to use the design system, visit our getting started
 
 Helios was specifically created for **customer-facing products**.
 
-All HashiCorp **product teams** have adopted Helios as the single source of truth for the design language, components, and patterns used to build the UIs of their consumer-facing products.
+All HashiCorp **product teams** have adopted Helios as the single source of truth for the foundations, components, and patterns used to build the UIs of their consumer-facing products.
 
 ### Internal products
 
 Helios is **not** meant to be used as a general-purpose UI library.
 
-If you intend to use Helios for **internal products or tools** in HashiCorp [contact the Design Systems Team](/about/support) before starting so we can discuss if Helios is a good fit for your team and how this might affect system overhead (changes, maintenance, support, etc).
+If you intend to use Helios for **internal products or tools**, [contact the Design Systems Team](/about/support) before starting so we can discuss if Helios is a good fit for your team.
 
 ### External products
 
 Helios is **not** meant to be used outside of HashiCorp. 
 
-If you’re **not a HashiCorp employee**, you’re more than welcome to use the Helios design system as a reference, but we don’t provide support if you use it to build your product or UIs. At any moment, we may introduce changes to our assets or components that could potentially break your product or UIs.
+If you’re **not a HashiCorp employee**, you’re more than welcome to use the Helios Design System as a reference, but we don’t provide support if you use it to build your product or UIs. At any moment, we may introduce changes to our assets or components that could potentially break your product or UIs.
 
 ## Benefits of using Helios
 
-While increasing visual and functional consistency across products is the most visibly notable result of design system adoption, other benefits include:
+Helios increases the visual and functional consistency of Hashicorp products. Other benefits include:
 
 - Increased velocity in the design and development of new products and features
 - Dismantling silos between teams that adopt and use the system
@@ -57,7 +57,7 @@ While the scale of a design system largely depends on the needs of those consumi
 
 In Helios, we offer the following:
 
-- **Design Language**: colors, typography, icons, content strategy
+- **Foundations**: colors, typography, icons, content strategy
 - **Components**: component design, component development, tokens, development standards
 - **Patterns**: repetitive combinations of components and foundational styles that yield more complex functions and features
 - **Documentation**: education, issue tracking, contribution, content management, processes

website/docs/about/principles.md

@@ -1,7 +1,7 @@
 ---
 title: Principles
 description: We consider the whole when creating the parts.
-caption: Read the principles that guide the design system team.
+caption: Read the principles that guide the Design Systems Team.
 navigation:
   order: 102
 layout:

website/docs/components/app-footer/index.md

@@ -3,7 +3,7 @@ title: App Footer
 description: >-
   A footer that appears on every screen to display supplementary information and
   links.
-caption: Displays supplementary information and links for the application.
+caption: Supplementary information and links for the application.
 links:
   figma: >-
     https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67351-171799&t=w8xQlWxzH7bwXLe2-1

website/docs/components/button-set/index.md

@@ -1,7 +1,7 @@
 ---
 title: Button Set
 description: Provides consistent layout and spacing for a set of buttons.
-caption: A set of buttons.
+caption: Provides consistent layout and spacing for a set of buttons.
 links:
   github: >-
     https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button-set

website/docs/components/flyout/partials/guidelines/guidelines.md

@@ -21,7 +21,8 @@ A Flyout is useful for more complex content, given the space it occupies in the
 
 !!! Info
 
-**Note:** Complexity of content is relative, use your own judgment to determine if the content or function is overly complex and consider moving it to its own page.
+Complexity of content is relative, use your own judgment to determine if the content or function is overly complex and consider moving it to its own page.
+
 !!!
 
 #### Status and messaging

website/docs/components/segmented-group/index.md

@@ -1,11 +1,9 @@
 ---
 title: Segmented Group
 description: >-
-  Combines one or more input fields and actions to handle complex filtering and
-  data collection.
+  Combines one or more input fields and actions.
 caption: >-
-  Combines one or more input fields and actions to handle complex filtering and
-  data collection.
+  Combines one or more input fields and actions.
 links:
   figma: >-
     https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-110590&t=w8xQlWxzH7bwXLe2-1

website/docs/components/tag/partials/guidelines/guidelines.md

@@ -11,13 +11,12 @@
 
 ## Layout
 
-- The Tag component can be used in several different layouts, but we commonly see them in a list or a group.
-- Tags will fill the parent container and then wrap, as necessary.
+The Tag component can be used in several different layouts, but we commonly see them in a list or a group. They will fill the parent container and then wrap, as necessary.
 
-![Tag layout as a list](/assets/components/tag/tag-layout-list.png =678x*)
+![Skeleton of an app with tags in a list below the heading.](/assets/components/tag/tag-layout-list.png =678x*)
 <Doc::ImageCaption @text="Tag layout as a list"/>
 
-![Tag layout as a group](/assets/components/tag/tag-layout-group.png =818x*)
+![Skeleton of an app with tags in a group where they fill the container and wrap onto 4 rows.](/assets/components/tag/tag-layout-group.png =818x*)
 <Doc::ImageCaption @text="Tag layout as a group"/>
 
 ## Spacing
@@ -30,14 +29,14 @@ As a best practice, use a vertical spacing of 12px and horizontal spacing of 8px
 
 !!! Do
 
-![Example of a leading icon in the tag](/assets/components/tag/tag-leading-icon.png =916x*)
+![](/assets/components/tag/tag-leading-icon.png =916x*)
 The leading dismiss icon allows mouse users to clear multiple Tags quickly because they do not need to move their mouse.
 !!!
 
 
 !!! Dont
 
-![Example of a trailing icon in the tag](/assets/components/tag/tag-trailing-icon.png =916x*)
+![](/assets/components/tag/tag-trailing-icon.png =916x*)
 When the dismiss icon is trailing, the mouse user must adjust positioning of their mouse to clear the Tags, which results in slower task completion.
 !!!
 

website/docs/foundations/border/index.md

@@ -1,7 +1,7 @@
 ---
 title: Borders
-caption: Borders define and separate content visually. They can be used alone or in combination with elevation.
-description: Borders define and separate content visually. They can be used alone or in combination with elevation.
+caption: Borders define and separate content visually.
+description: Borders define and separate content visually.
 links:
   figma: https://www.figma.com/design/uX4OEaJQdWfzULADchjAeN/HDS-Foundations-v2.0?node-id=6024-2082&t=z7hDCKFFuGUMDRYe-1
 previewImage: assets/illustrations/foundations/border.jpg

website/docs/foundations/tokens/index.md

@@ -1,7 +1,7 @@
 ---
 title: Tokens
-caption: Design tokens are provided as CSS custom properties and used to share and standardize foundation styles.
-description: Design tokens are provided as CSS custom properties and used to share and standardize foundation styles.
+caption: Design tokens are used to share and standardize foundation styles.
+description: Design tokens are used to share and standardize foundation styles.
 previewImage: assets/illustrations/foundations/tokens.jpg
 layout:
   sidecar: false

website/docs/getting-started/for-designers.md

@@ -12,8 +12,6 @@ Many resources and links on this page are only available to HashiCorp employees.
 
 The Design Systems Team maintains and publishes Figma libraries which contain foundational styles, components, patterns, and icons.
 
-For documentation around broader Figma best practices within HashiCorp design teams, reach out to the [Design Ops team](https://sites.google.com/hashicorp.com/designknowledgehub/design-system) or visit the [#design-ops slack channel](https://hashicorp.slack.com/archives/C029GL8GJDV).
-
 ## Enabling Helios libraries
 
 !!! Insight
@@ -69,15 +67,9 @@ Because the usage of Helios Foundations reinforces consistency across the produc
 
 3. Select the style you wish to apply from the list of options. Ensure you choose styles within the **HDS - Product Foundations** library.
 
-![Applying styles to a text layer](/assets/getting-started/designers/apply-text-style.png =784x*)
-
-To learn more about how to use the foundational styles, visit:
+![](/assets/getting-started/designers/apply-text-style.png =784x*)
 
-- [Colors](/foundations/colors)
-- [Typography](/foundations/typography)
-- [Elevation](/foundations/elevation)
-- [Borders](/foundations/border)
-- [Focus ring](/foundations/focus-ring)
+To learn more about how to use the foundational styles, visit [the Foundations section](/foundations/).
 
 ## Icons
 
@@ -108,9 +100,7 @@ Add Helios components to your design project by inserting them directly from the
 
 1. Open the [assets panel](https://help.figma.com/hc/en-us/articles/360038663994-Name-and-organize-components#assetspanel) by clicking "Assets" at the top of the left sidebar.
 
-2. Scroll through the list or use the search feature to locate the component you’d like to use.
-
-   - Figma’s search feature returns results based on the component’s name, category, and description.
+2. Scroll through the list or use the search feature to locate the component you’d like to use. **Note:** Figma’s search feature returns results based on the component’s name, category, and description.
 
 3. Click and drag the component into the canvas or frame.
 
@@ -136,7 +126,7 @@ If you prefer to select a component visually, the [Product Components](https://w
 
 4. Navigate back to your project file and paste the component wherever needed.
 
-![Copy from the stickersheet](/assets/getting-started/designers/copy-from-stickersheet.png =752x*)
+![](/assets/getting-started/designers/copy-from-stickersheet.png =752x*)
 
 ### Working with components
 
@@ -205,7 +195,7 @@ We don’t recommend tying core design functionality to third-party plugins beca
 
 The [Figma community](https://www.figma.com/community) contains other useful resources for documenting your designs, wireframing, and collaborating with your team. Access Figma's community by clicking the organization switcher in the dashboard and selecting "Community" or by clicking "Explore Community" in the toolbar.
 
-![Navigating to the Figma community from the desktop app](/assets/getting-started/designers/figma-community.png =804x*)
+![](/assets/getting-started/designers/figma-community.png =804x*)
 
 ### Figma documentation
 

website/docs/icons/library/index.md

@@ -2,7 +2,7 @@
 title: Icon library
 layout:
   sidecar: false
-caption: Icons can be used to support and enhance meaning and can help call out information.
+caption: Use icons to support and enhance meaning and call out information.
 links:
   figma: https://www.figma.com/design/TLnoT5AYQfy3tZ0H68BgOr/HDS-Icons?m=auto&node-id=164-0&t=uqfJ7Wtjy9AfhBtY-1
   github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/icon

website/docs/patterns/button-organization/partials/guidelines/alignment.md

@@ -1,6 +1,6 @@
 ## Alignment
 
-Alignment refers to how buttons and actions are aligned relative to the container or page. When combined with different reading patterns and hierarchy focal points, different alignment methods impact a function's readability, usability, and intended outcome.
+Alignment refers to how buttons and actions are aligned relative to the container or page. When combined with different reading patterns and hierarchy, different alignment methods impact a function's readability, usability, and intended outcome.
 
 !!! Info
 

website/docs/patterns/button-organization/partials/guidelines/specifications.md

@@ -1,3 +1,3 @@
-While the alignment, order, and grouping of buttons might seem trivial, the impact on users is immediate and often occurs in experiences of high important and interruption.
+These guidelines aid in the decision-making process for organizing buttons and actions. Different alignment, ordering, and grouping of actions result in different outcomes in user experience.
 
 While these guidelines don’t cover every scenario, they are intended to aid in the decision-making process when determining how to organize buttons and actions. Different methods of alignment and ordering will result in different outcomes with pros and cons for each. What is most important is **consistency** across an application in how actions are aligned, ordered, and grouped.