# Campsite · Design system migration spec

> Source: https://www.campsite.design  ·  Curated by OpenDesign  ·  en

> The site exemplifies a modern, restrained SaaS landing page design, using typography and whitespace as primary design tools.

## 1. Identity DNA

Campsite treats team communication like a quiet, well-organized library for team posts. Every design decision serves the core purpose of creating focused, thoughtful spaces where remote teams can exchange ideas without the noise of perpetual pings.

**One-liner:** A focused team communication tool that replaces noisy chats with organized posts.
**Keywords:** thoughtful · focused · team communication
**Analogy:** A quiet, well-organized library for team posts.

## 2. Color

The color system operates on a principle of high-contrast minimalism. Crisp white surfaces provide a clean foundation, while deep ink anchors text for maximum readability, with a single vibrant orange-red reserved for key actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f5f5f5` | card background |
| `--bg-quiet` | `#f0f0f0` | quiet area |
| `--ink` | `#171717` | body text |
| `--ink-soft` | `#737373` | secondary text |
| `--muted` | `#a3a3a3` | placeholder |
| `--accent` | `#fb432c` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast minimalism: crisp white surfaces anchored by deep ink, with a vibrant orange-red accent for key actions.

The palette enforces clarity by limiting decorative color, ensuring the interface remains a calm backdrop for content.

## 3. Typography

Typography is the primary voice of the system, using a clean, functional humanist sans-serif. Rules like negative letter-spacing on display text and clear weight distinctions create a hierarchy that guides the eye from hero headlines down through body copy.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1.8px | Hero headlines |
| h2 | 32px | 1.2 | 600 | -0.5px | Section headers |
| body | 16px | 1.5 | 400 | 0px | General body text |
| small | 14px | 1.4 | 400 | 0px | Secondary text |

**Type rules:**
- Negative letter-spacing on large display text
- Regular weight for body copy
- Semi-bold for section headings

## 4. Spacing

A consistent 4px base grid establishes the fundamental rhythm of the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid

## 5. Surfaces

Surfaces are defined by depth and separation rather than decoration. Cards and containers use very subtle, low-opacity shadows and 1px borders to create a light, layered effect on the bright white ground.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 3px 6px -3px rgba(0, 0, 0, 0.05)
  - 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
  - 0px 1px 0px -1px rgba(0, 0, 0, 0.05)
- **Borders:** 1px solid rgba(0, 0, 0, 0.1)

## 6. Layout

The layout skeleton is a standard, centered marketing structure. Content is given generous whitespace, creating a clear visual hierarchy and allowing elements to breathe within the grid.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard marketing site layout with centered content and generous whitespace.

## 7. Motion & Interaction

Motion is minimal and strictly functional. Transitions are fast (100-200ms) and low-opacity, used only to provide subtle feedback on interactions like hover states or clicks, not for embellishment.

- **Durations:** micro 100ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions on hover
  - Subtle box-shadow shifts on interaction

- **Hover:** Subtle color or background shifts.
- **Click:** Immediate visual feedback.
- **Transition:** Fast 0.1s cubic-bezier for UI elements.
- **Keyboard:** Standard focus outlines (not clearly visible in static screenshots).

## 8. Voice & Don'ts

The editorial voice is professional yet approachable, favoring concise, benefit-oriented headlines and simple, action-oriented CTAs. It deliberately avoids jargon and aggressive marketing language, mirroring the system's visual restraint.

- **Tone:** Professional yet approachable.
- **Headline style:** Concise, direct, and benefit-oriented.
- **CTA style:** Simple, action-oriented text inside rounded buttons.
- **Avoid:** Jargon-heavy language / Overly loud or aggressive marketing copy / Visual clutter

### Don'ts
- ❌ Don't use deep or dark mode backgrounds — screenshot shows bright white surfaces (#ffffff).
- ❌ Don't use sharp, unrounded corners — screenshot shows pill shapes (9999px) and rounded cards (8px–12px).
- ❌ Don't use loud, complex gradients — screenshot shows a clean, flat background with a singular orange accent.
- ❌ Don't use overly decorative or script fonts — screenshot shows a clean, functional sans-serif.
- ❌ Don't crowd elements together — screenshot shows generous whitespace (base 4px grid).
- ❌ Don't use harsh drop shadows — screenshot shows very subtle, low-opacity box shadows.

What Campsite deliberately does not do is crowd the interface, use decorative flourishes, or embrace visual complexity, committing fully to its principle of focused calm.

## System Prompt (paste into AI tool)

```
Campsite is a focused team communication tool for remote teams. Its design DNA is built on a clean, high-contrast minimalist aesthetic: crisp white (#ffffff) surfaces, deep ink (#171717) for text, and a vibrant orange-red accent (#fb432c) for primary actions. Typography uses a humanist sans-serif category with negative letter-spacing on large display text. Critical design constraints: do not use dark mode or complex gradients, do not use sharp corners (always use rounded pills or soft radiuses), and do not crowd the layout (maintain generous whitespace).
```