Stacks (Stack Overflow Design System)

# Stacks (Stack Overflow Design System) — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Stack Overflow. "Stacks (Stack Overflow Design System)" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Stacks (Stack Overflow Design System)
**Owner:** Stack Overflow
**Official documentation:** https://stackoverflow.design/
**Visual character:** Q&A utilitarianism: 15px system text for reading answers, one flagrant orange, and atomic classes named with programmer bluntness.

---

## Summary

Stack Overflow's open-source design system documenting the patterns behind Stack Overflow and Teams.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| SO Orange | `#f48024` | `--theme-primary-color` | Brand and primary CTAs |
| Blue / Links | `#0074cc` | `--blue-600` | Links and secondary actions |
| Text | `#232629` | `--black-800` | Primary text |
| Secondary Text | `#6a737c` | `--black-500` | Secondary text |
| White | `#ffffff` | `--white` | Surfaces |
| Black 025 | `#f8f9f9` | `--black-025` | Subtle background |
| Black 100 Border | `#d6d9dc` | `--black-100` | Borders |
| Danger Red | `#d0393e` | `--red-500` | Errors and downvotes |
| Success Green | `#48a868` | `--green-500` | Success and accepted answers |

## Typography

- **Body:** System stack — weights 400, 600, 700 — `-apple-system, BlinkMacSystemFont, 'Segoe UI Adjusted', 'Segoe UI', 'Liberation Sans', sans-serif`
- **Mono:** Consolas stack — weights 400 — `ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Liberation Mono', Menlo, Monaco, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| fs-headline1 | `27px` | `32px` |
| fs-title | `19px` | `23px` |
| fs-subheading | `17px` | `21px` |
| fs-body2 (default) | `15px` | `20px` |
| fs-caption | `12px` | `16px` |

## Spacing

Base unit: `4px (su-static)`

Scale: `2px` · `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `3px` |
| large | `5px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| bs-sm | `0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.05)` |

## Quick start (CSS)

```css
/* Stacks (Stack Overflow Design System) — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://stackoverflow.design/ */

:root {
  /* Color */
  --theme-primary-color: #f48024; /* Brand and primary CTAs */
  --blue-600: #0074cc; /* Links and secondary actions */
  --black-800: #232629; /* Primary text */
  --black-500: #6a737c; /* Secondary text */
  --white: #ffffff; /* Surfaces */
  --black-025: #f8f9f9; /* Subtle background */
  --black-100: #d6d9dc; /* Borders */
  --red-500: #d0393e; /* Errors and downvotes */
  --green-500: #48a868; /* Success and accepted answers */

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI Adjusted', 'Segoe UI', 'Liberation Sans', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Liberation Mono', Menlo, Monaco, Consolas, monospace;

  /* Type scale */
  --text-fs-headline1: 27px /* line-height 32px */;
  --text-fs-title: 19px /* line-height 23px */;
  --text-fs-subheading: 17px /* line-height 21px */;
  --text-fs-body2-default-: 15px /* line-height 20px */;
  --text-fs-caption: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Radius */
  --radius-default: 3px;
  --radius-large: 5px;

  /* Elevation */
  --shadow-bs-sm: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.05);
}
```

## Engineering profile

- **Ships for:** CSS-only
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Stacks (Stack Overflow Design System) by Stack Overflow — Stack Overflow's open-source design system documenting the patterns behind Stack Overflow and Teams. Character: Q&A utilitarianism: 15px system text for reading answers, one flagrant orange, and atomic classes named with programmer bluntness. Use a primary colour near #f48024, the typeface "System stack" (or a close equivalent), corner radius around 3px, a spacing rhythm on a 4px (su-static) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Stacks (Stack Overflow Design System) documentation](https://stackoverflow.design/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/stackoverflow-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._