Sienna Brand
#451a03Decorative branding — paint-splash illustrations and brand-icon accents that frame content edges
Campsite
campsite.comWebsite preview
The design language
Campsite runs on warm minimalism: a cream-white canvas (#fffdf9) that feels like paper, paired with near-black text and almost no color. The interface is quiet, compact, and confident — Inter at every size, tight tracking on display sizes, pill-shaped controls, and soft elevation that barely lifts off the page. Color is rationed to functional punctuation: green for resolved states, a warm yellow wash for highlights, and a single dark-orange tone that lives in decorative paint-splash branding rather than in the UI itself. The product mockup is the hero — large, full-bleed, and dominant — while surrounding copy stays small and restrained, letting the product speak.
Color palette
brand
accent
Resolve Green
#22c55eGreen action color for filled buttons, selected navigation states, and focused conversion moments. Use as a supporting accent, not as a status color
Highlight Wash
#fef3c7Soft warm-yellow background for highlighted callouts and quote blocks
Alert Red
#ef4444Red action color for filled buttons, selected navigation states, and focused conversion moments. Use as a supporting accent, not as a status color
neutral
Warm Canvas
#fffdf9Page background — a warm off-white that gives the entire site its paper-like quality
Pure White
#ffffffCard surfaces, elevated panels, and product-screenshot backgrounds
Ash Mist
#f5f5f5Secondary surface for subtle differentiation — post bodies, sidebar items, input fields
Soft Fog
#f0f0f0Tertiary surface for nested elements, dividers, and inactive states
Ink
#171717Primary text, icons, and headings — near-black warmth rather than pure black
Graphite
#525252Secondary text and metadata
Steel
#737373Tertiary text, timestamps, and helper labels
Silver
#a3a3a3Muted text, placeholders, and inactive icon fills
Charcoal Card
#1e1e1eDark-mode product card surface shown in feature sections
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
58px · 600 · 1.2 · -1.8px trackingThe quick brown fox jumps
heading
29px · 600 · 1.33 · -0.52px trackingThe quick brown fox jumps
subheading
22px · 500 · 1.4The quick brown fox jumps
text-20
20px · 400 · 1.4The quick brown fox jumps
body-lg
18px · 600 · 1.63The quick brown fox jumps
text-17
17px · 400 · 1.63The quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
body
15px · 400 · 1.56 · -0.27px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 600
- Sizes
- 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 29, 58
- Line height
- 1.00–1.80
- Letter spacing
- -1.8px at 58px, -0.52px at 29px, -0.27px at 15px, +0.3px at 12px (uppercase badges)
- Fallback
- system-ui, -apple-system, sans-serif
- Features
- "cv11", "ss01"
Sole typeface for all UI, headings, body, and buttons. The 58px hero headline with weight 600 and -0.031em tracking is the typographic anchor — tight, confident, never thin. Body text settles at 14–16px with weight 400. No display serif or alternate families — the system achieves hierarchy purely through size and weight within Inter.
Additional typeface
ui-monospace
- Weights
- 400, 600
- Sizes
- 12px
- Line height
- 1
ui-monospace — detected in extracted data but not described by AI
Additional typeface
emoji
- Weights
- 500, 600
- Sizes
- 12px, 14px
- Line height
- 1
emoji — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 16px
- Element gap
- 8px
Border radius
tags
9999pxcards
12pximages
8pxinputs
8pxavatars
9999pxbuttons
9999pxSpacing scale
1px2px4px5px6px8px10px12px16px20px23px24px32px48px64px72px75px80px96px160pxGuidelines
Do
- Use Inter weight 400 for body, 500 for UI labels, 600 for headings — never go below 400 or above 600
- Apply -1.8px letter-spacing at 58px display size and scale proportionally down to -0.27px at 15px body
- Use 9999px radius for all buttons, tags, and avatars — pill shapes are the system's identity
- Keep the canvas at #fffdf9 (warm white) — never use pure #ffffff for page backgrounds, only for cards and elevated surfaces
- Use the layered 5% opacity shadow stack for product cards and the stronger multi-stop shadow only for the hero product mockup
- Limit color to functional roles: green for resolved, #fef3c7 for highlights, #ef4444 for destructive — everything else stays monochrome
- Space sections at 64px with 8px element gaps and 16px card padding — the 4px base unit keeps everything snap-aligned
Don’t
- Don't introduce a second typeface — Inter alone carries the entire hierarchy
- Don't use heavy drop shadows, colored shadows, or shadows with more than 10% opacity
- Don't use sharp corners (0px radius) on any interactive element — minimum 8px, prefer pill
- Don't apply Sienna Brand (#451a03) to text body or list items — it's decorative branding only
- Don't add gradients, glassmorphism, or neumorphism — surfaces are flat with hairline borders
- Don't use pure black (#000000) for text — use #171717 for warmth
- Don't exceed 58px for display headings or go below 11px for any text — the scale is intentionally tight
Components
Pill Primary Button
Filled action button for primary CTAsFull pill radius (9999px), Ink (#171717) background, white text at 14px weight 500, padding 10px 20px, subtle inset highlight shadow. Used sparingly — most pages rely on text or ghost buttons.
Promo Pill Button
Orange branded announcement buttonFull pill radius (9999px), Sienna Brand (#451a03) background with white text, 10px 16px padding, 13px weight 500. Used only for branded announcements and launch promotions.
Ghost Text Button
Low-emphasis inline actionNo background, Ink (#171717) text at 14px weight 500, 4px vertical / 8px horizontal padding. The default for most navigation and secondary actions.
Product App Card
Large product screenshot containerPure White (#ffffff) background, 12px radius, soft layered shadow (see elevation), overflow hidden to clip the screenshot edges. The hero component — spans nearly full page width.
Post Card
Content card in the product feedPure White (#ffffff) background, 8px radius, 1px border in #f0f0f0, padding 16px, 8px gap between elements. Contains avatar, author name, timestamp, post body, and category tag.
Status Badge
Category or state indicator4px radius, 4px 8px padding, 12px Inter weight 500. Green (#22c55e) background with white text for 'Resolved'. Neutral #f5f5f5 background with #737373 text for category tags like 'Product' or 'Engineering'.
Notification Pill
Top-of-page announcement bannerFull pill radius, Ink (#171717) background, white text at 13px weight 500, with a small dark 'NEW' tag and right-arrow icon. Centered above the hero headline.
Sidebar Navigation
Left rail in product mockupPure White (#ffffff) background, 1px right border in #f0f0f0, 240px width. Items are 10px 12px padded, 14px Inter weight 400, Ink for active, #737373 for inactive. Active item has a subtle #f5f5f5 background fill.
Quote Callout
Customer testimonial blockHighlight Wash (#fef3c7) background, 8px radius, 16px padding. Quote text in Ink at 16px weight 400, attribution below in #525252 at 13px with avatar.
Feature Card
Product capability showcasePure White (#ffffff) background, 12px radius, 1px border in #f0f0f0, padding 20px. Pairs a small product UI mockup (left) with a heading and description (right) in a 2-column layout.
Input Field
Text input for post composerAsh Mist (#f5f5f5) background, 8px radius, 12px padding, 1px border in #f0f0f0. Placeholder text in #a3a3a3 at 14px weight 400. A 'Post' submit button sits flush right.
Avatar
User identificationFull circle (9999px radius), 24px or 32px diameter, with a 1px border in #ffffff to separate from backgrounds. Initials or photo fill.
Logo Mark
Brand identityRounded square (8px radius) with Sienna Brand (#451a03) background and white geometric mark. 32px in the header, 24px in the favicon.
Surfaces & elevation
Level 0
Warm Canvas
#fffdf9Base page background
Level 1
Pure White
#ffffffCards, product screenshots, and primary elevated surfaces
Level 2
Ash Mist
#f5f5f5Nested content blocks, post bodies, subtle panel fills
Level 3
Soft Fog
#f0f0f0Dividers, inactive state backgrounds, tag fills
Shadows are whisper-quiet: 5% opacity, tight blur radii, and never used to add color or depth — only to separate planes. The system prefers flat surfaces and hairline borders over heavy elevation. The one exception is the hero product mockup, which gets a slightly stronger shadow to lift it off the canvas.
Product cards and elevated panels
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
Buttons and interactive controls
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, inset 0 1px 0 rgba(255,255,255,0.32)
Floating product mockup (hero)
rgba(0, 0, 0, 0.1) 0px 0.5px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 4px 12px 0px, rgba(0, 0, 0, 0.02) 0px 8px 20px 0px
Layout & imagery
Layout
Centered max-width (~1200px) container with the hero headline centered over the product mockup. The product mockup is the dominant element — full-width, slightly overlapping the content boundary. Below the fold, content alternates between centered headline + description stacks and 2-column feature blocks (product mockup left, text right). The sidebar paint-splash decorations bleed off the left and right edges of the viewport, creating a frame around the centered content. Vertical rhythm is 64px between sections, with generous breathing room. Navigation is minimal: a small logo top-left, three text links top-right, no sticky header or mega-menu.
Imagery
The site is product-screenshot dominant. The hero features a large, full-bleed macOS-style app window with traffic-light controls, a left sidebar, and a messaging feed. These product mockups are the primary visual — they span nearly the full content width and carry the most visual weight. Decorative orange paint-splash illustrations frame the left and right edges of the page, adding organic warmth to the otherwise precise grid. No photography, no stock imagery, no abstract graphics — the product UI IS the imagery. Icons within the product are small, filled, and monochrome (Ink or #737373).
Design notes
Color Rationing
The system is 98% achromatic. Color appears only as functional punctuation: green for resolved states, a warm yellow wash for testimonial highlights, red for destructive actions, and a dark sienna for decorative brand paint-splashes. The product UI mockup is the only place where category colors live (green resolved badges, colored category icons). This rationing makes the rare color moments feel deliberate and high-signal.
Product-as-Hero
Unlike typical SaaS sites that lead with abstract gradients or lifestyle photography, Campsite leads with a literal screenshot of its own product. The mockup is large enough to be readable, styled as a macOS app window with traffic-light controls, and presented with enough shadow to feel like a physical object on the page. This signals confidence: 'here is exactly what you get'.
Agent Guide
primary action: #22c55e (filled action) Create a Primary Action Button: #22c55e background, #171717 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
Similar brands
Linear
Same monochrome-first approach with Inter typography, pill buttons, and the product UI as the hero — both treat their app screenshot as the primary visual
Notion
Warm canvas background, minimal color palette, and compact information density — both use the page itself as a demonstration of the product's aesthetic
Height
Compact task-tool layout with soft shadows, monochrome surfaces, and green for completion states — shares the 'quiet productivity tool' visual language
Pitch
Product-forward hero with large UI mockup, Inter typeface, pill controls, and warm off-white canvas — both make the app screenshot the visual anchor
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
