Basecamp DESIGN.md

Project management and team communication platform with a warm, opinionated aesthetic — cream and forest green surfaces, readable typography, and task-list-first UI.

1. Visual Theme & Atmosphere

Basecamp has an aesthetic unlike any other project tool — warm, calm, and almost nostalgic in its simplicity. Cream off-white backgrounds, a forest green brand, and a rejection of the anxiety-inducing complexity of newer tools. Everything is a list or a message board. The design is intentionally un-flashy: wide readable text, comfortable spacing, and a confidence that less really is more.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Calibre', 'Helvetica Neue', Arial, sans-serif;
--font-serif: 'Sentinel', 'Georgia', serif;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-md: 18px;
--font-size-lg: 22px;
--font-size-xl: 28px;
--font-size-2xl: 36px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.3;
--line-height-base: 1.65;
--line-height-reading: 1.8;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #1D7544;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 11px 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.button-primary:hover { background: #145C34; }

/* To-do Item */
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #EDE8DC;
}
.todo-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #C0B8A8;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, background 0.12s;
}
.todo-checkbox:hover { border-color: #1D7544; }
.todo-checkbox--checked {
  background: #1D7544;
  border-color: #1D7544;
  color: #FFFFFF;
}
.todo-text {
  font-size: 16px;
  color: #1A1A18;
  line-height: 1.5;
  flex: 1;
}
.todo-text--done {
  text-decoration: line-through;
  color: #9C9080;
}

/* Message Board Post */
.message-post {
  background: #FFFFFF;
  border: 1px solid #E0D8C8;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.message-post__title {
  font-size: 20px;
  font-weight: 700;
  color: #1A1A18;
  margin-bottom: 8px;
}
.message-post__meta {
  font-size: 13px;
  color: #9C9080;
  margin-bottom: 16px;
}
.message-post__body {
  font-size: 16px;
  line-height: 1.65;
  color: #5C5648;
}

/* Project Card */
.project-card {
  background: #FFFFFF;
  border: 1px solid #E0D8C8;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.project-card:hover {
  border-color: #1D7544;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.project-card__name {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A18;
}
.project-card__desc {
  font-size: 14px;
  color: #9C9080;
  margin-top: 4px;
}

5. Layout Principles

6. Depth & Elevation

css.shadow-card { box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.shadow-hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.shadow-modal { box-shadow: 0 16px 48px rgba(0,0,0,0.10); }

7. Do's and Don'ts

Do:

• Use circular checkboxes for to-do items — they're more inviting than squares
• Keep message bodies wide and readable at 720px max
• The warm cream background is non-negotiable — it's core to the Basecamp feel
• Show completed todos with strikethrough text in muted color

Don't:

• Don't add complex kanban views or timelines — Basecamp is list-first
• Don't use cold blue or aggressive modern palettes — this is a warm brand
• Don't add unnecessary notification badges or urgency indicators
• Don't exceed 2 heading levels in a message post body

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Basecamp — project management and team communication.
Use a warm cream background (#FFFCF5) — never pure white.
Forest green (#1D7544) is the only accent: CTAs, checkmarks, active links.
To-do items use circular checkboxes that fill green when complete; text gets strikethrough.
Message board posts are white cards with warm borders and generous line height (1.65).
Typography is large and readable: 16px body, 28px headings, no tight leading.
Tone is warm, calm, opinionated, and anti-complexity.