dancormier · Oct 26, 2026 · Oct 26, 2026
@@ -26,13 +26,13 @@ Our color palette sets the visual tone of the brand and ensures consistency acro
 
 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.
 
-![](./orange-usage.svg)
+![Examples of Stack Orange used at different scales in brand compositions](./orange-usage.svg)
 
 ## Stack color combinations
 
 When designing with a three-sided graphic stack, follow these guidelines for color selection.
 
-![](./stack-color-combos.svg)
+![Color combinations for the three sides of a graphic stack](./stack-color-combos.svg)
 
 ## Background colors
 
@@ -50,13 +50,13 @@ Business and general audiences have different needs, and our color usage should
 
 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.
 
-![](./b2b-balance.svg)
+![Examples of restrained color balance for Stack Overflow Business](./b2b-balance.svg)
 
 ## 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.
 
-![](./b2c-balance.svg)
+![Examples of color balance for Stack Overflow Public Platforms](./b2c-balance.svg)
 
 ## Label color guidance
 
@@ -72,7 +72,7 @@ Color also comes through in our highlighted headlines. The guidance below shows
 
 ## Things to avoid
 
-![](./avoid.svg)
+![Examples of brand color combinations and treatments to avoid](./avoid.svg)
 
 ## Accessibility
 

@@ -53,27 +53,27 @@ We have two approaches to sub-brand lockups. The approach you use should be dete
 
 Use the diagram below to determine how sub-brand lockups, used at a large scale, should be created.
 
-![](./sub-brand-large.svg)
+![Diagram showing how to construct a large-scale sub-brand lockup](./sub-brand-large.svg)
 
 ### Sub-brand small usage
 
 Use the diagram below to determine how sub-brand lockups, used at a large scale, should be created.
 
-![](./sub-brand-small.svg)
+![Diagram showing how to construct a small-scale sub-brand lockup](./sub-brand-small.svg)
 
 ### External partnership lockups
 
 External partnerships use a simpler lockup, where the height of both logos should always align.
 
-![](./external-partnership-lockup.svg)
+![External partnership lockup with both logos aligned to the same height](./external-partnership-lockup.svg)
 
 ### Things to avoid
 
-![](./things-to-avoid.svg)
+![Examples of incorrect Stack Overflow logo use to avoid](./things-to-avoid.svg)
 
 ## Symbol
 
-![](./symbol.svg)
+![Stack Overflow symbol](./symbol.svg)
 
 ### Symbol lockup
 

@@ -15,62 +15,62 @@ In our design system we use three distinct types of graphics: functional graphic
 
 <Grid>
   <GridColumn padding={false}>
-    <iframe class="w100 d-block" style="aspect-ratio: 4/5" src="https://fast.wistia.net/embed/iframe/de2xda6479?seo=false&videoFoam=true&doNotTrack=true&seo=false&videoFoam=false&fitStrategy=cover&autoPlay=true&muted=true&controlsVisibleOnLoad=false&playbar=false&volumeControl=false&fullscreenButton=false&silentAutoPlay=true&settingsControl=false&plugin[captions-v1]=false&smallPlayButton=false&endVideoBehavior=loop" frameborder="0" scrolling="no" allow="autoplay" loading="lazy"/>
+    <iframe title="Stack system blocks animation" class="w100 d-block" style="aspect-ratio: 4/5" src="https://fast.wistia.net/embed/iframe/de2xda6479?seo=false&videoFoam=true&doNotTrack=true&seo=false&videoFoam=false&fitStrategy=cover&autoPlay=true&muted=true&controlsVisibleOnLoad=false&playbar=false&volumeControl=false&fullscreenButton=false&silentAutoPlay=true&settingsControl=false&plugin[captions-v1]=false&smallPlayButton=false&endVideoBehavior=loop" frameborder="0" scrolling="no" allow="autoplay" loading="lazy"/>
   </GridColumn>
   <GridColumn padding={false}>
-    <iframe class="w100 d-block" style="aspect-ratio: 4/5" src="https://fast.wistia.net/embed/iframe/5o0obv9du8?seo=false&videoFoam=true&doNotTrack=true&seo=false&videoFoam=false&fitStrategy=cover&autoPlay=true&muted=true&controlsVisibleOnLoad=false&playbar=false&volumeControl=false&fullscreenButton=false&silentAutoPlay=true&settingsControl=false&plugin[captions-v1]=false&smallPlayButton=false&endVideoBehavior=loop" frameborder="0" scrolling="no" allow="autoplay" loading="lazy"/>
+    <iframe title="Stack system layers animation" class="w100 d-block" style="aspect-ratio: 4/5" src="https://fast.wistia.net/embed/iframe/5o0obv9du8?seo=false&videoFoam=true&doNotTrack=true&seo=false&videoFoam=false&fitStrategy=cover&autoPlay=true&muted=true&controlsVisibleOnLoad=false&playbar=false&volumeControl=false&fullscreenButton=false&silentAutoPlay=true&settingsControl=false&plugin[captions-v1]=false&smallPlayButton=false&endVideoBehavior=loop" frameborder="0" scrolling="no" allow="autoplay" loading="lazy"/>
   </GridColumn>
   <GridColumn padding={false}>
-    <iframe class="w100 d-block" style="aspect-ratio: 4/5" src="https://fast.wistia.net/embed/iframe/ry87k0q79g?seo=false&videoFoam=true&doNotTrack=true&seo=false&videoFoam=false&fitStrategy=cover&autoPlay=true&muted=true&controlsVisibleOnLoad=false&playbar=false&volumeControl=false&fullscreenButton=false&silentAutoPlay=true&settingsControl=false&plugin[captions-v1]=false&smallPlayButton=false&endVideoBehavior=loop" frameborder="0" scrolling="no" allow="autoplay" loading="lazy"/>
+    <iframe title="Stack system stacks animation" class="w100 d-block" style="aspect-ratio: 4/5" src="https://fast.wistia.net/embed/iframe/ry87k0q79g?seo=false&videoFoam=true&doNotTrack=true&seo=false&videoFoam=false&fitStrategy=cover&autoPlay=true&muted=true&controlsVisibleOnLoad=false&playbar=false&volumeControl=false&fullscreenButton=false&silentAutoPlay=true&settingsControl=false&plugin[captions-v1]=false&smallPlayButton=false&endVideoBehavior=loop" frameborder="0" scrolling="no" allow="autoplay" loading="lazy"/>
   </GridColumn>
 </Grid>
 
 ## 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.
 
-![](./stacks-2d.svg)
+![Examples of the brand's flat 2D stack graphic style](./stacks-2d.svg)
 
 ## 2D stacks in use
 
-![](./stacks-2d-in-use.svg)
+![Examples of 2D stack graphics used in layouts](./stacks-2d-in-use.svg)
 
 ## 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.
 
-![](./stacks-containers.svg)
+![Examples of expressive container graphics for organizing layout content](./stacks-containers.svg)
 
 ### 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.
 
-![](./stacks-container-ex1.svg)
+![Example 1 of type, color, and 3D graphics combined in an expressive container layout](./stacks-container-ex1.svg)
 
-![](./stacks-container-ex2.svg)
+![Example 2 of type, color, and 3D graphics combined in an expressive container layout](./stacks-container-ex2.svg)
 
 ### In use
 
 The stacking motif not only shapes our marketing materials but also guides the way we design certain product features and micro-interactions.
 
-![](./stacks-container-in-use.svg)
+![Examples of the stacking motif used in product features and micro-interactions](./stacks-container-in-use.svg)
 
 ## 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.
 
-![](./stacks-3d.svg)
+![Examples of colorful 3D stack shapes used as expressive brand graphics](./stacks-3d.svg)
 
 ### 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://trace.stackoverflow.design/). There is also tooling to batch create shapes from predefined shapes, perspectives and color palettes in the [GitHub repo](https://github.com/StackExchange/StackTrace).
 
-[![](./stacks-3d-tool.png)](https://trace.stackoverflow.design/)
+[![Open Stack Trace, the tool for generating 3D stack shapes](./stacks-3d-tool.png)](https://trace.stackoverflow.design/)
 
 ### In use
 
-![](./stacks-3d-in-use.svg)
+![Examples of 3D stack shapes used in brand compositions](./stacks-3d-in-use.svg)
 
 ### Things to avoid
 
-![](./stacks-3d-avoid.svg)
+![Examples of 3D stack graphic treatments to avoid](./stacks-3d-avoid.svg)
@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import { SvelteSet } from 'svelte/reactivity';
+  import { getCharacterLabel } from '$lib/characterLabel';
 
   import Grid from '$components/Grid.svelte';
   import GridColumn from '$components/GridColumn.svelte';
@@ -24,6 +25,7 @@
   let loading = $state(true);
   let switching = $state(false);
   let selectedGlyph = $state(null);
+  let selectedCode = $state(null);
   let showPoints = $state(false);
   let showMetrics = $state(true);
 
@@ -120,7 +122,7 @@
     if (!glyph) return;
 
     selectedGlyph = glyph;
-    _glyphIndex = glyph.index;
+    selectedCode = char.codePointAt(0);
   }
 
   function formatUnicode(unicode) {
@@ -255,7 +257,9 @@
           {#each availableChars as { char, code } (code)}
             <button
               class="char-cell h:bg-black-200 fc-black"
-              class:is-selected={selectedGlyph?.unicode === code}
+              class:is-selected={selectedCode === code}
+              aria-label={getCharacterLabel(char, code)}
+              aria-pressed={selectedCode === code}
               onclick={() => selectGlyphByChar(char)}
               style="font-family: 'Stack Sans Headline', sans-serif; font-weight: {selectedWeight.weight};"
             >

@@ -33,19 +33,19 @@ Our primary typeface is called **Stack Sans**. Crafted uniquely for Stack Overfl
 <Grid>
   <GridColumn extraClasses="bg-brand-yellow d:fc-white lh-md">
 
-    ![](./typography-sample-x-cap.svg)
+    ![Stack Sans sample showing x-height, cap height, and ascender height](./typography-sample-x-cap.svg)
     Distinct x, cap and ascender heights used for character distinction. High x-height for increased legibility.
 
   </GridColumn>
   <GridColumn extraClasses="bg-brand-purple d:fc-white lh-md">
 
-    ![](./typography-sample-spacing.svg)
+    ![Stack Sans sample demonstrating even letter spacing](./typography-sample-spacing.svg)
     Even spacing ensures consistent rhythm, aiding word recognition and improving accessibility.
 
   </GridColumn>
   <GridColumn extraClasses="bg-brand-pink d:fc-white lh-md">
 
-    ![](./typography-sample-lowercase.svg)
+    ![Stack Sans lowercase letterforms with distinct shapes for legibility](./typography-sample-lowercase.svg)
     Distinct forms for lowercase letters, to increase legibility at smaller scales.
 
   </GridColumn>
@@ -62,7 +62,7 @@ Our full glyph set contains 509 characters and supports 464 languages. Every let
 
 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.
 
-![](./typography-stylistic-sets.svg)
+![Comparison of the standard and notched Stack Sans stylistic sets](./typography-stylistic-sets.svg)
 
 ## Choosing the correct stylistic set
 
@@ -88,48 +88,48 @@ Consistent margins ensure consistent layouts across the brand. To calculate the
 
 ### Things to avoid
 
-![](./typography-avoid.svg)
+![Examples of typographic treatments to avoid](./typography-avoid.svg)
 
 ## 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.
 
-![](./typography-highlight-headline.svg)
+![Examples of left-aligned headlines with monotone and duotone highlights](./typography-highlight-headline.svg)
 
 ### 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.
 
-![](./typography-monotone-highlight.svg)
+![Diagram showing line height and margins for constructing a monotone headline highlight](./typography-monotone-highlight.svg)
 
 ### 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.
 
-![](./typography-duotone-highlight.svg)
+![Diagram showing how a headline is segmented to construct a duotone highlight](./typography-duotone-highlight.svg)
 
 ### Things to avoid
 
-![](./typography-duotone-highlight-avoid.svg)
+![Examples of duotone headline highlight treatments to avoid](./typography-duotone-highlight-avoid.svg)
 
 ## 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.
 
-![](./typography-stack-type.svg)
+![Examples of headlines integrated with 3D stacks using construction and obstruction](./typography-stack-type.svg)
 
 ### 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.
 
-![](./typography-skew.svg)
+![Diagram showing 3D type construction with a 22-degree skew](./typography-skew.svg)
 
 ### 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.
 
-![](./typography-and-illustration.svg)
+![Example of 3D artwork layered in front of, between, and behind headline letters](./typography-and-illustration.svg)
 
 ### Things to avoid
 
-![](./typography-stack-avoid.svg)
+![Examples of 3D stack and typography treatments to avoid](./typography-stack-avoid.svg)
@@ -48,8 +48,10 @@ Contrast is the difference in luminance or color between any two elements. All v
     <h4 class="d-flex ai-center g8 fc-red-500 mb16"><Icon src={IconCrossFillCircle} /> Don't</h4>
     <p class="mb16">Use low luminance contrast that fails our standards.</p>
     <div class="d-flex ai-center g8 fw-wrap">
-      <button class="s-btn s-btn__filled bg-theme-secondary-200">Button</button>
-      <div class="bar-pill ta-center px8 py2 bg-green-400 fc-green-300">Robotics</div>
+      <!-- These two elements intentionally fail contrast to demonstrate what not to do.
+           The automated scanner skips only contrast checks on the marked elements. -->
+      <button data-a11y-intentional-contrast="true" class="s-btn s-btn__filled bg-theme-secondary-200">Button</button>
+      <div data-a11y-intentional-contrast="true" class="bar-pill ta-center px8 py2 bg-green-400 fc-green-300">Robotics</div>
     </div>
   </GridColumn>
   <GridColumn extraClasses="bg-green-100">
@@ -176,17 +178,17 @@ When the padding amount is not sufficient enough to support a double ring on the
     </div>
   </div>
   <div class="ta-center">
-    <input class="s-toggle-switch" type="checkbox" role="presentation" />
+    <input class="s-toggle-switch" type="checkbox" aria-labelledby="toggle-default-caption" />
     <div class="ps-relative mt16">
       <div class="ps-absolute bc-black-200 bs1 bt bbw2 h0 l50 ml-neg4 w8"></div>
-      <p class="fs-caption fc-black-500 mt16 mx-auto">Toggle default</p>
+      <p id="toggle-default-caption" class="fs-caption fc-black-500 mt16 mx-auto">Toggle default</p>
     </div>
   </div>
   <div class="ta-center">
-    <input class="s-toggle-switch focus" type="checkbox" role="presentation" />
+    <input class="s-toggle-switch focus" type="checkbox" aria-labelledby="toggle-focused-caption" />
     <div class="ps-relative mt16">
       <div class="ps-absolute bc-black-200 bs1 bt bbw2 h0 l50 ml-neg4 w8"></div>
-      <p class="fs-caption fc-black-500 mt16 mx-auto">Toggle focused</p>
+      <p id="toggle-focused-caption" class="fs-caption fc-black-500 mt16 mx-auto">Toggle focused</p>
     </div>
   </div>
 </div>

@@ -29,7 +29,7 @@ import "@stackoverflow/stacks-editor/styles.css";
 new StacksEditor(
     document.querySelector("#editor-container"),
     "*Hello* World!",
-    {}
+    { elementAttributes: { "aria-label": "Editor content" } }
 );
 ```
 
@@ -51,7 +51,7 @@ new StacksEditor(
     new window.stacksEditor.StacksEditor(
         document.querySelector("#editor-container"),
         "*Hello* World!",
-        {}
+        { elementAttributes: { "aria-label": "Editor content" } }
     );
 </script>
 ```
@@ -70,13 +70,13 @@ There are several options you can pass to the Stacks Editor.
     new window.stacksEditor.StacksEditor(
         document.querySelector("#editor-example-1"),
         "",
-        {}
+        { elementAttributes: { "aria-label": "Empty editor example" } }
     );
 </script>
 ```
 
 <Example>
-    <StacksEditorDemo />
+    <StacksEditorDemo options={{ elementAttributes: { "aria-label": "Empty editor example" } }} />
 </Example>
 
 ### Textarea content with tables enabled
@@ -88,15 +88,18 @@ There are several options you can pass to the Stacks Editor.
     new window.stacksEditor.StacksEditor(
         document.querySelector("#editor-example-2"),
         document.querySelector("#editor-content-2").value,
-        { parserFeatures: { tables: true } }
+        {
+            parserFeatures: { tables: true },
+            elementAttributes: { "aria-label": "Editor example with tables" }
+        }
     );
 </script>
 ```
 
 <Example>
     <StacksEditorDemo
         content={editorExampleContent}
-        options={{ parserFeatures: { tables: true } }}
+        options={{ parserFeatures: { tables: true }, elementAttributes: { "aria-label": "Editor example with tables" } }}
         class="hmn6"
     />
 </Example>