CURATED · OPEN · FREE

Campsite

A focused team communication tool that replaces noisy chats with organized posts.

SaaSProductivityCleanCalmRestraint

↓ Download design system (8 MB)Open in OpenDesign

Visit: https://www.campsite.design

📦 Browse pack contents →

Identity DNA

thoughtfulfocusedteam communication

A quiet, well-organized library for team posts.

Color

#fb432cAccent

#171717Ink

#737373Ink soft

#ffffffBG

#f5f5f5BG soft

#f0f0f0BG quiet

#a3a3a3Muted

rgba(0, 0, 0, 0.1)Line

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

Typography

humanist-sans · monospace

display56px · 500
h232px · 600
body16px · 400
small14px · 400

Negative letter-spacing on large display text · Regular weight for body copy · Semi-bold for section headings

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 4px base grid

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgba(0, 0, 0, 0.1)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard marketing site layout with centered content and generous whitespace.

Motion & Interaction

100msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color transitions on hover · Subtle box-shadow shifts on interaction

Subtle color or background shifts. · Immediate visual feedback.

Components

button Rounded pill shape, outlined or solid primary color.
card Clean white containers with subtle borders and soft shadows.
chip Small rounded labels with subtle backgrounds.
input Standard text fields with light borders.
hero Large centered headline with supportive subtext and product screenshot.

Voice & Don'ts

Tone Professional yet approachable.
Headlines Concise, direct, and benefit-oriented.
CTAs Simple, action-oriented text inside rounded buttons.

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.
Avoid: Jargon-heavy language
Avoid: Overly loud or aggressive marketing copy
Avoid: Visual clutter

Inside the pack — real screenshots

Campsite — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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).

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko