# Stacks

> Stacks provides everything you need to quickly design, build, and ship coherent experiences across all of Stack Overflow—from the brand and product itself, down to how we send emails and write copy.

## Brand

- [Logo](https://stackoverflow.design/brand/logo/)
- [Color](https://stackoverflow.design/brand/color/)
- [Typography](https://stackoverflow.design/brand/typography/)
- [Stack System](https://stackoverflow.design/brand/stack-system/)
- [Motion](https://stackoverflow.design/brand/motion)

## Copywriting

- [Tone of voice](https://stackoverflow.design/copy/voice)
- [Naming](https://stackoverflow.design/copy/naming)
- [Style guide](https://stackoverflow.design/copy/styleguide)
- [Error & success messages](https://stackoverflow.design/copy/patterns/messages): Guidelines for writing clear, helpful error and success messages that guide users effectively.
- [Settings & preferences](https://stackoverflow.design/copy/patterns/settings): Guidelines for writing clear, user-friendly labels and descriptions for settings and preferences.

## Develop

- [Using Stacks](https://stackoverflow.design/system/develop/using-stacks): A short guide to Stacks, a robust CSS & JavaScript Pattern library for rapidly building Stack Overflow.
- [Building Stacks](https://stackoverflow.design/system/develop/building): 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.
- [Conditional classes](https://stackoverflow.design/system/develop/conditional-classes): 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 ✓.
- [JavaScript](https://stackoverflow.design/system/develop/javascript): This is an introduction to the JavaScript functionality provided by Stacks.

## Accessibility

- [Best practices](https://stackoverflow.design/system/accessibility/intro): A non-comprehensive guide to accessibility best practices when using Stacks.
- [Alt text](https://stackoverflow.design/system/accessibility/alt): Everything we know about alt-texts, when to use them, and how to craft them.

## Foundation

- [Color fundamentals](https://stackoverflow.design/system/foundation/color-fundamentals): Color is used distinguish our brand, convey meaning, and invoke emotions. A color palette ensures a familiar and consistent experience across our products.
- [Color palette](https://stackoverflow.design/system/foundation/colors): To avoid specifying color values by hand, we've included a robust set of color variables. For maintainability, please use these instead of hardcoding color values.
- [Theming](https://stackoverflow.design/system/foundation/theming): Stacks provides a robust theming API to handle theming in various contexts.
- [Typography](https://stackoverflow.design/system/foundation/typography): Stacks provides atomic classes to override default styling of typography. Change typographic weights, styles, and alignment with these atomic styles.

## Base

- [Backgrounds](https://stackoverflow.design/system/base/backgrounds/): Atomic classes for controlling the background properties of an element.
- [Borders](https://stackoverflow.design/system/base/borders): Stacks provides atomic classes for borders.
- [Border radius](https://stackoverflow.design/system/base/border-radius): Stacks provides atomic classes for border radius.
- [Box shadow](https://stackoverflow.design/system/base/box-shadow): Box shadow atomic classes allow you to change an element's box shadow quickly.
- [Box sizing](https://stackoverflow.design/system/base/box-sizing): Box-sizing atomic classes allow one to determine what is used to determine an element's width or height.
- [Current color](https://stackoverflow.design/system/base/current-color): Atomic classes allow you to quickly add currentColor to an element's fill or stroke property.
- [Cursors](https://stackoverflow.design/system/base/cursors): Atomic cursor classes allow you to quickly change an element's cursor behavior.
- [Display](https://stackoverflow.design/system/base/display): Display atomic classes allow you to change an element's display quickly.
- [Flex](https://stackoverflow.design/system/base/flex): 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.
- [Floats](https://stackoverflow.design/system/base/floats): 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.
- [Gap](https://stackoverflow.design/system/base/gap): Atomic CSS gap classes allow you to set spacing on the direct children of elements with flexbox and grid layouts.
- [Grid](https://stackoverflow.design/system/base/grid): Atomic CSS grid classes allow you to quickly add native css grids to your container.
- [Height](https://stackoverflow.design/system/base/height): Stacks provides atomic sizing classes for heights using pixel, rem, and percentage values. Most height classes are based on a 16px base font size and will scale based on the browser's font size.
- [Interactivity](https://stackoverflow.design/system/base/interactivity): Atomic interactivity classes allow you to quickly change an element's interactivity.
- [Lists](https://stackoverflow.design/system/base/lists): Stacks provides a few atomic classes to help style lists.
- [Margin](https://stackoverflow.design/system/base/margin): Stacks provides atomic classes to override margin.
- [Object fit](https://stackoverflow.design/system/base/object-fit): Atomic classes that control the sizing of an img or video relative to its container.
- [Opacity](https://stackoverflow.design/system/base/opacity): Atomic opacity classes allow you to change an element's opacity quickly.
- [Outline](https://stackoverflow.design/system/base/outline): Atomic outline classes allow you to quickly change an element's outline styling.
- [Overflow](https://stackoverflow.design/system/base/overflow): Atomic overflow classes allow you to change an element's overflow properties quickly.
- [Padding](https://stackoverflow.design/system/base/padding): Stacks provides atomic classes to override padding.
- [Positioning](https://stackoverflow.design/system/base/position): Atomic positioning classes allow you to quickly change an element's position.
- [Transitions](https://stackoverflow.design/system/base/transitions): Atomic transition classes allow you to quickly apply transitions properties to an element. You can modify an element's transition duration, property, or delay.
- [Truncation](https://stackoverflow.design/system/base/truncation): Stacks provides utility classes for various types of truncation.
- [Vertical alignment](https://stackoverflow.design/system/base/vertical-alignment): Atomic vertical alignment classes allow you to change an element's vertical alignment quickly.
- [Visibility](https://stackoverflow.design/system/base/visibility): Atomic visibility classes allow you to quickly change an element's visibility.
- [Width](https://stackoverflow.design/system/base/width): Stacks provides atomic sizing classes for widths using pixel, rem, and percentage values. Most width classes are based on a 16px base font size and will scale based on the browser's font size.
- [Z-index](https://stackoverflow.design/system/base/z-index): Atomic z-index classes allow you to change an element's z-index quickly.

## Forms

- [Checkbox](https://stackoverflow.design/system/forms/checkbox): Checkable inputs that visually allow for multiple options or true/false values.
- [Inputs](https://stackoverflow.design/system/forms/inputs): Input elements are used to gather information from users.
- [Labels](https://stackoverflow.design/system/forms/labels): Labels are used to describe inputs, select menus, textareas, radio buttons, and checkboxes.
- [Radio](https://stackoverflow.design/system/forms/radio): Checkable inputs that visually allow for single selection from multiple options.
- [Select](https://stackoverflow.design/system/forms/select): A selectable menu list from which a user can make a single selection. Typically they are used when there are more than four possible options. The custom select menu styling is achieved by wrapping the select tag within the .s-select class.
- [Textarea](https://stackoverflow.design/system/forms/textarea): Multi-line inputs used by users to enter longer text portions.

## Components

- [Activity indicator](https://stackoverflow.design/system/components/activity-indicator): Stacks provides a small jewel for indicating new activity.
- [Avatars](https://stackoverflow.design/system/components/avatars): Avatars are used to quickly identify users or teams.
- [Badges](https://stackoverflow.design/system/components/badges): Badges are labels used for flags, earned achievements, and number totals.
- [Banners](https://stackoverflow.design/system/components/banners): Banners are full-width notices used for system and engagement messaging. They are highly intrusive and should be used only when essential information needs to be conveyed to the user.
- [Bling](https://stackoverflow.design/system/components/bling): Bling is used to indicate award type in badges and user cards.
- [Breadcrumbs](https://stackoverflow.design/system/components/breadcrumbs)
- [Button Groups](https://stackoverflow.design/system/components/button-groups)
- [Buttons](https://stackoverflow.design/system/components/buttons): 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.
- [Cards](https://stackoverflow.design/system/components/cards)
- [Code blocks](https://stackoverflow.design/system/components/code-blocks): Stacks provides styling for code blocks with syntax highlighting provided by highlight.js. Special care was taken to make sure our light and dark themes felt like Stack Overflow while maintaining near AAA color contrasts and still being distinguishable for those with a color vision deficiency.
- [Editor](https://stackoverflow.design/system/components/editor/): The Stacks editor adds "what you see is what you get" and Markdown capabilities to textareas. It is available as a separate Editor repository, but requires Stacks' CSS for styling.
- [Empty states](https://stackoverflow.design/system/components/empty-states): Empty states are used when there is no data to show. Ideally they orient the user by providing feedback based on the the user's last interaction or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action.
- [Expandable](https://stackoverflow.design/system/components/expandable)
- [Link Previews](https://stackoverflow.design/system/components/link-previews)
- [Links](https://stackoverflow.design/system/components/links): Links are lightly styled via the a element by default. In addition, we provide .s-link and its variations. In rare situations, .s-link can be applied to a button while maintaining the look of an anchor.
- [Loader](https://stackoverflow.design/system/components/loader): The loader component indicates an active wait state for a page, section, or interactive element.
- [Menus](https://stackoverflow.design/system/components/menus): A menu offers a contextual list of actions or functions.
- [Modals](https://stackoverflow.design/system/components/modals): Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.
- [Navigation](https://stackoverflow.design/system/components/navigation): Our navigation component is a collection of buttons that respond gracefully to various window sizes and parent containers.
- [Notices](https://stackoverflow.design/system/components/notices): Notices deliver System and Engagement messaging, informing the user about product or account statuses and related actions.
- [Page Titles](https://stackoverflow.design/system/components/page-titles)
- [Pagination](https://stackoverflow.design/system/components/pagination): Pagination splits content into pages, as seen on questions, tags, users, and jobs listings.
- [Popovers](https://stackoverflow.design/system/components/popovers): Popovers are small content containers that provide a contextual overlay. They can be used as in-context feature explanations, dropdowns, or tooltips.
- [Post summary](https://stackoverflow.design/system/components/post-summary): The post summary component summarizes various content and associated meta data into a highly configurable component.
- [Progress Bars](https://stackoverflow.design/system/components/progress-bars)
- [Prose](https://stackoverflow.design/system/components/prose): The prose component provides proper styling for rendered Markdown.
- [Sidebar widgets](https://stackoverflow.design/system/components/sidebar-widgets): Sidebar widgets are flexible containers that provide a lot of patterns that are helpful in a variety of sidebar uses.
- [Tables](https://stackoverflow.design/system/components/tables): Tables are used to list all information from a data set. The base style establishes preferred padding, font-size, and font-weight treatments. To enhance or customize the look of the table, apply any additional classes listed below.
- [Tags](https://stackoverflow.design/system/components/tags): Tags are an interactive, community-generated keyword that allow communities to label, organize, and discover related content. Tags are maintained by their respective communities.
- [Toggle switch](https://stackoverflow.design/system/components/toggle-switch): A toggle is used to quickly switch between two or more possible states. They are most commonly used for simple "on/off" switches.
- [Topbar](https://stackoverflow.design/system/components/topbar)
- [Uploader](https://stackoverflow.design/system/components/uploader)
- [User cards](https://stackoverflow.design/system/components/user-cards): User cards are a combination of a user and metadata about the user or post
- [Vote](https://stackoverflow.design/system/components/vote): The vote component allows users to vote on the quality of content by casting an upvote or downvote.

## Resources

- [Fonts](https://stackoverflow.design/resources/fonts)