37signals design system

---
version: alpha
name: 37signals
description: "Light interface measured from 37signals.com: Lab Grotesque type, vivid orange accents, flat surfaces and square corners."
colors:
  background: "#F87917"
  surface: "#F87917"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#FFFFFF"
  primary: "#F87918"
  on-primary: "#000000"
typography:
  headline-display:
    fontFamily: Lab Grotesque
    fontSize: 34.5px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Lab Grotesque
    fontSize: 22.5px
    fontWeight: 700
    lineHeight: 2
  headline-display-mobile:
    fontFamily: Lab Grotesque
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.01em
rounded:
  none: 0px
spacing:
  md: 11.18px
  lg: 25.8px
components:
  link:
    textColor: "{colors.on-surface-variant}"
---

# 37signals Design System

## Overview

37signals describes itself as: “A catalog of ideas — signals — that drive us.” The interface is light, built on **Vivid Orange (#F87917)** with **Near Black (#000000)** text, and **Vivid Orange (#F87918)** as the main accent.

Type is set in **Lab Grotesque**. Headlines run large with tight negative tracking; body text is compact. The surface language is flat. Corners are square.

Measured from [37signals.com](https://37signals.com/) on October 21, 2026 at 1440×900 and 390×844 from 150 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 5 roles, plus gradient stops #F87917.

- **Vivid Orange (#F87917):** Page background, seen 1 time. Token `background`, CSS `--color-theme-6`.
- **Near Black (#000000):** Primary text and headings. Token `on-surface`.
- **White (#FFFFFF):** Secondary text, seen 14 times. Token `on-surface-variant`, CSS `--color-white`.
- **Vivid Orange (#F87918):** Brand color in logos and imagery, seen 3 times. Token `primary`, CSS `--color-theme-6`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.

## Typography

**Lab Grotesque** carries the whole interface. Fallback stack: `Lab Grotesque, sans-serif`.

- **headline-display:** Lab Grotesque 34.5px at weight 700, line height 1.3, tracking -0.01em (20px on mobile). Page title (h1).
- **headline-lg:** Lab Grotesque 22.5px at weight 700, line height 2. Section headings (h2).

## Layout

Spacing does not follow a strict grid: 0% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** md 11.18px, lg 25.8px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast.

## Shapes

Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #F87917 for the page.
- Do keep text in 2 levels: #000000, #FFFFFF.
- Do use #F87918 as the brand accent: header, logo and key highlights.
- Do set headlines in Lab Grotesque with tight tracking (-0.01em).
- Do reuse the measured spacing steps (11.18px, 25.8px).
- Don't use #FFFFFF for body text; it reaches 2.7:1 on #F87917. Keep it for large text or metadata.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Lab Grotesque.
- Don't use #F87918 for large backgrounds or body text.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.2s.

- **Easing:** `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/37signals.com/), the free DESIGN.md generator.