Signal Blue
#3b82f6Primary CTA fills, active link borders, key accent — the only chromatic color allowed to draw the eye
Pop Site
pop.siteWebsite preview
The design language
Pop Site is a stark typographic gallery: an almost exclusively white canvas where oversized Satoshi display headlines — often 93–120px — carry the entire visual weight. A single vivid blue (#3b82f6) is the only chromatic note in the system, reserved exclusively for primary CTAs, active links, and subtle surface washes; everything else is monochrome grays and blacks at near-maximum contrast. Components are quiet and confident: pill-shaped buttons, hairline borders, softly rounded cards, and phone mockups as hero subjects. The density is airy and editorial, with comfortable spacing between sections and text that breathes. This is a builder site that wants to feel like a product page for the product it helps you build — Apple-adjacent restraint, Linear-grade precision, Carrd-grade simplicity.
Color palette
brand
Link Blue
#6ea5ffLighter blue for link text and secondary outlined actions
accent
Wash Blue
#e3eeffSoft blue surface wash for highlighted sections and subtle backgrounds
neutral
Page White
#ffffffPage background, card surfaces, button text on blue
Ink Black
#000000Primary heading text, heavy borders, icon fills, image framing
Charcoal
#171717Body text, nav text, secondary borders — slightly softer than pure black for long-form readability
Granite
#5e5e5eMuted helper text, secondary descriptions
Slate
#6e6e73Tertiary text, disabled states, fine metadata
Mist
#d2d2d7Hairline dividers, nav accents, light surface variation
Typography
Type scale
Minor Third (1.2) · 18px basedisplay-xl
120px · 500 · 0.9 · -7.08px trackingThe quick brown fox jumps
display
93px · 500 · 1 · -4.65px trackingThe quick brown fox jumps
heading
53px · 500 · 1.2 · -2.44px trackingThe quick brown fox jumps
subheading
21px · 500 · 1.3 · -0.63px trackingThe quick brown fox jumps
body
15px · 500 · 1.4 · 0px trackingThe quick brown fox jumps
text-14
14px · 400 · 1.2The quick brown fox jumps
text-13
13px · 400 · 1.2The quick brown fox jumps
caption
12px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
Satoshi
- Weights
- 400, 500, 700
- Sizes
- 12, 13, 15, 21, 53, 93, 120px
- Line height
- 0.90, 1.00, 1.20, 1.30, 1.40
- Letter spacing
- -7.08px at 120px, -4.65px at 93px, -2.44px at 53px, -0.63px at 21px, normal at 12–15px
- Fallback
- Inter, General Sans, Switzer
Primary display and UI font — used for all headlines at extreme sizes (93–120px) with weight 700 and tight tracking; also for body at 15px weight 400. Satoshi's geometric, slightly humanist forms give the type a modern, builder-friendly character. The decision to run 93–120px display sizes is signature — most builder sites cap at 48–64px, and this scale creates editorial monumentality.
Additional typeface
Inter
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.20
- Fallback
- system-ui, -apple-system
Input field text — the only context where Inter appears, used for form input legibility where Satoshi's tighter geometry could feel cramped.
Additional typeface
system-ui
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.20
- Fallback
- sans-serif
System fallback and minor inline elements. Acts as the safety net for Satoshi; not visually load-bearing.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 12-16px
Border radius
cards
8pximages
22pxinputs
8pxbuttons
9999pxsmallImages
42pxfeatureCards
22pxsecondaryButtons
26pxSpacing scale
2px3px5px6px7px8px9px10px12px13px15px16px19px20px24px33px36px40px60px80px120px126pxGuidelines
Do
- Use Satoshi weight 700 at 53–120px for all section headlines — the oversized display type is the visual signature
- Reserve #3b82f6 exclusively for primary CTAs and active link states — never use it for decoration, icons, or backgrounds outside of action contexts
- Apply 1px borders in #171717 or #000000 for card definition rather than relying on drop shadows
- Use radius 9999px for all primary buttons, badges, and form containers — full pills are non-negotiable
- Set letter-spacing to -0.05em or tighter on any text 53px and above to prevent the massive glyphs from looking loose
- Show the product in context using phone mockups — let the sites people can build be the visual content, not illustrations
- Keep body text in Satoshi weight 400 at 15px with #171717 — do not use pure #000000 for long-form reading
Don’t
- Do not use any color other than #3b82f6 as a chromatic accent — the system is intentionally near-monochrome
- Do not apply drop shadows to cards, buttons, or section blocks — depth comes from borders and radius, not elevation
- Do not use display sizes below 53px for section headlines — the scale jump from 21px body to 53px+ display is intentional and creates the editorial rhythm
- Do not use more than one primary blue button per viewport — multiple blue CTAs dilute the signal
- Do not round buttons at 4–8px — the system demands pill (9999px) or large (22–26px) radius only
- Do not introduce gradients as background fills — gradients only appear inside phone mockup content, never on the host page
- Do not use serif, monospace, or decorative display fonts — Satoshi and system-ui are the entire type system
Components
Primary Pill Button
Main conversion action (Claim, Get Started, Sign Up)Background #3b82f6, text #ffffff, Satoshi weight 500 at 15px. Fully rounded radius (9999px). Padding 12px 24px. No border. Hover: slight darken to #2f6fd6. This is the only element in the system that carries full color saturation — treat it as scarce, one per screen maximum.
Secondary Pill Button
Secondary action or form suffixBackground #ffffff, border 1px solid #171717, text #171717. Radius 9999px. Padding 10px 20px. Satoshi weight 500 at 15px. Used for the .pop.site suffix in the claim form, ghost actions, and complementary CTAs.
Tertiary Rounded Button
Medium-prominence action with slight radius instead of full pillRadius 26px instead of pill. Same color and border logic as secondary. Used when a pill feels too playful and a sharper button feels too rigid — a middle ground for inline actions.
Inline Claim Form
Hero lead-capture combining input + suffix + button in a single pillContainer is a white pill (radius 9999px) with 1px #171717 border, internally containing: a text input with placeholder 'yourname' (borderless, Satoshi 15px weight 400), a suffix badge '.pop.site' styled as a secondary button, and the primary blue CTA. The whole assembly reads as one unified control — the input is borderless to merge into the pill.
Social Proof Badge
Small inline pill above hero headlinesCentered above the hero. Light text on white, Satoshi 13px weight 400, inside a thin-bordered pill (radius 9999px, 1px #d2d2d7 border). The badge text includes a bolded brand name for emphasis.
Hero Phone Mockup Carousel
Visual showcase of product output — actual sites built on the platformRow of overlapping phone frames (iPhone proportions), each showing a real site template. Frames have 22px radius with black borders. Arranged in a slight fanned/overlapping layout with drop shadows only on the frames (0 20px 40px rgba(0,0,0,0.12)) to separate them from the canvas. The phones ARE the hero — no illustration, no abstract graphics.
Section Showcase Card
Category tile showing a section type (Links, Socials, Forms, etc.)White card, 8px radius, 1px #171717 border, padding 20px. Contains: a phone-screen preview image at top (rounded 8px) with light gray surface (#f5f5f7), a title in Satoshi weight 500 at 21px, and a 2–3 line description in Satoshi weight 400 at 13px in #5e5e5e. Arranged in a 3-column grid.
Phone Preview Frame
Static phone mockup used in cards and content blocksBlack-bordered phone frame with 22px outer radius, showing a mini site template inside. The screen content is white with black text and occasional blue CTA — mirroring the system it demos. Inner content radius 18–20px to feel natural inside the frame.
Navigation Bar
Top-of-page global navigationWhite background, no visible border (blends into page), no shadow. Left: brand wordmark 'pop site*' in Satoshi weight 700 at ~18px with an asterisk. Right: text-only nav links (Pricing, Sections, Blog, Featured, Memberships) in Satoshi weight 400 at 13–15px, spaced with 13px gaps, plus 'Create Account' and 'Log In' text links. No background buttons in the nav — everything is text.
Section Heading Block
Centered display headline introducing each major sectionCentered alignment. Display-size Satoshi weight 700 at 53–93px in #000000, line-height 1.0–1.1, with negative letter-spacing matching the size. Followed by a 1–2 line subhead in Satoshi 15–21px weight 400 in #5e5e5e. A small 'See all below' link in #3b82f6 sits below. Generous margin: 40–60px top and bottom.
Footer
Site footer with links and brand markWhite background with 22px top border-radius on inner blocks. Satoshi weight 400 at 13px in #5e5e5 for link text. Minimal, often just a few link columns. No heavy background color — stays in the white system.
Floating Action Widget
Small dark circular button in bottom-right (chat/help trigger)40px circle, #171717 background, white icon inside. Sits absolutely positioned in viewport corner. Subtle but constant presence across the page.
Surfaces & elevation
Level 0
Canvas
#ffffffBase page background — dominant surface
Level 1
Card
#ffffffWhite cards and content blocks sit directly on the canvas with hairline borders instead of shadows
Level 2
Highlight Wash
#e3eeffSoft blue-tinted surface for featured/highlighted content blocks
The design system deliberately avoids drop shadows on the main site. Depth is communicated through hairline 1px borders (#171717 or #000000), large corner radii (22–42px on images), and the contrast between white surfaces and black content. Phone mockups and device frames rely on their own inherent edges rather than cast shadows. If shadows are needed for floating elements, use 0 2px 8px rgba(0,0,0,0.08) at most — never the heavy multi-stop shadows common in card-based SaaS sites.
Layout & imagery
Imagery
The visual language is product-led and almost entirely photographic-mockup-driven. The only imagery is phone mockups showing real site templates built on Pop Site — no stock photography, no illustrations, no abstract graphics. Phone frames are tightly cropped with black bezels and 22px outer radius, arranged in overlapping fan compositions for hero sections and in neat grids for category cards. The imagery is self-referential: the product IS the visual content. No lifestyle photography, no people, no environments. Icons (when present) are minimal line-style glyphs in #171717, 1.5–2px stroke, used sparingly. Empty states and decorative spaces are deliberately empty — the white canvas is the design.
Design notes
Agent Guide
**Quick Color Reference** - background: #ffffff - text/primary: #171717 - text/muted: #5e5e5e or #6e6e73 - border: #171717 or #000000 - accent: #3b82f6 - primary action: #3b82f6 (filled action) **3-5 Example Component Prompts** 1. Create a Primary Action Button: #3b82f6 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. **3-column section showcase grid**: White card on white background, 8px radius, 1px #171717 border, 20px padding. Each card contains: a phone-screen preview image at top (8px radius, #f5f5f7 surface), a title in Satoshi 21px weight 500, #000000, and a description in Satoshi 13px weight 400, #5e5e5e. Three cards per row with 16–20px gap. Above the grid: centered display heading 'Sections designed to get clicks, leads, and sales' at 53px Satoshi weight 700, #000000, letter-spacing -2.44px. 3. **Primary CTA pill button**: Background #3b82f6, text #ffffff, Satoshi 15px weight 500, padding 12px 24px, border-radius 9999px, no border. This is the only chromatic element in the system — use it once per viewport maximum. 4. **Top navigation bar**: White background, no border, no shadow. Left: 'pop site*' wordmark in Satoshi 18px weight 700, #000000 (the asterisk is part of the brand). Right: 5–7 text links in Satoshi 15px weight 400, #171717, spaced 13px apart. No background buttons, no icons, no search bar. 5. **Centered section heading block**: Centered alignment. Display headline in Satoshi weight 700 at 53–93px, #000000, line-height 1.0–1.1, letter-spacing -2.44px to -4.65px. Below: 1–2 line subhead in Satoshi 15–21px weight 400, #5e5e5e. Below that: small text link 'See all below' in #3b82f6, Satoshi 13px weight 500. Vertical margins: 40–60px top and bottom.
Similar brands
Linear
Same oversized geometric display type on pure white canvas with a single accent color, pill-shaped primary actions, and hairline-border cards instead of shadows
Framer
Same builder-product aesthetic with phone mockups as hero content, dramatic type scale jumps, and minimal monochrome palette punctuated by one chromatic CTA
Carrd
Same one-page-builder simplicity with bold centered headlines, inline claim forms, and white-on-black-with-blue-accent visual restraint
Vercel
Same stark white gallery-wall approach with monumental headline type, monochromatic body, and blue as the sole signal color for primary actions
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
