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

# PamPam · Design System

> A quiet canvas for map-making

**Theme:** light · **Industry:** ai · **Source:** https://www.pampam.city/ · **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._

PamPam pairs expressive editorial typography with a spacious, product-led layout to introduce its AI map maker. Soft map imagery and restrained color keep the page inviting while templates and clear actions make the tool feel accessible.

## North star

Let generous white space and editorial serif headlines frame colorful map imagery, keeping interface color quiet and actions unmistakable.

## Overview

The homepage uses a white canvas and generous open space to make the map-making product feel calm and approachable. A large, high-contrast serif headline anchors the hero, while Inter provides legible supporting copy, navigation, controls, and template labels. The first screen layers its centered message and compact map-making input over a pale green, blue, and cream atmospheric image; that image supplies most of the vivid color, rather than the interface chrome. Across the rest of the page, product previews, template cards, editorial feature sections, FAQ rows, and a final CTA form a long, low-density sequence. Warm cream section and footer surfaces create gentle transitions without competing with map artwork. Blue is reserved for key actions, while muted lavender-gray handles much of the secondary text and navigation. Thin dividers, restrained card shadows, and soft corners keep controls distinct without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and the dominant background for the hero and content sections. |
| Lavender Haze | `#9894a8` | `--color-lavender-haze` | semantic | Muted navigation, links, and secondary interface text. |
| Warm Parchment | `#faf2ec` | `--color-warm-parchment` | surface | Soft section and footer bands, plus business badges and card surfaces. |
| Soft Charcoal | `#1b1917` | `--color-soft-charcoal` | neutral | Dark editorial heading text where a softer black than pure black is used. |
| Gradient Ash | `#999999` | `--color-gradient-ash` | semantic | Measured gradient stop; treat as image or overlay detail rather than a defining interface color. |
| Divider Gray | `#d9d9d9` | `--color-divider-gray` | neutral | Subtle borders and hairlines, including boundaries around media. |
| Map Mist | `#e5e5e5` | `--color-map-mist` | neutral | Light card and product-preview backing, including the measured interactive map card. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Primary headline and interface text, and the dark hero action button. |
| Map Indigo | `#2b3ea7` | `--color-map-indigo` | semantic | Rare measured text detail; not a defining site-wide color. |
| Stone Gray | `#8a8a8a` | `--color-stone-gray` | neutral | Occasional subdued text detail rather than a prominent brand color. |
| Signal Blue | `#4b72f3` | `--color-signal-blue` | accent | Primary blue accent for prominent CTA treatment; use sparingly against the white canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#faf2ec` (Warm Parchment) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#9894a8` (Lavender Haze) · `--color-text-subtle` → `#1b1917` (Soft Charcoal) · `--color-border` → `#d9d9d9` (Divider Gray) · `--color-accent` → `#4b72f3` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#faf2ec` | 18.98:1 | AAA |
| `#9894a8` | `#ffffff` | 2.94:1 | fail |
| `#9894a8` | `#faf2ec` | 2.66:1 | fail |
| `#1b1917` | `#ffffff` | 17.53:1 | AAA |
| `#1b1917` | `#faf2ec` | 15.84:1 | AAA |
| `#4b72f3` | `#ffffff` | 4.2:1 | AA-large |
| `#4b72f3` | `#faf2ec` | 3.8:1 | AA-large |

### Gradients

- `linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))`
- `linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.6))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 550, 400 | Body copy, navigation, buttons, labels, and links. | Inter |
| nineties | `--font-display` | webfont | 400 | Display, H1, H2, and H3 editorial headings. | Cormorant Garamond |
| -apple-system | `--font-apple-system` | system | 400, 600 | Some navigation, product-card text, badges, and link labels. | Inter |

- **inter:** Use measured 400 and 550 weights; sentence case and clean, untracked interface text.
- **nineties:** Distinctive expressive serif; regular weight, sentence case, close line-height, and no added tracking.
- **-apple-system:** System sans-serif fallback with regular or semibold usage; retain natural casing and compact UI character.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.08 | 0 | — | nineties | Oversized editorial display headings where present. |
| h1 | 48px | 400 | 1.08 | 0 | — | nineties | Centered hero headline, “Put your world on the map.” |
| h2 | 28px | 400 | 1.08 | 0 | — | nineties | Major section headings, such as templates and FAQ. |
| h3 | 24px | 400 | 1.08 | 0 | — | nineties | Subsection and feature headings. |
| body | 16px | 550 | 1.5 | 0 | — | inter | Supporting descriptions and explanatory section copy. |
| caption | 14px | 550 | 1.43 | 0 | — | inter | Small template descriptions and media notes. |
| button | 16px | 550 | 1.5 | 0 | — | inter | Primary and secondary action labels. |
| nav | 16px | 550 | 1.5 | 0 | — | inter | Header and footer navigation links. |
| link | 16px | 550 | 1.5 | 0 | — | inter | Text links within sections and product navigation. |

OpenType features in use: `"cv02", "cv03", "cv04", "cv06", "cv11"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 10, 12, 16, 20, 24, 28, 32, 56, 64, 72 px.
- Section rhythm 64px · element gap 12px · card padding 12px · max content width 912px.

A centered, single-page marketing layout uses a measured maximum content width of 912px, while the hero artwork runs full bleed. Center-align the hero and key conversion moments; use narrower editorial text blocks and orderly card grids for templates and examples. The measured spacing system is based on an 8px unit, with a 64px section gap and 12px element gap. Keep section density comfortable: long stretches of white canvas separate product imagery, category cards, FAQ rows, and the warm footer band.

## Shape & elevation

- Radius: card `8px` · media `10px` · badge `9999px` · link `16px` · xs `8px` · sm `10px` · md `12px` · lg `16px` · pill `9999px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 4px 0px`
- Shadow `inset` (text): `rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgb(99, 135, 244) 0px 2px 0px 0px inset`
- Shadow `sm-2` (text): `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 1px 0px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.05) 0px 1px 0px -1px, rgba(0, 0, 0, 0.05) 0px 1px 1px -1px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 3px 6px -3px`
- Motion: standard transition `0.15s ease` on interactive elements.

The page is mostly flat, with section separation achieved through white space and occasional warm surface bands. Use subtle card shadows and thin gray borders to distinguish product previews and controls from the canvas. Keep layering restrained; rounded corners soften cards and media, while badges use pill-like forms.

## Imagery

Use broad, atmospheric map-inspired imagery in the hero, with pale greens, blue, and cream fading into white. Product visuals should appear as framed map-editor previews and template thumbnails, preserving their varied cartographic colors rather than imposing a uniform tint. Keep image corners softly rounded and avoid decorative 3D embellishment. The measured screenshot’s vivid colors largely belong to artwork and product mockups, not the core interface palette.

## Components

### Header navigation

Lightweight horizontal links sit over the hero image; muted lavender-gray navigation is balanced by a compact sign-in control.

### Hero map prompt

Centered serif headline and muted explanatory copy sit above a bordered prompt field with a black Make map action.

### Map format cards

Three compact cards introduce interactive, animated, and printable maps with small colored icons and concise labels.

### Map preview

A rounded product screenshot presents the map editor and map artwork as the central visual proof of the tool.

### Template gallery

A multi-column set of map-template previews uses restrained card framing, short titles, and muted descriptions.

### FAQ list

A narrow stack of text questions uses fine horizontal dividers and plus indicators instead of heavy accordion cards.

### Conversion CTA

Centered closing headline, supporting copy, and paired actions use blue for the primary action and a quiet secondary link.

### Footer

A warm parchment band holds the brand mark and grouped link columns in small, subdued text.

### Measured component styles

- **Primary button** (“Solutions”): transparent background · text #9894a8 · radius 0px · padding 8px 12px · 550 16px inter
- **Link** (“Map Maker”): transparent background · text #9894a8 · radius 0px · padding 0px · 550 16px inter
- **Input**: transparent background · text #222222 · radius 0px · padding 8px 0px · 550 16px inter
- **Card** (“Interactive Map”): background #e5e5e5 · text #000000 · radius 8px · padding 12px · 400 16px -apple-system · shadow rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 4px 0px
- **Badge** (“For business”): background #faf2ec · text #000000 · radius 12px · padding 4px 12px · 600 13px -apple-system
- **Navigation item** (“Pricing Solutions Products Inspiration”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px -apple-system

## Do

- Use a generous white canvas around each content block.
- Set major headings in the distinctive editorial serif.
- Keep navigation and supporting copy calm and muted.
- Let map artwork carry most of the page’s color.
- Use blue selectively for the primary conversion action.
- Separate long sections with open space and warm surface bands.

## Don't

- Do not turn every section into a boxed card.
- Do not apply the map artwork palette to interface chrome.
- Do not use heavy shadows or thick borders.
- Do not crowd the centered hero with extra content.
- Do not replace the serif display voice with generic sans headings.
- Do not invent additional brand colors or decorative gradients.

## Agent prompt

Build a new PamPam-style page with a calm, editorial SaaS feel. Use Gallery White (#ffffff) as the primary canvas, Warm Parchment (#faf2ec) for occasional section bands, and Ink Black (#000000) for strong text and dark actions. Use Lavender Haze (#9894a8) for secondary navigation and copy; reserve Signal Blue (#4b72f3) for the main CTA. Pair an expressive serif display face with Inter-style sans-serif UI text. Center the main message, keep content comfortably narrow, and allow generous breathing room between sections. Use map imagery as the colorful focal point, with rounded product previews and restrained borders or shadows. Favor clear text links, compact cards, and thinly divided FAQ rows; avoid dense layouts and ornamental UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed atmospheric map backdrop with centered headline, supporting copy, prompt input, and three compact map-format cards. | Prompt-led creation, Primary make-map action, Format selection | Editorial serif headline, Muted navigation, Rounded input, Compact icon cards |

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