Inside the Pipdot website design
Pipdot is a technology website built with custom code and GSAP. Its pages are built from hero, features, footer, pricing, FAQ, and CTA sections, shown here in full-page captures and a scroll recording. Typography: switzer. Palette: #FFE0E0, #C0C0A0, #808060.
Pip is a calm to-do list and notes app, in development for Mac, Windows, iPhone and the browser. Notes are plain Markdown files you own. Coming soon; nothing to download yet. Its visual style is minimal, typographic, and soft, with navigation bar, hero, and newsletter form among its components.
Why we picked it
A simple orange sphere with two dot eyes gives the app a quiet personality against warm off-white space, while oversized black headlines and generous gaps between short chapters let the page breathe. Dark task-card mockups and a plain Markdown file view make the product's calm, file-based simplicity easy to trust at a glance.
What to look for
- Hero: a specific headline instead of a generic slogan
- Features: benefits framed around what the user gets, not internal capability names
- Footer: grouped navigation with clear column headings
- Pricing: two to four plans with a highlighted recommendation
Questions designers ask
What fonts does Pipdot use?
Pipdot uses switzer, read from the fonts loaded on the captured page.
What is the Pipdot website built with?
The Pipdot website is built with custom code and GSAP, detected when the page was captured.
What colours does the Pipdot website use?
The captured palette includes #FFE0E0, #C0C0A0, and #808060.
What sections does the Pipdot website have?
The Pipdot website includes hero, features, footer, pricing, FAQ, and CTA sections. Each one opens on its own page, so you can compare it with the same section on other websites.
Can I use Pipdot's design for my own project?
Use it as a reference for structure, hierarchy, and style rather than something to copy. The DESIGN.md download summarises Pipdot's typography, colours, and components for your team or an AI tool.
