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

# Pop Site · Design System

> Bright, spacious pages that make site creation feel simple.

**Theme:** light · **Industry:** saas · **Source:** https://pop.site/ · **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._

Pop Site pairs a clean, mostly white canvas with bold, tightly set headings and vivid product demonstrations. Repeated signup forms and device mockups guide visitors from first impression to feature exploration and conversion.

## North star

Keep the page predominantly white and spacious, using tight black typography and repeated blue signup controls to organize vivid product showcases.

## Overview

The page uses white as its defining canvas, giving the long homepage a bright, uncluttered feel and letting product imagery carry much of the colour. Near-black headings establish a strong reading hierarchy; muted grays handle supporting copy, while blue marks signup actions and occasional links. Satoshi drives the display and interface typography, with large, tightly tracked headings and compact, readable supporting text. Centered hero and feature sections alternate with split layouts, multi-column feature grids, and broad showcase bands, creating variety without changing the visual language. Repeated username fields and pill-shaped CTAs make conversion familiar across the page. Product imagery focuses on phone screens and desktop dashboards, often framed as polished mockups. Subtle gradients and soft card shadows add depth selectively; most sections remain flat and open. Bright blue and purple regions appear as feature or campaign treatments, not as the page-wide background palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and the background for most sections; preserves the open, bright presentation. |
| Pop Ink | `#171717` | `--color-pop-ink` | brand | Main headings, navigation, footer copy, and dark link treatments. |
| Action Blue | `#3b82f6` | `--color-action-blue` | accent | Measured accent for buttons and occasional link text; primary conversion blue is more vivid in the screenshot. |
| Sky Signal | `#00a8f5` | `--color-sky-signal` | accent | Secondary blue accent measured in button and section styling; use sparingly for emphasis. |
| Soft Graphite | `#545454` | `--color-soft-graphite` | neutral | Muted supporting text beneath headings and in explanatory copy. |
| Cloud Tint | `#f8f9fb` | `--color-cloud-tint` | surface | Subtle section and navigation tint, including pale gradient transitions against white. |
| Quiet Slate | `#6e6e73` | `--color-quiet-slate` | neutral | Low-emphasis footer and secondary text. |
| Mist Blue | `#edf4ff` | `--color-mist-blue` | surface | Pale blue section tint used as a light background accent. |
| Muted Charcoal | `#5e5e5e` | `--color-muted-charcoal` | neutral | Secondary heading and body text where a softer contrast than the main ink is needed. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#171717` (Pop Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#545454` (Soft Graphite) · `--color-accent` → `#3b82f6` (Action Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171717` | `#ffffff` | 17.93:1 | AAA |
| `#545454` | `#ffffff` | 7.57:1 | AAA |
| `#3b82f6` | `#ffffff` | 3.68:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgb(248, 249, 251) 100%)`
- `radial-gradient(120% 29% at 50% 0%, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)`
- `radial-gradient(50% 50% at 50% 0px, rgb(247, 247, 247) 0%, rgb(255, 255, 255) 100%)`
- `radial-gradient(120% 29% at 50% 0px, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Satoshi | `--font-body` | webfont | 500, 400 | Primary display and interface type for headings, body, navigation, captions, and links. | Inter |
| Inter | `--font-inter` | webfont | 400, 500 | Secondary webfont used for a smaller share of page text. | Inter |

- **Satoshi:** Use medium-weight display headings with notably tight negative tracking; body and navigation stay compact and mostly sentence case.
- **Inter:** Use as a close, neutral sans fallback; measured regular and medium weights.

### Type scale — Perfect Fifth (ratio ≈ 1.465, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 69px | 500 | 0.9 | -0.057em | — | Satoshi | Oversized campaign and hero headlines. |
| h1 | 64px | 500 | 0.9 | -0.05em | — | Satoshi | Primary hero and major section headings. |
| h2 | 28px | 500 | 1.2 | -0.03em | — | Satoshi | Feature and supporting section headings. |
| h3 | 21px | 500 | 1.4 | -0.03em | — | Satoshi | Card titles and smaller feature headings. |
| body | 15px | 500 | 1.3 | -0.03em | — | Satoshi | Explanatory copy and main interface text. |
| caption | 13px | 400 | 1.2 | -0.03em | — | Satoshi | Small labels, disclaimers, and image captions. |
| nav | 15px | 500 | 1.3 | -0.03em | — | Satoshi | Header navigation links. |
| link | 16px | 400 | 1.4 | -0.04em | — | Satoshi | Inline links and testimonial attribution URLs. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 7, 8, 10, 12, 13, 16, 20, 24, 30, 40, 60, 80 px.
- Section rhythm 80px · element gap 10px · card padding 20px · max content width 744px.

Use a centered content column with a measured page maximum width of 744px for text-led content, then let product mockups and selected colour bands extend wider. The hero and several conversion sections align content centrally; later feature areas use two-column splits, three-column grids, and a compact six-item showcase. Preserve generous measured section gaps and comfortable card padding. The overall density is low: short copy blocks, clear hierarchy, and substantial white space separate the long sequence of sections.

## Shape & elevation

- Radius: button `50%` · card `10px` · media `8px` · xs `6px` · sm `8px` · md `10px` · lg `12px` · xl `22px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.05) 0px 1px 11px 0px`
- Shadow `md-2` (other, card): `rgba(0, 0, 0, 0.1) 0px 1px 10px 0px`

Most page areas are flat white with little visible border treatment. Use measured soft shadows selectively on cards and floating testimonial or product elements, with restrained separation rather than heavy outlines. Rounded cards and media frames help distinguish content; the bright feature bands and showcase mockups provide the strongest depth and contrast.

## Imagery

Product imagery is the main visual proof: phone mockups show creator sites, forms, and storefronts, while desktop captures demonstrate editing and analytics. Use crisp device-framed screenshots, occasional video panels, and testimonial or portfolio examples rather than decorative illustration. Mockups can contain varied photography and saturated colours; treat those colours as product content, not the brand palette. Let showcase imagery overlap or sit beside copy while keeping surrounding space clean.

## Components

### Top navigation

Slim white header with the Pop Site wordmark on the left and compact Pricing, Blog, Create Account, and Log In links on the right.

### Username signup form

Repeated username field with a .pop.site suffix, adjacent pill-shaped blue Claim your site CTA, and a small no-credit-card reassurance beneath.

### Hero showcase

Centered headline and signup form above a wide arrangement of phone mockups demonstrating varied personal and business sites.

### Feature cards

Three-column section gallery with product screenshots, concise titles, and short explanatory copy; cards use restrained spacing and subtle separation.

### Analytics feature band

Strong blue feature treatment pairing a dashboard screenshot with a white heading, explanatory text, and a compact checklist.

### Testimonial card

Small white card combining a portrait, quote, attribution, and social proof, lifted by a soft measured shadow.

### FAQ accordion

Stacked question rows with plus controls, light neutral surfaces, and concise labels near the footer.

### Measured component styles

- **Primary button** (“.pop.site”): background #fafafc · text #000000 · radius 0px · padding 16px 20px 16px 12px · 400 12px sans-serif
- **Secondary button**: background #e5e5e7 · text #000000 · radius 100px · padding 0px · 400 12px sans-serif
- **Link** (“https://framer.link/isaacdsign”): background #171717 · text #171717 · radius 0px · padding 0px · 400 16px Satoshi
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 500 15px Satoshi
- **Card** (“"My site was done before my coffee was, ”): transparent background · text #000000 · radius 10px · padding 20px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.1) 0px 1px 10px 0px
- **Navigation item** (“Pricing”): transparent background · text #171717 · radius 0px · padding 0px · 500 15px Satoshi

## Do

- Keep the main canvas white and uncluttered.
- Use near-black, tightly tracked headings for hierarchy.
- Repeat the username-plus-domain signup pattern at key conversion points.
- Use blue selectively for primary actions and links.
- Let phone and dashboard mockups demonstrate the product.
- Reserve strong colour bands for specific feature or pricing moments.

## Don't

- Do not turn every section into a tinted panel.
- Do not use heavy borders or dramatic shadows throughout.
- Do not mistake colours inside mockup content for brand colours.
- Do not crowd headings, copy, and controls together.
- Do not replace the clean sans-serif typography with a decorative face.
- Do not vary the repeated signup control styling between sections.

## Agent prompt

Build a new Pop Site page with a bright, mostly white canvas (#ffffff) and a centered, spacious content rhythm. Use Pop Ink (#171717) for compact, tightly tracked Satoshi-style headings and Soft Graphite (#545454) for supporting copy. Use Action Blue (#3b82f6) for prominent signup actions, with Sky Signal (#00a8f5) only as a restrained secondary accent. Pair short copy with clear product screenshots in phone and desktop mockups; varied colour within those images is product content, not the brand palette. Alternate centered hero sections, split feature layouts, and compact grids without losing generous whitespace. Repeat the username field, .pop.site suffix, pill CTA, and small reassurance as a consistent conversion unit. Add soft shadows sparingly and reserve vivid bands for selected feature or pricing sections.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy and signup form above a wide, horizontally arranged phone showcase. | Username signup, Social proof, No-card reassurance | Large tight headline, Pill CTA, Phone mockups |
| 2 | feature-grid | Centered section heading followed by a three-column grid of screenshot-led feature cards. | Feature discovery, Scannable descriptions | Three-column cards, Product screenshots, Light surface treatment |
| 3 | video | Centered heading and signup area above an embedded video with a small attribution card. | Creator endorsement, Signup prompt | Video player, Testimonial attribution |
| 4 | product-showcase | Centered heading and short supporting line above a broad device and editor showcase. | Cross-device reassurance | Large product imagery, Centered typography |
| 5 | gallery | A six-item gallery presented in a compact horizontal row or grid. | Visual browsing | Six image tiles, Theme previews |
| 6 | feature-split | Centered heading and copy above a product image illustrating membership access. | Monetization explanation | Product mockup, Short centered copy |
| 7 | how-it-works | Three concise process cards above a larger overlapping desktop dashboard and phone preview. | Step-by-step explanation, Feature overview | Three-column cards, Layered product mockup |
| 8 | feature-split | Blue horizontal band with the analytics dashboard on one side and feature copy on the other. | Analytics feature education | Blue section band, Dashboard screenshot, Checklist |
| 9 | feature-split | Copy and credibility marks on one side, angled theme examples or video on the other. | Credibility building, Theme discovery | Split layout, Theme imagery, Small trust marks |
| 10 | pricing | Colourful wide pricing band with product mockup opposite a compact offer and signup form. | Free-plan framing, Upgrade pricing, Signup | Purple gradient backdrop, Phone mockup, Pill CTA |
| 11 | cta | Centered call to action and signup form above a wide row of varied phone mockups. | Urgency, Username signup, No-card reassurance | Centered headline, Blue pill CTA, Phone mockup row |
| 12 | faq | Centered signup and heading above a stacked FAQ list, followed by a multi-column footer. | FAQ disclosure, Final signup, Footer navigation | Accordion rows, Plus controls, Compact link columns |

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