docs: Add Gamut Style Guide under /Meta

packages/styleguide/.storybook/preview.ts

@@ -23,7 +23,14 @@ const preview: Preview = {
         order: [
           'Gamut',
           'Meta',
-          ['About', 'Best Practices', 'Contributing', 'FAQs', 'Stories'],
+          [
+            'About',
+            'Best Practices',
+            'Contributing',
+            'FAQs',
+            'Stories',
+            'Gamut Writing Guide',
+          ],
           'Foundations',
           'Layouts',
           'Typography',

packages/styleguide/src/lib/Meta/About.mdx

@@ -12,7 +12,7 @@ import { parameters as contributingParameters } from './Contributing.mdx';
 import { parameters as deepControlsParameters } from './Deep Controls Add-On.mdx';
 import { parameters as faqsParameters } from './FAQs.mdx';
 import { parameters as installationParameters } from './Installation.mdx';
-import { parameters as storiesParameters } from './Stories.mdx';
+import { parameters as styleGuideParameters } from './Style Guide/About.mdx';
 import { parameters as usageGuideParameters } from './Usage Guide.mdx';
 
 export const parameters = {
@@ -32,7 +32,7 @@ export const parameters = {
     contributingParameters,
     deepControlsParameters,
     faqsParameters,
-    storiesParameters,
+    styleGuideParameters,
     brandParameters,
     installationParameters,
     usageGuideParameters,

packages/styleguide/src/lib/Meta/Style Guide/About.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/blocks';
+
+import {
+  AboutHeader,
+  addParentPath,
+  TableOfContents,
+} from '~styleguide/blocks';
+
+import { parameters as formattingParameters } from './Formatting.mdx';
+import { parameters as generalPrinciplesParameters } from './General Principles.mdx';
+import { parameters as languageAndGrammerParameters } from './Language and Grammer.mdx';
+import { parameters as linkingParameters } from './Linking.mdx';
+import { parameters as referencingCodeParameters } from './Referencing Code.mdx';
+import { parameters as storiesParameters } from './Stories.mdx';
+
+export const parameters = {
+  id: 'Meta/Gamut Writing Guide',
+  title: 'Gamut Writing Guide',
+  subtitle:
+    'Guidelines and standards for creating consistent, clear, and effective documentation.',
+};
+
+<Meta title="Meta/Gamut Writing Guide/About" />
+
+<AboutHeader {...parameters} />
+
+<TableOfContents
+  links={addParentPath(parameters.id, [
+    generalPrinciplesParameters,
+    languageAndGrammerParameters,
+    formattingParameters,
+    linkingParameters,
+    referencingCodeParameters,
+    storiesParameters,
+  ])}
+/>

packages/styleguide/src/lib/Meta/Style Guide/Formatting.mdx

@@ -0,0 +1,71 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Formatting',
+  title: 'Formatting',
+  subtitle: 'Standards for formatting text and content in documentation',
+  status: 'static',
+};
+
+<Meta title="Meta/Gamut Writing Guide/Formatting" />
+
+<AboutHeader {...parameters} />
+
+Consistent formatting makes documentation easier to scan, understand, and implement. These standards ensure our content is predictable and professional across all Gamut components.
+
+## Numbers
+
+- Use numerals for all numbers
+- Use commas for thousands: 1,000
+
+## Units of Measurement
+
+- Use standard units: px, rem, em, %
+- Include space between number and unit in prose: "16 pixels"
+- No space in code: `16px`, `2rem`
+
+## Lists
+
+Lists help break down complex information into digestible pieces. Use them to organize features, steps, or related concepts.
+
+### Bulleted lists:
+
+- Use for unordered items
+- Use parallel structure
+- End with periods if items are complete sentences
+- No periods if items are fragments
+
+### Numbered lists:
+
+- Use for sequential steps or prioritized items
+- Start each item with a capital letter
+
+## Code Blocks
+
+- Use triple backticks (` ``` `) with language identifier (e.g., `tsx`, `javascript`, `css`)
+- Include comments for complex examples
+- Keep examples concise and focused
+
+Example:
+
+````
+```tsx
+<TextButton onClick={handleClick}> Click me </TextButton>
+```
+````
+
+## Headings Hierarchy
+
+- H1: Page title (used once and set in the `parameters` object, not used explicitly)
+- H2: Major sections
+- H3: Subsections
+- Maintain logical order — don't skip levels
+
+## Whitespace
+
+- Use blank lines to separate sections
+- Don't use multiple consecutive blank lines
+- Indent code consistently (2 spaces for TypeScript/TSX)
+  - If you prefer tabbing, then it should be set as 2 spaces

packages/styleguide/src/lib/Meta/Style Guide/General Principles.mdx

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'General Principles',
+  title: 'General Principles',
+  subtitle: 'Core principles for writing effective documentation',
+  status: 'static',
+};
+
+<Meta title="Meta/Gamut Writing Guide/General Principles" />
+
+<AboutHeader {...parameters} />
+
+Good documentation does more than describe — it helps people succeed. These principles guide how we write about Gamut components, with a focus on clarity, accessibility, and usefulness. Whether you're documenting a new component or updating existing content, prioritize being clear about what something does, honest about its limitations, and helpful in showing how to use it effectively. We want to remove barriers and make it easier for designers and developers to do great work. Like our design system itself, this guide is a living document — it will continue to evolve as we add new features and learn from our users.
+
+## Voice and tone
+
+- Friendly and conversational: Write as if explaining to a colleague
+- Direct and action-oriented: Use "you" to address readers
+- Encouraging without overpromising: Be supportive but realistic
+- Global audience awareness: Avoid idioms, slang, and culturally-specific references
+
+## Inclusivity
+
+- Use inclusive language that makes all contributors feel welcome
+- Avoid jargon unless necessary — define terms when first introduced
+- Write for accessibility — ensure screen readers can parse content
+- Consider contributors of varying experience levels and roles (designers and developers)
+
+## Transparency
+
+- Clearly indicate component status:
+  - `current`: Stable, recommended for use
+  - `updating`: In progress, API may change
+  - `deprecated`: Do not use for new work
+  - `static`: Reference material, no active development
+- Link to source code and design files (Figma, GitHub)
+- Direct contributors to help channels (#gamut-team, Office Hours)
+
+## Consistency
+
+- Use the same terminology throughout documentation
+- Match language between headings, body copy, and code examples
+- Maintain consistent component naming across packages
+- Follow established patterns from existing components

packages/styleguide/src/lib/Meta/Style Guide/Language and Grammer.mdx

@@ -0,0 +1,62 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Language and Grammer',
+  title: 'Language and Grammer',
+  subtitle: 'Guidelines for language usage and grammar in documentation',
+  status: 'static',
+};
+
+<Meta title="Meta/Gamut Writing Guide/Language and Grammer" />
+
+<AboutHeader {...parameters} />
+
+## Voice
+
+- Use active voice: "The component renders..." not "The component is rendered by..."
+- Use second person ("you") when addressing the reader
+- Use imperative mood for instructions: "Add the component" not "You should add the component"
+
+## Tense
+
+- Use present tense for current functionality: "The Button accepts a variant prop"
+- Use future tense sparingly, only for confirmed features
+- Avoid past tense except in changelogs or historical context
+
+## Pronouns
+
+- Use "you" for the user
+- Avoid "we" unless referring to the Codecademy team
+- Avoid “I/my/me” entirely
+- Avoid "your/my" in button labels: prefer "Go to dashboard" over "Go to your dashboard"
+
+## Articles
+
+- Use articles (a, an, the) for clarity
+
+- "The Box component" (first mention) → "the component" (subsequent mentions)
+- When plural, the component should stay singular and the “component” is the pluralized, e.g
+  - ✅ “These Box components are…”
+  - ❌ “These Boxes are…”
+- Omit articles in lists when appropriate for brevity
+
+## Prepositions
+
+- Platform-agnostic language: "select" or "choose" (not "tap" or "click")
+- Avoid directional language: not "the form on the right" or "in the section below"
+- Use "in" for code locations: "in the `componentName.mdx` file"
+
+## Abbreviations and Acronyms
+
+- Spell out on first use: "Web Content Accessibility Guidelines (WCAG)"
+- Use abbreviations for common terms: HTML, CSS, API, UI, UX
+- Avoid uncommon abbreviations without definition
+
+## Capitalization
+
+- Sentence case for all headings, buttons, and UI text
+- PascalCase for component names: `MyComponent`, `ButtonGroup`
+- camelCase for props and variables: `onClick`, `backgroundColor`
+- Capitalize proper nouns: Codecademy, Storybook, Figma, GitHub

packages/styleguide/src/lib/Meta/Style Guide/Linking.mdx

@@ -0,0 +1,85 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, Callout } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Linking',
+  title: 'Linking',
+  subtitle: 'Best practices for linking within documentation',
+  status: 'static',
+};
+
+<Meta title="Meta/Gamut Writing Guide/Linking" />
+
+<AboutHeader {...parameters} />
+
+Use links to help users navigate between related components and resources. This guide covers linking within Storybook, to external sites, and writing clear link text.
+
+## Internal Links
+
+Use the `LinkTo` component from ‘~styleguide/blocks' and set the id prop as the story’s id value.
+
+```tsx
+import { LinkTo } from '~styleguide/blocks';
+<LinkTo id="Meta/Stories">Stories</LinkTo>
+<LinkTo id="Atoms/Animations/About">Animation</LinkTo>
+```
+
+### Guidelines:
+
+- Link text describes the destination, not the action: "See the [Stories page](#)" not "[See the Stories page](#)"
+- Use descriptive link text that makes sense out of context: "[Stories page](#)" not "[Click here](#)"
+- Link component names to their documentation
+- Verify that the link works correctly
+
+## External Links
+
+### Markdown Links:
+
+You can use Markdown for external links, the examples below will open in a new tab:
+
+```markdown
+[GitHub Repository](https://github.com/Codecademy/gamut)
+[React Documentation](https://react.dev)
+```
+
+### Anchor Component:
+
+If you need more control over the link, you can use the Anchor component,the example below will open in the current tab:
+
+```tsx
+<Anchor href="https://github.com/Codecademy/gamut">Gamut Repository</Anchor>
+```
+
+<Callout text='If you need external links to open in new tabs, use `target="_blank" rel="noreferrer"` together for security. However, avoid forcing this behavior unless necessary—users can choose to open links in new tabs themselves.' />
+
+### URL Guidelines:
+
+- Use full URLs for external resources
+- Link to official documentation when referencing tools
+
+## MDX file parameters
+
+For a component's `.mdx` file, add the following to the `parameters` object. Use the `main` branch for the `githubLink`.
+
+```tsx
+source: {
+  repo: 'gamut',
+  githubLink: 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Button'
+}
+```
+
+```tsx
+design: {
+  type: 'figma',
+  url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=993-0'
+}
+
+```
+
+## Link Text Guidelines
+
+- 2-3 words minimum for easy clicking
+- Unique link text when multiple links on page
+- Meaningful and descriptive: conveys destination
+- Action-oriented when appropriate: "View the component"