Kajabi · pixelflips · Nov 17, 2025 · Nov 14, 2025 · Nov 14, 2025 · Nov 14, 2025
diff --git a/libs/core/src/stories/foundations/principles.docs.mdx b/libs/core/src/stories/foundations/principles.docs.mdx
diff --git a/libs/core/src/stories/guides/assets.docs.mdx b/libs/core/src/stories/guides/assets.docs.mdx
@@ -6,14 +6,14 @@ import { Meta, Story } from '@storybook/blocks';
 
 The icon component require static assets during runtime.
 
-By default, Pine and `pds-icon` components will fetch these assets via [jsDelivr](https://www.jsdelivr.com/). JsDelivr is a free CDN for open source projects. However, as we cannot guarantee the availability and performance of this CDN, we recommend bundling the assets with your application.
+By default, Pine and `pds-icon` components will fetch these assets via <pds-link href="https://www.jsdelivr.com/" external>jsDelivr</pds-link>. JsDelivr is a free CDN for open source projects. However, as we cannot guarantee the availability and performance of this CDN, we recommend bundling the assets with your application.
 
 Copy the assets from the Pine Design System package to your application. We recommend including copying these assets in your build process, which ensures that the assets are always up to date.
 
 
   You should add the copied assets (e.g. <code>public/assets/pine-ds/svg/*</code>) to your <code>.gitignore</code> file.
 
-For the following example, we assume you are using [Vite](https://vitejs.dev/). By default, Vite uses the `public` folder for static assets. To include the Pine Design System assets in your output bundle, you can copy them to this folder.
+For the following example, we assume you are using <pds-link href="https://vitejs.dev/" external>Vite</pds-link>. By default, Vite uses the `public` folder for static assets. To include the Pine Design System assets in your output bundle, you can copy them to this folder.
 
 First, install the `rollup-plugin-copy` plugin. This plugin allows you to copy files and folders while building.
 

diff --git a/libs/core/src/stories/guides/events.docs.mdx b/libs/core/src/stories/guides/events.docs.mdx
@@ -7,7 +7,7 @@ import { Meta, Story } from '@storybook/blocks';
 Pine tries to adhere to the browser standards whenever possible. However, with Web Components there are events that are a result of a direct user
 interaction, like `click`, `focus` that bubble just fine from inside a Web Component's shadow DOM into the light DOM. But then we have others,
 like `change` event, that don't. The difference between those events is that the former are defined as
-[composed events](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed), while the latter are not.
+<pds-link href="https://developer.mozilla.org/en-US/docs/Web/API/Event/composed" external>composed events</pds-link>, while the latter are not.
 
 
 We also try to dispatch non-composed events by manually creating them on Web Component's host elements, but they do not behave 1:1 like their native

diff --git a/libs/core/src/stories/guides/layout.docs.mdx b/libs/core/src/stories/guides/layout.docs.mdx
@@ -1340,5 +1340,5 @@ If you encounter issues with your layout, here are some common problems and thei
   - **Solution:** Flex properties only work when the immediate parent is another `pds-box`, not when inside `pds-row`. Use `size` props (e.g., `size="6"`) to control column width within rows. For flex behavior, nest the box inside another `pds-box` container instead of using it directly in `pds-row`.
 
 ## Related Components
-- [Box](/docs/components-box--docs)
-- [Row](/docs/components-row--docs)
+- <pds-link href="../?path=/docs/components-box--docs">Box</pds-link>
+- <pds-link href="../?path=/docs/components-row--docs">Row</pds-link>
diff --git a/libs/core/src/stories/introduction/contributing.docs.mdx b/libs/core/src/stories/introduction/contributing.docs.mdx
@@ -3,33 +3,153 @@ import { Meta, Story } from '@storybook/blocks';
 
 <Meta title="Introduction/Contributing"  parameters={{ previewTabs: { canvas: { hidden: true }, } }} />
 
-# Introduction
-The Pine Design System is built using Stencil JS web components, providing a standardized set of UI components and guidelines for making consistent user interfaces across products. The purpose of this guide is to outline how Developers and Designers can contribute to the Pine Design System.
+# Contributing
 
-## Getting Started
-Before contributing to the Pine Design System, Developers and Designers should familiarize themselves with its architecture, components, and design guidelines.
+We welcome and encourage contributions to the Pine Design System! Whether you're fixing a bug, improving documentation, or proposing a new component, your contributions help make Pine better for everyone. This guide will help you get started and ensure your contributions align with our standards and best practices.
 
-## Architecture
-Pine is built on the Stencil JS web component library. Developers should understand how web components work and how to use Stencil JS to create them.
+Pine is built using <pds-link href="https://stenciljs.com/" external>Stencil.js</pds-link>, which allows us to create web components with TypeScript that work across all frameworks.
 
-## Components
-Pine includes a set of UI components used to build consistent user interfaces. Developers should familiarize themselves with the components available in Pine and how to use them.
+## Prerequisites
 
-## Design Guidelines
-Pine has a set of design guidelines defined as Tokens, which outline how components should be used and how they should look. Designers should familiarize themselves with these guidelines to ensure they align with the system's visual language.
+Before contributing to the Pine Design System, ensure you have the following:
 
-## Contributing as a Developer
-As a Developer, you can contribute to Pine by creating new components, improving existing components, or fixing bugs. Here are the steps you can take to contribute:
-1. Fork the Pine repository on GitHub.
-2. Create a new branch for your changes.
-3. Make your changes to the code.
-4. Test your changes locally to ensure they work as expected.
-5. Submit a pull request to the Pine repository.
+### Dependencies
 
-When submitting a pull request, include a detailed description of your changes and any relevant documentation or tests.
+Pine requires Node `>=16`.
 
-## Contributing as a Designer
-Coming soon
+### Knowledge Requirements
 
-## Conclusion
-The Pine Design System is a collaborative effort that relies on the contributions of developers and designers to maintain and improve. By following these guidelines, developers, and designers can work together to create a robust and user-friendly design system.
+**Web Components & Stencil.js**
+Pine is built on the <pds-link href="https://stenciljs.com/" external>Stencil.js</pds-link> web component library. Contributors should have a basic understanding of how web components work and how to use Stencil.js to create them.
+
+**Pine Components**
+Familiarize yourself with the existing Pine components and how they work. Browse through the component documentation to understand our patterns and conventions.
+
+**Design Tokens**
+Understanding Pine's design token system will help you apply styling consistently across components.
+
+## Setting Up Your Development Environment
+
+### Fork and Clone
+
+<pds-link href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo" external>Fork and clone</pds-link> the <pds-link href="https://github.com/Kajabi/pine" external>Pine GitHub repository</pds-link>.
+
+### Installation
+
+Run the following commands for initial setup:
+
+1. `cd pine`
+2. `npm install`
+3. `brew install mkcert`, if using Firefox run `brew install nss` instead
+4. `mkcert -install`
+5. `npm run setup`
+6. `cd libs/core`
+7. `mkcert -cert-file pineLocalDev.pem -key-file pineLocalDev-key.pem localhost 7300`
+8. `cd ../..`
+
+### Start the Development Server
+
+To spin up a local dev server and test your changes, run:
+
+```zsh
+npm run start
+```
+
+A local instance of Storybook will be served at `http://localhost:6006`.
+
+## Making Changes
+
+### Branch Naming Convention
+
+Before you start coding, create a new branch using our conventional branch naming convention. Branches that don't adhere to this style won't be able to be pushed, so be sure your branch begins with one of the accepted prefixes.
+
+Common prefixes include:
+- `feat/` - New features
+- `fix/` - Bug fixes
+- `docs/` - Documentation changes
+- `style/` - CSS/styling changes
+- `refactor/` - Code refactoring
+- `test/` - Adding or updating tests
+
+Example:
+
+```zsh
+style/button-accent-update
+```
+
+### Creating a New Component
+
+To add new components, run the following command:
+
+```zsh
+npm run stencil.generate pds-[component name]
+```
+
+When prompted, choose `*.scss Format`, then confirm. The initial component files will be generated. Once they are, you will need them to match other components. It may be best to copy any missing folders such as `stories/` and `docs/` from other components and update any imports or text to match.
+
+### Modifying Existing Components
+
+When modifying existing components:
+1. Locate the component in `libs/core/src/components/`
+2. Make your changes to the component files
+3. Update documentation in the `docs/` folder if needed
+4. Update or add stories in the `stories/` folder
+5. Test your changes in Storybook
+
+## Quality & Standards
+
+Every component in Pine is well-tested. We ask that for any new features added to components that the corresponding documentation, end-to-end (E2E) tests, and spec tests are added for quality assurance.
+
+### Linting
+
+We use prettier for linting. To check your code:
+
+```zsh
+npm run lint.all
+```
+
+### Testing
+
+We use Stencil's built-in testing suite for testing TypeScript. To run tests:
+
+```zsh
+npm run test.all
+```
+
+This runs both spec tests and E2E tests to ensure your changes work correctly and don't break existing functionality.
+
+## Submitting Your Contribution
+
+### Commit Messages
+
+We use <pds-link href="https://www.conventionalcommits.org/en/v1.0.0/" external>Conventional Commits</pds-link>, so please ensure your commit messages adhere to these standards.
+
+### Creating a Pull Request
+
+First, ensure that the `main` branch is up to date:
+
+```zsh
+git checkout main
+git pull upstream main
+```
+
+Then, rebase your branch against `main` and resolve any conflicts:
+
+```zsh
+git checkout your/branch-name
+git rebase main
+```
+
+Once rebased, push your branch and create a pull request. When creating your pull request:
+- Fill out the template with as much detail as possible
+- Include before and after screenshots for visual changes
+- Tag `Kajabi/dss-devs` to notify the Design System team
+- Our standards require at least two accepted reviews before merging
+
+## Troubleshooting
+
+Sometimes, the development environment will experience rendering issues while hot reloading. In most cases, this can be fixed by re-running the `npm run start` command. For any cases where this doesn't resolve the issue, please feel free to reach out to the team for support.
+
+## Get Help
+
+If you have questions or need assistance, reach out to us through our support channels. We're here to help make your contribution experience as smooth as possible!
diff --git a/libs/core/src/stories/introduction/welcome.docs.mdx b/libs/core/src/stories/introduction/welcome.docs.mdx
@@ -18,7 +18,7 @@ We firmly believe in fostering an inclusive and collaborative environment where
 
 We continuously refine and expand our design system to meet evolving needs and expectations by encouraging open communication, feedback, and contributions from all stakeholders. This collaborative approach helps identify potential improvements and new ideas while promoting a shared sense of ownership and investment in the system's success.
 
-To facilitate this process, we provide [resources and guidelines](https://github.com/Kajabi/pine/blob/main/CONTRIBUTING.md) for understanding, using, and contributing to the design system. By offering a clear path for participation, we aim to foster a thriving community of designers, developers, and users who work together to ensure the system remains relevant, effective, and resilient over time.
+To facilitate this process, we provide <pds-link href="../?path=/docs/introduction-contributing--docs">resources and guidelines</pds-link> for understanding, using, and contributing to the design system. By offering a clear path for participation, we aim to foster a thriving community of designers, developers, and users who work together to ensure the system remains relevant, effective, and resilient over time.
 
 ## How to Use
 

diff --git a/libs/core/src/stories/resources/icons-mgmt.docs.mdx b/libs/core/src/stories/resources/icons-mgmt.docs.mdx
@@ -18,14 +18,14 @@ Previously, this process could lead to unintended package version updates within
 
 * Using Existing Icons: No action is required to use existing icons in your project.
 * Requesting New Icons:
-  * If a required icon is missing, but exists in the [Figma Icon document](https://www.figma.com/file/gr2OhPSlvtsYIZQCL5G2ey/%E2%84%B9%EF%B8%8F-Sage-icons?type=design&node-id=2-2&mode=design&t=g5byhDbSokb3hccP-0), the automated process will eventually add it to the library.
+  * If a required icon is missing, but exists in the <pds-link href="https://www.figma.com/file/gr2OhPSlvtsYIZQCL5G2ey/%E2%84%B9%EF%B8%8F-Sage-icons?type=design&node-id=2-2&mode=design&t=g5byhDbSokb3hccP-0" external>Figma Icon document</pds-link>, the automated process will eventually add it to the library.
   * Once the new version containing the desired icon has been published, run `npm update @pine-ds/icons` in your project to ensure you're using the latest version.
 
 ## Designers
 
 * Adding New Icons:
 
-  * Always add new icons to the [Figma Icon document](https://www.figma.com/file/gr2OhPSlvtsYIZQCL5G2ey/%E2%84%B9%EF%B8%8F-Sage-icons?type=design&node-id=2-2&mode=design&t=g5byhDbSokb3hccP-0) before notifying developers.
+  * Always add new icons to the <pds-link href="https://www.figma.com/file/gr2OhPSlvtsYIZQCL5G2ey/%E2%84%B9%EF%B8%8F-Sage-icons?type=design&node-id=2-2&mode=design&t=g5byhDbSokb3hccP-0" external>Figma Icon document</pds-link> before notifying developers.
   * This allows the automated build process to run and update the library before developers require the new icon.
 
 

diff --git a/libs/core/src/stories/resources/support.docs.mdx b/libs/core/src/stories/resources/support.docs.mdx
@@ -1,8 +1,30 @@
 
 import { Meta, Story } from '@storybook/blocks';
 
-<Meta title="Resources/Get Support"  parameters={{ previewTabs: { canvas: { hidden: true }, } }} />
+<Meta title="Introduction/Get Support"  parameters={{ previewTabs: { canvas: { hidden: true }, } }} />
 
-# Pine support
+# Get Support
 
-Coming soon
+We're always happy to help answer questions regarding Pine component design and usage, design system best practices, accessibility, design tokens, and implementation questions. If it's part of Pine, we're here to help! Whether you're looking to contribute, report a bug, or request a feature, we'll do our best to assist you or point you to the right resources.
+
+## Slack Channels
+
+Our team is here to help! You might find a quick answer by browsing the documentation or searching past Slack conversations, but don't hesitate to reach out—we're always happy to answer questions and chat about Pine.
+
+- <pds-link href="https://kajabi.slack.com/archives/C01A424HY8Y" external>#ds-support</pds-link> is for help requests and support questions
+- <pds-link href="https://kajabi.slack.com/archives/C046HHS5KTN" external>#design-system-discussion</pds-link> is for general design systems conversation and collaboration
+- <pds-link href="https://kajabi.slack.com/archives/C0922PA4509" external>#dss-pine-mcp</pds-link> is for discussions and support related to the Pine MCP
+
+## Project Tracking
+
+Curious about what we're working on? You can check out our <pds-link href="https://linear.app/kajabi/team/DSS/all" external>Linear board</pds-link>.
+
+## GitHub
+
+Our codebase lives on <pds-link href="https://github.com/Kajabi/pine" external>GitHub</pds-link>. Feel free to:
+- Browse the source code
+- Report issues
+- Submit pull requests
+- Check out our <pds-link href="../?path=/docs/resources-changelogs--docs">changelogs</pds-link>
+
+For more information on contributing, see our <pds-link href="../?path=/docs/introduction-contributing--docs">Contributing guide</pds-link>.
diff --git a/libs/core/src/stories/tokens/tokens.docs.mdx b/libs/core/src/stories/tokens/tokens.docs.mdx
@@ -7,7 +7,7 @@ import { default as TokenExample3 } from '../../../assets/images/tokens/token-ex
 
 # Tokens
 
-Within the design system repository, all tokens are converted into **CSS custom properties** during the build process via [Style Dictionary](https://amzn.github.io/style-dictionary/#/README) once the PR from Tokens Studio is merged into the main branch. Custom properties are supported in every major browser and available globally within the Pine design system.
+Within the design system repository, all tokens are converted into **CSS custom properties** during the build process via <pds-link href="https://amzn.github.io/style-dictionary/#/README" external>Style Dictionary</pds-link> once the PR from Tokens Studio is merged into the main branch. Custom properties are supported in every major browser and available globally within the Pine design system.
 
 ## Why Style Dictionary?
 
@@ -124,7 +124,7 @@ While this does free us from using the "t-shirt sizing" scale for core tokens an
 
 ## Dimension Tokens
 
-With the release of Tokens Studio version 2.0, the Tokens Studio team has decided to adopt `dimension` as a token category, recommended by the W3C Design Tokens Community Group (DTCG), to match the CSS data type of `<dimension>`. [Dimension tokens](https://docs.tokens.studio/token-types/token-type-dimension), like their CSS data type counterparts, are numbers followed by units. They are intended to cover the now-deprecated Tokens Studio categories of:
+With the release of Tokens Studio version 2.0, the Tokens Studio team has decided to adopt `dimension` as a token category, recommended by the W3C Design Tokens Community Group (DTCG), to match the CSS data type of `<dimension>`. <pds-link href="https://docs.tokens.studio/token-types/token-type-dimension" external>Dimension tokens</pds-link>, like their CSS data type counterparts, are numbers followed by units. They are intended to cover the now-deprecated Tokens Studio categories of:
 
 - Space/Spacing
 - Size
@@ -143,4 +143,4 @@ Our team is always open to feedback and improving the system overall. Please rea
 
 ## References
 
-[“Naming Tokens in Design Systems”](https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676) by Nathan Curtis
+<pds-link href="https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676" external>"Naming Tokens in Design Systems"</pds-link> by Nathan Curtis