Periwinkle
#4b72f3Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
pampam.city
pampam.cityWebsite preview
The design language
PamPam reads as a warm editorial travel journal translated into a modern app: a soft parchment-cream canvas (#faf2ec) carries the interface, with a custom display serif ('Nineties') giving headlines a vintage-magazine voice against a clean, workhorse Inter body. The palette is nearly monochromatic, leaning on a single muted lavender-gray (#9894a8) for borders, links, and hairlines, and reserving one vivid periwinkle blue (#4b72f3) for the one action that must feel switched on. Surfaces stay flat and paper-like — white cards float on cream, never the other way around, and shadows are whisper-quiet so the maps and illustrations can do the emotional work. Components are compact and confident: pill-ish buttons with generous 16px radii, 12px-radius cards, and tight 12–16px internal padding. Color and weight, not elevation, carry hierarchy.
Color palette
brand
accent
Deep Violet
#2b3ea7Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
neutral
Parchment Cream
#faf2ecPage canvas — the warm, paper-like surface that everything sits on; cards and buttons float above it as white or charcoal
Warm Ink
#1b1917Primary text and headline color — a near-black with a brown undertone that harmonizes with the cream canvas instead of fighting it
Carbon
#000000Secondary text, icon strokes, and heavy dark surfaces (filled dark buttons, logo marks); used sparingly so Warm Ink remains the default reading color
Paper White
#ffffffCard surfaces, input fields, and dark-on-light icon fills — the only true white in the system, reserved for elements that must lift off the cream
Mist Gray
#e5e5e5Section dividers, subtle background bands, and inactive surface washes
Ash
#8f8f8fMuted helper text, tertiary metadata, and disabled labels
Slate Lavender
#9894a8Default link color, hairline borders, tag outlines, and decorative strokes — the most-used chromatic neutral; soft enough to never compete with the blue accent
Iron
#222222Input field text and dark-mode form borders on light surfaces
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
80px · 400 · 1.08The quick brown fox jumps
heading
48px · 400 · 1.08The quick brown fox jumps
heading-sm
28px · 400 · 1.08The quick brown fox jumps
text-24
24px · 400 · 1The quick brown fox jumps
subheading
19px · 550 · 1.56The quick brown fox jumps
text-18
18px · 550 · 1.56The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
caption
14px · 550 · 1.43The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Nineties
- Weights
- 400
- Sizes
- 28px, 48px, 80px
- Line height
- 1.08
- Letter spacing
- 0
- Fallback
- DM Serif Display
Display and editorial headlines — a custom high-contrast serif with vintage-magazine DNA. Used at 80px for hero statements, 48px for section headlines, and 28px for sub-headlines. Its old-style serifs and tight 1.08 line-height create a printed-page rhythm that is the single most distinctive choice in the system. Substitute: DM Serif Display, Playfair Display, or Recoleta.
Additional typeface
Inter
- Weights
- 400, 550
- Sizes
- 14px, 16px, 18px, 19px
- Line height
- 1.43, 1.47, 1.50, 1.56
- Fallback
- Inter
- Features
- "cv02", "cv03", "cv04", "cv06", "cv11" on
Body, UI controls, navigation, buttons, and small headings. Weight 550 (Inter's semibold) is used for emphasized text and button labels — heavier than typical body weight but lighter than a full 600, giving the UI a slightly lighter touch than standard Inter implementations. Always rendered with OpenType features cv02, cv03, cv04, cv06, cv11 for the alternate character set that gives the text its slightly geometric, brand-tuned feel.
Additional typeface
-apple-system / system-ui
- Weights
- 400, 500, 600
- Sizes
- 16px, 18px, 24px
- Line height
- 1.00, 1.20, 1.56
Fallback and OS-native rendering for icons, system messages, and any element where a neutral sans is acceptable. Acts as the safety net so the system never breaks if Inter fails to load.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64px
- Card padding
- 16px
- Element gap
- 12px
Border radius
tags
12pxcards
12pxinputs
12pxbuttons
16pxSpacing scale
4px6px8px10px12px16px20px24px28px32px40px56px64px72px161px225pxGuidelines
Do
- Use Nineties 400 at 80px for hero headlines and 48px for section headlines — the serif is the brand voice and should never be replaced by Inter at large sizes
- Use #faf2ec (Parchment Cream) as the page canvas and let white cards float above it, not the reverse
- Reserve #4b72f3 (Periwinkle) for exactly one primary action per screen; every other action should be Carbon, Ghost, or text-only
- Use 12px radius for cards and 16px radius for buttons — the two-step scale keeps surfaces consistent without rounding into pure pills
- Render Inter with OpenType features cv02, cv03, cv04, cv06, cv11 active to preserve the brand-tuned character set
- Let the Slate Lavender (#9894a8) carry all link and border chromatic work — it is the only chromatic neutral and should appear on every interactive hairline
- Keep shadows to the 1px-border + 4px-soft-drop pattern; never stack multiple drop shadows or add colored glows
Don’t
- Do not use Nineties below 28px — it becomes unreadable; switch to Inter for any small text
- Do not introduce additional saturated brand colors; the system is monochromatic plus one blue, and adding more will dilute the Periwinkle's impact
- Do not place dark cards on dark backgrounds or white cards on white — the cream/white/carbon triad depends on each surface having contrast against its parent
- Do not use pure #000000 for body text on cream — use #1b1917 (Warm Ink) so the text harmonizes with the parchment instead of punching through it
- Do not apply Periwinkle to large decorative fills, backgrounds, or illustration accents; it is a 40–200px button color, not a section color
- Do not add letter-spacing to Nineties — the tight 1.08 line-height and default tracking are part of the magazine feel
- Do not use heavy elevation (large blur, offset, or colored shadows) — the paper metaphor breaks the moment a card looks like it is floating in space
Components
Hero Display Headline
Primary page-level statement that anchors the entire viewportNineties 400 at 80px, line-height 1.08, color #1b1917 (Warm Ink), centered alignment. No letter-spacing manipulation. Sits over the Parchment Cream canvas with generous 56px vertical padding above and below. The tight line-height and high-contrast serif is the signature move — it should always feel like a magazine pull-quote, never a SaaS headline.
Section Headline
Secondary heading introducing a new content bandNineties 400 at 48px, line-height 1.08, color #1b1917. Left-aligned when beside body copy, centered when used as a standalone band title. Same serif treatment as the display — the scale drops, the voice stays identical.
Sub-Headline
Inline heading inside a card or sub-sectionNineties 400 at 28px, line-height 1.08, color #1b1917. The smallest size the custom serif is used at — below this, switch to Inter to preserve readability.
Periwinkle Primary Button
The single dominant action on a screenBackground #4b72f3 (Periwinkle), text #ffffff in Inter 550 at 16px, padding 12px 24px, border-radius 16px. No border, no shadow. The vivid blue against the warm cream is the highest-contrast moment on the page and must be reserved for one action per screen. Hover: deepen to 10% darker; active: inset shadow rgb(99, 135, 244) 0px 2px 0px 0px.
Dark Filled Button
Secondary dark action — the contrast twin of the Periwinkle buttonBackground #000000 (Carbon), text #ffffff in Inter 550 at 16px, padding 12px 24px, border-radius 16px. A '+' icon prefix is common. Use for primary in-page actions when the surrounding section already carries blue, or for the nav-level CTA.
Ghost / Outlined Button
Tertiary or paired alternative actionBackground transparent, border 1px solid #9894a8 (Slate Lavender) or #000000, text #1b1917 or #000000 in Inter 550 at 16px, padding 11px 23px (1px less to compensate for border), border-radius 16px.
White Surface Card
General-purpose content card for features, integrations, and start-optionsBackground #ffffff, border-radius 12px, border 1px solid #e5e5e5 (Mist), padding 16px–24px. The 1px Mist border is the primary edge; a soft shadow (rgba(0,0,0,0.08) 0 0 0 1px, rgba(0,0,0,0.1) 0 1px 4px) is optional for cards on hero/illustration backgrounds. Contains a colored icon (Periwinkle, Deep Violet, or brand color) above an Inter 550 label.
Cream Card (No-Border)
Card variant for content that should blend into the page rather than lift off itBackground #faf2ec (same as canvas), border-radius 12px, padding 24px, no border or shadow. Use when the card is more of a grouping affordance than a discrete surface — the visual cue is spacing and radius, not color contrast.
Input Field
Text input for search, queries, and map promptsBackground #ffffff, border 1px solid #e5e5e5, border-radius 12px, padding 12px 16px, text in Inter 400 at 16px color #222222. Placeholder text in #8f8f8f. Focus ring: 2px inset rgb(99, 135, 244) — the same Periwinkle used for CTAs, confirming it as the interactive accent.
Press / Logo Strip
Horizontal row of grayscale partner logos for social proofLogos rendered in #000000 at uniform 24–32px height, evenly spaced with 56px gaps. No background, no border — the strip floats on the cream canvas. Each logo is fully monochrome; the brand color treatment is suppressed to keep the row feeling editorial.
Tag / Category Pill
Small inline label for map categories, filters, or feature tagsBackground transparent, border 1px solid #9894a8, border-radius 12px, padding 4px 12px, text Inter 400 at 14px color #1b1917. The Slate Lavender border is the visual identifier — it distinguishes tags from regular text without needing a fill.
Google Sign-In Button
Top-right authentication affordanceBackground #ffffff, border 1px solid #e5e5e5, border-radius 8px–12px, padding 8px 16px, Google 'G' logo at full color (red/yellow/green/blue), text Inter 400 at 14px color #1b1917. A rare instance of multicolor on the site — only acceptable for the official Google mark.
Navigation Bar
Top-of-page global navigationTransparent background that lets the Parchment Cream canvas show through. Logo (oval 'PAM' badge in #1b1917) at far left, nav links (Pricing, Solutions, Products, Inspiration) in Inter 400 at 16px color #1b1917, spaced with 32px gaps. Sign-in button pinned right. Padding 16px vertical, 32px horizontal.
Feature Image Card (Browser Frame)
Product showcase card showing the app inside a browser chromeA 3D-tilted browser window mockup (rounded 12px corners, white surface, macOS-style traffic-light dots) containing a map screenshot. Background card has no border, uses the cream canvas. Tilt angle around -5° to -8° creates a 'pinned to a notebook' feel rather than a flat grid.
Surfaces & elevation
Level 0
Parchment Canvas
#faf2ecPage background — the warm cream that defines the entire site mood
Level 1
Paper White Card
#ffffffCards, modals, input fields — elements that need to lift off the cream
Level 2
Mist Band
#e5e5e5Subtle section backgrounds and dividers
Level 3
Carbon Block
#000000Dark inverted surfaces — dark CTA buttons, featured blocks
The system uses whisper-light shadows — a 1px border-colored stroke plus a 4px soft drop — so that cards feel like printed paper resting on paper, not floating UI. Elevation is always achieved with the 1px hairline border first; the shadow is the secondary signal. Avoid heavy drop shadows, colored glows, or multi-layer stacks.
Cards and elevated panels
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 4px 0px
Focus rings and inset accents
rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgb(99, 135, 244) 0px 2px 0px 0px inset
Layout & imagery
Layout
Full-bleed atmospheric hero (no max-width constraint on the background image) with a centered text stack: display headline, supporting paragraph, dark inline CTA, and a row of three white 'Start from' cards. Below the hero, a centered max-width 1200px content column takes over. Sections alternate between a press-logo strip on cream, then a two-column product showcase (tilted browser mockup left, heading + body + Periwinkle CTA right). Vertical rhythm is generous: 64px between major sections, 12–16px between elements, 56px gaps inside multi-column bands. Navigation is a minimal top bar floating on the cream canvas with a sign-in affordance pinned to the right. No sidebar, no mega-menu, no sticky elements beyond the nav.
Imagery
Imagery is photographic and atmospheric rather than product-shot: full-bleed soft-focus backgrounds of clouds, skies, and natural landscapes (visible in the hero as a dreamy green-cloud wash) set an emotional travel mood before any product UI appears. Product imagery is contained inside tilted browser-frame mockups that sit on the cream canvas like pages pinned to a board. Icons are flat, geometric, and monochromatic — the colored app-source tiles (Periwinkle, Neutral Notion 'N', Green Sheets) are the only spots of multicolor in the functional UI. Photography is never lifestyle or human-focused; the map IS the hero, and supporting imagery only sets weather and light. Overall density is text-dominant with one large atmospheric image per major section.
Design notes
Agent Guide
**Quick Color Reference** - canvas (page background): #faf2ec - card surface: #ffffff - primary text: #1b1917 - border / hairline: #9894a8 (Slate Lavender) or #e5e5e5 (Mist) - accent: #2b3ea7 (Deep Violet, rare) - primary action: no distinct CTA color **3 Example Component Prompts** 1. **Hero section**: Parchment Cream (#faf2ec) canvas with a full-bleed soft-focus landscape photo behind. Headline 'Put your world on the map.' set in Nineties 400 at 80px, line-height 1.08, color #1b1917, centered. Supporting paragraph in Inter 400 at 18px, line-height 1.56, color #1b1917. A dark Carbon (#000000) button '+ Make map' at 12px 24px padding, 16px radius, white Inter 550 16px label. Below, a row of three white cards (12px radius, 1px Mist border, 16px padding) each containing a colored icon above an Inter 550 16px label. 2. **Feature showcase band**: Two-column layout at max-width 1200px, 56px column gap. Left: a browser-frame mockup (12px radius, white surface, macOS traffic-light dots) tilted -5°, containing a map screenshot. Right: Inter 550 16px uppercase label 'For business' in #8f8f8f, then Nineties 400 48px heading 'Make your own custom maps.' in #1b1917, then Inter 400 18px body in #1b1917, then a Periwinkle (#4b72f3) filled button 'Explore our map maker' at 12px 24px padding, 16px radius, white Inter 550 16px label. 3. **Press logo strip**: Centered row on Parchment Cream canvas, 56px gap between logos. Each logo rendered in #000000 at 28px height, uniformly scaled. No background, no border, no text labels — logos only, set in a single horizontal line with generous breathing room above and below (64px padding each side).
Similar brands
Notion
Same warm-neutral canvas with dark Inter body and a single accent color reserved for primary actions; similar whisper-light card elevation.
Linear
Same monochromatic interface with one vivid accent for the primary CTA, tight typographic rhythm, and minimal decorative chrome.
Arc browser
Same editorial sensibility — custom display typography against a cream-toned canvas, with restrained color and a paper-like surface treatment.
Substack
Same serif-headline-over-cream-canvas identity with Inter body, treating the product page like a long-form magazine spread.
Felt
Same map-making category, same soft warm palette, and same approach of letting one colored tile per integration provide the only chromatic accent.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
