+
{% for card in home.cards %}
-
- {% spot card.spot, "native h96 w96 sm:d-none" %}
-
-
{{ card.title }}
- {{ card.description }}
-
+
+ {{ card.title }}{% if card.url contains '://' %}{% icon "ArrowUpRightBox", "float-right" %}{% endif %}
+ {{ card.description }}
+ {% spot card.spot, "native h128 w128 sm:d-none mt-auto" %}
{% endfor %}
diff --git a/packages/stacks-docs/assets/img/favicons/apple-touch-icon.png b/packages/stacks-docs/assets/img/favicons/apple-touch-icon.png
index b3a0b01fb3..32a6b44869 100644
Binary files a/packages/stacks-docs/assets/img/favicons/apple-touch-icon.png and b/packages/stacks-docs/assets/img/favicons/apple-touch-icon.png differ
diff --git a/packages/stacks-docs/assets/img/favicons/apple-touch-icon@2x.png b/packages/stacks-docs/assets/img/favicons/apple-touch-icon@2x.png
deleted file mode 100644
index c226627863..0000000000
Binary files a/packages/stacks-docs/assets/img/favicons/apple-touch-icon@2x.png and /dev/null differ
diff --git a/packages/stacks-docs/assets/img/favicons/favicon.ico b/packages/stacks-docs/assets/img/favicons/favicon.ico
index f776d9391e..c9a42700a6 100644
Binary files a/packages/stacks-docs/assets/img/favicons/favicon.ico and b/packages/stacks-docs/assets/img/favicons/favicon.ico differ
diff --git a/packages/stacks-docs/assets/img/favicons/favicon.svg b/packages/stacks-docs/assets/img/favicons/favicon.svg
new file mode 100644
index 0000000000..a8df5173fa
--- /dev/null
+++ b/packages/stacks-docs/assets/img/favicons/favicon.svg
@@ -0,0 +1 @@
+Product section for colors when building with Stacks. While there is some cross-over with the Product colors, using Stacks color classes will mean they adjust depending on context (e.g., dark mode).
----
-
- {% assign rowClasses = "bt bc-black-150 py8 d-flex jc-space-between" %}
- {% assign btnClasses = "js-clipboard s-link ff-mono" %}
- {% header "h2", "Primary" %}
-
-
-
-
-
Orange
-
- Hex
- #F48024
-
-
- Pantone
- Orange 021 U
-
-
- Stacks
- orange-400
-
-
-
-
-
-
-
Black
-
- Hex
- #242729
-
-
- Pantone
- Black 6 U
-
-
- Stacks
- black-600
-
-
-
-
-
-
-
Gray
-
- Hex
- #BBC0C4
-
-
- Pantone
- 442 U
-
-
- Stacks
- black-300
-
-
-
-
-
-
- {% header "h2", "Secondary" %}
-
-
-
-
-
Blue
-
- Hex
- #0095FF
-
-
- Pantone
- 2995 U
-
-
- Stacks
- blue-400
-
-
-
-
-
-
-
Yellow
-
- Hex
- #FFB500
-
-
- Pantone
- 109 U
-
-
- Stacks
- n/a
-
-
-
-
-
-
- {% header "h2", "Verticals" %}
-
-
-
-
-
Teams Purple
-
- Hex
- #2B2D6E
-
-
- Pantone
- 2105 U
-
-
- Stacks
- n/a
-
-
-
-
-
-
-
Advertising Blue
-
- Hex
- #075EC3
-
-
- Pantone
- 2935 U
-
-
- Stacks
- n/a
-
-
-
-
-
-
-
-
-
-
- {% icon "Checkmark", "mt2 fc-green-400" %}
-
- Copied to clipboard!
-
-
-
- {% header "h2", "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, we will use the term score .
-
- Use of the term votes to refer to the post’s score is only acceptable in cases where we need to present the data in the format
- {ScoreValue} votes (as is done in the post summary component ). In this case, "votes"
- stands in for the "balance of votes (up minus down)" on the post.
-
- Upvote and downvote (one word, no hyphen) should be used when referring to the individual types of votes cast on a post.While the unit for score is obstensibly "points", use of this unit in reference to score or votes is not encouraged.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Incorrect
- {% icon "Checkmark", "mtn1 mbn1" %} Correct
-
-
-
- Highest voted posts
- Highest scored posts
-
-
- Total number of votes for this answer
- Total score for this answer
-
-
- Only top voted answers are eligible
- Only top scored answers are eligible
-
-
- When in the Post Summary only:
-
-
- 8 score
- 8 votes
-
-
- Score: 8
-
-
- 8 points
-
-
-
-
diff --git a/packages/stacks-docs/brand/copywriting/naming.html b/packages/stacks-docs/brand/copywriting/naming.html
deleted file mode 100644
index ac03d2c7bf..0000000000
--- a/packages/stacks-docs/brand/copywriting/naming.html
+++ /dev/null
@@ -1,284 +0,0 @@
----
-layout: page
-title: Naming guidelines
-description: Quick guidelines for using Stack Overflow and our product names.
----
-
-
- {% header "h2", "Stack Overflow" %}
-
-
- {% icon "Clear", "mtn1 mbn1" %} Incorrect
- {% icon "Checkmark", "mtn1 mbn1" %} Correct
-
-
-
- Stackoverflow
- Stack Overflow
-
-
- stackoverflow
-
-
- StackOverflow
-
-
-
-
- {% header "h2", "Stack Overflow for Teams" %}
-
-
- {% icon "Clear", "mtn1 mbn1" %} Incorrect
- {% icon "Checkmark", "mtn1 mbn1" %} Correct
-
-
-
- Stack Overflow Teams
- Stack Overflow for Teams
-
-
- Teams
-
-
- Stack Overflow for Business
-
-
- Stack Overflow for Enterprise
-
-
-
-
- {% header "h3", "Specific plans" %}
-
- {% header "h4", "Do" %}
-
-
- Use “Free, Basic, Business, Enterprise” once you’re talking about specifics.
- Use ‘Private Q&A’ as a descriptor to refer to our product suite on stackoverflow.com or with an audience that we’re certain is aware of our special sauces – our Q&A format.
- Once discussing in-depth, use the terms: Stack Overflow for Teams , Stack Overflow Business , Stack Overflow Enterprise . Note: we won’t reference the base tier as Stack Overflow Basic .
-
-
- {% header "h4", "Don’t" %}
-
-
- Don’t use “for” when referencing each tier. It is simply Free , Basic , Business , and Enterprise
- Don’t append Free , Basic , Business , or Enterprise to the end of Stack Overflow for Teams
- Don’t use ‘Private Q&A’ when referring to our product suite for marketing and promotional efforts outside of our core stackoverflow.com audience.
-
-
- {% header "h3", "Knowledge Reuse" %}
-
- “Knowledge reuse” is a term we use frequently in reference to Stack Overflow for Teams as something it facilitates. It can be lowercase the majority of the time, except when referring to our {% icon "Lock", "va-middle", "14" %} proprietary metric , in which case use “Knowledge Reuse”.
-
- {% header "h4", "Examples" %}
-
-
- “Unlike simply sharing information, knowledge reuse takes collaboration a step further by creating a system where ideas are shared, quickly accessed, improved upon, and then put back into the system.”
- “We have calculated your Knowledge Reuse metric as…”
-
-
- {% header "h3", "Communities & Community" %}
-
- “Communities” and “Community” are capitalized when referring to the Stack Overflow for Teams feature.
-
- {% header "h4", "Examples" %}
-
-
- With Communities you can help your teammates know what’s trending, who’s sharing knowledge, and where there’s opportunity to contribute or learn around specific areas of interest.
- Subscribe to a Community and get notifications for new questions and answers.
-
-
- {% header "h2", "Collectives on Stack Overflow" %}
-
- {% header "h3", "Trade Mark" %}
-
-
- We have trademarked “Collectives™ on Stack Overflow”.
- Apply the trademark ™ symbol to the first instance of “Collectives™ on Stack Overflow” in a document, communication, or marketing materials/assets.
- If there is a headline/title slide, use the symbol in the first instance of the product name in the body copy of your document, in addition to using the ™ in the headline/title .
- Where possible, use the unicode character for trade mark:
-
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- <sup>TM</sup>™
-
- TM
-
-
-
- {% header "h3", "…on Stack Overflow" %}
-
-
- Use … “on Stack Overflow” sparingly.
- Don’t use “…on Stack Overflow” unless there’s a lack of surrounding context and we need the audience to know it’s associated with Stack Overflow.
- Adding “…on Stack Overflow” doesn’t add clarity in the context of other Stack Overflow products and features.
-
-
-
-
- {% icon "Checkmark", "mtn1 mbn1" %} When to use “on Stack Overflow”
-
-
-
- You’re writing “Collectives™ on Stack Overflow” for the first time on a page
-
-
- When it should be differentiated from other external products or features
-
-
- When it needs to be associated with Stack Overflow
-
-
-
-
- {% header "h3", "Collectives vs. collectives" %}
-
- When do you capitalize the C in “Collective(s)”?
-
-
- Always capitalize “Collectives” and “Collective” when you are using them as proper nouns.
- If you’re just generally referring to a collective, even if it comes right after a company name, it will always be lowercase.
-
- We can see in Audiobubble’s collective that there are…
- Google Cloud has a collective for its biggest advocates…
-
-
- Even if you’re putting “Join a collective” on a button or in a headline, it will be lowercase unless it is directly following the name of a company.
-
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- join the Google Cloud collective
- join the Google Cloud Collective
-
-
- join an Collective
- join a collective
-
-
- A company’s Collective page will be located at the top right of the screen
- A company’s collective page will be located at the top right of the screen
-
-
-
-
- {% header "h2", "Capitalization" %}
-
- {% header "h3", "Headers, subheaders, and tabs" %}
-
-
- Do follow the capitalization rules for headers, sub-headers, and menu tabs.
- Use sentence case for all headings (Sentence case involves capitalizing the first word, first word of a subtitle, and all proper nouns.)
- Capitalize the first word of a heading
- Capitalize proper or trademarked nouns (names of products, people, or specific companies)
- Lowercase for everything else
-
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- User Roles
- User roles
-
-
-
-
- {% header "h3", "Product and feature names" %}
-
-
- If a product or feature isn’t unique to Stack Overflow, don’t capitalize it (blogs, pages, etc.) If it is unique to Stack Overflow as its own product, do capitalize it.
-
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- As soon as it’s ready, put your Blog Post up
- As soon as it’s ready, put your blog post up
-
-
- content health
- Content Health
-
-
-
-
- {% header "h4", "Articles vs. articles" %}
-
-
- This can be confusing, because we have a feature called “Articles,” under which you may write a how-to guide, or an announcement, or indeed, an article. So this one depends on the context.
- If you’re referring to a generic article, it’s lowercase.
- When in doubt, ask, “Is this referring to the specific website section (Articles), or to the thing (articles)?”
- If you’re talking about the Articles section of your collective on Stack Overflow, you’ll call it “Articles.”
-
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- I’m writing an article and then I’m going to put it in our team’s articles section
- 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
- In Articles , you can find how-to guides, blog posts, and articles
-
-
- Create articles
- Create Articles
-
-
- Pinned articles
- Pinned Articles
-
-
-
-
- {% header "h4", "User roles" %}
-
-
- Capitalize user roles, no matter where they are and in what context.
-
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- employees
- Employees
-
-
- Recommended members
- Recommended Members
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/stacks-docs/brand/data-visualization.html b/packages/stacks-docs/brand/data-visualization.html
deleted file mode 100644
index ff46ed3d21..0000000000
--- a/packages/stacks-docs/brand/data-visualization.html
+++ /dev/null
@@ -1,269 +0,0 @@
----
-layout: page
-title: Data visualization
-description: Tell a story with data visualizations. Use this section for guidance and examples.
----
-
-
- {% header "h2", "Guidelines" %}
- Why use data visualization? Charts, graphs, and visuals draw attention to the data. While raw data can be hard to understand, data visualization presents a compelling story that answers a specific question and can inspire action. When presenting data through visualizations, keep the following principles in mind:
-
- {% header "h3", "Focus" %}
- Designs should immediately draw the viewer’s eye to the most important information. That’s why the most important data should have the highest contrast. As you design, consider how much attention the data warrants—is it the main focus or just a supporting asset?
-
- {% header "h3", "Explicit" %}
- Designs should be easy to understand and accessible to all. Always use real data that’s represented accurately. Consider what range your data set has and how it will scale with more or fewer data points.
-
- {% header "h3", "Purpose" %}
- Don’t add extraneous data or ornamentation. Answer a single question with clear and accurate information. What’s the story you’re trying to tell?
-
-
-
- {% header "h2", "Chart types" %}
- There are many types of charts and graphs, so when you’re designing one, think first about its function. For example: are you comparing something? Or are you highlighting a trend over a long period of time? Below, we’ve grouped several types of charts according to their recommended functions (You’ll see some types in multiple groups). Before you start designing, determine what you’d like to communicate to your audience, and use that to guide you in selecting the appropriate chart or graph type.
-
- {% header "h3", "Comparison" %}
- This is the most common type of chart. Compare two or more values within two different parameters as the framework. This chart type helps to show differences/similarities between items and give context to the impact of those differences/similarities.
-
-
-
- {% header "h3", "Part-to-a-whole" %}
- Uses size or area to show how some group, entity, or amount breaks down into individual pieces that each represent a proportion of the whole. The data represented in these types of charts aren’t just about how things are divided, it’s about how they’re divided in relation to their whole and to each other. Each part (segment) of the chart represents data points that contribute to the whole and amount to 100% in total. This type makes it easier to identify equal or obviously different values.
-
-
-
-
-
-
-
Stacked area graph (100%)
-
-
-
-
Stacked bar graph (100%)
-
-
-
Shows relationships and connections between the data or shows correlations between two or more variables. Often used as the first step toward the detection of cause-effect relationships. Use this type of chart to check whether there is any relationship between two variables and also to notice anomalies or clusters in the data.
-
-
-
- {% header "h3", "Trend over time" %}
- Analyze data over a time period as a way to identify trends or changes in values. Viewing data over time helps to understand performance, particularly when paired with an established target or goal. Use this type of chart to better understand how something is currently performing and to track any changes over time.
-
-
-
-
-
- {% header "h2", "Color palette and usage" %}
- What colors to use and when? Consider the following when choosing the primary color of your data visualization and in what order to add more colors:
-
- {% header "h3", "Blue" %}
- Useful for denoting neutral related metrics.
-
-
-
- #004487
- blue-600
-
-
- #0077cc
- blue-500
-
-
- #379fef
- blue-400
-
-
- #0095ff
- blue-400
-
-
- #cfeafe
- blue-300
-
-
- #f2f9ff
- blue-200
-
-
- {% icon "Share", "mr2" %}
- Open in Google Sheets
- {% endcomment %}
-
- {% header "h3", "Green" %}
- Useful for denoting positive related metrics.
-
-
-
- #1e472c
- color-900
-
-
- #29603b
- color-800
-
-
- #2f6f44
- color-700
-
-
- #48a868
- color-500
-
-
- #a6d9b7
- color-200
-
-
- #eef8f1
- color-025
-
-
Using for denoting negative metrics.
-
-
-
- #7a1819
- red-600
-
-
- #ac2726
- red-500
-
-
- #d1383d
- red-400
-
-
- #de535e
- red-400
-
-
- #f4b4bb
- red-300
-
-
- #fdf3f4
- red-200
-
-
Useful for denoting unrelated metrics.
-
-
-
- #27348b
-
-
- #f2720c
- orange-400
-
-
- #48a868
- green-400
-
-
- #379fef
- blue-400
-
-
- #f7cc46
-
-
- #fee3cf
- orange-300
-
-
-
-
- {% header "h2", "Accessibility" %}
- It’s important to remember that you know more about the data than the target audience and that others may have a different set of constraints than you do. Make sure your data visualization is making the data clear and accessible to all by:
-
- Having sufficient contrast with the background for any objects using colour (ex: dots, bars, lines, etc.).
- Color must not be the only means of conveying information (consider adding labels).
- Avoid overwhelming the user with too much information
-
-
-
-
- {% header "h2", "Sources, resources & inspiration" %}
- Here are some links to help you learn more about data visualization.
-
-
-
diff --git a/packages/stacks-docs/brand/logo.html b/packages/stacks-docs/brand/logo.html
deleted file mode 100644
index b4bb57c177..0000000000
--- a/packages/stacks-docs/brand/logo.html
+++ /dev/null
@@ -1,245 +0,0 @@
----
-layout: page
-title: Logo
-description: Guidelines and resources for using our logos. Use of our logos requires our prior written permission and your compliance with the Guidelines for the Use of the Stack Overflow Trademarks .
----
-
- {% header "h2", "Stack Overflow" %}
-
- Generally logo breakdowns can get a little silly, but in practicality, our logo’s spacing is based on the following dimensions and angles.
-
-
- Our logo is broken down into two components, the glyph and its wordmark. These are often separated when displaying the full logo wouldn’t be appropriate. Examples of this include favicons, or logged-in headers. These are accessible in various pixel-locked sizes within our icons set and are available as @Svg.LogoGlyph and @Svg.LogoWordmark.
-
-
-
-
- {% header "h3", "Color alternatives" %}
-
-
- {% embed "LogoMd", "native wmx100" %}
-
-
- {% embed "LogoMd", "native wmx100" %}
-
-
-
- {% embed "LogoMd", "wmx100" %}
-
-
- {% embed "LogoMd", "wmx100" %}
-
-
-
-
-
-
-
- {% header "h2", "Products" %}
-
- If you need to use one of these in product, you can find them in the icon set .
-
-
- {% header "h3", "Stack Overflow for Teams" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% header "h2", "Stack Overflow Meta" %}
-
-
-
- {% header "h2", "Stack Exchange" %}
-
diff --git a/packages/stacks-docs/brand/principles.html b/packages/stacks-docs/brand/principles.html
deleted file mode 100644
index 926970c1b9..0000000000
--- a/packages/stacks-docs/brand/principles.html
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: page
-title: Brand principles
-description: Whether it’s in an internal project, a product feature, or an external marketing campaign, the following design principles guide the Stack Overflow brand direction. These principles represent the approach and opinion all things Stack Overflow should have.
----
-
- {% header "h3", "Focused" %}
- Designs should focus the person on what’s important at hand. Designs should focus on the central goal, pushing distractions and interruptions to the side until the stated goal is completed.
-
- {% header "h3", "Welcoming" %}
- Our designs shouldn’t feel “members only”, but inviting and approachable. Designs should be intentional and intuitive, not be some secret codex for users to decipher. While the subjects developers talk about may seem impersonal, our design approach shouldn’t be.
-
- {% header "h3", "Purposeful" %}
- Everything in its right place. Our designs might be packed with information, but everything should be purposeful. Don’t add extraneous data or ornamentation as it might distract people from the central goal at hand.
-
- {% header "h3", "Five percent fun" %}
- We’re quirky, not corny. We enjoy the long joke. Our humor is dry and pops up in unexpected, but appropriate, places. We’re “business in front, party in the back.”
-
diff --git a/packages/stacks-docs/brand/typography.html b/packages/stacks-docs/brand/typography.html
deleted file mode 100644
index e085a46c1d..0000000000
--- a/packages/stacks-docs/brand/typography.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-layout: page
-title: Typography
-description: In our Marketing material we use two fonts, here is some simple usage guidence.
----
-
- {% header "h2", "Examples" %}
- Some examples of common patterns. Sizing in these examples is based on the Product standards . In other mediums you can just use the relative sizes.
-
- The non-Stacks p-* classes will only work on some Stack Overflow owned sites.
-
- {% header "h3", "Hero headline & paragraph" %}
-
-{% highlight html %}
-
- Knowledge sharing and collaboration without distractions
-
-
- Stack Overflow for Teams is a knowledge management & collaboration solution that technologists already trust.
-
-{% endhighlight %}
-
-
- Knowledge sharing and collaboration without distractions
-
-
- Stack Overflow for Teams is a knowledge management & collaboration solution that technologists already trust.
-
-
-
-{% highlight html %}
-
- Improves other tools
-
-
- Streamline workflows across the entire organization
-
-{% endhighlight %}
-
-
- Improves other tools
-
-
- Streamline workflows across the entire organization
-
-
-
-{% highlight html %}
-
- Improves other tools
-
-
- Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.
-
-{% endhighlight %}
-
-
- Software engineers
-
-
- Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.
-
-
-
-{% highlight html %}
-
- 82%
-
-
- of developers visit us at least once per week
-
-{% endhighlight %}
-
-
- 82%
-
-
- of developers visit us at least once per week
-
-
-
-{% highlight html %}
-
- 5,000+
-
-
- Stack Overflow for Teams instances active every day
-
-{% endhighlight %}
-
-
- 5,000+
-
-
- Stack Overflow for Teams instances active every day
-
-
-
\ No newline at end of file
diff --git a/packages/stacks-docs/content/examples/alt-text.html b/packages/stacks-docs/content/examples/alt-text.html
deleted file mode 100644
index 9bc7959047..0000000000
--- a/packages/stacks-docs/content/examples/alt-text.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-layout: page
-title: Alt-text
-description: Everything we know about alt-texts, when to use them, and how to craft them. For a helpful decision tree on how and when to write alt-text, check out the W3C’s alt-text decision tree .
----
-
- {% header "h2", "How to write alt-text" %}
-
- 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.
-
- {% header "h3", "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.
-
-
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “People using computers.”
- “Man and woman using laptops at a standing table, Illustration.”
-
-
- “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 computers, illustrated by Jane Doe © 2019.”
-
-
-
-
- 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.
-
- {% header "h3", "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.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “Image of a rocket.”
- “A rocket.”
-
-
- “Illustration of a rocket.”
-
-
- Photo of a rocket.”
-
-
- “Icon of a rocket.”
- “A rocket, icon.”
-
-
-
- {% header "h3", "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.
-
-
-
- {% header "h2", "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.
-
- {% header "h3", "Decorative images" %}
-
- If an image does not convey any meaning to the user, leave the alt-text blank.
-
-
-{% highlight html %}
-
-
-
…
-
…
-
-{% endhighlight %}
-
-
-
-
-
-
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.
-
- {% header "h3", "Images accompanied by text" %}
-
- If an image has a label nearby, leave the alt-text blank.
-
-
-{% highlight html %}
-
-
-
…
-
…
-
-{% endhighlight %}
-
-
-
-
-
-
-
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.
-
- {% tip %}
- 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”).
- {% endtip %}
-
-
- {% header "h2", "How to add alt-text" %}
- {% header "h3", "Using <img>" %}
-
- Inside an <img> tag, add the alt-text inside the alt attribute:
-
-
-{% highlight html %}
-
-
-{% endhighlight %}
-
- Inline SVG doesn’t support the alt attribute, so instead add two wai-aria attributes: role="img" and aria-label="The alt-text.":
-
-
-{% highlight html %}
-…
-{% endhighlight %}
-
-
-This content was adapted from Axess Lab .
diff --git a/packages/stacks-docs/content/examples/error-messages.html b/packages/stacks-docs/content/examples/error-messages.html
deleted file mode 100644
index 94600fe847..0000000000
--- a/packages/stacks-docs/content/examples/error-messages.html
+++ /dev/null
@@ -1,208 +0,0 @@
----
-layout: page
-title: Error messages
-description: 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.
----
-
- {% header "h2", "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?
-
-
-
- {% header "h2", "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:
-
-
-
-
-
This SVG file is invalid.
-
[The error]
-
-
-
- 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]
-
-
-
- {% header "h2", "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.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “Can’t create ‘Engineering’ because a team with that name already exists. Specify a different name.”
- “‘Engineering’ already exists. Try another team name.”
-
-
- “Your notification failed and needs to be re-authorized.”
- “Notification failed, please re-authorize it .”
-
-
-
-
-
- {% header "h2", "Consider etiquette" %}
- {% header "h3", "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:
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “Your changes couldn’t be saved.”
- “We couldn’t save your changes.”
-
-
-
- {% header "h3", "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:
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “You’ve missed your name.”
- “Please enter your name.”
-
-
- “You can’t leave this blank.”
- “Please enter a team name.”
-
-
-
-
- A passive voice can work for more serious user errors, such as “This card was declined”.
-
-
-
- {% header "h2", "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.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “The password entered does not match our records. Please re-enter your password.”
- “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.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “Whoops! Looks like your card was declined. Better ask Mom for another one.”
- “This card was declined. Try another payment method.”
-
-
-
-
-
- {% header "h2", "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.
-
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
-
- Can’t display metrics
- You need to restart your data sync.
-
- OK
- Cancel
-
-
-
- Can’t display metrics
- You need to restart your data sync.
-
- OK, restart sync
- Cancel
-
-
-
-
-
-
-
- {% header "h2", "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 styles are best for displaying errors in UI with form fields .Inline notifications are best for displaying errors in UI without form fields . They should be located within close proximity of items that affect a feature.Modals are best when you want to ensure you capture someone’s focus .
-
- Toast notifications 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.
-
-
diff --git a/packages/stacks-docs/content/examples/preferences-settings.html b/packages/stacks-docs/content/examples/preferences-settings.html
deleted file mode 100644
index dad88d7b89..0000000000
--- a/packages/stacks-docs/content/examples/preferences-settings.html
+++ /dev/null
@@ -1,294 +0,0 @@
----
-layout: page
-title: Preferences and settings
-description:
----
-
- {% header "h2", "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.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
-
-
-
-
Disable sticky header
-
-
-
-
-
Enable sticky header
-
-
-
-
-
-
-
Disable left navigation
-
-
-
-
-
Enable left navigation
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disallow advertising
-
-
-
-
-
-
-
-
-
-
Hide your real name
-
-
-
-
-
Show your real name
-
-
-
-
-
-
- {% header "h2", "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 a valid input
-
- Avoid using tooltips.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
-
-
-
-
- Site name
-
-
-
-
-
-
-
-
-
- Site name
- Describes the site in the product, emails, integrations, and logs.
-
-
-
-
-
-
-
-
-
-
-
- App descriptor
-
- {% icon "Help" %}
-
-
-
-
-
-
-
-
- App descriptor
- This is automatically generated. You only need to manually set this if you’re reinstalling the app.
-
-
-
-
-
-
-
-
-
-
-
- Industries
-
-
-
-
-
-
-
-
-
- Industries
- Add up to 4.
-
-
-
-
-
-
-
-
-
-
- {% header "h2", "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.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
-
-
-
-
- Single sign-on Service Url
-
-
-
-
-
-
-
-
-
- Single sign-on Service Url
- Must be https
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Role
- Add up to 2 roles
-
-
-
-
-
-
-
-
-
diff --git a/packages/stacks-docs/content/examples/success-messages.html b/packages/stacks-docs/content/examples/success-messages.html
deleted file mode 100644
index 5b04b808c7..0000000000
--- a/packages/stacks-docs/content/examples/success-messages.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-layout: page
-title: Success messages
-description: 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.
----
-
- {% header "h2", "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?
-
-
-
- {% header "h2", "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.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “Successfully saved.”
- “Your account details have been saved.”
-
-
- “Upgrade complete.”
- “You’ve upgraded to the Business tier of Teams.”
-
-
-
-
-
- {% header "h2", "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.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “Thanks for updating your email.”
- “Your email has been updated.”
-
-
- “Account created.”
- “Thanks for signing up. Your account has been created.”
-
-
-
-
-
- {% header "h2", "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.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
-
- “We’ve saved your profile changes.”
- OK
-
-
- “We’ve saved your profile changes.”
- View profile
-
-
-
-
- “Your payment is complete.”
- OK
-
-
- “Your payment is complete.”
- View receipt
-
-
-
-
-
- {% header "h2", "Design, placement, and timing" %}
-
- Inline validation styles are best for displaying success in UI with form fields .Toasts 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 are best when you want to ensure you capture someone’s focus for a decision.
-
diff --git a/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html b/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html
deleted file mode 100644
index 8e1da6790c..0000000000
--- a/packages/stacks-docs/content/guidelines/grammar-and-mechanics.html
+++ /dev/null
@@ -1,631 +0,0 @@
----
-layout: page
-title: Grammar and mechanics
-description: A guide to help anyone who writes, edits, or translates public-facing text for Stack Overflow.
----
-
- {% header "h2", "Basics" %}
- {% header "h3", "Use active tense (most of the time)" %}
- You should almost always write in the active voice, particularly if the user needs to do something.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “You should update your profile”
- “Update your profile”
-
-
-
- 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. You can also use the passive voice to avoid referring to yourself or Stack Overflow.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “We cancelled your order.”
- “Your order has been cancelled.”
-
-
- “We’ve suspended your account.”
- “Your account has been suspended.”
-
-
-
-
- {% header "h3", "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.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “This’ll help you get answers to your questions.”
- “It’s designed to help you get answers to your questions.”
-
-
- “There must’ve been an error with your order.”
- “There’s an error with your order.”
-
-
-
-
- {% header "h3", "Use sentence casing" %}
- Use sentence casing for all headings and calls-to-action. Proper or trademarked nouns (e.g. countries, product names) should be capitalized. If a feature or product is unique to Stack Overflow, capitalize it (Stack Overflow for Teams, Stack Overflow Jobs).
-
- {% header "h4", "Headings" %}
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Performance Overview
- Performance overview
-
-
- Edit Your Profile
- Edit your profile
-
-
-
-
- {% header "h4", "Buttons and links" %}
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Post Job
- Post job
-
-
- flag comment
- Flag comment
-
-
- cancel
- Cancel
-
-
-
-
- {% header "h4", "Feature or product names" %}
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Job Alerts
- job alerts
-
-
- Blog
- blog
-
-
- Profile
- profile
-
-
- Stack Overflow talent
- Stack Overflow Talent
-
-
- stack exchange
- Stack Exchange
-
-
-
-
- {% header "h3", "Use American spelling and standards" %}
- Use American spelling for all public-facing content. When in doubt, check the Merriam-Webster dictionary for the preferred spelling of specific terms.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Recognise
- Recognize
-
-
- Travelled
- Traveled
-
-
- Colour
- Color
-
-
- 9 April 2019
- April 9, 2019
-
-
-
-
- {% header "h3", "OK" %}
- Let’s use the abbreviated version of “OK”. This is preferred to “Okay” and its variants. “OK” should be fully capitalized in every context. Tonally, it may be appropriate to use “OK” in an actionable button —if it isn’t used alone.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Okay
- OK
-
-
- okay
-
-
- Ok
-
-
-
-
- {% header "h3", "Pronouns" %}
- We think it’s most clear to leave off any possessives when referring to users or features. However, if you must, refer to users as “you.” Don’t put words in their mouths with phrases that use “I” or “my.”
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- My Teams
- Teams
-
-
- My settings
- Settings
-
-
- Change my email 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.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Stack Overflow is here to help. They’ll make changes soon.
- Stack Overflow is here to help. We’ll make changes soon.
-
-
-
- Use “their” as a singular, gender-neutral pronoun when the gender of the subject is unknown or unimportant. Avoid using gendered terms.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- When a new user is added, he or she will be able to edit content.
- When a new user is added, they’ll be able to edit content.
-
-
- We appreciate the guys and gals of Stack Overflow.
- We appreciate the Stack Overflow community.
-
-
-
-
- {% header "h3", "Mind your verbs and nouns" %}
- Take extra care when using “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,” “sign up.”
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Login to ask a question
- Log in to ask a question
-
-
- Add a log in to your account
- Add a login to your account
-
-
- Signup to ask a question
- Sign up to ask a question
-
-
- Complete email sign up
- Complete email signup
-
-
-
-
-
-
- {% header "h2", "Punctuation" %}
- {% header "h3", "Ampersands" %}
- Don’t use ampersands (&) unless it’s part of a branded term. Spell out the word “and” instead.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Update your email address & password
- Update your email address and password
-
-
- Stack Overflow Q and A
- Stack Overflow Q&A
-
-
-
-
- {% header "h3", "Apostrophes" %}
- Use apostrophes to represent omitted letters or numbers (can’t, you’re, ’90s) and to form possessives.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Admins role
- Admin’s role
-
-
- Moderators’s tasks
- Moderators’ tasks
-
-
-
-
- {% header "h3", "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.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Your job listing was published: On January 15
- Your job listing was published on January 15
-
-
-
-
- {% header "h3", "Ellipses" %}
- The ellipses (…) can be used in place of a missing piece of text (most commonly to show the deletion of words from a quote). Avoid using ellipses in text. It’s appropriate to use an ellipses in input placeholder copy. Use the real single character ellipsis unicode (…) instead of three periods (...).
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Avoid subjective questions… stick to fact-based questions.
- Avoid subjective questions. Stick to fact-based questions.
-
-
- Search...
- Search…
-
-
-
-
- {% header "h3", "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.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Your email settings have been saved!
- You’ve published your first job listing!
-
-
-
-
- {% header "h3", "Hyphens" %}
- 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 in between (–) for a fixed range of numbers. Avoid using them in a sentence. Avoid using em dashes in microcopy.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Start your free 14 day trial.
- Start your free 14-day trial.
-
-
- January 7 – 9
- January 7–9
-
-
- Get started – sign up today.
- Get started. Sign up today.
-
-
-
-
- {% header "h3", "Question marks" %}
- Avoid using question marks wherever possible. Reword into affirmative statements wherever you can. It’s okay to use question marks if you don’t know the result of the question (“Did you forget your email?”).
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Want to learn more?
- Learn more
-
-
-
-
- {% header "h3", "Quotation marks" %}
- Use quotation marks to define words (“Accepted answer”) or to quote text. Always use smart, curly quotes (“), not vertical, straight quotes ("). Single curly quotes (’) can be used when nested within a set of double quotes. Place punctuation marks inside quotation marks.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- "I meet people who use Stack Overflow every single day", said Joel Spolsky.
- “I meet people who use Stack Overflow every single day,” said Joel Spolsky.
-
-
-
-
- {% header "h3", "Commas" %}
- Use the oxford comma in sentences. Don’t use a comma to separate two distinct phrases (comma splicing). Use two sentences instead.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Our community is rooted in kindness, collaboration and mutual respect.
- Our community is rooted in kindness, collaboration, and mutual respect.
-
-
- Thanks for contacting us, we’ll be in touch soon.
- Thank you for contacting us. We’ll be in touch soon.
-
-
-
-
- {% header "h3", "Periods" %}
- Don’t use periods in interface copy unless it’s a full sentence or description.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t use periods in:
- {% icon "Checkmark", "mtn1 mbn1" %} Do use periods in:
-
-
-
- Sentence fragments
- Complete sentences
-
-
- Top-level headings and titles
- Body text, descriptions, and subtitles
-
-
- Buttons
- Help text under text boxes (form fields)
-
-
-
-
- {% header "h3", "Semicolons" %}
- Avoid using semicolons. When connecting two closely related ideas, use a comma or write two sentences.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- We shaved off about five minutes from last year’s survey; the survey should take about 25 minutes to complete.
- We shaved off about five minutes from last year’s survey. The survey should take about 25 minutes to complete.
-
-
-
-
-
-
- {% header "h2", "Date and time" %}
- These conventions apply to all English language sites, and do not include international Stack Overflow sites.
- {% header "h3", "General" %}
- In most cases, use relative dates and times (eg. 3 minutes ago) with the exact date and time in the title attribute (eg. September 2, 2019 at 4:35 pm). When possible, use the longhand time (eg. 7 years ago). If there are space constraints, use the abbreviations below.
-
-
-
- Longhand
- Abbreviation
-
-
-
- 7 years
- 7y
-
-
- 3 months
- 3mo
-
-
- 6 days
- 6d
-
-
- 6 hours
- 6h
-
-
- 5 minutes
- 5min
-
-
- 12 seconds
- 12s
-
-
-
-
- Use exact dates for moderator tools and other cases where the user needs quick access to the exact date and time.
-
- {% header "h3", "Dates" %}
- If you’re using exact dates, use the month’s full name where possible (eg. October). If there are space constraints, use 3-letter abbreviations with the exception of May, (eg. Oct.). Always write out the full year.
- Don’t write dates numerically since differing international standards can lead to confusion (eg. 08-12-19 vs. 12-08-19).
- There is no need to add st , nd , th , or rd to dates.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- September 2, ’19
- September 2, 2019
-
-
- 9-2-19
- Sep. 2, 2019
-
-
- September 2nd
- September 2
-
-
-
-
- {% header "h3", "Time" %}
- If you’re using exact time, use the 12-hour clock, followed by am or pm. Include a space after the last number (eg 1:20 pm)
- Time should be relative to the user’s time zone (not UTC).
- If indicating both the date and time, separate them with the word “at”, rather than with a comma (eg. September 2, 2019 at 4:35 pm) or “@” symbol (eg. September 2, 2019 @ 4:35 pm).
- Include a time zone only if it’s necessary, such as for an event listing (eg. 7 pm Eastern).
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- 15:30
- 3:30 pm
-
-
-
- September 2, 2019 @ 4:35 pm
- September 2, 2019 at 4:35 pm
-
-
-
-
-
-
- {% header "h2", "Components" %}
- {% header "h3", "Buttons and links" %}
- Buttons and links should be clear and predictable. People should be able to anticipate what will happen when they click or tap. Button and link text should be sentence case and action led (starting with a verb). To provide enough context, use a verb+noun format except for common actions like Save or Close.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- New team
- Create new team
-
-
- Settings
- View settings
-
-
-
-
- {% header "h3", "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.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Edit Your Profile.
- Edit profile
-
-
-
-
- {% header "h3", "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.
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
-
- To edit your Team’s tags…
-
- Go to your Team and select “settings”,
- Select “tag settings”
-
-
-
- To edit your Team’s tags:
-
- Go to your Team
- Select “settings”
- Select “tag settings”
-
-
-
-
-
-
-
-
- {% header "h2", "Naming guidelines" %}
- For guidelines on using our product names, see Naming guidelines in our Brand section.
-
-
diff --git a/packages/stacks-docs/content/guidelines/principles.html b/packages/stacks-docs/content/guidelines/principles.html
deleted file mode 100644
index c38930de2f..0000000000
--- a/packages/stacks-docs/content/guidelines/principles.html
+++ /dev/null
@@ -1,173 +0,0 @@
----
-layout: page
-title: Content principles
-description: Principles and tactics for writing at Stack Overflow. These will help produce clear, consistent content for users of different professions, identities, and levels of English fluency.
----
-
- {% header "h2", "7th grade reading level" %}
-
- Write for a 7th grade reading level. Stack Overflow users are busy people with limited time and attention. They’re also located all over the world with different levels of English fluency. You can help everyone follow along by choosing simple, consistent words and phrases, and being careful about jokes and cultural references.
-
- {% header "h3", "Simple words" %}
- If there’s a simpler word to say what you mean, use it. Always choose the short, simple word over the long, complicated one. Don’t complicate your ideas with business or insider jargon. Only use jargon when you have reason to believe it will improve user understanding.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Optimize
- Improve
-
-
- Falsified
- Fake
-
-
- In order to
- To
-
-
- Leverage
- Use
-
-
- Garner
- Get
-
-
- Despite the fact
- Although
-
-
-
- {% header "h3", "Short, simple sentences" %}
- Trim word bloat. Don’t make people read more than they need to.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Questions should be merged when they are 99% identical and it would be beneficial to have all the answers from multiple duplicate questions in one place.
- Merge questions that are almost alike. This option will also merge answer lists.
-
-
- If you need to delete your account, merge accounts, or have an issue that can't be addressed by Meta, please use the form below:
- Questions? Contact us.
-
-
-
- {% header "h3", "Jokes & cultural references" %}
- Be careful with jokes and cultural references. Jokes, idioms, slang, and regional or cultural references don’t always translate well for our global audience. The next time you’re making a reference, ask yourself if there’s a more universal way to make your point.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “It was like trying to take care of your kids while playing WoW at the same time.”
- “It was like trying to rub your stomach and pat your head at the same time.”
-
-
- “This person likes to keep an air of mystery to them.”
- In this situation, humor isn’t appropriate. See more about tone.
-
-
- {% header "h3", "Naming" %}
- Pick names early and implement them consistently. Consistent language reduces the number of things your users have to learn or remember. If multiple names already exist, identify and eliminate them.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Inbox alerts
- Inbox notifications
-
-
- Inbox notifications
-
-
- Inbox messages
-
-
-
- {% header "h3", "Exaggeration" %}
- Avoid exaggerated statements. When possible, back up your claims with facts and data. Be careful with adjectives and modifiers.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Endless possibilities
- Choose from external hosting options or host on stackoverflow.com.
-
-
- Dynamic
-
-
- Innovative
-
-
- Powerful
-
-
- Your privacy is our #1 priority.
- Manage your privacy through simple settings.
-
-
-
-
-
- {% header "h2", "Action-oriented" %}
- Users are trying to get things done. Write and structure your content so that people can easily scan and take the most important actions. Avoid using negative language.
- {% header "h3", "Make it scannable" %}
- Use headings and bullets to make your content easier to scan.
- {% header "h3", "Say it up front" %}
- Think about what people need to know right away, and move that information to the top.
- {% header "h3", "Use active voice" %}
- Use the active voice, particularly in product content. Start every CTA with a strong verb.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Your company can use Stack Overflow to reach the world’s developers. We’re excited to help you start the developer hiring process.
- Reach the world’s developers.Create job listing
-
-
- For 14 days, you can try Teams for free. We make it easy for you to create a team.
- Get started with a 14-day free trial.Create Team
-
-
-
- {% header "h3", "Negative language" %}
- Be careful with negative language. It is usually longer, less friendly, and less active than positive language.
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “It doesn’t work” is not a problem statement.
- Use specific examples in your problem statement.
-
-
- Password cannot be empty.
- Enter your password to continue.
-
-
-
-
-This content was adapted from Nicely Said and the Shopify Content Guide .
diff --git a/packages/stacks-docs/content/guidelines/voice-and-tone.html b/packages/stacks-docs/content/guidelines/voice-and-tone.html
deleted file mode 100644
index c1dae8ad08..0000000000
--- a/packages/stacks-docs/content/guidelines/voice-and-tone.html
+++ /dev/null
@@ -1,133 +0,0 @@
----
-layout: page
-title: Voice and tone
-description: The difference between voice and tone, and how each applies to Stack Overflow.
----
-
- {% header "h2", "Voice" %}
-
- Voice is the company’s public personality. A clear, consistent voice makes all communications sound like they came from the same place.
-
- {% header "h3", "Transparent, not blunt" %}
-
- Be upfront with users, especially if we make a mistake.
- Back up claims with facts and concrete examples.
- Break down complicated situations into steps to help users focus on one thing at at time.
-
- {% header "h3", "Empathetic, not overprotective" %}
-
- Communicate in a way that’s thoughtful toward people’s situations and emotions.
- Offer encouragement and practical advice.
- Help people on their own terms by using words they’ll understand.
-
- {% header "h3", "Confident, not arrogant" %}
-
- Don’t talk down to users.
- Don’t assume users are familiar with Stack Overflow or how it works.
- Help people succeed by speaking plainly at the moments they’re likely to need help.
-
- {% header "h3", "Mission-driven, not political" %}
-
- Be straightforward about our mission to be a welcoming, inclusive community.
- Avoid us vs. them binaries (eg. newbies vs. power users)
-
-
-
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- “Join us in building an expert community of the best developers in the world.”
- “Join us in building a community where all people feel welcome and can participate, regardless of expertise or identity.”
-
-
- “Join us in a movement to diversify the developer community and amplify marginalized voices in technology.”
-
-
- “If you’re new to the site, make it as easy as possible for experienced community members to help you. Remember that they are volunteers.”
- “If you’re here to get help, make it as easy as possible for others to help you. Follow our guidelines and remember that our community is made possible by volunteers.”
-
-
- “If you’re an experienced contributor, be patient and welcoming. New users may have a hard time learning how to participate in our community.”
- “If you’re here to help others, be patient and welcoming. Learning how to participate in our community can be hard. Offer support if you see someone struggling or otherwise in need of help.”
-
-
-
-
-
-
- {% header "h2", "Tone" %}
-
- Tone changes to fit the situation. Help people succeed by showing your empathy and matching your tone with the user’s emotions and situations, especially in times of stress or confusion. Avoid jargon unless it’s absolutely necessary. Let people know how things will benefit them , and what they can do next .
-
- {% header "h3", "Positive" %}
- In positive situations, a user may feel interest, curiosity, and/or delight. You can match those emotions by adopting an encouraging and friendly tone . If you’re writing good news like an announcement or confirmation, it’s ok to be more casual.
-
-
- Context
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- Payment successfully processed
- “We have processed your payment for 65 Candidate Search seats on June 12, 2018. View receipt ”
- “Your payment has been successfully processed. View receipt ”
-
-
- Team has hit 100 answer milestone
- “Your team contributed 100 answers, 90 questions, 354 upvotes, and 19 edits in the last 30 days.”
- “Your team contributed 100 answers last month! Continue growing your team’s knowledge by inviting more team members .”
-
-
-
- {% header "h3", "Neutral" %}
- In neutral situations, the user may feel interest, curiosity, and/or stress. You can match these emotions by adopting a straightforward and helpful tone . If you’re providing instructions, provide enough detail to give the user confidence. Avoid telling the user how they should think or feel.
-
-
- Context
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- User’s bounty has been posted
- “Your bounty has been posted. The bountied question will get a special indicator and appear on the Featured tab for one week. Don’t worry if you don’t get the answer you want – you can always post another bounty.”
- “Your bounty has been posted. You’ll be notified when you receive answers.”
-
-
- First time posting an answer
- “Tags come with advanced features like tag watching, wikis, and synonyms.”
- “Use tags to add as much (or as little) structure as your organization needs.”
-
-
-
- {% header "h3", "Negative" %}
- In negative situations, the user might be feeling confusion, stress, annoyance, and even anger. Match their emotions by adopting a gentle, calm, and serious tone . These are important moments to show readers that you care about their feelings. Write calmly so people can focus on your message. Avoid scary, technical terms and words like “alert,” “immediately,” or “urgent” unless they’re absolutely necessary. Let people know what went wrong, and tell them what they should do next
-
-
- Context
- {% icon "Clear", "mtn1 mbn1" %} Don’t
- {% icon "Checkmark", "mtn1 mbn1" %} Do
-
-
-
- No Candidate Search results
- “0 results.”
- “No candidates matched your search. Try different keywords or adjust your filters.”
-
-
- Account is suspended
- “Due to clear signs of falsified accounts being used to artificially inflate your reputation, your account has been temporarily suspended for 7 days.sockpuppets .”
- “We noticed fraudulent voting activity on this account. This violates our community rules , and the account will be suspended for 7 days. let us know .”
-
-
- Error message
- “It looks like there are incomplete place-holders; please ensure all necessary detail is complete.”
- “Update the placeholder text to continue.”
-
-
-
-
-This content was adapted from Nicely Said and the Shopify Content Guide .
diff --git a/packages/stacks-docs/netlify.toml b/packages/stacks-docs/netlify.toml
index 3021b69f36..a9d74f3e7a 100644
--- a/packages/stacks-docs/netlify.toml
+++ b/packages/stacks-docs/netlify.toml
@@ -34,14 +34,6 @@
from = "/email"
to = "/email/guidelines/getting-started"
-[[redirects]]
- from = "/content"
- to = "/content/guidelines/principles"
-
-[[redirects]]
- from = "/brand"
- to = "/brand/principles"
-
[[redirects]]
from = "/product/guidelines"
to = "/product/develop/using-stacks"
@@ -230,18 +222,6 @@
from = "/product/base/pointer-events"
to = "/product/base/interactivity"
-[[redirects]]
- from = "/content/principles"
- to = "/content/guidelines/principles"
-
-[[redirects]]
- from = "/content/voice-and-tone"
- to = "/content/guidelines/voice-and-tone"
-
-[[redirects]]
- from = "/content/grammar-and-mechanics"
- to = "/content/guidelines/grammar-and-mechanics"
-
[[redirects]]
from = "/assets/img/logo-stacks@2x.png"
to = "/assets/img/logos/so/logo-stacks@2x.png"
@@ -305,3 +285,86 @@
[[redirects]]
from = "/product/base/spacing"
to = "/product/base/margin"
+
+# Brand & content migrated Feb 2026
+# To-do: remove 'alpha' when launched
+
+[[redirects]]
+ from = "/content"
+ to = "https://alpha.stackoverflow.design/copy"
+ status = 302
+
+[[redirects]]
+ from = "/content/guidelines/principles"
+ to = "https://alpha.stackoverflow.design/copy"
+ status = 302
+
+[[redirects]]
+ from = "/content/guidelines/voice-and-tone"
+ to = "https://alpha.stackoverflow.design/copy/voice"
+ status = 302
+
+[[redirects]]
+ from = "/content/guidelines/grammar-and-mechanics/"
+ to = "https://alpha.stackoverflow.design/copy/styleguide#grammar-and-mechanics"
+ status = 302
+
+[[redirects]]
+ from = "/content/examples/alt-text/"
+ to = "https://alpha.stackoverflow.design/system/accessibility/alt"
+ status = 302
+
+[[redirects]]
+ from = "/content/examples/error-messages/"
+ to = "https://alpha.stackoverflow.design/copy/patterns/messages#error-messages"
+ status = 302
+
+[[redirects]]
+ from = "/content/examples/preferences-settings/"
+ to = "https://alpha.stackoverflow.design/copy/patterns/settings"
+ status = 302
+
+[[redirects]]
+ from = "/content/examples/success-messages/"
+ to = "https://alpha.stackoverflow.design/copy/patterns/messages#success-messages"
+ status = 302
+
+[[redirects]]
+ from = "/brand"
+ to = "https://alpha.stackoverflow.design/brand"
+ status = 302
+
+[[redirects]]
+ from = "/brand/colors"
+ to = "https://alpha.stackoverflow.design/brand/color"
+ status = 302
+
+[[redirects]]
+ from = "/brand/copywriting/concepts"
+ to = "https://alpha.stackoverflow.design/copy/styleguide#post-scores"
+ status = 302
+
+[[redirects]]
+ from = "/brand/copywriting/naming"
+ to = "https://alpha.stackoverflow.design/copy/naming"
+ status = 302
+
+[[redirects]]
+ from = "/brand/data-visualization"
+ to = "https://alpha.stackoverflow.design/brand"
+ status = 302
+
+[[redirects]]
+ from = "/brand/logo"
+ to = "https://alpha.stackoverflow.design/brand/logo"
+ status = 302
+
+[[redirects]]
+ from = "/brand/typography"
+ to = "https://alpha.stackoverflow.design/brand/typography"
+ status = 302
+
+[[redirects]]
+ from = "/brand/principles"
+ to = "https://alpha.stackoverflow.design/copy/voice"
+ status = 302
\ No newline at end of file
diff --git a/packages/stacks-docs/plugins/header.js b/packages/stacks-docs/plugins/header.js
index c50828c31f..3377cf6925 100644
--- a/packages/stacks-docs/plugins/header.js
+++ b/packages/stacks-docs/plugins/header.js
@@ -1,12 +1,12 @@
-const { Icons } = require("@stackoverflow/stacks-icons-legacy");
+const { Icons } = require("@stackoverflow/stacks-icons");
+const linkIcon = Icons.IconLink;
module.exports = {
configFunction(eleventyConfig) {
// Header shortcode
eleventyConfig.addLiquidShortcode("header", function(tag, text) {
var slug = text.replace(/\s+/g, '-').toLowerCase();
- var linkIcon = Icons.IconLink;
var baseHeadingClasses = "fl-grow1 mb0 lh-sm";
var headingClasses = "fs-display1 mb8";