---
title: "Campsite design system"
variant: extended
source: https://www.campsite.com/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/campsite-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Campsite · Design System

> Quiet, spacious storytelling for focused teamwork

**Theme:** light · **Industry:** productivity · **Source:** https://www.campsite.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A bright, minimal SaaS landing page pairs bold, centered messaging with generous whitespace and product-interface imagery. Neutral typography and fine borders keep attention on the app, while small, vivid announcement accents add contrast.

## North star

Keep the page quiet and spacious: let centered, sharply typeset messaging and realistic product UI carry the story, with color reserved for small accents.

## Overview

The page is built on a white canvas with a restrained neutral palette: near-black headings, muted gray navigation and captions, and delicate gray separators. A centered hero establishes the message with a large, tightly tracked Inter headline and compact supporting copy. The top navigation stays visually quiet at the edges, leaving the central content uninterrupted. Below, a large screenshot of the product interface anchors the page; later feature sections alternate concise centered headings, small UI examples, and brief explanatory text. Wide vertical gaps separate these modules and keep the long page calm rather than dense. Color is used sparingly: green appears on a small action button and product UI details, while warm orange-red announcement artwork and yellow highlighted quote fragments belong to content accents, not the core canvas. Soft shadows, rounded app cards, and thin borders make interface mockups feel layered without overpowering the editorial layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Primary page canvas and the dominant background behind the long-form product story. |
| Carbon Ink | `#171717` | `--color-carbon-ink` | neutral | Main headings, body copy, and prominent product-interface text. |
| Umber Text | `#451a03` | `--color-umber-text` | neutral | Measured muted text tone; use only for subdued copy where visible, not as a major brand color. |
| Quiet Line | `#e5e5e5` | `--color-quiet-line` | neutral | Fine card outlines and subtle separators around product UI examples. |
| Ash Caption | `#a3a3a3` | `--color-ash-caption` | neutral | Low-emphasis supporting text, captions, and secondary interface labels. |
| Slate Link | `#737373` | `--color-slate-link` | neutral | Muted navigation links such as Blog and other secondary links. |
| Action Green | `#22c55e` | `--color-action-green` | accent | Small green Join action and limited product-interface action details. |
| Alert Red | `#ef4444` | `--color-alert-red` | semantic | Measured red accent associated with product or status details; not a broad page treatment. |
| Soft Panel | `#f5f5f5` | `--color-soft-panel` | surface | Pale cards and secondary product-interface surfaces against white. |
| Graphite Copy | `#525252` | `--color-graphite-copy` | neutral | Secondary body and supporting text. |
| Deep Panel | `#1e1e1e` | `--color-deep-panel` | surface | Dark inverse card surface detected in measured UI, not a major page band. |
| Cloud Control | `#f0f0f0` | `--color-cloud-control` | surface | Soft gray button and control surface within product-interface examples. |
| Mist Border | `#dcdcdc` | `--color-mist-border` | neutral | Occasional lighter card or interface outline. |
| Note Highlight | `#fef3c7` | `--color-note-highlight` | semantic | Warm highlight visible behind selected quote text; treat as content emphasis. |
| Muted Bark | `#8f7565` | `--color-muted-bark` | neutral | Minor muted text tone detected in content, not a defining brand color. |
| Interface Blue | `#3b82f6` | `--color-interface-blue` | accent | Blue accent found in product UI details; keep it inside interface imagery. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Soft Panel) · `--color-surface-2` → `#1e1e1e` (Deep Panel) · `--color-surface-3` → `#f0f0f0` (Cloud Control) · `--color-text` → `#171717` (Carbon Ink) · `--color-text-muted` → `#451a03` (Umber Text) · `--color-text-subtle` → `#a3a3a3` (Ash Caption) · `--color-border` → `#e5e5e5` (Quiet Line) · `--color-accent` → `#22c55e` (Action Green) · `--color-accent-2` → `#ef4444` (Alert Red) · `--color-accent-3` → `#3b82f6` (Interface Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#171717` | `#f5f5f5` | 16.44:1 | AAA |
| `#171717` | `#1e1e1e` | 1.08:1 | fail |
| `#171717` | `#f0f0f0` | 15.73:1 | AAA |
| `#451a03` | `#ffffff` | 14.98:1 | AAA |
| `#451a03` | `#f5f5f5` | 13.74:1 | AAA |
| `#451a03` | `#1e1e1e` | 1.11:1 | fail |
| `#451a03` | `#f0f0f0` | 13.14:1 | AAA |
| `#a3a3a3` | `#ffffff` | 2.52:1 | fail |
| `#a3a3a3` | `#f5f5f5` | 2.31:1 | fail |

### Gradients

- `linear-gradient(to top, rgb(252, 252, 252), rgb(255, 255, 255))`
- `linear-gradient(to left top, rgb(251, 67, 44), rgb(255, 89, 30))`
- `linear-gradient(to right, rgb(255, 255, 255), rgb(240, 240, 240), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __Inter_d65c78 | `--font-body` | webfont | 400, 600, 500 | Primary family for hero and section headings, body copy, links, navigation, and product examples. | Inter |
| ui-monospace | `--font-mono` | system | 400, 600 | Code-like or technical snippets where present. | Roboto Mono |

- **__Inter_d65c78:** Use clean sans-serif forms; display and headings are semibold with tight negative tracking, while body and links remain regular.
- **ui-monospace:** Keep rare and functional; measured at regular and semibold weights, with no decorative casing.

### Type scale — Perfect Fifth (ratio ≈ 1.532, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 57.5px | 600 | 1 | -0.031em | — | __Inter_d65c78 | Large centered hero headline introducing teamwork and deep work. |
| h1 | 29px | 600 | 1.2 | -0.017em | — | __Inter_d65c78 | Primary page or feature heading where a compact hierarchy is needed. |
| h2 | 22.5px | 500 | 1.5 | -0.018em | — | __Inter_d65c78 | Feature-section headings and supporting headline statements. |
| body | 16px | 400 | 1.8 | 0 | — | __Inter_d65c78 | Hero description, feature explanations, and longer content copy. |
| caption | 14px | 400 | 1.43 | 0 | — | __Inter_d65c78 | Compact labels, quotes, and secondary interface annotations. |
| link | 14px | 400 | 1.43 | 0 | — | __Inter_d65c78 | Navigation and secondary calls to action. |
| code | 16px | 400 | 1.5 | 0 | — | ui-monospace | Any technical or code-like product text, used sparingly. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 16, 24, 32, 48 px.
- Section rhythm 80px · element gap 6px · card padding — · max content width 1280px.

A single-column editorial flow sits within a measured maximum page width of 1280px, with the hero and most feature headings centered. The top navigation is a slim horizontal row, logo left and utility links right. A broad product screenshot spans beneath the compact hero copy, followed by vertically separated feature modules with UI illustrations and short text. The page is deliberately low-density, using a measured section gap of 80px and a comfortable spacing scale; the footer resolves into three columns.

## Shape & elevation

- Radius: button `50%` · card `12px` · media `50%` · badge `9999px` · link `9999px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `18px` · pill `9999px`
- Shadow `hairline` (link, button): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `md` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.05`
- Shadow `inset` (link, button): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgb(255, 255, 255`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `inset-2` (link): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(255, 255, 255, 0.32) 0px 0.5px 0px 0px inset`
- Shadow `hairline-3` (other): `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with fine gray borders defining interface cards and restrained soft shadows lifting larger product mockups from the white canvas. Use layering to make screenshots legible, not to create heavy floating panels. Rounded card corners and subtle control surfaces provide depth; avoid strong outlines or dramatic shadows.

## Imagery

The dominant imagery is product UI: crisp, light application screenshots and composited interface cards, framed as large proof points rather than decorative backgrounds. Feature visuals show posts, lists, summaries, and communication flows, with occasional portraits or video-call thumbnails inside the mockups. Warm orange-red flourishes around the hero screenshot and colored app icons are illustrative content; keep them isolated from the otherwise neutral page canvas.

## Components

### Top navigation

Compact white header with the logo at left and muted Blog, Changelog, and outlined Open app control aligned at right.

### Announcement pills

Small centered status and news links above the hero; a black NEW badge and warm orange-red accent treatment distinguish announcements.

### Hero headline

Centered, bold, tightly tracked two-line message with a short centered supporting statement beneath.

### Product showcase

Large light application screenshot with a thin border and soft shadow; it anchors the hero and demonstrates the actual interface.

### Feature story

A short centered heading paired with a compact UI example and concise supporting copy, repeated down the page.

### UI cards

Rounded product panels use #f5f5f5 or white surfaces, #e5e5e5 borders, and restrained elevation.

### Footer

Quiet three-column closing area with brand and social marks alongside Product and About link groups.

### Measured component styles

- **Primary button** (“Join”): background #22c55e · text #ffffff · radius 9999px · padding 0px 10px · 500 14.01px __Inter_d65c78 · shadow rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(0, 0,
- **Secondary button** (“Follow up”): background #f0f0f0 · text #171717 · radius 6px · padding 0px 10px · 500 14.01px __Inter_d65c78 · shadow rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(0, 0,
- **Link** (“Skip to content”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px __Inter_d65c78 · shadow rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(0, 0,
- **Card** (“Posts Mobile app kickoff Shipped: new ty”): transparent background · text #171717 · border 1px solid #e5e5e5 · radius 12px · padding 0px · 400 16px __Inter_d65c78 · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“NEW”): background #000000 · text #ffffff · radius 9999px · padding 4px 6px · 600 10px __Inter_d65c78 · uppercase

## Do

- Use a white canvas and keep section backgrounds visually quiet.
- Center the hero message and keep its supporting copy compact.
- Use Inter-style sans serif typography with tight display tracking.
- Give feature stories generous vertical separation.
- Frame product UI with subtle borders and soft shadows.
- Reserve vivid colors for small actions and illustrative interface details.

## Don't

- Do not fill large sections with saturated color.
- Do not crowd the hero with extra navigation or copy.
- Do not turn product screenshots into decorative abstractions.
- Do not use heavy shadows or thick borders on every card.
- Do not treat illustration-only colors as the core brand palette.
- Do not compress the long page into a dense feature grid.

## Agent prompt

Build a new Campsite-style productivity page as a quiet, light editorial experience. Use Gallery White (#ffffff) for the canvas, Carbon Ink (#171717) for primary type, Slate Link (#737373) for secondary navigation, and Quiet Line (#e5e5e5) for delicate borders. Set headings in an Inter-like sans serif with semibold weight and tight tracking; keep body copy regular and readable. Place a sparse logo-and-links header above a centered announcement and hero. Follow with a large, realistic product-interface showcase, then vertically spaced feature stories pairing concise headings with UI examples. Use Soft Panel (#f5f5f5) and Cloud Control (#f0f0f0) sparingly in interface components. Keep Action Green (#22c55e) and other vivid tones restricted to small UI accents. Favor soft shadows, rounded cards, and generous whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Sparse header with logo left and utility links right; centered announcements, headline, supporting copy, and broad product UI below. | announcement links, primary app entry | minimal navigation, centered headline, product screenshot |
| 2 | footer | Three-column footer with brand and social links at left and two compact link groups to the right. | social links, policy navigation | thin top divider, three-column link layout |

## Source CSS custom properties (selected)

```css
--text-light: #fcfcfc;
--text-dark: #171717;
--text-light-secondary: #525252;
--text-dark-secondary: #a3a3a3;
--text-primary-action: #fff;
--text-primary: #171717;
--text-secondary: #525252;
--text-tertiary: #737373;
--text-quaternary: #a3a3a3;
--bg-main: #fcfcfc;
--bg-primary-action: #171717;
--bg-primary-action-hover: #313131;
--bg-secondary-action: #e5e5e5;
--bg-tertiary-action: #fff;
--bg-button: #fff;
--scrollbar-color: hsla(0,0%,64%,.8);
--bg-primary: #fff;
--bg-secondary: #fcfcfc;
--bg-tertiary: #f5f5f5;
--bg-quaternary: #f0f0f0;
--bg-elevated: #fff;
--bg-react-select: #fff;
--grad-primary-rgb: 255,255,255;
--border-primary: rgba(0,0,0,.1);
--border-secondary: rgba(0,0,0,.07);
--border-tertiary: rgba(0,0,0,.04);
--base-shadow-color: rgba(0,0,0,.05);
--button-drop-shadow: transparent;
--popover-shadow: 0px 0px 3.6px rgba(0,0,0,.04),0px 0px 10px rgba(0,0,0,.04),0px 0px 24.1px rgba(0,0,0,.05),0px 0px 80px rgba(0,0,0,.08);
--danger-drop-shadow: rgba(127,29,29,.8);
--tw-text-opacity: 1;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-ring-color: rgba(59,130,246,.5);
--font-inter: '__Inter_d65c78', '__Inter_Fallback_d65c78';
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/campsite-com