+ {/if}
+ {/each}
+ {/snippet}
+ {#snippet footer()}
+
+ {/snippet}
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/avoid.svg b/packages/stacks-docs-next/src/docs/public/brand/color/avoid.svg
new file mode 100644
index 0000000000..e689e44ca6
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/color/avoid.svg
@@ -0,0 +1,53 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/b2b-balance.svg b/packages/stacks-docs-next/src/docs/public/brand/color/b2b-balance.svg
new file mode 100644
index 0000000000..b12b3fe432
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/color/b2b-balance.svg
@@ -0,0 +1,102 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/b2c-balance.svg b/packages/stacks-docs-next/src/docs/public/brand/color/b2c-balance.svg
new file mode 100644
index 0000000000..e27b799142
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/color/b2c-balance.svg
@@ -0,0 +1,119 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/colors.yaml b/packages/stacks-docs-next/src/docs/public/brand/color/colors.yaml
new file mode 100644
index 0000000000..d705b829c0
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/color/colors.yaml
@@ -0,0 +1,122 @@
+# to-do: move to figma?
+
+colors:
+ - name: "Stack Orange"
+ hex: "#FF5E00"
+ rgb: 255, 94, 0
+ cssVar: "--brand-color-orange"
+ pantone: Orange 021 U
+ business: true
+ background: true
+ weight: 1
+ - name: "Purple"
+ hex: "#9D9CFF"
+ rgb: 157, 156, 255
+ cssVar: "--brand-color-purple"
+ weight: 2
+ business: true
+ - name: "Pink"
+ hex: "#F39FFF"
+ rgb: 243, 159, 255
+ cssVar: "--brand-color-pink"
+ weight: 2
+ - name: "Yellow"
+ hex: "#FFCC00"
+ rgb: 255, 204, 0
+ cssVar: "--brand-color-yellow"
+ pantone: 109 U
+ weight: 2
+ business: true
+ - name: "Blue"
+ hex: "#5074EF"
+ rgb: 80, 116, 239
+ cssVar: "--brand-color-blue"
+ weight: 2
+ business: true
+ - name: "Green"
+ hex: "#86AF25"
+ rgb: 134, 175, 37
+ cssVar: "--brand-color-green"
+ weight: 2
+ - name: "Off-Black"
+ invertLabel: true
+ hex: "#201C1D"
+ rgb: 32, 28, 29
+ cssVar: "--brand-color-black"
+ pantone: Black 6 U
+ weight: 2
+ business: true
+ background: true
+ - name: "Off-White"
+ hex: "#F0EFEE"
+ rgb: 240, 239, 238
+ cssVar: "--brand-color-off-white"
+ weight: 2
+ business: true
+ background: true
+ - name: "Light Blue"
+ weight: 2
+ hex: "#C6D1E1"
+ rgb: 198, 209, 225
+ cssVar: "--brand-color-blue-light"
+ background: true
+ - name: "Light Brown"
+ weight: 2
+ hex: "#998B7A"
+ rgb: 153, 139, 122
+ cssVar: "--brand-color-beige"
+ background: true
+ - name: "Dark Orange"
+ invertLabel: true
+ weight: 3
+ hex: "#31070F"
+ rgb: 49, 7, 15
+ cssVar: "--brand-color-orange-dark"
+ background: true
+ - name: "Medium Orange"
+ invertLabel: true
+ hex: "#6E1527"
+ rgb: 110, 21, 39
+ cssVar: "--brand-color-orange-medium"
+ weight: 3
+ business: true
+ background: true
+ - name: "Dark Purple"
+ invertLabel: true
+ weight: 3
+ hex: "#390A91"
+ rgb: 57, 10, 145
+ cssVar: "--brand-color-purple-dark"
+ - name: "Dark Pink"
+ invertLabel: true
+ hex: "#4D1955"
+ rgb: 77, 25, 85
+ cssVar: "--brand-color-pink-dark"
+ weight: 3
+ - name: "Dark Green"
+ invertLabel: true
+ hex: "#263603"
+ rgb: 38, 54, 3
+ cssVar: "--brand-color-green-dark"
+ weight: 3
+ - name: "Dark Yellow"
+ invertLabel: true
+ weight: 3
+ hex: "#423101"
+ rgb: 66, 49, 1
+ cssVar: "--brand-color-yellow-dark"
+ - name: "Dark Blue"
+ invertLabel: true
+ weight: 3
+ hex: "#00165E"
+ rgb: 0, 22, 94
+ cssVar: "--brand-color-blue-dark"
+ - name: "Pure White"
+ hex: "#FFFFFF"
+ rgb: 255, 255, 255
+ cssVar: "--brand-color-white"
+ stacks: white
+ business: true
+ weight: 3
+ hideHierarchy: true
+ background: true
diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/index.md b/packages/stacks-docs-next/src/docs/public/brand/color/index.md
new file mode 100644
index 0000000000..7c174835c3
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/color/index.md
@@ -0,0 +1,79 @@
+---
+updated: 2025-12-10
+figma: https://www.figma.com/design/T7PJSsFD8hrB1qfsj8GcmK/Brand-colors
+---
+
+
+
+Our color palette sets the visual tone of the brand and ensures consistency across every platform. At its core is our distinct orange, a bold and instantly recognizable signature. This is supported by a balanced palette of primary and secondary colors that bring both vibrancy and sophistication. In this section, you’ll find guidance on when and how to use each color, the hierarchy to follow, and important considerations to keep in mind.
+
+## Color hierarchy
+
+
+
+## Color codes
+
+
+
+## Use of Stack orange
+
+Orange is the most distinctive color in our palette, rooted in our original brand hue. It should have a presence across our designs, appearing whenever accessibility and layout allow. We use it with intention and at varying scales, ensuring it remains a consistent and recognizable part of our visual identity.
+
+
+
+## Stack color combinations
+
+When designing with a three-sided graphic stack, follow these guidelines for color selection.
+
+
+
+## Background colors
+
+For our backgrounds, we use neutral tones to offset the more saturated colors in the palette. This ensures that compositions feel balanced and never overwhelming. The only exception is Stack Orange, which we sometimes use in backgrounds as it’s our lead brand color. The selection below shows the colors we reserve specifically for backgrounds.
+
+
+
+## Business vs. general palettes
+
+Business and general audiences have different needs, and our color usage should reflect that. For business, we lead with the full palette to showcase energy and vibrancy. For a general audience, we take a more refined approach, toning down the brighter colors and using a more selective, sophisticated palette.
+
+
+
+## Stack Overflow business color usage
+
+The examples below illustrate how we apply color for Stack Overflow Business. Hierarchy plays a key role to make sure the emphasis is in the right place, and the color balance is right. The more restrained approach adds more sophistication for the Stack Overflow Business audience.
+
+
+
+## General color usage
+
+The examples below show how we apply color for a general audience, such as Stack Overflow Public Platforms. Hierarchy plays a key role to make sure the emphasis is in the right place and the color balance is right.
+
+
+
+## Label color guidance
+
+Throughout our system, we use additional pops of color in labels. The labels should always complement the compositions they sit within. The examples below show the approved color combinations for labels.
+
+
+
+## Highlight headline color guidance
+
+Color also comes through in our highlighted headlines. The guidance below shows the approved color combinations.
+
+
+
+## Things to avoid
+
+
+
+## Accessibility
+
+Accessible design starts with clear, readable text. In digital spaces, that means maintaining strong contrast between text and background. Learn more [about requirements here](/system/accessibility/intro).
diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/orange-usage.svg b/packages/stacks-docs-next/src/docs/public/brand/color/orange-usage.svg
new file mode 100644
index 0000000000..e1c9db4d3e
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/color/orange-usage.svg
@@ -0,0 +1,184 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/color/stack-color-combos.svg b/packages/stacks-docs-next/src/docs/public/brand/color/stack-color-combos.svg
new file mode 100644
index 0000000000..24bc2180fc
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/color/stack-color-combos.svg
@@ -0,0 +1,114 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/LogoColors.svelte b/packages/stacks-docs-next/src/docs/public/brand/logo/LogoColors.svelte
new file mode 100644
index 0000000000..cf0c69a94e
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/LogoColors.svelte
@@ -0,0 +1,38 @@
+
+
+
+ {#each gallery as item}
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/external-partnership-lockup.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/external-partnership-lockup.svg
new file mode 100644
index 0000000000..98128bc8b8
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/external-partnership-lockup.svg
@@ -0,0 +1,53 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/index.md b/packages/stacks-docs-next/src/docs/public/brand/logo/index.md
new file mode 100644
index 0000000000..d16318d02d
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/index.md
@@ -0,0 +1,82 @@
+---
+figma: https://www.figma.com/design/Qx4PIAImUMCQlTLeWWO5zeqE/Stack-Overflow-Logos--Marketing-?node-id=4470-198&t=0AmX7Bm4bOMDBW98-1
+updated: 2025-12-10
+---
+
+
+
+Our logo is the core identifier of Stack Overflow and one of the most visible expressions of our brand. It represents our community and our products. To protect its integrity, it must always be used consistently, with proper clear space, proportions, and placement.
+
+
+
+## Primary lockup
+
+Our logo is the core identifier of Stack Overflow and one of the most visible expressions of our brand. It represents our community and our products. To protect its integrity, it must always be used consistently, with proper clear space, proportions, and placement.
+
+
+
+### Logo architecture
+
+
+
+### Color combinations
+
+Our preference is to use the logo in Off-Black. Where accessibility makes this unsuitable, you can use Off-White instead. [Explore full color guidence](./color/).
+
+
+
+### Logo clearspace
+
+
+
+### Page format lockups
+
+When using this horizontal lockup, follow the guidance below on where to place the logo on a composition.
+
+
+
+### Sub-brand lockups
+
+We have two approaches to sub-brand lockups. The approach you use should be determined by the scale at which the lockup is going to appear.
+
+
+
+### Sub-brand large usage
+
+Use the diagram below to determine how sub-brand lockups, used at a large scale, should be created.
+
+
+
+### Sub-brand small usage
+
+Use the diagram below to determine how sub-brand lockups, used at a large scale, should be created.
+
+
+
+### External partnership lockups
+
+External partnerships use a simpler lockup, where the height of both logos should always align.
+
+
+
+### Things to avoid
+
+
+
+## Symbol
+
+
+
+### Symbol lockup
+
+Where the Stack Overflow name is already present (e.g. social media profiles) or within the Stack Overflow ecosystem (e.g. product) you can use the symbol. Always follow the clearspace guidance below to make sure you correctly scale and center the symbol in application.
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/logo-architecture.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/logo-architecture.svg
new file mode 100644
index 0000000000..1752dfc26c
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/logo-architecture.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/logo-clearspace.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/logo-clearspace.svg
new file mode 100644
index 0000000000..be3e302e5c
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/logo-clearspace.svg
@@ -0,0 +1,27 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/primary-lockup.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/primary-lockup.svg
new file mode 100644
index 0000000000..53c0c0dc67
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/primary-lockup.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/sub-brand-large.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/sub-brand-large.svg
new file mode 100644
index 0000000000..9b2de13963
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/sub-brand-large.svg
@@ -0,0 +1,35 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/sub-brand-lockups.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/sub-brand-lockups.svg
new file mode 100644
index 0000000000..180c4e571d
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/sub-brand-lockups.svg
@@ -0,0 +1,74 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/sub-brand-small.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/sub-brand-small.svg
new file mode 100644
index 0000000000..4fcf30fd32
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/sub-brand-small.svg
@@ -0,0 +1,41 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/symbol-lockup-circle.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/symbol-lockup-circle.svg
new file mode 100644
index 0000000000..1ca211e06c
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/symbol-lockup-circle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/symbol-lockup-square.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/symbol-lockup-square.svg
new file mode 100644
index 0000000000..b88327c905
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/symbol-lockup-square.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/symbol.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/symbol.svg
new file mode 100644
index 0000000000..65f4cfc934
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/symbol.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/logo/things-to-avoid.svg b/packages/stacks-docs-next/src/docs/public/brand/logo/things-to-avoid.svg
new file mode 100644
index 0000000000..f2d85ef6d3
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/logo/things-to-avoid.svg
@@ -0,0 +1,99 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/motion.md b/packages/stacks-docs-next/src/docs/public/brand/motion.md
new file mode 100644
index 0000000000..0a628fe98b
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/motion.md
@@ -0,0 +1,380 @@
+---
+updated: 2026-03-12
+---
+
+
+
+This section offers guidance on the core motion principles of our brand and how to roll them out over a variety of assets. By following this we create a unique and cohesive look across all moving assets that connects to our great brand image.
+
+## Motion Principles
+
+The three guiding principles of our motion language align to strengthen our brand vision. All motion revolves around these core ideas.
+
+
+
+
Click
+
+
+
+
Follow
+
+
+
+
Snapback
+
+
+
+
+### Click
+
+For text and hero animations we use a snap motion, defined by steep easings and frame jumps that reflect the mechanics of a key press.
+
+This behavior utilizes hold keyframes to create sharp hits that easing cannot achieve. When applying make sure to leave a 2 frame jump between keyframes to ensure the stagger stays consistent.
+
+This should take place over 12 frames or less: 2 for the intro frame, maximum 10 for the sharp easing. This is in the context of 30fps.
+
+
+
+
Click
+
+
+
+
Example
+
+
+
+
+
+
+
+
+
Hold Keyframe / 100% out
+ (0, 0, 0, 1)
+
+
+
+
+### Follow
+
+We use the Follow motion behavior for bigger movements such as transitions or when layering multiple animations.
+
+The Follow behavior also features a hold key frame–in the middle–to cut between preceding and following motions.
+
+This should take place over maximum 22 frames and include 1 frame skip in the middle. This is in the context of 30fps.
+
+
+
+
Follow
+
+
+
+
Example
+
+
+
+
+
+
+
+
+
100% in / Keyframe Jump / 100% out
+ (1,1,0,1) + (0,0,0,1)
+
+
+
+
+### Snapback
+
+The Snapback principle mimics the return movement of a key press to give objects weight and signify the end of the motion.
+
+This motion behavior uses a subtle overshoot, then a held keyframe, and a final snapback to it’s resting point. This is a 2 frame hold to allow for it to settle and click back into place.
+
+This should never be longer than 20 frames to keep the final movement as a snap and not a bounce. This is in the context of 30fps.
+
+
+
+
Snapback
+
+
+
+
Example
+
+
+
+
+
+
+
+
+
100% in / Keyframe Jump / 100% out / Keyframe Jump
+ (1,1,0,1) + (0,0,0,1)
+
+
+
+
+## Logo animations
+
+The symbol and lockup animations utilize a combination of the behaviors above.
+
+
+
+
Primary lockup
+
+
+
+
Symbol
+
+
+
+
+## Type animations
+
+Type animations utilize the Click behavior. While headlines animate word-by-word, body copy should animate paragraph by paragraph. When animating two or more lines of text there is a subtle horizontal movement to emulate tabulating mechanics.
+
+
+
+
Headlines
+
+
+
+
+
+
+
Body copy
+
+
+
+
+## Video Toolkit
+
+### Transitions
+
+We use these transitions to wipe screens or swap between content at a scale. We should use vertical motion by default, but where needed we can opt for right-to-left motion.
+
+
+
+
+
+
+
+
+
+
+
+
+
+The above transitions can also be applied to more complex layouts.
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Lower Thirds
+
+When introducing people or suppling the viewers with additional information in videos we use these lower thirds. The logo animation on the right is optional.
+
+
+
+
+
+
+
+### Intro/Outro Cards
+
+The logo animations can also be used to start or end longer videos.
+
+
+
+
Intro card
+
+
+
+
Outro card
+
+
+
+
+### Cursor Animations
+
+Our bespoke cursor animations can be used to show interactions both on desktop and mobile.
+
+
+
+
Desktop
+
+
+
+ The desktop cursor animation follows a combination of our principles. The position movement uses the easings set in the Follow behavior, while the rotation animates with a Snapback movement. On click, the cursor scales down with a slight overshoot and changes color to Stack Orange for roughly 10 frames.
+
+
+
+
+
+
Mobile
+
+
+
+ The mobile cursor animation uses slightly smoother easings than the desktop cursor (70%-100%, rather than 100%-100%). Similarly to the desktop cursor, it changes color on click (to off-black) and on hold/drag (to Stack Orange). In addition to this color change, when dragging content the mobile cursor animates with a simple smear over the duration of the position movement.
+
+
+
+### Cursor Behaviors
+
+
+
+
Dragging
+
+
+
+
Pressing
+
+
+
+
Interaction
+
+
+
+
+### UI Animations
+
+Our core motion principles can also be applied to UI when showing digital interactions.
+
+
+
+
Body copy
+
+
+
+
Headlines
+
+
+
+
+
+
Buttons
+
+
+
+
Hero buttons
+
+
+
+
+## Bringing it together
+
+
+
+
+
+
+
+## Things to avoid
+
+
+
+
Do not use easings other than the ones provided
+
+
+
+
Do not start text animation too far from its final position
+
+
+
+
+
+
+
Do not use different accent colors on type
+
+
+
+
Do not animate body copy line-by-line
+
+
+
+
+
+
+
Do not disregard reading timings
+
+
+
+
Do not transition elements in opposite directions
+
+
+
+
+
+
+
Do not use different accent colors on cursor
+
+
+
+
Do not exaggerate the cursor rotation
+
+
+
+
+
+
+
Do not rotate the mobile cursor
+
+
+
+
Do not use fades
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/index.md b/packages/stacks-docs-next/src/docs/public/brand/stack-system/index.md
new file mode 100644
index 0000000000..e3d80a49f9
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/index.md
@@ -0,0 +1,74 @@
+---
+updated: 2025-12-10
+---
+
+
+
+Our stack system is at the heart of our brand identity. Stacks bring energy and rhythm to layouts in ways that color and type can’t on their own. This section outlines the types of stacks we use, along with guidance on how to apply them, build them, and how not to use them.
+
+## Graphics overview
+
+In our design system we use three distinct types of graphics: functional graphics such as diagrams, container graphics that structure and organize content, and expressive graphics that add personality and visual interest.
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 2D stacks
+
+Our 2D stack graphics are designed for moments where simplicity and clarity are key.They work especially well for infographics and thematic content focused on specifictopics such as networks or systems. Because of their straightforward nature, they aremost often used in B2B contexts, where communication benefits from a more directand less expressive approach.
+
+
+
+## 2D stacks in use
+
+
+
+## Expressive container graphics
+
+Our expressive container graphics extend the stacking nature of our brand identity into layouts. These compositions are more dynamic and are best suited for applications with minimal, cohesive messaging. They work especially well for cover images in Instagram carousels or for CTAs. Below, we demonstrate the wide range of container styles available for use.
+
+
+
+### How to Use Expressive Containers
+
+The composition below shows how type, color, and 3D graphics come together within our stacking layouts. Use this as a benchmark when creating new graphics.
+
+
+
+
+
+### In use
+
+The stacking motif not only shapes our marketing materials but also guides the way we design certain product features and micro-interactions.
+
+
+
+## 3D stacks
+
+Our 3D stacks are the most expressive part of our brand, so they’re reserved for the most expressive contexts. They’re best used in high-level brand moments, setting the overall tone rather than addressing specific topics. We deploy these shapes in various ways across the brand, often as large, colorful crops that bring energy and impact to a composition.
+
+
+
+### Generating shapes
+
+We have a [Figma file of pre-made collages](https://www.figma.com/design/FEdyUP08JZQWfjSKwt5AOo/Base-shapes-for-3d-heros?node-id=0-1&t=v6OzktCCxojq0rI5-1), for creating new simple shapes you can use [i3D Figma plugin](https://www.figma.com/community/plugin/1387823712562916211), and more complicated shapes we have a custom build tool called [Stack Trace](https://github.com/StackEng/BrandStackTrace) (access currently to employees only).
+
+### In use
+
+
+
+### Things to avoid
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-2d-in-use.svg b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-2d-in-use.svg
new file mode 100644
index 0000000000..d04fb9e9a4
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-2d-in-use.svg
@@ -0,0 +1,1437 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-2d.svg b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-2d.svg
new file mode 100644
index 0000000000..38508cda3c
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-2d.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-3d-avoid.svg b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-3d-avoid.svg
new file mode 100644
index 0000000000..bc19815bd6
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-3d-avoid.svg
@@ -0,0 +1,138 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-3d-in-use.svg b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-3d-in-use.svg
new file mode 100644
index 0000000000..d201e55df5
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-3d-in-use.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-3d.svg b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-3d.svg
new file mode 100644
index 0000000000..852f05b069
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-3d.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-container-ex1.svg b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-container-ex1.svg
new file mode 100644
index 0000000000..77f0009703
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-container-ex1.svg
@@ -0,0 +1,49 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-container-ex2.svg b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-container-ex2.svg
new file mode 100644
index 0000000000..26d8637042
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-container-ex2.svg
@@ -0,0 +1,66 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-container-in-use.svg b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-container-in-use.svg
new file mode 100644
index 0000000000..702d744a98
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-container-in-use.svg
@@ -0,0 +1,292 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-containers.svg b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-containers.svg
new file mode 100644
index 0000000000..b934b22b9b
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/stack-system/stacks-containers.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyAlignment.svelte b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyAlignment.svelte
new file mode 100644
index 0000000000..5ab60cdf78
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyAlignment.svelte
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+ Let’s get building.
+
+
+ We’re excited to build knowledge with you.
+
+
+
+
+
+
+
+
+
+ Let’s get building.
+
+
+ We’re excited to build knowledge with you.
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte
new file mode 100644
index 0000000000..5b264c6b03
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyCharacter.svelte
@@ -0,0 +1,285 @@
+
+
+
+
+
+
+Not to scale
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte
new file mode 100644
index 0000000000..41dd2e5836
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/TypographyWeights.svelte
@@ -0,0 +1,61 @@
+
+
+
+ {#each weights as weight}
+ selected = weight}
+ />
+ {/each}
+
+
+
+
+ Overflow
+
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/index.md b/packages/stacks-docs-next/src/docs/public/brand/typography/index.md
new file mode 100644
index 0000000000..cef2757d94
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/index.md
@@ -0,0 +1,133 @@
+---
+updated: 2025-12-10
+---
+
+
+
+Our brand font defines the voice of our visual identity and brings character to every expression. Rooted in modernist inspiration yet enriched with traditional motifs, it strikes a balance between timelessness and innovation. Its distinctive notched detailing sets it apart, creating a recognizable signature that builds equity across every touchpoint. In this section, you’ll find guidance on how to apply the font effectively, the typographic hierarchy to follow, and key considerations to ensure clarity, consistency, and impact.
+
+
+
+## Primary typeface
+
+Our primary typeface is called **Stack Sans**. Crafted uniquely for Stack Overflow, it combines robust grotesque forms with modern styling, to produce a font that feels distinctly us.
+
+**Stack Sans** is licensed under the [SIL Open Font License (OFL) v1.1](https://openfontlicense.org/), this means you are free to use it in books, posters, artwork, logos, and on websites, even make 3D objects with the outlines — no acknowledgement is required. However there are [some conditions](https://openfontlicense.org/how-to-use-ofl-fonts) to follow if you are bundling it in apps or software.
+
+
+
+
+
+
+ 
+ Distinct x, cap and ascender heights used for character distinction. High x-height for increased legibility.
+
+
+
+
+ 
+ Even spacing ensures consistent rhythm, aiding word recognition and improving accessibility.
+
+
+
+
+ 
+ Distinct forms for lowercase letters, to increase legibility at smaller scales.
+
+
+
+
+## Glyph set
+
+Our full glyph set contains 509 characters and supports 464 languages. Every letterform has been crafted with care and consistency, ensuring our words always appear strong, refined, and considered.
+
+
+
+## Stylistic sets
+
+Stack Sans contains two stylistic sets. The standard set and a notched set. Our notched set reflects the character found in our logo. Off-kilter tittles and notched segments of letterforms create a font that feels like it’s mid-build.
+
+
+
+## Choosing the correct stylistic set
+
+Our stylistic sets should be used with care. Set B, the notched set, is reserved for large headlines of 30pt and above, as its unique characteristics can cause legibility issues at smaller sizes.
+
+
+
+## Alignment
+
+Across the brand system, text should only be left-aligned or center-aligned.Center alignment is typically reserved for more expressive layouts.
+
+
+
+## Margins
+
+Consistent margins ensure consistent layouts across the brand. To calculate the margin, add the two side lengths of the layout and set the margin to 2% of that total.
+
+```
+(Side A + Side B) X 0.02 = Margin
+```
+
+
+
+### Things to avoid
+
+
+
+## Highlighted headlines
+
+Within our system, we use headline-only highlighted text. It is always left-aligned and comes in two styles: monotone for a clean, consistent look, and duotone when part of a headline needs emphasis.
+
+
+
+### Monotone highlight construction
+
+When constructing monotone assets, line height should always be set to 105% to ensure neat alignment. The margins of the highlighter box must equal half the cap height of the headline. For example, if the headline height is 50px, the highlighter box margin should be 25px.
+
+
+
+### Duotone highlight construction
+
+Duotone assets are slightly more complex as the text must be segmented. For ease of use, the highlighted portion should remain within a single line. Beyond this, the same rules apply. Refer to the diagram below to see how it comes together.
+
+
+
+### Things to avoid
+
+
+
+## Integrating typography and Stacks
+
+To bring more energy into our typography, we can integrate it with our 3D stacks. This allows headlines to feel more dynamic within the system. We approach this in two ways: construction, where type builds onto the forms, and obstruction, where type is broken up by them.
+
+
+
+### 3D type construction
+
+When constructing our 3D type blocks, we use the same method and specifications as highlighted headlines. The only additional step is applying the [Skew Skew plugin in Figma](https://www.figma.com/community/plugin/1295667411756432452/skew-skew), in this case set to 22 degrees, to match the angles of our 3D forms.
+
+
+
+### 3D type obstruction
+
+When obstructing typography, we work in three layers: foreground, midground, and background. The simplest way to achieve this effect is by breaking up the 3D vector itself. To maintain legibility, this treatment should only be applied to very large headlines, and no more than 50% of any letterform may be obstructed.
+
+
+
+### Things to avoid
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-and-illustration.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-and-illustration.svg
new file mode 100644
index 0000000000..27618accd2
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-and-illustration.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-avoid.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-avoid.svg
new file mode 100644
index 0000000000..9185b23524
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-avoid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-duotone-highlight-avoid.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-duotone-highlight-avoid.svg
new file mode 100644
index 0000000000..980cf8cfab
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-duotone-highlight-avoid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-duotone-highlight.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-duotone-highlight.svg
new file mode 100644
index 0000000000..e1a34f222a
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-duotone-highlight.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-highlight-headline.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-highlight-headline.svg
new file mode 100644
index 0000000000..c1aa55bc35
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-highlight-headline.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-monotone-highlight.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-monotone-highlight.svg
new file mode 100644
index 0000000000..f93530dfe6
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-monotone-highlight.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-sample-lowercase.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-sample-lowercase.svg
new file mode 100644
index 0000000000..f7b047569e
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-sample-lowercase.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-sample-spacing.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-sample-spacing.svg
new file mode 100644
index 0000000000..e0ec3f8b78
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-sample-spacing.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-sample-x-cap.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-sample-x-cap.svg
new file mode 100644
index 0000000000..57696f0683
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-sample-x-cap.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-skew.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-skew.svg
new file mode 100644
index 0000000000..a451dc2235
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-skew.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-stack-avoid.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-stack-avoid.svg
new file mode 100644
index 0000000000..dbbc4a61f0
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-stack-avoid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-stack-type.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-stack-type.svg
new file mode 100644
index 0000000000..7a7b670551
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-stack-type.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/docs/public/brand/typography/typography-stylistic-sets.svg b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-stylistic-sets.svg
new file mode 100644
index 0000000000..8353a037ac
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/brand/typography/typography-stylistic-sets.svg
@@ -0,0 +1,27 @@
+
diff --git a/packages/stacks-docs-next/src/docs/public/changelog.md b/packages/stacks-docs-next/src/docs/public/changelog.md
new file mode 100644
index 0000000000..4f61c4e188
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/changelog.md
@@ -0,0 +1 @@
+List of changes
diff --git a/packages/stacks-docs-next/src/docs/public/copy/naming.md b/packages/stacks-docs-next/src/docs/public/copy/naming.md
new file mode 100644
index 0000000000..ffe5ac8f81
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/copy/naming.md
@@ -0,0 +1,344 @@
+---
+updated: 2025-12-11
+---
+
+
+
+This guide helps ensure consistent naming across all Stack Overflow communications, products, features, and materials.
+
+## Components
+
+### Mainbrand
+
+The overarching brand that serves as the main identifier for a company and its various products or services. _Stack Overflow_ has nearly two-decades of awareness around it in technology and technology-adjacent fields.
+
+### Sub-brand
+
+Exist as part of the larger parent brand, but often represent or cater to a particular category or market segment.
+
+_I.e., Stack Overflow Public Platforms, Stack Overflow Business_
+
+### Product
+
+Standalone offerings designed to serve a subset of customers. Customers sign up for a product and can opt out if they wish. Products usually combine a set of complimentary features. They are externally facing and could be the subject of marketing.
+
+_E.g., Stack Internal, Stack Ads_
+
+### Feature
+
+Functional aspects of a product or platform, or specific actions customers can take within a product/platform. Customers must sign up for a product in order to make use of a feature. Externally facing, but not as often the subject of marketing.
+
+_E.g., Collectives_
+
+## A (mostly) descriptive system
+
+Our default is a descriptive approach when it comes to naming our brands, products and features. This means we use names that clearly explain what a thing is (or does), often following industry conventions.
+
+_E.g., Reddit Ads, Mozilla VPN, Slack AI_
+
+### Why descriptive?
+
+At the current rate of change, it's simplest to name products descriptively, to keep barriers to understanding as low as possible.
+
+We want to make it as clear as possible to our audiences what our brands, products and features are and do — and what they can expect when interacting with them.
+
+A descriptive naming system is also an easy naming system to scale and roll out across any new brands, products or features that come along in the short to medium-term.
+
+- **Audience friendly** - technologists in particular favour “no bs”.
+- **Prioritises clarity and simplicity** - we have a lot of historical confusion with naming, this sets up the future holistically and clearly.
+- **Keeps the barrier to understanding low** - our products and services are quite technical so this keeps the headline clear.
+- **Easiest to scale across new brands, products and features** - things change and will always change in tech, this keeps us adaptable.
+
+### A note on ‘(Mostly)’
+
+There’s still scope to flex with the right associative name if we find it — a name that speaks to the benefits or qualities of a product. But our baseline and benchmark is simplicity and clarity, and we feel in the majority of cases, descriptive names fit that bill the best.
+
+_E.g., Spotify Jam, Atlassian Confluence_
+
+### Why not abstract names?
+
+We feel abstract names — names that don’t directly speak to the benefits or qualities of a product — are too far from our heritage, and would likely confuse audiences at this point.
+
+_E.g., Amazon Kindle, Microsoft Azure_
+
+## The company
+
+The legal entity is **Stack Exchange Inc.** However, most of the time we refer to ourselves as **Stack Overflow**. Always ensure the casing and spacing is correct:
+
+
+
+
Don’t
+
+
StackOverflow
+
Stackoverflow
+
stackoverflow
+
Stack overflow
+
STACK OVERFLOW
+
+
+
+
Do
+
+
Stack Overflow
+
+
+
+
+## The website vs the company
+
+**Stack Overflow** refers to both the company and the public Q&A platform. In most contexts, this ambiguity is acceptable and even desirable—the platform is our flagship and most recognizable product.
+
+However, when disambiguation is necessary, use these conventions:
+
+
+
+
When referring to the company
+
+
Stack Overflow (in most contexts)
+
“We at Stack Overflow believe…”
+
“Stack Overflow announced today…”
+
“Stack Overflow serves millions of developers”
+
+
+
+
When referring to website
+
+
Stack Overflow (in most contexts)
+
“stackoverflow.com” (when being very specific)
+
“Ask a question on Stack Overflow”
+
“Browse Stack Overflow's questions and answers”
+
+
+
+
+### When disambiguation is needed
+
+Use contextual clues or specific phrasing when you need to make the distinction clear:
+
+
+
+
Do
+
+
“Stack Overflow has 183+ public platforms, and business products”
+
“Visit stackoverflow.com to ask questions, or try Stack Internal for your team”
+
“Unlike the public Stack Overflow site, Stack Internal is private to your organization”
+
“Stack Overflow’s public Q&A platforms serves millions daily”
+
+
+
+
+## Stack Overflow Business
+
+The collective name for our business products is **Stack Overflow Business**.
+
+Business products do not have distinct logos but there are [differences with color usage](/brand/color#business-vs-general-palettes). If further differentiation is needed, a [Stack Overflow Business](/brand/logo#sub-brand-lockups) logo is available—contact the brand design team for help.
+
+### Stack Data Licensing
+
+Our data licensing product provides ethical access to Stack Overflow’s vast dataset.
+
+
+
+
Don’t
+
+
Stack Overflow Knowledge Solutions
+
SOKS
+
OverflowAPI
+
OverflowAI
+
Data Licensing
+
Stack Licensing
+
+
+
+
Do
+
+
Stack Data Licensing
+
+
+
+
+### Stack Ads
+
+Our advertising platform for reaching developers and technologists.
+
+**Note:** Collectives on Stack Overflow is no longer part of the Stack Ads offering.
+
+
+
+
Don’t
+
+
Stack Overflow Talent
+
Stack Overflow Employer Branding
+
Stack Overflow Advertising
+
SO Ads
+
Overflow Ads
+
+
+
+
Do
+
+
Stack Ads
+
+
+
+
+### Stack Internal
+
+Our private knowledge management and collaboration platform for teams and enterprises.
+
+In November 2025 we renamed **Stack Overflow for Teams** to **Stack Internal**.
+
+
+
+
Don’t
+
+
Stack Overflow for Teams
+
SO4T
+
SOE
+
SIE
+
SIB
+
Stack Overflow for Business
+
Stack Overflow for Enterprise
+
Stack Teams
+
Internal
+
+
+
+
Do
+
+
Stack Internal
+
+
+
+
+## Stack Overflow vs Stack
+
+Both **Stack \_\_\_** and **Stack Overflow \_\_\_** are acceptable when referring to our products, but default to the shorter form.
+
+
+
+
Refer to these products in text when contextually appropriate
+
Link to historical content (blog posts, documentation)
+
Use approved current brand assets from the brand design team
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md b/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md
new file mode 100644
index 0000000000..59f7690718
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/copy/patterns/messages.md
@@ -0,0 +1,296 @@
+---
+title: Error & success messages
+description: Guidelines for writing clear, helpful error and success messages that guide users effectively.
+updated: 2026-02-12
+---
+
+
+
+## Error messages
+
+Things don't always run smoothly. Our systems can fail. It's important to craft clear, logical, and accessible error messages that help folks get things done.
+
+### Understand the error
+
+Before writing anything, make sure you know the answers to these questions:
+
+- What happened?
+- How did it happen?
+- How can it be fixed?
+- Is it a user or system error, or both?
+
+How can we expect a user to know what's going on and how to fix something if *we* don't?
+
+### Set a basic structure
+
+A good error message structure explains what happened and what can be done about it. A good error message has the following structure:
+
+
+ [The error]
+ [How to fix it]
+
+
+Here's an example of an inline form error message:
+
+
+
+If we can't place the specific error, we're deliberately vague. The best we can do is tell the user how they might fix it.
+
+
+
+
There was a problem syncing data.
+
[The error]
+
+
+
Check your database configuration and try again.
+
[How to fix it]
+
+
+
+### Keep it short and simple
+
+We want to help folks fix errors quickly, so error messages should be concise. Strip out unnecessary words. Keep detail only when it's relevant.
+
+
+
+
Don't
+
+
"Can't create 'Engineering' because a team with that name already exists. Specify a different name."
+
"Your notification failed and needs to be re-authorized."
+
+
+
+
Do
+
+
"'Engineering' already exists. Try another team name."
+
+
+
+### Consider etiquette
+
+#### System error
+
+Apologize when it's the system's fault and let the user know it's not their fault. Use an active voice to accept responsibility. For example:
+
+
+
+
Don't
+
+
"Your changes couldn't be saved."
+
+
+
+
Do
+
+
"We couldn't save your changes."
+
+
+
+
+#### User error
+
+Sometimes it's the user's fault, but there are ways to tell them without sounding like we're pointing the finger. For example, we can focus on the desired action rather than telling the user they've messed up:
+
+
+
+
Don't
+
+
"You've missed your name."
+
"You can't leave this blank."
+
+
+
+
Do
+
+
"Please enter your name."
+
"Please enter a team name."
+
+
+
+
+A passive voice can work for more serious user errors, such as "This card was declined".
+
+### Use the right tone
+
+Tone is how you say something. A message's tone should depend on how serious the error is. Warmth is great for less serious errors, but avoid anything too lighthearted for serious errors.
+
+**Avoid mechanical language and jargon, opting for plain language at all times**. The aim is to make a user feel like you're there, helping them solve the error.
+
+
+
+
Don't
+
+
"The password entered does not match our records. Please re-enter your password."
+
+
+
+
Do
+
+
"That password's not right. Try again."
+
+
+
+
+At the same time, error messages are not the place to be clever or make jokes. This will only muddy your message and add to your user's frustration.
+
+
+
+
Don't
+
+
"Whoops! Looks like your card was declined. Better ask Mom for another one."
+
+
+
+
Do
+
+
"This card was declined. Try another payment method."
+
+
+
+
+### What happens next
+
+Some errors might need a button or link to fix or dismiss the message.
+
+Always say what happens next. Buttons and links should make sense when read in isolation. Avoid just using things like "OK". "OK" can be used to dismiss a message or take an action. Be clear to the user what they're saying "OK" to.
+
+
+
+
Don't
+
+
Can't display metrics
+
You need to restart your data sync.
+
+
+
+
+
+
+
+
Do
+
+
Can't display metrics
+
You need to restart your data sync.
+
+
+
+
+
+
+
+
+### Design, placement, and timing
+
+Error messages should take the whole user experience into consideration. It should be clear what triggers an error message and what it's related to.
+
+- [Inline validation](/system/forms/inputs) styles are best for displaying errors in **UI with form fields**.
+- [Inline notifications](/system/components/notices) are best for displaying errors in **UI without form fields**. They should be located within close proximity of items that affect a feature.
+- [Modals](/system/components/modals) are best when you want to ensure you **capture someone's focus**.
+
+[Toast notifications](/system/components/notices) are best for confirming that an action someone performed is taking place or successfully completed. Since they appear away from the layout and disappear after a few seconds, toast notifications aren't recommended for error messages.
+
+## Success messages
+
+It's important that we keep users informed when actions are successfully completed. Success states throughout the user flow let users know that they're either getting closer to achieving the goal, or have completed it.
+
+### Understand the situation
+
+Before writing anything, make sure you know the answers to these questions:
+
+- How close is the user to achieving the intended goal?
+- What does the user need to do next?
+- Is this message likely to appear frequently or is it unique?
+
+### Be specific
+
+A good success message provides clear information that the performed action was completed. It's fine to let users know that what they did was successful, but even better to be specific about the action they took.
+
+
+
+
Don't
+
+
"Successfully saved."
+
"Upgrade complete."
+
+
+
+
Do
+
+
"Your account details have been saved."
+
"You've upgraded to the Business tier of Teams."
+
+
+
+
+### Use the right tone
+
+Tone is how you say something. Excitement makes sense for successfully finishing a large task, but avoid overdoing it for a regular system success. Limit exclamation marks to one per page.
+
+
+
+
Don't
+
+
"Thanks for updating your email."
+
"Account created."
+
+
+
+
Do
+
+
"Your email has been updated."
+
"Thanks for signing up. Your account has been created."
+
+
+
+
+### What happens next
+
+Is the successful action part of a larger goal? Are there other recommended actions that need to be performed? Success messages can be a good way to guide the user to the next action for a more seamless interaction.
+
+
+
+
Don't
+
+
"We've saved your profile changes."
+
+
+
+
"Your payment is complete."
+
+
+
+
+
Do
+
+
"We've saved your profile changes."
+
+
+
+
"Your payment is complete."
+
+
+
+
+
+### Design, placement, and timing
+
+- [Inline validation](/system/forms/inputs) styles are best for displaying success in **UI with form fields**.
+- [Toasts](/system/components/notices) are best for **common success messages**. Since they appear away from the layout and disappear after a few seconds, these are great for simple actions that were successfully completed.
+- [Modals](/system/components/modals) are best when you want to ensure you **capture someone's focus** for a decision.
diff --git a/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md b/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md
new file mode 100644
index 0000000000..2aa0fb7757
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/copy/patterns/settings.md
@@ -0,0 +1,167 @@
+---
+title: Settings & preferences
+description: Guidelines for writing clear, user-friendly labels and descriptions for settings and preferences.
+updated: 2026-02-12
+---
+
+
+
+## Write labels in the affirmative
+
+Preferences and settings should always be written in the affirmative—even if the preference is meant to disable a feature. When a user checks a feature preference, they should be *getting* that feature.
+
+
+
+
Don't
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Do
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Use descriptions to explain
+
+Descriptions are optional and can supplement a label in a few ways:
+
+- Further define a label
+- Explain how the input will be used
+- Show an example of a valid input
+
+Avoid using tooltips.
+
+
+
+
Don't
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Do
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Don't rely on placeholder text
+
+Placeholder text can be used to show an example of a valid input.
+
+Placeholder text disappears once a character is typed in the input, so the user should be able to complete their task without placeholder text always visible.
+
+
+
+
Don't
+
+
+
+
+
+
+
+
+
+
+
+
+
Do
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/copy/styleguide.md b/packages/stacks-docs-next/src/docs/public/copy/styleguide.md
new file mode 100644
index 0000000000..c934f6c010
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/copy/styleguide.md
@@ -0,0 +1,840 @@
+---
+updated: 2025-12-11
+---
+
+
+
+This guide covers editorial and style conventions for Stack Overflow content.
+
+## Capitalization rules
+
+### Product names in running text
+
+When Stack Overflow products appear in running text, always capitalize the full product name.
+
+
+
+
Don’t
+
+
Sign up for stack internal today
+
Our stack ads platform reaches millions
+
Access stack data licensing
+
Your internal knowledge base
+
+
+
+
Do
+
+
Sign up for Stack Internal today
+
Our Stack Ads platform reaches millions
+
Access Stack Data Licensing
+
Your Stack Internal knowledge base
+
+
+
+
+### Feature names
+
+Feature names should be capitalized when referring to the specific Stack Overflow feature, but lowercase when used generically. Generic features like questions, answers, tags and search etc should all remain lowercase.
+
+
+
+
Don’t
+
+
Use enhanced search to find answers
+
Join a collective on Stack Overflow
+
The Enhanced Search Feature is powered by AI
+
+
+
+
Do
+
+
Use Enhanced Search to find answers
+
Join a Collective on Stack Overflow
+
Enhanced Search is powered by AI
+
Our enhanced search capabilities help developers...
+
+
+
+
+### Generic vs specific usage
+
+When using product-related terms generically (not referring to the Stack Overflow product), use lowercase.
+
+
+
+
Don’t
+
+
We offer Data Licensing to our clients (when not referring to the specific product)
+
internal knowledge sharing tools (when specifically referring to Stack Internal)
+
+
+
+
Do
+
+
Many companies offer data licensing to their clients
+
Stack Internal helps teams with internal knowledge sharing
+
We provide advertising solutions through Stack Ads
+
Companies need advertising solutions to reach developers
+
+
+
+
+## Possessives and plurals
+
+### Possessives
+
+Use standard possessive rules with Stack Overflow and product names.
+
+
+
+
Don’t
+
+
Stack Overflows’ mission
+
Stack Internals’ features
+
+
+
+
Do
+
+
Stack Overflow’s mission
+
Stack Internal’s features
+
Stack Ads’ reach (or “the reach of Stack Ads”)
+
+
+
+
+### Plurals
+
+Avoid pluralizing product names. Use “instances”, “deployments” or similar terms instead.
+
+
+
+
Don’t
+
+
Multiple Stack Internals
+
Two Stack Ads
+
+
+
+
Do
+
+
Multiple Stack Internal instances
+
Two Stack Internal deployments
+
Several Stack Ads campaigns
+
+
+
+
+## Abbreviations
+
+### External communications
+
+Never use abbreviations in external-facing materials including marketing, documentation, blog posts, or sales materials.
+
+
+
+
Don’t
+
+
SO provides data licensing
+
Try SI for your team
+
SOE and SIE (for tiers)
+
SOKS, SDL, or similar acronyms
+
+
+
+
Do
+
+
Stack Overflow provides data licensing
+
Try Stack Internal for your team
+
Stack Internal (Enterprise)
+
Stack Data Licensing
+
+
+
+
+### Internal communications
+
+In internal Slack, emails, or presentations, abbreviations may be used for brevity once the full name has been established in context. However, defaulting to full names is still preferred.
+
+
+
+
Acceptable internally
+
+
SO (for Stack Overflow, after first mention)
+
SI (for Stack Internal, after first mention)
+
In code: Use descriptive variable names, abbreviations acceptable where conventional
+
+
+
+
+## Compound references
+
+When referring to multiple products together, use "and" and maintain each product’s full name.
+
+
+
+
Don’t
+
+
Stack Internal & Ads customers
+
SI/SA users
+
Stack Overflow’s Internal and Ads products
+
+
+
+
Do
+
+
Stack Internal and Stack Ads customers
+
Customers using Stack Internal, Stack Ads, or Stack Data Licensing
+
Stack Overflow Business products
+
+
+
+
+## Sequential mentions
+
+After the first mention of a product name, you may use shortened forms if the context is clear.
+
+
+
+
Do
+
+
First mention: “Stack Internal provides private knowledge management”. Second mention: “Internal helps teams collaborate…”
+
First mention: “Stack Overflow Business includes three products”. Second mention: “Business customers have access to…”
+
Use “the product”, “the platform”, or “it” when context is unmistakable
+
+
+
+
+## Additional capitalization guidelines
+
+### Headers, subheaders, and tabs
+
+Use sentence case for all headings. This means capitalizing the first word, the first word of a subtitle, and all proper nouns.
+
+
+
+
Don’t
+
+
User Roles
+
Performance Overview
+
Edit Your Profile
+
Ask A Question
+
+
+
+
Do
+
+
User roles
+
Performance overview
+
Edit your profile
+
Ask a question
+
+
+
+
+### Articles vs articles
+
+Capitalize “Articles” when referring to the specific Stack Overflow feature section, but use lowercase when referring to generic articles.
+
+
+
+
Don’t
+
+
I’m writing an article and then I’m going to put it in our team’s articles section
+
In articles, you can find how-to guides
+
Create articles
+
+
+
+
Do
+
+
I’m writing an article and then I’m going to put it in our team’s Articles section
+
In Articles, you can find how-to guides, blog posts, and articles
+
Create Articles
+
+
+
+
+### User management and roles
+
+Always capitalize user roles in relation to management systems.
+
+
+
+
Don’t
+
+
employees
+
Recommended members
+
+
+
+
Do
+
+
Employees
+
Recommended Members
+
+
+
+
+### Collectives vs collectives
+
+Always capitalize “Collective” or “Collectives” when used as a proper noun or when it follows a company name. Use lowercase when referring generically to a collective.
+
+
+
+
Don’t
+
+
join the Google Cloud collective
+
join an Collective
+
A company’s Collective page will be located at the top right of the screen
+
+
+
+
Do
+
+
join the Google Cloud Collective
+
join a collective
+
A company’s collective page will be located at the top right of the screen
+
+
+
+
+### Communities & Community
+
+Capitalize “Communities” and “Community” when referring to the Stack Internal feature.
+
+
+
+
Do
+
+
With Communities you can help your teammates know what’s trending
+
Subscribe to a Community and get notifications for new questions and answers
+
+
+
+
+## Platform terminology and concepts
+
+### Post scores
+
+Questions, answers, and other types of posts have **scores**. A post’s score is calculated by subtracting the total number of downvotes from the total number of upvotes.
+
+- In almost all cases when referring to the sum of votes, use the term **score**
+- Use **upvote** and **downvote** (one word, no hyphen) when referring to individual types of votes
+- Avoid using “points” when referring to score or votes
+- The term “votes” to refer to a post’s score is only acceptable in the post summary component format `{ScoreValue} votes`
+
+
+
+
Don’t
+
+
Highest voted posts
+
Total number of votes for this answer
+
Only top voted answers are eligible
+
8 points
+
+
+
+
Do
+
+
Highest scored posts
+
Total score for this answer
+
Only top scored answers are eligible
+
8 votes (in post summary component only)
+
+
+
+
+## Grammar and mechanics
+
+### Use active voice (most of the time)
+
+Write in the active voice, particularly if the user needs to do something.
+
+
+
+
Don’t
+
+
You should update your profile
+
+
+
+
Do
+
+
Your profile needs updating.
+
+
+
+
+While it’s generally best to avoid the passive voice, in certain situations it helps you sound softer without adding too many words. It’s especially useful for time-sensitive messages like payment confirmations and error messages.
+
+
+
+
Don’t
+
+
We cancelled your order
+
We've suspended your account
+
+
+
+
Do
+
+
Your order has been cancelled
+
Your account has been suspended
+
+
+
+
+### Use contractions
+
+Contractions make copy sound more human. Avoid contractions that sound awkward when you say them out loud, or are not commonly used in everyday conversation.
+
+
+
+
Don’t
+
+
This’ll help you get answers to your questions
+
There must've been an error with your order
+
+
+
+
Do
+
+
It’s designed to help you get answers to your questions
+
There’s an error with your order
+
+
+
+
+### Use American spelling and standards
+
+Use American spelling for all public-facing content. When in doubt, check the [Merriam-Webster dictionary](https://www.merriam-webster.com/) for the preferred spelling of specific terms.
+
+
+
+
Don’t
+
+
Recognise
+
Travelled
+
Colour
+
9 April 2019
+
+
+
+
Do
+
+
Recognize
+
Traveled
+
Color
+
April 9, 2019
+
+
+
+
+### Pronouns
+
+Leave off possessives when referring to users or features when possible. If you must use pronouns, refer to users as “you”. Don’t put words in their mouths with phrases that use “I” or “my”.
+
+
+
+
Don’t
+
+
My Teams
+
My settings
+
Change my email settings
+
+
+
+
Do
+
+
Teams
+
Settings
+
Change your email settings
+
+
+
+
+When referring to Stack Overflow, use “we”. However, try to avoid inserting Stack Overflow into the content as much as possible.
+
+Use “their” as a singular, gender-neutral pronoun when the gender of the subject is unknown or unimportant. Avoid using gendered terms.
+
+
+
+
Don’t
+
+
When a new user is added, he or she will be able to edit content
+
We appreciate the guys and gals of Stack Overflow
+
+
+
+
Do
+
+
When a new user is added, they'll be able to edit content
+
We appreciate the Stack Overflow community
+
+
+
+
+### Mind your verbs and nouns
+
+Take extra care with “login” and “log in”. The former is a noun while the latter is a verb. Do not use “login” as a verb. The same logic applies to “signup” and “sign up”.
+
+
+
+
Don’t
+
+
Login to ask a question
+
Add a log in to your account
+
Signup to ask a question
+
Complete email sign up
+
+
+
+
Do
+
+
Log in to ask a question
+
Add a login to your account
+
Sign up to ask a question
+
Complete email signup
+
+
+
+
+### OK
+
+Use the abbreviated version “OK” (fully capitalized in every context). This is preferred to “Okay” and its variants.
+
+
+
+
Don’t
+
+
Okay
+
okay
+
Ok
+
+
+
+
Do
+
+
OK
+
+
+
+
+## Punctuation
+
+### Ampersands
+
+Don’t use ampersands (&) unless it’s part of a branded term. Spell out the word “and” instead.
+
+
+
+
Don’t
+
+
Update your email address & password
+
Stack Overflow Q and A
+
+
+
+
Do
+
+
Update your email address and password
+
Stack Overflow Q&A
+
+
+
+
+### Apostrophes
+
+Use apostrophes to represent omitted letters or numbers (can’t, you’re, ’90s) and to form possessives. See also: [use of curly quotes](#quotation-marks).
+
+
+
+
Don’t
+
+
Admins role
+
Moderators’s tasks
+
+
+
+
Do
+
+
Admin’s role
+
Moderators’ tasks
+
+
+
+
+### Colons
+
+Avoid using colons unless you’re introducing a list. If you need to use a colon in a sentence, Don’t capitalize the first word after it.
+
+### Commas
+
+Use the oxford comma in sentences. Don’t use a comma to separate two distinct phrases (comma splicing). Use two sentences instead.
+
+
+
+
Don’t
+
+
Our community is rooted in kindness, collaboration and mutual respect
+
Thanks for contacting us, we'll be in touch soon
+
+
+
+
Do
+
+
Our community is rooted in kindness, collaboration, and mutual respect
+
Thank you for contacting us. We'll be in touch soon
+
+
+
+
+### Ellipses
+
+The ellipsis (…) can be used in place of missing text. Avoid using ellipses in regular text. Use the real single character ellipsis unicode (…) `opt + ;` instead of three periods (...). It’s appropriate to use an ellipsis in input placeholder copy.
+
+
+
+
Don’t
+
+
Avoid subjective questions… stick to fact-based questions
+
Search...
+
+
+
+
Do
+
+
Avoid subjective questions. Stick to fact-based questions
+
Search…
+
+
+
+
+### Exclamation points
+
+Don’t use exclamation points unless something is really exciting. If you have to use one, limit yourself to one exclamation mark per page.
+
+### Hyphens and dashes
+
+Use hyphens to combine two words that modify or describe the noun that follows, or join prefixes and suffixes when there are two vowels beside each other.
+
+Use an en dash with no spaces (–) for a fixed range of numbers. Avoid using em dashes in microcopy for readability, but fine to use in long-form articles or documentation.
+
+
+
+
Don’t
+
+
Start your free 14 day trial
+
January 7 – 9
+
+
+
+
Do
+
+
Start your free 14-day trial
+
January 7–9
+
+
+
+
+### Periods
+
+Don’t use periods in interface copy unless it’s a full sentence or description. Don’t use periods in top-level headings, titles, or buttons. Do use periods in body text, descriptions, and help text.
+
+### Question marks
+
+Avoid using question marks wherever possible. Reword into affirmative statements wherever you can.
+
+
+
+
Don’t
+
+
Want to learn more?
+
+
+
+
Do
+
+
Learn more
+
+
+
+
+### Quotation marks
+
+Always use [smart/typographers/curly quotes](https://practicaltypography.com/straight-and-curly-quotes.html) not vertical, straight quotes. Place punctuation marks outside quotation marks.
+
+#### Shortcuts
+
+| Symbol | Description | Alt Code | Mac Shortcut | HTML Entity |
+| ---------------------------------- | -------------------- | ---------- | -------------------- | ------------- |
+| ‘ | Opening single quote | `alt 0145` | `option + ]` | `‘` |
+| ’ | Closing single quote | `alt 0146` | `option + shift + ]` | `’` |
+| “ | Opening double quote | `alt 0147` | `option + [` | `“` |
+| ” | Closing double quote | `alt 0148` | `option + shift + [` | `”` |
+
+### Semicolons
+
+Avoid using semicolons. When connecting two closely related ideas, use a comma or write two sentences.
+
+## Date and time
+
+### Dates
+
+Use the month’s full name where possible (e.g., October). If there are space constraints, use 3-letter abbreviations with the exception of May (e.g., Oct.). Always write out the full year.
+
+Don’t write dates numerically since differing international standards can lead to confusion. There is no need to add superscripts (st, nd, th, rd) to dates.
+
+
+
+
Don’t
+
+
September 2, '19
+
9-2-19
+
September 2nd
+
+
+
+
Do
+
+
September 2, 2019
+
Sep. 2, 2019
+
September 2
+
+
+
+
+### Time
+
+Use the 12-hour clock, followed by am or pm. Include a space after the last number (e.g., 1:20 pm). Time should be relative to the user’s time zone (not UTC).
+
+If indicating both date and time, separate them with the word “at” rather than a comma or @ symbol.
+
+
+
+
Don’t
+
+
15:30
+
September 2, 2019 @ 4:35 pm
+
September 2, 2019, 4:35 pm
+
+
+
+
Do
+
+
3:30 pm
+
September 2, 2019 at 4:35 pm
+
+
+
+
+### Relative dates and times
+
+In most cases, use relative dates and times (e.g., 3 minutes ago) with the exact date and time in the title attribute. When possible, use the longhand time (e.g., 7 years ago). If there are space constraints, use abbreviations: 7y, 3mo, 6d, 6h, 5min, 12s.
+
+## UI components
+
+### Buttons and links
+
+Buttons and links should be clear and predictable. Button and link text should be sentence case and action-led (starting with a verb). Use a verb+noun format except for common actions like Save or Close.
+
+
+
+
Don’t
+
+
New team
+
Settings
+
Post Job
+
+
+
+
Do
+
+
Create new team
+
View settings
+
Post job
+
+
+
+
+### Headings and subheadings
+
+All headings or subheadings should be concise, scannable, and sentence case. Don’t use periods at the end of headings. If a subheading is a full sentence, you may use a period.
+
+### Lists
+
+When writing lists:
+
+- Use a colon (:) to introduce an unordered list
+- Use sentence case
+- If any list item contains two or more sentences, punctuate all list items
+- If all list items are one sentence or fragments, don’t punctuate
+
+### URLS
+
+The golden rules of URLs is they should be short and rarely (if ever) change. In addition we want them to act as "[URL as UI](https://www.nngroup.com/articles/url-as-ui/)" which respond to manipulation by the user in an intuitive way.
+
+For example, a user should be able to modify them to navigate e.g., changing `/docs/api/v2` to `/docs/api/v1`, or up and down taxonomy like `/questions/tagged/javascript/react` to `/questions/tagged/javascript` to `/questions`, or changing filters like `/jobs?location=remote&type=engineering` to `/jobs?location=remote`.
+
+A good URL can also provide a solid foundation for SEO/AEO.
+
+
+
+
Don't
+
+
Avoid using branded language e.g., `/overflowapi`
+
Avoid overly long lengths e.g., `/introducing-stack-internal-powering-the-human-intelligence-layer-of-enterprise-ai/`
+
+
+
+Query parameters are ideal when:
+
+- Multiple values can be combined (`?type=remote&level=senior`)
+- The same content can be viewed with different options
+- Users might want to share or bookmark specific filtered views
+- The parameters are optional (the page works without them)
diff --git a/packages/stacks-docs-next/src/docs/public/copy/voice.md b/packages/stacks-docs-next/src/docs/public/copy/voice.md
new file mode 100644
index 0000000000..d234594153
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/copy/voice.md
@@ -0,0 +1,298 @@
+---
+updated: 2025-09-25
+---
+
+
+
+## What is Tone of Voice?
+
+Tone of voice (TOV) isn’t what a brand says, it’s how it says it.
+
+Most TOVs contain writing principles and tips that, when followed, help give a brand a consistent voice.
+
+Why’s that important? Well, if we’re showing up consistently, looking the same and sounding the same, people will be more likely to recognize and trust our brand. They’ll start to listen to what we have to say. And (whisper it) they might even begin to like us…
+
+## When should I use these guidelines?
+
+In short, these guidelines should be followed whenever you’re writing as Stack Overflow, the brand.
+
+If you’re writing or communicating as yourself — in a personal email to clients, or in messages to colleagues for instance — you don’t have to follow this tone of voice; you can write how you would naturally.
+
+You can also use your own tone of voice when personally addressing communities on Stack Overflow from your own profile. In fact, it’s often very important for these communities to know that a message is coming from a real person working at Stack Overflow, so using your own tone of voice can help — especially if it’s one people are familiar with.
+
+All that said, much of our TOV contains what amounts to good, straightforward writing tips. So feel free to adopt these tips in your own writing if you think they’ll help you.
+
+## Simple, Spirited, Syntax
+
+The software and tech industries have developed a pretty peculiar way with words.
+
+Somewhere along the line, we started mistaking density for depth. Buzzwords for real benefits. And marketing fluff for actual stuff.
+
+In a blur of innovation, things got excessively leveraged, supercharged, accelerated and delivered. And in a rush to achieve “intelligence”, we lost sight of what the word really means — especially in our writing.
+
+But…
+
+If there's anything our platforms, products and communities have shown us since our inception, it’s that real intelligence isn’t just about sounding smart, or having the answer to a question, or the solution to a problem.
+
+Real intelligence is about knowing your stuff and being able to explain it, too. Clearly. Concisely. With a character that cuts through, but still invites conversation.
+
+We want to push our industry back to the roots of that kind of communication.
+
+To do that, we’re adopting a simple, spirited syntax. A studious elegance in sentences that’s hard-won but lightly worn — that’s a breath of fresh air in an industry that, at times, feels all smoke, mirrors and adjectives.
+We’re not going to lie: it takes a little bit of practice to do. And it’s not always the most noticeable when it’s done well. But then, just like good code, a good solution or a good product, that’s kinda the beauty of it…
+
+Here’s how we do it...
+
+## Writing principle 1: Simple
+
+Simple doesn’t mean basic. It means clarity earned through rigor. We think about the reader first, cut the needless formality and bring the most essential ideas out concisely.
+
+### Try to be normal, not formal
+
+We know it’s hard. Especially in the software and tech industries, and especially if you’re writing for “serious businesses” — but try your best to write normally rather than formally.
+
+Word choice plays a huge role in this. For some reason, we seem to think business audiences prefer terms like “utilize” over “use”, "require" over “need”, or “garner” rather than “get”. But we’ll let you into a secret: the people reading those messages are normal people, too. And they’d probably prefer a simpler style!
+
+If you’re not sure how normal or formal you’re being, read what you’ve written aloud. If it sounds like something you’d say in real life, you’re on to a winner.
+
+
+
+
Say this…
+
The knowledge you need to keep creating.
+
Stack Overflow is a place for technologists and businesses to learn and share knowledge.
+
+
+
Instead of this…
+
The knowledge required to power innovation.
+
Stack Overflow provides comprehensive information and data for technologists and businesses.
+
+
+
+### Get to the point
+
+Protect our audience’s flow state, and their time, by keeping copy short, actionable and to-the-point. Figure out what’s most important for your reader to understand or do, and lead with that.
+
+You can explain context or reasoning after, if you like, but keep it concise. That way people will find the information they need, and we’ll make sure we get our message across before they’re onto the next task or tab.
+
+
+
+
Say this…
+
Switch (100 opinions) for one right answer
+
Get the knowledge you need to solve problems and craft code that works. No vague ideas or random suggestions. Just verified, definitive answers from experienced developers.
+
+
+
Instead of this…
+
When you encounter problems in programming, finding the right information to solve them can feel impossible. Most information is unverified, and it seems like everyone has a different opinion. That’s why at Stack Overflow you won’t find guesswork and confusion. You’ll only find verified, definitive answers from experienced developers — so you can get the knowledge you need to solve problems and craft code that works.
+
+
+
+### Avoid feature stuffing and marketing fluffing
+
+Put simply: don’t ship bloat.
+
+Beyond normal and formal words there’s this crop of verbs and nouns that everyone in our space seems to use to describe their products or services. Supercharge. Accelerate. Deliver. Leverage. Innovation. Productivity. Efficiency.
+
+We get the appeal: they do sound kinda impressive. But if we’re honest with ourselves, deep down we know they don’t mean very much. Avoid this stuff like the plague. Instead, dig deeper. Try and pinpoint what the benefit really is for a reader, and express it simply.
+
+Check out the Spirited section for more tips on making our writing a little more…interesting.
+
+
+
+
Say this…
+
Connect Stack Internal to Slack and Microsoft Teams so your developers can find the answers they need quickly. You can also create Communities where specialists can share the most relevant knowledge.
+
+
+
Instead of this…
+
Enhance efficiency by integrating with tools including Slack and Microsoft Teams. Plus, empower teams and supercharge productivity by creating Communities centered on different specialisms.
+
+
+
+## Writing principle 2: Spirited
+
+Spirited is where our human touch kicks in. It means we bring warmth, curiosity and the occasional dry aside. But we don’t perform this part of our voice. We let it show up naturally, when it helps to land the point, or when the moment feels right.
+
+### Subvert some expectations
+
+Don’t be afraid to ruffle a few feathers or challenge conventional wisdom. Stack Overflow is built on the idea that if there’s a better way to do something, do it — and say so. Question industry mantras. Push back on those buzzwords and tired ways of explaining things. And reframe the cliches and familiar terms and phrases.
+
+Done well, this kind of writing earns trust, gives us an air of expertise and authority and, importantly, is just easier to read!
+
+
+
+
Say this…
+
You can’t know everything
+
But with Stack Internal, you can find someone who does.
+
+
+
Instead of this…
+
Become an expert in your field
+
Stack Internal puts valuable knowledge at your fingertips.
+
+
+
+### Opt for a disarming honesty
+
+If there’s no expectation to subvert, no convention to challenge or no feather to ruffle (and sometimes, there really isn’t) just be really, really honest. It’s a rarity in brand writing, and it stands out for that very reason. You can reference the overbearing nature of a lot of the writing in our space, and provide a succinct and honest counterpoint to it.
+
+
+
+
Say this…
+
Find knowledge to upskill. Reskill. Outskill.
+
We can’t promise you a promotion, but we can promise you’ll learn something.
+
+
+
Instead of this…
+
Supercharge your future
+
Access the knowledge you need to boost your skills and transform your career.
+
+
+
+### Show some wit, but not at the expense of others
+
+A little bit of wit goes a long way, especially in technical spaces where a moment of levity can lift the whole experience. A dash of pedantry, a well-placed aside, or a deft ending to a message can really put some spirit in our writing, when the time’s right.
+
+But always remember: there’s a line. It's about inviting the reader to be in on the joke,not putting them in their place.
+
+
+
+
Say this…
+
This meeting could have been a Stack post.
+
+
+
Instead of this…
+
Still wasting time in meetings?
+
+
+
+### Know when to celebrate and motivate
+
+We’re not in the business of hype. Especially empty hype. But we do believe in recognizing progress. And there’s a whole heap of Stack Overflow knowledge and breakthroughs to be proud of — and plenty more to come.
+
+If we’re excited about something, we let it show. If we believe in something, we’re not afraid of having that optimism come through. And if there’s an opportunity for celebration, we grasp it.
+
+
+
+
Say this…
+
One place. A million breakthroughs.
+
Join a community of technologists, businesses and developers working things out, together.
+
+
+
Instead of this…
+
The leading place for technical knowledge.
+
Here’s to changing the world, one question at a time.
+
+
+
+## Writing principle 3: Syntax
+
+Syntax is how it all comes together. Not just grammar, but rhythm, structure, flow. These are the telltale signs that someone has thought a message through, and has considered how it might be received.
+
+### Respect the reader’s stack
+
+Like computers, readers have a limit on how much they can process and remember — so don’t overload them with information. There’s a few handy things you can do to help them out here, especially if you’re writing mid to longer-form copy:
+
+
+
+
Structure and scanability
+
Write and structure your content in a way that lets people scan and get the most important information. Headlines and subheads are your friend here, as are bullet points, if you’re throwing a lot of information at them.
+
+
+
Density
+
Writing can feel dense if you’re using lots of formal language or the marketing fluff we’ve already highlighted. But also when you’re trying to cram too much into sentences and paragraphs. A good guideline is to try and develop no more than 1–2 ideas per paragraph.
+
+
+
Control your sentence lengths
+
Try to keep your sentences to a maximum of 30 words. There’s a lot of research that tells us the moment they go over that, they instantly become harder to understand. And within that limit, try to vary your sentence length. A nice mixture of short, mid and longer sentences creates rhythm and keeps monotony at bay.
+
+
+
+
+
+
Teaching developers. And models.
+
Stack Overflow has been the go-to place for technologists to learn for over fifteen years. Now you can license our vital, verified knowledge to train your AI models.
+
+
+
As the go-to place for technologists to learn, Stack Overflow is unmatched for verified technical knowledge, and now you can license that public data – built up over fifteen years of questions and answers posted on our public forum – to train your AI models.
+
+
+
+### Stay active (most of the time)
+
+We use the active voice as much as possible to make it clear who’s acting — and to use fewer words and create faster-moving copy.
+
+That said, in certain situations the passive voice can help soften a message. This can be particularly true in-product, for time-sensitive messages, or things like error messages. Using the passive voice in these instances can avoid attributing blame unnecessarily.
+
+
+
+
With Stack Internal, your developers can share knowledge and resources with the whole organization, so everyone can find the right answers quickly.
+
+
+
With Stack Internal, knowledge and resources can be shared with the whole organization, making answers easily searchable and findable.
+
+
+
+### Practice precision, especially in-product
+
+Sometimes, precision is the best way forward. Especially in-product, where much of the writing should feel invisible — guiding, not distracting. This is where clarity trumps charm, and where every word has to earn its place.
+
+Precision can matter more in some business and brand settings, too. If the moment calls for clarity over color, dial down the “spirited” nature and focus on the “simple” stuff.
+
+Learn more about how we dial these aspects of our voice up and down in different settings in the “Brand Volume” section.
+
+
+
+
Content Health.
+
These posts haven’t been updated for six months. You may want to review them to check if the information is still accurate.
+
+
+
Content Health.
+
Things are always changing – we get it. But make sure your team has the right knowledge at hand by updating these old posts.
+
+
+
+## Brand volume across channels
+
+In everyday conversations, the way you speak flexes depending on what you’re saying and who you’re saying it to. Our brand tone of voice should flex in the same way.
+
+Depending on the channel, audience and context of our writing, we can turn the different pillars of our voice up and down.
+
+For example in some situations we can sound more **Spirited**, while in others we should prioritize keeping things **Simple**. Our **Syntax** pillar doesn’t really change – everything we write should be well thought out and readable.
+
+There are no hard rules around this. It’s about reading the room and thinking about what’s appropriate. But here’s some rough guidanceto follow.
+
+### When to turn up Simple
+
+
+
+
B2B
+
When we’re speaking to businesses, our messaging needs to feel professional. So we should focus on Simple over Spirited. The good news is that most B2B messaging is so stuffed with marketing fluff that clear, simple copy is enough to help us stand out and get our message across.
+
+
+
In product
+
In-product copy is there to guide, not distract. So simplicity is king. That said, there can still be moments where Spirited shines through, for example in a success message or during onboarding.
+
+
+
Support
+
Someone reading our help center may be feeling frustrated or trying to fix an urgent problem. We should prioritize our Simple pillar to make sure the information they find is clear and easy to understand.
+
+
+
+### When to turn up Spirited
+
+
+
+
B2C
+
Consumers are used to brands talking to them in more relaxed and informal ways, so it’s appropriate for us to bring a little more wit and charm.
+
+
+
Social Media
+
On social media, our content needs to stand out and get noticed. Turning up the Spirited part of our voice can help.
+
+
+
Email Marketing
+
As a one-to-one channel, email marketing helps us build relationships with our customers. Leaning into our Spirited side helps keep our emails engaging, and humanizes us as a brand.
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/resources/fonts.md b/packages/stacks-docs-next/src/docs/public/resources/fonts.md
new file mode 100644
index 0000000000..6b0764a8ef
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/resources/fonts.md
@@ -0,0 +1,45 @@
+---
+updated: 2025-12-10
+---
+
+
+
+## In marketing
+
+### Stack Sans
+
+More information and usage guidelines [on Stack Sans](/brand/typography/).
+
+| Variation | Use | Download |
+| ------------------------------------------------------------------------------------------------ | -------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| Stack Sans Notch | Hero headlines and display text | |
+| Stack Sans Headline | Headers and titles (i.e., larger uses) | |
+| Stack Sans Text | Body copy (i.e., smaller uses) | |
+
+### Monospace
+
+One of the languages we speak is code, when using examples of code we like to use **IBM’s Plex** typeface.
+
+
+
+## In product
+
+### Sans Serif
+
+```
+-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+```
+
+### Serif
+
+```
+Georgia, Cambria, "Times New Roman", Times, serif
+```
+
+### Monospace
+
+```
+"SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+```
diff --git a/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md b/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md
new file mode 100644
index 0000000000..1236576679
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/accessibility/alt.md
@@ -0,0 +1,154 @@
+---
+title: Alt-text
+description: Everything we know about alt-texts, when to use them, and how to craft them.
+updated: 2026-02-12
+---
+
+
+
+## How to write alt-text
+
+For a helpful decision tree on how and when to write alt-text, check out the W3C's [alt-text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/).
+
+An alt-text is a description of an image that's shown to people who can't see the image. Alt-texts help people with little or no vision who use assistive technologies, people who have turned off images, and search engines.
+
+### Describe the image concisely
+
+It might sound obvious, but an alt-text should describe the image in case an image doesn't display or someone has trouble seeing it. The goal of alt-text is to give the necessary information from the image **at a glance**. It's best to include only the necessary information.
+
+
+
+
+
+
+
+
Don't
+
+
"People using computers."
+
"Man in a purple shirt and woman in blue pants are typing on laptops and there's a plant on the floor nearby."
"Man and woman using laptops at a standing table, Illustration."
+
+
+
+
+Take context into account. For instance, if the image above is part of a blog post about standing tables, then it's safer to skip the part about standing tables.
+
+### Don't say it's an image
+
+Don't start alt-texts with things like "Image of" or "Photo of.". Screen readers add that by default. If it's a special type of image (like an icon), you can note that at the end.
+
+
+
+
Don't
+
+
"Image of a rocket."
+
"Illustration of a rocket."
+
"Photo of a rocket."
+
"Icon of a rocket."
+
+
+
+
Do
+
+
"A rocket."
+
"A rocket, icon." (if noting the type)
+
+
+
+
+### End with a period
+
+End the alt-text with a period. This makes screen readers pause a bit after the last word in the alt-text, creating a natural pause before the next bit of text.
+
+## When not to write alt-text
+
+In most cases you should use an alt-text for images, but there are some exceptions where you should leave the alt-text blank.
+
+### Decorative images
+
+If an image does not convey any meaning to the user, leave the alt-text blank.
+
+```html
+
+
+
…
+
…
+
+```
+
+
+
+
+
+
Improve efficiency and ship better code
+
There's a reason the world's largest developer teams rely on Stack Overflow Enterprise—it leads to better product and allows distributed teams to securely collaborate and share knowledge.
+
+
+The rocket here doesn't add meaningful information.
+
+### Images accompanied by text
+
+If an image has a label nearby, leave the alt-text blank.
+
+```html
+
+
+
…
+
…
+
+```
+
+
+
+
+
+
+
TOP LEADERBOARD: 728X90
+
This ad unit is the most visible on the site.
+
+
+
+The nearby text here already explains what the graphic illustrates. If there was alt-text here, screen readers would repeat information to the user.
+
+
+
+
+ Note: In these cases, leaving the alt attribute empty (alt="") will cause a screenreader to skip over the image. Never remove the alt-attribute. When a screenreader comes to an image without an alt attribute, it will dictate the filename (Eg. "SO underscore logo dot png").
+
+
+
+
+## How to add alt-text
+
+### Using <img>
+
+Inside an `` tag, add the alt-text inside the `alt` attribute:
+
+```html
+
+
+```
+
+### Using inline SVG
+
+Inline SVG doesn't support the `alt` attribute, so instead add two wai-aria attributes: `role="img"` and `aria-label="The alt-text."`:
+
+```html
+
+```
+
+---
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/accessibility/intro.md b/packages/stacks-docs-next/src/docs/public/system/accessibility/intro.md
new file mode 100644
index 0000000000..c09d992660
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/accessibility/intro.md
@@ -0,0 +1,446 @@
+---
+title: Accessibility
+description: A non-comprehensive guide to accessibility best practices when using Stacks.
+updated: 2026-02-12
+---
+
+
+
+## Target
+
+All Stack Overflow product UIs must conform to the AA conformance level of the Web Content Accessibility Guidelines (WCAG) 2.2 with a few exceptions around color contrast documented below.
+
+### High contrast modes
+
+When high contrast mode is enabled, Stack Overflow product UIs must meet or exceed the [Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/WCAG22/#contrast-enhanced) of the [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) and should conform to the remaining [AAA conformance level rules](https://www.w3.org/TR/WCAG22/#cc1) when reasonably achievable. This only applies to the subset of Stack Overflow products that provide high contrast modes. **Note: not all Stack Overflow products are expected to support high contrast modes**.
+
+## Visual accessibility
+
+Stack Overflow product UIs MUST conform to a custom conformance level of the Accessible Perceptual Contrast Algorithm (APCA). This custom conformance level replaces the [AA conformance level](https://www.w3.org/TR/WCAG22/#cc1) of the [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) for color contrast.
+
+### Color & contrast
+
+Stacks aims to equip you with an accessible color palette and has been tested against WCAG AA, WCAG AAA and the newer APCA color standards. Most of our color combinations meet WCAG AA and APCA levels defined below. We also offer high contrast mode which offers a greater level of contrast.
+
+#### Contrast ratios
+
+Contrast is the difference in luminance or color between any two elements. All visual readers require ample luminance contrast for fluent readability. Stack Overflow products must conform to a custom conformance level of the Accessible Perceptual Contrast Algorithm (APCA). Based on our custom conformance level, all text must have a Lightness contrast (Lc) value of 60, body copy must have a Lc value of 75, icons must have a Lc value of 45, and placeholder and disabled text must have a Lc of 30. These numbers will be negative when calculating for dark mode.
+
+
+
+
Don't
+
Use low luminance contrast that fails our standards.
+
+
+
Robotics
+
+
+
+
Do
+
Use luminance contrast that meets our standards as defined above.
+
+
+
Robotics
+
+
+
+
+#### Visual cues
+
+Visual readers with color vision deficiency (CVD) have problems differentiating some hues and therefore these users need help discerning differences between items. This means that color (hue) should never be the sole means of communicating information and should always be paired with a non-color dependent indicator to accommodate all visual users.
+
+
+
+
Don't
+
Use color alone to convey meaning.
+
+
+
+
+
+
Do
+
Use an icon alongside color to convey meaning.
+
+
+
+
+
+
+
+## Focus states
+
+Some people navigate through a website by using a keyboard or other device (instead of a mouse). A focus state should clearly let users know which item they're on and is ready to interact with. Stack's has taken a hybrid approach in using both the browser's default styles (smaller interactive components like text links) and a custom focus ring.
+
+### Foundation for custom approach
+
+The custom approach adds two different outline rings on the inside of the component. The outer ring color uses `secondary-theme-400` (matching the primary button color) and the inner ring color uses `white` (matching the background).
+
+
+
+
+
+
+
Default
+
+
+
+
+
+
+
Focus
+
+
+
+
+The outer ring color will always display as the theme color even when applied to a `muted` or `danger` styled button. This ensures the focus ring maintains a 3:1 color contrast ratio for any adjacent colors (WCAG level AA) within any theme (assuming the `secondary-theme` color already passes the 3:1 contrast ratio).
+
+
+
+
+
+
+
Tonal default
+
+
+
+
+
+
+
Tonal focus
+
+
+
+
+
+
+
Danger filled default
+
+
+
+
+
+
+
Danger filled focus
+
+
+
+
+### Meeting level AAA
+
+Both focus rings are always 2px thick. This allows the focus state to meet [WCAG 2.4.13 Focus Appearance (AAA)](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html) standards for High Contrast mode. Whenever possible, the rings should be added to the inside of the component so we can better ensure that the rings don't get accidentally cut off by the surrounding layout (which helps us to meet [WCAG 2.4.11 Focus Not Obscured AA](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)). However, this does result in a padding reduction within the element, surrounding the text. When choosing to set the focus rings on the inside (inset), the component must have at least 4px of padding at the smallest size. This has been applied to buttons, button groups, navigation, pagination and topbar.
+
+When the padding amount is not sufficient enough to support a double ring on the inside of the component, the rings are placed on the outside. The components included are tags, toggles, form elements (input fields, selects, radio/checkboxes…), block links and the editor.
+
+
+
+ javascript
+
+
+
Tag default
+
+
+
+ javascript
+
+
+
Tag focus
+
+
+
+
+
+
+
Toggle default
+
+
+
+
+
+
+
Toggle focused
+
+
+
+
+### Consistent style patterns
+
+#### Filled
+
+Any component that already has an existing background color that fills the shape will maintain its original fill color.
+
+
+
+#### Bordered
+
+For components that have an existing border around the component when not in focus, a background fill color is added in addition to the focus rings. This ensures there's a strong enough visual difference between the non-focus and focus state. These patterns are maintained across all components for consistency.
+
+
+
+
+
+ page
+ 2
+
+
+
+
+
Pagination default
+
+
+
+
+
+ page
+ 2
+
+
+
+
+
Pagination focus
+
+
+
+
+#### Floating
+
+Components without an existing fill or border will only display the double rings on focus. Since the inner ring matches the background color in most cases, this will visually appear like a single ring around the perimeter of the component.
+
+
+
+#### Exceptions
+
+The exceptions to this pattern are the `Clear` button variations. All buttons display a background fill layer when in focus. `Clear`, `Outline` and `Filled` styles will all look the same when in focus. The fill color was chosen to match the existing `Filled` style.
+
+
+
+
+
+
+
Clear default
+
+
+
+
+
+
+
Clear focus
+
+
+
+
+
+
+
Tonal default
+
+
+
+
+
+
+
Tonal default focus
+
+
+
+
+### Browser default
+
+Some focusable elements and Stacks components currently do not include custom focus styling. These elements will instead render the browser-default focus indicators.
+
+## Viewport size
+
+All Stack Overflow products must conform to the [WCAG 2.2 SC 1.4.10: Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html). This requires that our product UIs support viewports as small as **320px x 256px** without requiring the user scrolling in multiple dimensions (unless an element requires it for usage or meaning). Very few users will ever use a viewport this small, but it's important to support it so users can zoom in up to 400% and still have a usable experience. At 400% zoom, a 320x256 viewport translates to 1280x1024, which is a common resolution for many users. Supporting this small viewport size ensures that users with low vision can still use our products effectively.
+
+### Exceptions
+
+There are some exceptions to this rule. Some elements such as tables and videos may require horizontal scrolling on small viewports. In these cases, it's acceptable to require scrolling in two dimensions. See the [WCAG 2.2 documentation on Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html#content-exceptions-for-reflow) for detailed guidance.
+
+## Landmarks
+
+[ARIA landmarks](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) should be used across Stack Overflow product pages to provide clear navigation structures for users relying on assistive technologies. Landmarks are inserted into the page explicitly using the `role` attribute on an element (e.g. `role="search"`, etc...) or by leveraging semantic HTML (e.g. an `header` element is given automatically the `banner` landmark).
+
+Using semantic HTML elements should be preferred over using the `role` attribute whenever possible.
+
+For a comprehensive guide on using ARIA landmark roles refer to:
+
+- [WCAG ARIA11 Technique](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
+- [Using HTML landmark roles to improve accessibility](https://developer.mozilla.org/en-US/blog/aria-accessibility-html-landmark-roles)
+- [Landmarks Browser Extension](https://matatk.agrip.org.uk/landmarks)
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/backgrounds.md b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds.md
new file mode 100644
index 0000000000..34bb92c3f3
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/backgrounds.md
@@ -0,0 +1,282 @@
+---
+title: Backgrounds
+description: Atomic classes for controlling the background properties of an element’s background image.
+updated: 2025-12-05
+---
+
+
+
+## Background size
+
+
+
+
+
+
Class
+
Output
+
+
+
+ {#each backgroundSize as bgSize}
+
+
{bgSize.class}
+
{bgSize.output}
+
+ {/each}
+
+
+
+
+## Background repeat
+
+
+
+
+
+
Class
+
Output
+
+
+
+ {#each backgroundRepeat as bgRepeat}
+
+
{bgRepeat.class}
+
{bgRepeat.output}
+
+ {/each}
+
+
+
+
+## Background position
+
+
+
+
+
+
Class
+
Output
+
+
+
+ {#each backgroundPosition as bgPosition}
+
+
{bgPosition.class}
+
{bgPosition.output}
+
+ {/each}
+
+
+
+
+### Background position examples
+
+```html
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+```
+
+
+
.bg-bottom
+
.bg-center
+
.bg-left
+
.bg-left-bottom
+
.bg-left-top
+
.bg-right
+
.bg-right-bottom
+
.bg-right-top
+
.bg-top
+
+
+## Background attachment
+
+
+
+
+
+
Class
+
Output
+
+
+
+ {#each backgroundAttachment as bgAttachment}
+
+
{bgAttachment.class}
+
{bgAttachment.output}
+
+ {/each}
+
+
+
+
+## Background image
+
+
+
+
+
+
Class
+
Output
+
+
+
+ {#each backgroundImage as bgImage}
+
+
{bgImage.class}
+
{bgImage.output}
+
+ {/each}
+
+
+
+
+## Background utilities
+
+### Loading
+
+Adding the `.bg-loading` class applies a shimmering gradient animation to a container's background. Use it to create flexible skeleton placeholders that mimic the shape and layout of content while it loads.
+
+```html
+
+
+
Loading…
+
+
+
+
+
+
+
+
+```
+
+
+
+
Loading…
+
+
+
+
+
+
+
+
+
+### Confetti
+
+Adding the confetti background utility adds confetti to any block-level element. You can choose the animated version, or static version. The animated version respects `prefers-reduced-motion` and displays the static version of the background when necessary. No JavaScript required.
+
+```html
+
+
+## Color
+
+### Color classes
+
+Each color stop is available as a border class. See the [colors documentation](/system/foundation/colors#classes) for all available classes.
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md b/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md
new file mode 100644
index 0000000000..1723c5890c
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/box-shadow.md
@@ -0,0 +1,117 @@
+---
+title: Box shadow
+figma: https://svelte.stackoverflow.design/figma/box-shadows
+description: Box shadow atomic classes allow you to change an element's box shadow quickly.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md b/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md
new file mode 100644
index 0000000000..9cb8ef5d2d
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/box-sizing.md
@@ -0,0 +1,97 @@
+---
+title: Box sizing
+description: Box-sizing atomic classes allow one to determine what is used to determine an element's width or height.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/current-color.md b/packages/stacks-docs-next/src/docs/public/system/base/current-color.md
new file mode 100644
index 0000000000..3a12979da7
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/current-color.md
@@ -0,0 +1,48 @@
+---
+title: Current color
+description: Atomic classes allow you to quickly add currentColor to an element's fill or stroke property.
+---
+
+## Classes
+
+| Class | Output |
+| ----------------- | ----------------------- |
+| `.fill-current` | `fill: currentColor;` |
+| `.stroke-current` | `stroke: currentColor;` |
+
+## Examples
+
+When applied to an SVG, applying `currentColor` to the fill or stroke property allows you to inherit the parent element's text color or the text color applied to the element itself.
+
+```html
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/cursors.md b/packages/stacks-docs-next/src/docs/public/system/base/cursors.md
new file mode 100644
index 0000000000..769dd2bec0
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/cursors.md
@@ -0,0 +1,105 @@
+---
+title: Cursors
+description: Atomic cursor classes allow you to quickly change an element's cursor behavior.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
+
+
+
+
Class
+
Output
+
+
+
+ {#each cursorClasses as item}
+
+
.{item.class}
+
{item.output}
+
+ {/each}
+
+
+
+
+## Examples
+
+```html
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+```
+
+
+
+
+ .c-auto
+
+
+ .c-default
+
+
+ .c-pointer
+
+
+ .c-text
+
+
+ .c-wait
+
+
+ .c-move
+
+
+ .c-not-allowed
+
+
+ .c-help
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/display.md b/packages/stacks-docs-next/src/docs/public/system/base/display.md
new file mode 100644
index 0000000000..6c19ce2e5a
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/display.md
@@ -0,0 +1,121 @@
+---
+title: Display
+description: Display atomic classes allow you to change an element's display quickly.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/flex.md b/packages/stacks-docs-next/src/docs/public/system/base/flex.md
new file mode 100644
index 0000000000..0a54dd1f2c
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/flex.md
@@ -0,0 +1,1634 @@
+---
+title: Flex
+description: Stacks provides extensive utility and helper classes for flex layouts. If you are new to flex layouts, check out this interactive introduction by Joshua Comeau.
+updated: 2025-12-05
+---
+
+
+
+
+
+Stacks provides extensive utility and helper classes for flex layouts. If you are new to flex layouts, check out this interactive introduction by Joshua Comeau.
+
+## Basic flex layout
+
+A flex layout is initiated with the .d-flex class. By default, display: flex; starts a non-wrapping row. To convert it to a column, apply the .fd-column atomic class.
+
+```html
+
+
…
+
…
+
+
+
…
+
…
+
+```
+
+
+
+
+
.flex--item
+
.flex--item
+
+
+
+
+
.flex--item
+
.flex--item
+
+
+
+
+## Fluid
+
+By default, all flex items will only be as wide as their content. If you would like a flex item or all the flex items to fill the remaining space, apply the .fl-grow1 to the individual item, or .flex\_\_fl-equal to the parent to apply to all children.
+
+### Fluid examples
+
+```html
+
+
…
+
…
+
+
+
…
+
…
+
…
+
+```
+
+
+
+
+
.flex--item.fl-grow1
+
.flex--item
+
+
+
+
+
.flex--item
+
.flex--item
+
.flex--item
+
+
+
+
+## Fixed cells
+
+You can either fix the width of an individual element or fix the width of all child elements within a parent container by setting the width on the parent. The cell widths are based on a 12-column flex layout system.
+
+### Fixed classes
+
+
+
+
+
+
Individual Width
+
Uniform Width
+
Output
+
+
+
+ {#each flexItem as item}
+
+
{item.class}
+
{item.all}
+
{item.output}
+
+ {/each}
+
+
+
+
+### Fixed examples
+
+```html
+
+
…
+
…
+
+
+
…
+
…
+
…
+
+
+
…
+
…
+
…
+
…
+
+```
+
+
+
+
.flex--item[x]
+
+
+
.flex--item2
+
.flex--item10
+
+
+
+
+
.flex--item[x] and standard .flex--item
+
+
+
.flex--item3
+
.flex--item6
+
.flex--item
+
+
+
+
+
.d-flex.flex__allitems4
+
+
+
.flex--item
+
.flex--item
+
.flex--item
+
.flex--item
+
+
+
+
+
+## Helpers
+
+We have a few helper classes you can add to a .d-flex container that affect the child .flex--items.
+
+### Helper classes
+
+
+
+## Nested flex layouts
+
+Flex layouts can be nested within each other. This allows you to create unique, custom layouts without needing to create new, custom code or override existing styles.
+
+### Nested examples
+
+```html
+
+
+
…
+
…
+
+
…
+
…
+
+```
+
+
+
+
+
.flex--item
+
.flex--item
+
+
+
.flex--item2
+
.flex--item2
+
+
+## Gutters
+
+
+
Deprecation: gutters will be removed in a future release. Please use gap classes to set spacing on flex items.
+
+
+Sometimes gutters are desired between cells. To do so apply the appropriate class to the parent wrapper. The gutter applies a margin to all sides. The sizes available are the same as the spacing units.
+
+### Gutter classes
+
+
+
+
+
+
Class
+
Output
+
+
+
+ {#each gutter as item}
+
+
{item.class}
+
{item.output}
+
+ {/each}
+
+
+
+
+### Gutter examples
+
+```html
+
+
…
+
…
+
+
+
…
+
…
+
+
+
…
+
…
+
+```
+
+
+
+
+
.gs16
+
.gs16
+
.gs16
+
.gs16
+
+
+
+
+
.gs16.gsx -- Row gutters only
+
.gs16.gsx -- Row gutters only
+
.gs16.gsx -- Row gutters only
+
.gs16.gsx -- Row gutters only
+
+
+
+
+
.gs16.gsy -- Column gutters only
+
.gs16.gsy -- Column gutters only
+
.gs16.gsy -- Column gutters only
+
.gs16.gsy -- Column gutters only
+
+
+
+
+### Nested gutters
+
+
+
Note: Nested flex layouts with gutter spacing will conflict with each other in unpredictable ways. TL;DR? Don't stick a .d-flex directly into a .d-flex, instead stick a .d-flex into a .flex--item like so:
+
+
+If you are nesting a flex layout with gutter spacing into another flex layout that also has gutter spacing, the child's parent wrapper margins will be overwritten by the parent. To have the child flex layout's gutter spacing honored, you have to put the child flex layout within a .flex--item wrapper first. This allows the parent and child flex layout gutter spacing to act correctly without interfering with each other.
+
+#### Do
+
+```html
+
+
…
+
+
+
…
+
…
+
+
+
+```
+
+
+
.flex--item
+
+
+
.flex--item
+
.flex--item
+
+
+
+
+#### Don’t
+
+```html
+
+
…
+
+
…
+
…
+
+
+```
+
+
+
.flex--item
+
+
.flex--item
+
.flex--item
+
+
+
+## Flex direction
+
+On a flex container, you can set the direction of the child items.
+
+### Flex direction classes
+
+
+
+## Justify content
+
+Flex items can be controlled with atomic classes on the container's main axis. This means controlling how a .flex--item is aligned left to right when in an .fd-row, and top and bottom in an .fd-column.
+
+### Justify content classes
+
+
+
+## Align items
+
+Flex items can be controlled with atomic classes on the container's cross axis. This means controlling how a .flex--item is aligned top to bottom when in an .fd-row, and left to right in an .fd-column.
+
+### Align items classes
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/floats.md b/packages/stacks-docs-next/src/docs/public/system/base/floats.md
new file mode 100644
index 0000000000..0e9b65a664
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/floats.md
@@ -0,0 +1,131 @@
+---
+title: Floats
+description: Float and clear atomic classes allow you to change how an element is positioned within the layout. These should be used when possible to help create consistency.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
+
+
+
+
Class
+
Output
+
Definition
+
+
+
+ {#each floatClasses as item}
+
+
.{item.class}
+
{item.output}
+
{@html item.define}
+
+ {/each}
+
+
+
+
+## Examples
+
+### Floats
+
+```html
+
+
…
+
…
+
…
+
+```
+
+
+
+
.float-none
+
.float-left
+
.float-right
+
+
+
+### Clears
+
+```html
+
+
…
+
…
+
…
+
+
+
…
+
…
+
…
+
+
+
…
+
…
+
…
+
+```
+
+
+
+
.float-left
+
.float-left
+
.clear-left
+
+
+
.float-right
+
.float-right
+
.clear-right
+
+
+
.float-left
+
.float-right
+
.clear-both
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/gap.md b/packages/stacks-docs-next/src/docs/public/system/base/gap.md
new file mode 100644
index 0000000000..8ddc8c14cb
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/gap.md
@@ -0,0 +1,229 @@
+---
+title: Gap
+description: Atomic CSS gap classes allow you to set spacing on the direct children of elements with flexbox and grid layouts.
+updated: 2025-12-17
+---
+
+
+
+## Gap classes
+
+
+
+## Column gap
+
+Spacing can be set on just the x-axis with `.gx` classes. They can be used independently or in combination with other atomic gap classes.
+
+
+
+## Row gap
+
+Spacing can be set on just the y-axis with `.gy` classes. They can be used independently or in combination with other atomic gap classes.
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/grid.md b/packages/stacks-docs-next/src/docs/public/system/base/grid.md
new file mode 100644
index 0000000000..401fbb919b
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/grid.md
@@ -0,0 +1,1379 @@
+---
+updated: 2025-12-05
+---
+
+
+
+## Overview
+
+CSS Grids are the most powerful layout system available in CSS. It has two dimensions, meaning it can handle both columns and rows simultaneously, unlike flex layouts which can only do one at a time. Applying .d-grid to a container will lay out its children according to the CSS Grid layout spec. Adding atomic modifying classes will change the layout's behavior. Applying classes to an individual .grid--item will change that cell's behavior.
+
+### Examples
+
+```html
+
+
…
+
+```
+
+
+
+ .d-grid .grid__4 .g16
+
.sm:g-af-row
+
+
+
+
.grid--item
+
.grid--col-all
+
+
+
.grid--item
+
.grid--col1
+
.md:grid--col-all
+
.grid--row2
+
+
+
.grid--item
+
.grid--col3
+
.md:grid--col-all
+
.grid__2
+
+
.d-grid
+
.g16
+
.grid__2
+
.sm:g-af-row
+
+
+
.grid--item
+
.sm:grid--col-all
+
+
+
.grid--item
+
.sm:grid--col-all
+
+
+
.grid--item
+
.sm:grid--col-all
+
+
+
.grid--item
+
.sm:grid--col-all
+
+
+
+
+
.grid--item
+
.grid--col2
+
+
+
.grid--item
+
.grid--col1
+
.md:grid--col2
+
+
+
.grid--item
+
.grid--col-all
+
+
+
.grid--item
+
.md:grid--col2
+
.md:has-row-2
+
+
+
.grid--item
+
.md:grid--col2
+
+
+
.grid--item
+
.md:grid--col2
+
+
+
.grid--item
+
.md:grid--col-all
+
+
+
+
+
+## Columns
+
+To define a discrete number of columns in your grid layout, you can add a grid\_\_[x] modifying class.
+
+### Column classes
+
+
+
+## Column and row spans
+
+You can apply grid--col[x] to your columns, and grid--row[x] to your rows to span a specific number of columns or rows.
+
+### Column spanning classes
+
+
+
+## Autoflow
+
+If you have grid items that you don't explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items.
+
+### Autoflow classes
+
+
+
+## Start and end
+
+If you'd like to offset a column or row and specify its start and end positioning classes, you can apply these atomic classes.
+
+### Column start and end classes
+
+
+
+## Alignment
+
+On the grid container, you can apply align-items to the y axis and justify-items to the x axis. On individual items, you can apply align-self on the y axis, and justify-self on the x axis.
+
+### Alignment classes
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/interactivity.md b/packages/stacks-docs-next/src/docs/public/system/base/interactivity.md
new file mode 100644
index 0000000000..f584574f77
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/interactivity.md
@@ -0,0 +1,127 @@
+---
+title: Interactivity
+description: Atomic interactivity classes allow you to quickly change an element's interactivity.
+updated: 2025-12-16
+---
+
+
+
+## Pointer events
+
+The pointer-events CSS property enables or disables all mouse events on an element.
+
+### Pointer events classes
+
+
+
+
+
+
Class
+
Output
+
Definition
+
+
+
+ {#each pointerEventsClasses as item}
+
+
.{item.class}
+
{item.output}
+
{item.define}
+
+ {/each}
+
+
+
+
+## User select
+
+The user-select CSS property controls whether the user can select text.
+
+### User select classes
+
+
+
+
+
+
Class
+
Output
+
Definition
+
+
+
+ {#each userSelectClasses as item}
+
+
.{item.class}
+
{item.output}
+
{@html item.define}
+
+ {/each}
+
+
+
+
+## User drag
+
+The user-drag CSS property controls whether an element can be dragged.
+
+### User drag classes
+
+
+
+
+
+
Class
+
Output
+
Definition
+
+
+
+ {#each userDragClasses as item}
+
+
.{item.class}
+
{item.output}
+
{item.define}
+
+ {/each}
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/lists.md b/packages/stacks-docs-next/src/docs/public/system/base/lists.md
new file mode 100644
index 0000000000..cc2217485a
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/lists.md
@@ -0,0 +1,142 @@
+---
+title: Lists
+description: Stacks provides a few atomic classes to help style lists.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
+
+
+
+
Class
+
Output
+
+
+
+ {#each listClasses as item}
+
+
.{item.class}
+
{item.output}
+
+ {/each}
+
+
+
+
+## Examples
+
+By design, our lists inherit some sensible margins by default. However, in some layouts, you may want to strip these default margins by adding `.list-reset` and then explicitly choosing a list style and list style position. These classes can be applied to ordered and unordered lists interchangably, though if you're wanting to show decimals, it's most appropriate to mark your list up as an ordered list.
+
+### List Style
+
+```html
+
+ …
+
+
+ …
+
+
+ …
+
+
+ …
+
+```
+
+
+
+
List item 1
+
List item 2
+
List item 3
+
List item 4
+
List item 5
+
+
+
List item 1
+
List item 2
+
List item 3
+
List item 4
+
List item 5
+
+
+
List item 1
+
List item 2
+
List item 3
+
List item 4
+
List item 5
+
+
+
List item 1
+
List item 2
+
List item 3
+
List item 4
+
List item 5
+
+
+
+### List Position
+
+By default, the position of markers in a list item are outside their containing element.
+
+```html
+
+ …
+
+
+ …
+
+```
+
+
+
+
List item 1
+
List item 2
+
List item 3
+
List item 4
+
List item 5
+
+
+
+
List item 1
+
List item 2
+
List item 3
+
List item 4
+
List item 5
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/object-fit.md b/packages/stacks-docs-next/src/docs/public/system/base/object-fit.md
new file mode 100644
index 0000000000..05812bdb08
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/object-fit.md
@@ -0,0 +1,157 @@
+---
+title: Object fit
+description: Atomic classes that control the sizing of an img or video relative to its container.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
+
+
+
+
Class
+
Output
+
Definition
+
+
+
+ {#each objectFitClasses as item}
+
+
{item.class}
+
{item.output}
+
{@html item.define}
+
+ {/each}
+
+
+
+
+## Examples
+
+```html
+
+
+
+
+
+
+```
+
+
+
+
+
.of-contain
+
+
+
+
+
.of-cover
+
+
+
+
+
.of-fill
+
+
+
+
+
.of-none
+
+
+
+
+
.of-scale-down
+
+
+
+
+
.op-center.of-none
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/opacity.md b/packages/stacks-docs-next/src/docs/public/system/base/opacity.md
new file mode 100644
index 0000000000..5fe0660750
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/opacity.md
@@ -0,0 +1,146 @@
+---
+title: Opacity
+description: Atomic opacity classes allow you to change an element's opacity quickly.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/outline.md b/packages/stacks-docs-next/src/docs/public/system/base/outline.md
new file mode 100644
index 0000000000..f59f67182f
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/outline.md
@@ -0,0 +1,61 @@
+---
+title: Outline
+description: Atomic outline classes allow you to quickly change an element's outline styling.
+updated: 2025-12-16
+---
+
+
+
+
+ Warning:.outline-ring does not meet our accessibility standards for focus state styling and should be used for decorative purposes only.
+
+
+## Classes
+
+
+
+
+
+
Class
+
Output
+
Definition
+
+
+
+ {#each outlineClasses as item}
+
+
.{item.class}
+
{item.output}
+
{item.define}
+
+ {/each}
+
+
+
+
+## Examples
+
+```html
+
…
+
…
+```
+
+
+
.outline-none
+
.outline-ring
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/overflow.md b/packages/stacks-docs-next/src/docs/public/system/base/overflow.md
new file mode 100644
index 0000000000..3693b8c4c3
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/overflow.md
@@ -0,0 +1,98 @@
+---
+title: Overflow
+description: Atomic overflow classes allow you to change an element's overflow properties quickly.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
+
+
+
+
Class
+
Output
+
Definition
+
+
+
+ {#each overflowClasses as item}
+
+
.{item.class}
+
{item.output}
+
{item.define}
+
+ {/each}
+
+
+
+
+## Examples
+
+```html
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+```
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/position.md b/packages/stacks-docs-next/src/docs/public/system/base/position.md
new file mode 100644
index 0000000000..073bfd9853
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/position.md
@@ -0,0 +1,262 @@
+---
+title: Positioning
+description: Atomic positioning classes allow you to quickly change an element’s position.
+updated: 2025-12-05
+---
+
+
+
+## Classes
+
+
+
+## Coordinates
+
+Our spacing units aren't limited to margin and padding; they also apply to top, right, left, and bottom declarations. Combined with our position utility classes, you should be able to achieve absolutely-positioned layouts while adhering to Stacks' spacing conventions.
+
+### Coordinate classes
+
+
+
+
+
+
Abbreviation
+
Definition
+
Responsive?
+
+
+
+ {#each coordinateDefinitions as space}
+
+
{space.term}
+
{space.define}
+
+
+
+
+ {/each}
+
+
+
+
+### Coordinate examples
+
+```html
+
…
+
…
+
…
+
…
+
…
+```
+
+
+
+ .t12 .l12
+
+
+
+ .t48 .r24
+
+
+
+ .t50 .l50
+
+
+
+ .b48 .l48
+
+
+
+ .rn8 .bn8
+
+
+ .i64
+
+
+
+
+## Positive coordinates
+
+
+
+
+
+
Prefix
+ {#each positionValues as value}
+
{value}
+ {/each}
+
+
+
+ {#each positionProperties as className}
+
+
{className}
+ {#each positionValues as value}
+ {#if className === "i"}
+ {#if value === "50%" || value === "100%"}
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/transitions.md b/packages/stacks-docs-next/src/docs/public/system/base/transitions.md
new file mode 100644
index 0000000000..0970c91680
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/transitions.md
@@ -0,0 +1,166 @@
+---
+title: Transitions
+description: Atomic transition classes allow you to quickly apply transitions properties to an element. You can modify an element's transition duration, property, or delay.
+updated: 2025-12-17
+---
+
+
+
+You can trigger CSS transitions directly with pseudo classes like `:hover` which activate on mouse over, `:focus` which activates when user tabs onto or clicks into an input element, or `active` when a user clicks on an element.
+
+You can also trigger a CSS transition using JavaScript by adding or removing a class.
+
+## Classes
+
+
+
+
+
+
Class
+
Output
+
Definition
+
+
+
+ {#each transitionClasses as atomic}
+
+
.{atomic.class}
+
{atomic.output}
+
{atomic.define}
+
+ {/each}
+
+
+
+
+## Base transition
+
+The base transition applies a default duration timing function to an element.
+
+```html
+
…
+```
+
+
+
+
+ .t
+
+
+
+
+## Speed
+
+Change an elements default transition duration.
+
+```html
+
…
+
…
+```
+
+
+
+
+ .t-slow
+
+
+ .t-fast
+
+
+
+
+## Property
+
+Target a specific CSS property for transition, or remove the default transition.
+
+```html
+
…
+
…
+
…
+
…
+```
+
+
+
+
+ .t-unset
+
+
+ .t-bg
+
+
+ .t-opacity
+
+
+ .t-shadow
+
+
+
+
+## Delay
+
+Refers to how long you want to wait before starting the duration.
+
+```html
+
…
+
…
+```
+
+
+
+
+ .t-delay
+
+
+ .t-delay-unset
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/truncation.md b/packages/stacks-docs-next/src/docs/public/system/base/truncation.md
new file mode 100644
index 0000000000..0e9b1e1e1e
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/truncation.md
@@ -0,0 +1,111 @@
+---
+title: Truncation
+description: Stacks provides utility classes for various types of truncation.
+updated: 2025-12-17
+---
+
+## Classes
+
+
+
+
+
+
Class
+
Applies to
+
Description
+
+
+
+
+
.truncate
+
+
Text is cropped to the width of its parent with an ellipsis.
+
+
+
.v-truncate[x]
+
+
Text is cropped to the length of [x] number of lines with an ellipsis.
+
+
+
.v-truncate-fade
+
+
Text is cropped by visually fading it out.
+
+
+
.v-truncate-fade__sm
+
.v-truncate-fade
+
Reduces the height of the visible text
+
+
+
.v-truncate-fade__lg
+
.v-truncate-fade
+
Increases the amount of visible text.
+
+
+
+
+
+## Examples
+
+### Ellipses
+
+CSS offers truncation on arbitrarily-long strings. This can help sanitize user-inputted things like bios, locations, or display names. In order for text truncation to work, it should be applied to a block-level element. Truncation can only apply to text/strings, not arbitrary block-level elements.
+
+```html
+
…
+
…
+
…
+
…
+
…
+
…
+```
+
+
+
+ Regardless of length, this text will be truncated horizontally. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ Regardless of length, this text will be this text will be truncated to 1 line, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ Regardless of length, this text will be this text will be truncated to 2 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ Regardless of length, this text will be this text will be truncated to 3 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ Regardless of length, this text will be this text will be truncated to 4 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ Regardless of length, this text will be this text will be truncated to 5 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+### Fade
+
+Alternatively, you can use a vertical fade that will set `max-height` and sets a vertical `mask-image`:
+
+```html
+
…
+
…
+
…
+```
+
+
+
+ Regardless of length, this text will be this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ Regardless of length, this text will be this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ Regardless of length, this text will be this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/vertical-alignment.md b/packages/stacks-docs-next/src/docs/public/system/base/vertical-alignment.md
new file mode 100644
index 0000000000..9e7737f2d3
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/vertical-alignment.md
@@ -0,0 +1,90 @@
+---
+title: Vertical alignment
+description: Atomic vertical alignment classes allow you to change an element's vertical alignment quickly.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
+
+
+
+
Class
+
Output
+
+
+
+ {#each verticalAlignmentClasses as item}
+
+
.{item.class}
+
{item.output}
+
+ {/each}
+
+
+
+
+## Examples
+
+```html
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+
…
+```
+
+
+
+
.va-baseline
+
.va-bottom
+
.va-middle
+
.va-sub
+
.va-super
+
.va-text-bottom
+
.va-text-top
+
.va-top
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/visibility.md b/packages/stacks-docs-next/src/docs/public/system/base/visibility.md
new file mode 100644
index 0000000000..3c49100b66
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/visibility.md
@@ -0,0 +1,65 @@
+---
+title: Visibility
+description: Atomic visibility classes allow you to quickly change an element's visibility.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
+
+
+
+
Class
+
Definition
+
+
+
+ {#each visibilityClasses as item}
+
+
.{item.class}
+
{item.definition}
+
+ {/each}
+
+
+
+
+## Examples
+
+```html
+
…
+
…
+
…
+```
+
+
+
+
+ .v-visible
+
+
+ .v-visible-sr
+
+
+ .v-hidden
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/base/z-index.md b/packages/stacks-docs-next/src/docs/public/system/base/z-index.md
new file mode 100644
index 0000000000..916ece05dd
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/base/z-index.md
@@ -0,0 +1,113 @@
+---
+title: Z-Index
+description: Atomic z-index classes allow you to change an element’s z-index quickly.
+updated: 2025-12-16
+---
+
+
+
+## Classes
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md b/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md
new file mode 100644
index 0000000000..0ea20570f7
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/components/buttons/index.md
@@ -0,0 +1,248 @@
+---
+title: Buttons
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-button--docs
+figma: https://svelte.stackoverflow.design/figma/buttons
+description: Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions.
+updated: 2025-12-09
+---
+
+
+
+## Styles
+
+Stacks provides 3 different button styles:
+
+1. [Base](#base)
+2. [Danger](#danger)
+3. [Featured](#featured)
+4. [Tonal](#tonal)
+
+Each style is explained below, detailing how and where to use these styles.
+
+### Base
+
+Base buttons can gain clear styling with the `.s-btn__clear` class.
+
+```html
+
+
+```
+
+
+
+### Danger
+
+Danger buttons are a secondary button style, used to visually communicate destructive actions such as deleting content, accounts, or canceling services.
+
+```html
+
+
+```
+
+
+
+### Featured
+
+Featured buttons are a secondary button style, used to visually draw attention to something new or temporary, usually as part of onboarding or to announce a new feature. These should be used sparingly, and permanent placements should be avoided.
+
+```html
+
+
+```
+
+
+
+### Tonal
+
+Tonal buttons are a secondary button style, a grayscale visual treatment. Used in layouts for the least important items or currently inactive actions.
+
+```html
+
+
+```
+
+
+
+## Anchors
+
+Anchors can be rendered with the `.s-btn` to adopt a button-like visual style for a link.
+
+```html
+Ask question
+```
+
+
+
+## Loading
+
+Any button can have a loading state applied by adding the `.is-loading` state class.
+
+```html
+
+```
+
+
+
+## Dropdowns
+
+Adding the class `.s-btn__dropdown` to any button style will add an appropriately-styled caret. These should be paired with a menu or popover.
+
+```html
+
+```
+
+
+
+## Badges
+
+Adding an `.s-btn--badge` to any button will add an appropriately-styled badge.
+
+```html
+
+```
+
+
+
+## Sizes
+
+A button's default font-size is determined by the `@body-fs` variable. To change the button's font-size, use the following classes with `.s-btn`:
+
+
+
+## Toggle buttons
+
+Each button class has a selected state which can be visually activated by applying the `.is-selected` class. When a button can switch between selected and unselected states, it is important to also annotate the button with the `aria-pressed` attribute for accessibility. A `title` attribute may also be appropriate to describe what will happen when pressing the button.
+
+```html
+
+
+
+
+```
+
+
+
+## Additional styles
+
+Stacks provides additional classes for cases that are a bit more rare.
+
+### Disabled
+
+| Type | Class | Definition | Example |
+| -------- | ------------------------ | ----------------------------------------------------------- | -------------------------------------------------------------- |
+| Disabled | `[aria-disabled="true"]` | Adds disabled styling to any element with `.s-btn` applied. | |
+
+### Resets
+
+| Type | Class | Definition | Example |
+| ----- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- |
+| Unset | `.s-btn__unset` | Removes all styling from a button and reverts focus states to browser default. | |
+| Link | `.s-btn__link` | Styles a button element as though it were a link. Instead of transforming an `s-btn` to a link, you most likely want to style a `button` as a [link](/product/components/links/#single-link-examples). | |
+
+### Icons
+
+| Type | Class | Definition | Examples |
+| ---- | -------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Icon | `.s-btn__icon` | Adds some margin overrides that apply to an icon within a button |
|
+
+### Social
+
+| Type | Class | Definition | Examples |
+| -------- | ------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Facebook | `.s-btn__facebook` | Styles a button consistent with Facebook's branding | |
+| Google | `.s-btn__google` | Styles a button consistent with Google's branding | |
+| GitHub | `.s-btn__github` | Styles a button consistent with GitHub's branding | |
+
+## Ordering
+
+To maintain product consistency, buttons should maintain the following layout ordering:
+
+### Within a row
+
+Most button groups should be ordered from the most important to the least important action, left to right.
+
+```html
+
+
+```
+
+
+
+
+
+
+### Within a column
+
+Sometimes the layout dictates that buttons need to be stacked on top of each other. Again, these buttons should be stacked from the most important to the least important, top to bottom.
+
+```html
+
+
+
+
+```
+
+
+
+
+
+
+### Within a header
+
+Sometimes the best place for a series of actions is in the same area as the title. In these cases, the buttons should be pulled to the right. Within this instance, the button order should be reversed with the most important action to the far right and the least important action to the far left.
+
+```html
+
+
+
+ Write your response
+
+
+
+
+
+
+
+
+```
+
+
+
Write your response
+
+
+
+
+
diff --git a/packages/stacks-docs-next/src/docs/public/system/develop/building.md b/packages/stacks-docs-next/src/docs/public/system/develop/building.md
new file mode 100644
index 0000000000..8ac2054817
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/develop/building.md
@@ -0,0 +1,34 @@
+---
+title: Building Stacks
+description: The following is a guide to building and running Stacks locally. You'll need to be able to build Stacks to contribute to our documentation or add new classes to our CSS library.
+updated: 2025-12-05
+---
+
+## Clone the repo
+
+There are two common ways to [clone a repo](https://help.github.com/articles/cloning-a-repository/):
+
+- Use the command line: `git clone https://github.com/StackExchange/Stacks.git`
+- Use GitHub's desktop app.
+ 1. Download and install [GitHub Desktop](https://desktop.github.com).
+ 2. Login with your GitHub credentials.
+ 3. Clone the Stacks repo.
+
+## Get Node and NPM installed
+
+We use a bunch of NPM dependencies to process and package up Stacks for delivery. You'll need to install them.
+
+1. Install [Node & NPM](https://nodejs.org/en/download/)
+2. Open the Stacks repo in a Terminal window.
+3. Install the NPM dependencies. `npm install`
+
+## Running Stacks
+
+That should do it for all our dependencies. You're now able to run Stacks.
+
+1. From the top level of the Stacks repo, run our main script `npm run start -w packages/stacks-docs`
+2. Visit your local copy of Stacks at [`http://localhost:8080/`](http://localhost:8080/)
+
+## Getting help
+
+Installing dependencies can be frustrating, and we're here to help. If you're stuck, the Stacks team is always available in #stacks. If that doesn't work, try [opening an issue](https://github.com/StackExchange/Stacks/issues/new).
diff --git a/packages/stacks-docs-next/src/docs/public/system/develop/conditional-classes.md b/packages/stacks-docs-next/src/docs/public/system/develop/conditional-classes.md
new file mode 100644
index 0000000000..33d05b6eb7
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/develop/conditional-classes.md
@@ -0,0 +1,74 @@
+---
+title: Conditional classes
+description: Stacks provides conditional atomic classes to easily build complex responsive designs, hover states, and print layouts. A limited selection of conditional classes are available throughout Stacks. These are represented in class definitions tables by a green checkmark ✓.
+updated: 2025-12-05
+---
+
+## Responsive
+
+Many utility classes in Stacks are also available in screen-size specific variations. For example, the `.d-none` utility can be applied to small browser widths and below using the `.sm:d-none` class, on medium browser widths and below using the `.md:d-none` class, and on large browser widths and below using the `.lg:d-none` class.
+
+This is done using predefined max-width media query breakpoints represented by t-shirt sizes. A common example would be to apply `.md:fd-column` to a flex layout. This means, "At the medium breakpoint and smaller, switch the flex layout from columns to rows by applying `fd-column`."
+
+> **Note:** Our font size classes, `.fs-[x]` are automatically adjusted at the smallest breakpoint.
+
+### Responsive classes
+
+| Class | Breakpoint | Definition |
+| --------- | ---------- | -------------------------------------------------------- |
+| `.[x]` | N/A | The class is applied on all browser widths. |
+| `.lg:[x]` | 1264px | The class is applied on large browser widths and below. |
+| `.md:[x]` | 980px | The class is applied on medium browser widths and below. |
+| `.sm:[x]` | 640px | The class is applied on small browser widths and below. |
+
+### Responsive example
+
+Resize your browser to see which classes are applied.
+
+```html
+
+
…
+
+
+
+
+```
+
+## Hover
+
+Stacks provides hover-only atomic classes. By applying `.h:bs-lg`, `.h:o100`, and `.h:fc-black-600`, you're saying "On hover, add a large box shadow, an opacity of 100%, and a font color of black 900."
+
+```html
+
+```
+
+## Focus
+
+Stacks provides focus-only atomic classes. By applying `.f:o100`, and `.f:fc-black-600`, you're saying "On focus, add an opacity of 100%, and a font color of black 900."
+
+```html
+
+```
+
+## Print
+
+Stacks provides print-only atomic classes. By applying `.print:d-none`, you're saying "In print layouts, remove this element from the layout."
+
+```html
+
+
+```
+
+## Dark mode
+
+Stacks provides darkmode-only atomic classes. By applying `.d:bg-green-300`, you're saying "In dark mode, apply a background of green 100."
+
+```html
+
+```
+
+In addition to specific overrides, you can force an element's colors to be light or dark by applying `.theme-dark__forced` or `.theme-light__forced`. This comes in handy when showing users a preview of light or dark interface elements.
+
+```html
+
+```
diff --git a/packages/stacks-docs-next/src/docs/public/system/develop/javascript.md b/packages/stacks-docs-next/src/docs/public/system/develop/javascript.md
new file mode 100644
index 0000000000..16c7e34ec4
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/develop/javascript.md
@@ -0,0 +1,115 @@
+---
+title: JavaScript
+description: This is an introduction to the JavaScript functionality provided by Stacks.
+updated: 2025-12-05
+---
+
+## Including the Stacks JavaScript
+
+While Stacks is first and foremost a CSS library, it also provides commonly used functionality for some components via JavaScript. This functionality is optional. If you only need the styling parts of Stack, you're free to ignore the provided JavaScript. The converse is not true: The JavaScript components work under the assumption that the Stacks CSS is available.
+
+Stacks JavaScript is currently included within various Stack Overflow projects automatically. If you're working on a Stack Overflow project, chances are it's already available for you! If not, reach out to us and we'll work on getting it setup.
+
+To include Stacks JavaScript in other projects, do the following.
+
+- Include the file `dist/js/stacks.min.js` in your page. For example, if you use the unpkg CDN, add the tag `` to your HTML. See [Using Stacks](/system/develop/using-stacks) for more information on Unpkg and installing Stacks via NPM.
+
+## Using the Stacks JavaScript
+
+The Stacks JavaScript components are provided as Stimulus controllers. [Stimulus](https://stimulus.hotwired.dev/) is a library created by [Basecamp](https://basecamp.com).
+
+Stimulus allows you to add functionality to your markup in a way that is similar to how you add styling to your markup: by modifying HTML attributes.
+
+Just as you style components by adding classes to the `class` attribute, with Stacks JavaScript, you'll give components optional functionality by adding `data-…` attributes to the HTML.
+
+The basic functional unit of Stimulus, and of a Stacks JavaScript component, is a **controller**. Controllers are identified by their name, and all Stacks-provided controller names are prefixed with `s-…`, just like component CSS classes. You give functionality to an HTML element by setting its `data-controller` attribute.
+
+```html
+
+```
+
+Refer to the documentation of individual components on how to configure a component's behavior.
+
+## Creating your own Stimulus controllers
+
+A side effect of including the Stacks JavaScript in your project is that you also have Stimulus available in your page. This means you can not only use Stacks-provided controllers, but also create your own.
+
+For general information about writing code with Stimulus, refer to the [official documentation](https://stimulusjs.org/handbook/introduction). That documentation generally assumes that you're writing ES6 code. In order to make it useful without ES6-to-ES5 transpilation, Stacks provides a helper that allows you to write controllers using old-fashioned JavaScript syntax.
+
+This helper is called `Stacks.addController` and takes two arguments: The name ("identifier") of the controller, and an object that is analogous to the ES6 class that you would write for your controller, except that it's a plain JavaScript object. All own enumerable properties of that object will be made available on the controller prototype, with the exception of the `targets` property, which will be available on the controller constructor itself, i.e. statically.
+
+With that, you can create and register the final [Hello World controller example](https://stimulusjs.org/handbook/hello-stimulus#controllers-simplify-refactoring) from the official documentation like this:
+
+```javascript
+Stacks.addController("greeter", {
+ targets: ["name"],
+
+ greet: function () {
+ console.log("Hello, " + this.name + "!");
+ },
+
+ get name() {
+ return this.nameTarget.value;
+ },
+});
+```
+
+## JavaScript classnames
+
+We prefix our JavaScript target classes with `.js-` so that changing or adding a class name for styling purposes doesn't inadvertently break our JS. This allows us to style elements with any chain of atomic or component classes from Stacks without breaking any additional JavaScript interactivity.
+
+We also try to avoid IDs for _both_ visual styling and JavaScript targeting. They aren't reusable, visual styling can't be overwritten by atomic classes, and, like non-`.js-` classes, we can't tell if there is JavaScript interactivity attached at a glance.
+
+### ✓ Do
+
+```html
+
+```
+
+```js
+var button = document.querySelector('#card');
+button.addEventListener('click', function() {
+ …
+});
+```
+
+```css
+#card {
+ …
+}
+```
diff --git a/packages/stacks-docs-next/src/docs/public/system/develop/using-stacks.md b/packages/stacks-docs-next/src/docs/public/system/develop/using-stacks.md
new file mode 100644
index 0000000000..b192a7b4bb
--- /dev/null
+++ b/packages/stacks-docs-next/src/docs/public/system/develop/using-stacks.md
@@ -0,0 +1,47 @@
+---
+title: Using Stacks
+description: A short guide to Stacks, a robust CSS & JavaScript Pattern library for rapidly building Stack Overflow.
+updated: 2025-12-05
+---
+
+## Goals
+
+Stacks is built with a unified goal: We should be writing _as little CSS & JavaScript as possible_. To achieve this goal, the Stacks team has created a robust set of reusable components. These include components like buttons, tables, and form elements.
+
+We've also created a powerful set of atomic classes that can be chained together to create just about _any_ layout without writing a single line of _new_ CSS. Further, these atomic classes can be used as modifiers of pre-existing components.
+
+## Installing
+
+Stacks is currently included within various Stack Overflow projects automatically. If you're working on a Stack Overflow project, chances are it's already available for you! If not, reach out to us and we'll work on getting it set up.
+
+To include Stacks in other projects, you can install Stacks via NPM: `npm install --save @stackoverflow/stacks`
+
+You can also include a minified, compiled Stacks CSS style sheet that's delivered via Unpkg, a CDN for NPM packages. This is good for things like Codepen or other quick prototypes. This CDN should not be considered production-ready. ``
+
+To use Stack's built-in JavaScript interactivity with your components, refer to the [JavaScript guidelines](/system/develop/javascript/).
+
+> **Warning**: If you're hotlinking to Stacks on the Stack Overflow CDN, **you are doing it wrong**. You are setting yourself up for breaking upstream changes. Instead, you should install via properly versioned package management like NPM. This will keep you pinned to a stable version.
+
+## How to best use Stacks
+
+In order to use Stacks, let's consider the design you'd like to implement.
+
+1. **My design uses existing components**
+
+ Identify if the design you're implementing uses any existing components. Great, it does? Grab the markup from that component's example page and paste that into your view.
+
+2. **My design uses existing components, but has some special cases.**
+
+ _E.g. background colors, border, and font sizes_. Awesome, copy the component's example markup to your view and add an atomic class to override its styling. Practically, this will likely just be adding something like a [`.mb12`](/system/base/spacing) to a button, or hiding something temporarily with [`.d-none`](/system/base/display).
+
+3. **My design uses a new pattern that doesn't have a component yet.**
+
+ No worries, let's build your view by assembling some atomic classes. If you're doing this more than once, you should help us identify a new pattern by [requesting a new component](https://github.com/StackExchange/Stacks/issues/new).
+
+4. **My design is super special and…**
+
+ I'm going to write a lot of custom CSS from scratch in its own `.less` file that I've included in the bundle. You _probably_ shouldn't be doing this. With atomic classes, you can build _most_ of what you're attempting to do without writing a single new line of CSS. The Stacks team would prefer you use these pre-existing classes to build new UI. Every line of CSS you write, the more CSS we have to maintain, the more our users have to download, and the more bytes we have to host.
+
+## Getting help
+
+Need help? Open [an issue](https://github.com/StackExchange/Stacks/issues/new). We'll be happy to help.
diff --git a/packages/stacks-docs-next/src/hooks.server.ts b/packages/stacks-docs-next/src/hooks.server.ts
new file mode 100644
index 0000000000..5a3235b1cd
--- /dev/null
+++ b/packages/stacks-docs-next/src/hooks.server.ts
@@ -0,0 +1,18 @@
+import { auth } from "$lib/auth";
+import { svelteKitHandler } from "better-auth/svelte-kit";
+import { building } from "$app/environment";
+
+export async function handle({ event, resolve }) {
+ // Fetch current session from Better Auth
+ const session = await auth.api.getSession({
+ headers: event.request.headers,
+ });
+
+ // Make session and user available on server
+ if (session) {
+ event.locals.session = session.session;
+ event.locals.user = session.user;
+ }
+
+ return svelteKitHandler({ event, resolve, auth, building });
+}
diff --git a/packages/stacks-docs-next/src/lib/assets/favicon.svg b/packages/stacks-docs-next/src/lib/assets/favicon.svg
new file mode 100644
index 0000000000..a365af2a34
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/assets/favicon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/stacks-docs-next/src/lib/assets/icons/brand.svg b/packages/stacks-docs-next/src/lib/assets/icons/brand.svg
new file mode 100644
index 0000000000..c71d8c75e0
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/assets/icons/brand.svg
@@ -0,0 +1 @@
+
diff --git a/packages/stacks-docs-next/src/lib/assets/icons/copywriting.svg b/packages/stacks-docs-next/src/lib/assets/icons/copywriting.svg
new file mode 100644
index 0000000000..17f912eccf
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/assets/icons/copywriting.svg
@@ -0,0 +1 @@
+
diff --git a/packages/stacks-docs-next/src/lib/assets/icons/email.svg b/packages/stacks-docs-next/src/lib/assets/icons/email.svg
new file mode 100644
index 0000000000..ad4f135145
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/assets/icons/email.svg
@@ -0,0 +1 @@
+
diff --git a/packages/stacks-docs-next/src/lib/assets/icons/handbook.svg b/packages/stacks-docs-next/src/lib/assets/icons/handbook.svg
new file mode 100644
index 0000000000..8746e36738
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/assets/icons/handbook.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/stacks-docs-next/src/lib/assets/icons/product.svg b/packages/stacks-docs-next/src/lib/assets/icons/product.svg
new file mode 100644
index 0000000000..70272a431d
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/assets/icons/product.svg
@@ -0,0 +1 @@
+
diff --git a/packages/stacks-docs-next/src/lib/assets/icons/resources.svg b/packages/stacks-docs-next/src/lib/assets/icons/resources.svg
new file mode 100644
index 0000000000..8e5a1b88c5
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/assets/icons/resources.svg
@@ -0,0 +1 @@
+
diff --git a/packages/stacks-docs-next/src/lib/auth-client.ts b/packages/stacks-docs-next/src/lib/auth-client.ts
new file mode 100644
index 0000000000..7471a0f2e4
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/auth-client.ts
@@ -0,0 +1,6 @@
+import { createAuthClient } from "better-auth/client";
+import { genericOAuthClient } from "better-auth/client/plugins";
+
+export const authClient = createAuthClient({
+ plugins: [genericOAuthClient()],
+});
diff --git a/packages/stacks-docs-next/src/lib/auth.ts b/packages/stacks-docs-next/src/lib/auth.ts
new file mode 100644
index 0000000000..22bc43f538
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/auth.ts
@@ -0,0 +1,43 @@
+import { betterAuth } from "better-auth";
+import { genericOAuth } from "better-auth/plugins";
+import { sveltekitCookies } from "better-auth/svelte-kit";
+
+import { env } from "$env/dynamic/private";
+import { getRequestEvent } from "$app/server";
+
+// TODO: Make dynamic once we figure out Netlify env vars at runtime
+const baseURL = "https://alpha.stackoverflow.design";
+
+export const auth = betterAuth({
+ baseURL,
+
+ trustedOrigins: [baseURL, "https://*.stackoverflow.design"],
+
+ // Secret for signing cookies and tokens
+ // openssl rand -base64 32
+ secret: env.AUTH_SECRET || "",
+
+ // Cookie configuration
+ advanced: {
+ cookiePrefix: "auth",
+ },
+
+ // Plugins
+ plugins: [
+ // Okta OAuth via genericOAuth plugin
+ genericOAuth({
+ config: [
+{
+ providerId: "okta",
+ clientId: env.AUTH_OKTA_ID || "",
+ clientSecret: env.AUTH_OKTA_SECRET || "",
+ discoveryUrl: `${env.AUTH_OKTA_ISSUER}/.well-known/openid-configuration`,
+ scopes: ["openid", "email", "profile"],
+ },
+ ],
+ }),
+
+ // SvelteKit cookies plugin (should be last)
+ sveltekitCookies(getRequestEvent),
+ ],
+});
diff --git a/packages/stacks-docs-next/src/lib/copyToClipboard.ts b/packages/stacks-docs-next/src/lib/copyToClipboard.ts
new file mode 100644
index 0000000000..a3dfc9bc6a
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/copyToClipboard.ts
@@ -0,0 +1,36 @@
+export function copyToClipboard(node: HTMLElement, value: string) {
+ let current = value;
+
+ async function copyText() {
+ let text: string = current || node.textContent;
+
+ try {
+ await navigator.clipboard.writeText(text);
+
+ node.dispatchEvent(
+ new CustomEvent("copysuccess", {
+ bubbles: true,
+ detail: node,
+ })
+ );
+ } catch (error) {
+ node.dispatchEvent(
+ new CustomEvent("copyerror", {
+ bubbles: true,
+ detail: error,
+ })
+ );
+ }
+ }
+
+ node.addEventListener("click", copyText);
+
+ return {
+ update(newValue: string) {
+ current = newValue;
+ },
+ destroy() {
+ node.removeEventListener("click", copyText);
+ },
+ };
+}
diff --git a/packages/stacks-docs-next/src/lib/htmlToMd.ts b/packages/stacks-docs-next/src/lib/htmlToMd.ts
new file mode 100644
index 0000000000..8d1e159ed9
--- /dev/null
+++ b/packages/stacks-docs-next/src/lib/htmlToMd.ts
@@ -0,0 +1,41 @@
+// Borrowed from
+// https://github.com/CleverCloud/eleventy-plugin-llms-txt/blob/main/src/index.js#L16
+
+export default (
+ content: string,
+ normalizeWhitespace: boolean = true,
+ stripHorizontalRules: boolean = true
+) => {
+ if (!content) return "";
+
+ // Remove
+
+
+
+
+ v{__APP_VERSION__}
+
+
+
Stacks
+
+
+ The Stack Overflow Design System – resources for product designers, developers, marketers and everyone who works with Stack Overflow.
+
+
+
+ {#each data.structure?.navigation as category, index}
+
+
+
`;
+ },
+ },
+ remarkPlugins: [relativeImagesToImports],
+ rehypePlugins: [
+ rehypeSlug,
+ extractToc,
+ exposeToc,
+ rehypeSectionize,
+ [rehypeAutolinkHeadings, { behavior: "wrap" }],
+ addTableClasses,
+ ],
+ }),
+ ],
+ kit: {
+ adapter: adapter(),
+ alias: {
+ $src: "src",
+ $components: "src/components",
+ $docs: "src/docs",
+ $data: "../stacks-docs/_data",
+ },
+ },
+ extensions: [".svelte", ".md"],
+};
+
+// Custom plugin to expose TOC in frontmatter
+function exposeToc() {
+ return function (tree, file) {
+ if (file.data.toc) {
+ // Add TOC to the file's data so mdsvex can access it
+ if (!file.data.fm) {
+ file.data.fm = {};
+ }
+ file.data.fm.toc = file.data.toc;
+ }
+ };
+}
+
+// Custom plugin to add Stacks classes to tables
+function addTableClasses() {
+ return function (tree) {
+ visit(tree, "element", (node) => {
+ if (node.tagName === "table") {
+ node.properties = node.properties || {};
+ node.properties.className = ["s-table"];
+ }
+ });
+ };
+}
+
+// Custom plugin to transform image paths to Vite imports
+// This is so in md files we can reference images relative to the file itself
+function relativeImagesToImports() {
+ return function (tree, file) {
+ // Get the file path - try multiple properties
+ const filePath = file.path || file.history?.[0] || file.filename;
+
+ if (!filePath) {
+ console.warn("Could not determine file path for image rewriting");
+ return; // Skip if we can't determine the file path
+ }
+
+ visit(tree, "image", (node) => {
+ const url = node.url;
+
+ if (url.startsWith("./") || url.startsWith("../")) {
+ try {
+ // Get the directory of the markdown file
+ const mdDir = path.dirname(filePath);
+ const imagePath = path.resolve(mdDir, url);
+ let relativeToRoot = path.relative(
+ process.cwd(),
+ imagePath
+ );
+
+ // Remove the src
+ relativeToRoot = relativeToRoot.replace(/^src\//, "");
+
+ // Rewrite to absolute URL path
+ node.url = "/" + relativeToRoot.replace(/\\/g, "/");
+
+ console.log(`Rewrote image: ${url} -> ${node.url}`);
+ } catch (err) {
+ console.error(
+ `Error rewriting image path ${url}:`,
+ err.message
+ );
+ }
+ }
+ });
+ };
+}
+
+export default config;
diff --git a/packages/stacks-docs-next/tsconfig.json b/packages/stacks-docs-next/tsconfig.json
new file mode 100644
index 0000000000..c63ecc0691
--- /dev/null
+++ b/packages/stacks-docs-next/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "extends": "./.svelte-kit/tsconfig.json",
+ "compilerOptions": {
+ "allowJs": true,
+ "checkJs": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "resolveJsonModule": true,
+ "skipLibCheck": true,
+ "sourceMap": true,
+ "strict": true,
+ "moduleResolution": "bundler"
+ }
+ // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+ // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+ //
+ // To make changes to top-level options such as include and exclude, we recommend extending
+ // the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}
diff --git a/packages/stacks-docs-next/vite.config.ts b/packages/stacks-docs-next/vite.config.ts
new file mode 100644
index 0000000000..59fde5e50f
--- /dev/null
+++ b/packages/stacks-docs-next/vite.config.ts
@@ -0,0 +1,23 @@
+import fs from "fs";
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+ plugins: [
+ sveltekit(),
+ {
+ name: "copy-doc-images",
+ buildStart() {
+ fs.cpSync("src/docs", "static/docs", {
+ recursive: true,
+ filter: (src) => !/\.md$/i.test(src),
+ });
+ },
+ },
+ ],
+ define: {
+ __APP_VERSION__: JSON.stringify(pkg.version),
+ },
+});
diff --git a/packages/stacks-docs/.eleventy.js b/packages/stacks-docs/.eleventy.js
index a58212c5d0..551324a529 100644
--- a/packages/stacks-docs/.eleventy.js
+++ b/packages/stacks-docs/.eleventy.js
@@ -76,6 +76,24 @@ module.exports = function(eleventyConfig) {
return headings;
});
+ // After build: extract from each page and write a fragment.html
+ // alongside it — used by stacks-docs-next as a legacy content stopgap.
+ eleventyConfig.on('eleventy.after', ({ results }) => {
+ for (const result of results) {
+ if (!result.outputPath || !result.outputPath.endsWith('/index.html')) continue;
+ try {
+ const html = fs.readFileSync(result.outputPath, 'utf8');
+ const $ = cheerio.load(html);
+ const main = $('#content');
+ if (!main.length) continue;
+ const fragmentPath = path.join(path.dirname(result.outputPath), 'fragment.html');
+ fs.writeFileSync(fragmentPath, main.html());
+ } catch {
+ // skip pages that can't be processed
+ }
+ }
+ });
+
// Copy these files over to _site
eleventyConfig.addPassthroughCopy('assets/dist');
eleventyConfig.addPassthroughCopy('assets/img');
diff --git a/packages/stacks-docs/_includes/layouts/page.html b/packages/stacks-docs/_includes/layouts/page.html
index d0c85b3a6c..441ac61a14 100644
--- a/packages/stacks-docs/_includes/layouts/page.html
+++ b/packages/stacks-docs/_includes/layouts/page.html
@@ -48,8 +48,13 @@
-
-
{{ title }}
+
+
+
+ {% if description %}
+
{{ description }}
+ {% endif %}
+
{% if js or figma or svelte %}
@@ -82,14 +87,10 @@
{{ title }}
{% endif %}
-
- {% if description %}
-
{{ description }}
- {% endif %}
{{ content }}
-
+
-
+
diff --git a/packages/stacks-docs/netlify.toml b/packages/stacks-docs/netlify.toml
index a9d74f3e7a..0b2fdd04b0 100644
--- a/packages/stacks-docs/netlify.toml
+++ b/packages/stacks-docs/netlify.toml
@@ -14,6 +14,11 @@
# https://docs.netlify.com/build/configure-builds/environment-variables/#netlify-configuration-variables
GIT_LFS_ENABLED = "true" # just here as a reminder
+# Build configuration for alpha branch (SvelteKit version)
+[context.alpha.build]
+ command = "npm run build -w packages/stacks-docs-next"
+ publish = "packages/stacks-docs-next/build"
+
[[redirects]]
from = "/favicon.ico"
to = "/assets/img/favicons/favicon.ico"
diff --git a/packages/stacks-svelte/netlify.toml b/packages/stacks-svelte/netlify.toml
index 977d347971..9c731442af 100644
--- a/packages/stacks-svelte/netlify.toml
+++ b/packages/stacks-svelte/netlify.toml
@@ -10,4 +10,4 @@
# IMPORTANT!: Git LFS settings can't be changed in the .toml file. You will need to set this environment
# variable through the Netlify UI otherwise netlify won't be able to clone the repo due to all our images.
# https://docs.netlify.com/build/configure-builds/environment-variables/#netlify-configuration-variables
- GIT_LFS_ENABLED = "true" # just here as a reminder
\ No newline at end of file
+ GIT_LFS_ENABLED = "true" # just here as a reminder
diff --git a/packages/stacks-svelte/package.json b/packages/stacks-svelte/package.json
index c085ba707e..c6d7b5ef01 100644
--- a/packages/stacks-svelte/package.json
+++ b/packages/stacks-svelte/package.json
@@ -14,6 +14,7 @@
}
},
"scripts": {
+ "prebuild": "npm run build:dependencies",
"build": "svelte-package -i src -o lib && rimraf test-utils.d.ts",
"build:dependencies": "npm run build:stacks-classic && npm run build:stacks-utils",
"build:stacks-classic": "echo 'Building stacks-classic because web-test-runner.config.mjs needs dist/css/stacks.css' && npm run build -w ../stacks-classic",