***Refer to latest design improvements***

I've broken down ToC into two parts: Global and in-context.

When I write in-context, I mean the ToC that is directly related to the content that a user is interacting with. In this mock-up, we're using the "Color" content as an example.

Global ToC include links important to the Wiki. In this case, it's the Living Style Guide.

Below is an example of the full ToC of the Living Style Guide.

*Links in caps and bold are not clickable links

---

MEDIAWIKI STYLE GUIDE----------------------------------

Introduction

STYLE-----------------------------------------------------------

Typography

Colors

• Palette
• Themes

Voice and Tone

• Style

UI ELEMENTS--------------------------------------------------

Buttons

• Button Styles
• Sets of buttons
• Button groups
• Loading and progress states in buttons

Inputs

• Basic input
• Multi-line input
• Surface (Visual Editor)
• Input indicators

---

If a user is reading the page “Colors,” in-context ToC will include:

Typography (for ease of going to prev page)

Colors

• Palette
• Themes

Voice and Tone (for ease of going to next page)

---

If a user clicks on the icon on top left corner, global ToC will include:

MEDIAWIKI STYLE GUIDE----------------------------------

1. Introduction

STYLE-----------------------------------------------------------

1. Typography
2. Colors
3. Voice and Tone

UI ELEMENTS--------------------------------------------------------------

1. Buttons
2. Inputs

Any future important links within the LSG can be linked from here also.