# piqo.app

Source: https://piqo.app/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, friendly, trustworthy, calm, confident
Colors: #fcfcfc, #dadad6, #3c0aff, #8e8f92, #b1b2b5, #6e6e70, #e3dafd, #7048fc
Type (h1): Quicksand · 36.4px/40.768px · 700 · tracking -0.7644px — "Dead simple, affordable analytics"
Type (h2): Quicksand · 12.25px/18.375px · 400 · tracking 0.1225px — "The analytics behind these products"
Type (h3): Quicksand · 19.25px/25.025px · 400 · tracking -0.09625px — "Revenue on every channel, not just visits."
Type (body): Marlin Soft SQ · 16.8px/27.72px · 400 · tracking -0.1848px — "Privacy-first analytics that ties every visit to signups and Stripe revenue, and"
Type (small): Marlin Soft SQ · 11.2px/16.8px · 700 · tracking 0.896px — "PRICING"
Type (button): Quicksand · 14px/17.5px · 700 · tracking -0.112px — "Start free trial"
Button (primary): "Start free trial" — fill #3600ff, text #ffffff, radius 10px, border 1px, padding 9px 18px, height 38px, type 14px/700
Button (secondary): "Sign in" — text #63635e, radius 10px, border 1px, padding 9px 18px, height 38px, type 14px/700
Button (tertiary): "Features" — text #63635e, radius 6px, border 0px, padding 8px 12px, height 37px, type 14px/500
Radii: 4px (33), 50% (14), 10px (11), 6px (8), 999px (5)

## Images

- Hero (desktop): https://media.lvly.design/library/piqo-app/hero.webp?v=b68e24a3
- Page crop (mid-1): https://media.lvly.design/library/piqo-app/mid-1.webp?v=be676e02
- Page crop (mid-2): https://media.lvly.design/library/piqo-app/mid-2.webp?v=83c2f044
- Hero (mobile): https://media.lvly.design/library/piqo-app/mobile-hero.webp?v=58893ec8
- Full page (desktop): https://media.lvly.design/library/piqo-app/full.jpg?v=04ac2578
- Full page (mobile): https://media.lvly.design/library/piqo-app/mobile-full.jpg?v=8235e516
- Clip preview (mp4): https://media.lvly.design/library/piqo-app/video-jxi49x.preview.mp4?v=b394436a

Piqo Analytics is an indie analytics tool wearing a soft, rounded face: Quicksand headings at 600 with a highlighter-style pale lavender pill behind the word "affordable", Marlin Soft body copy in warm gray, and one hard electric blue-violet (#3600ff) doing all the work on a near-white #fbfbfc ground. The page is essentially a stack of hairline-bordered white cards, each holding a real product screenshot in a bordered frame, with a short left-aligned paragraph beside it that bolds two or three phrases as inline headlines instead of using a heading at all. Nothing shouts except the accent: the CTAs, the "Add a website" button and the chart lines all share it, while a neutral secondary button and gray avatar strip keep the hero grounded. A sticky dark lifetime-deal pill floats at the bottom like a toast, the one dark object on an otherwise pale page. The overall feel is a friendly, budget Plausible: approachable rounded type, tight card grid, and a single loud color.

## Steal-worthy details

- Highlighter pill on one word of the H1: pale lavender (#e3dafd) rounded background behind "affordable", a cheap way to give a plain sans headline a focal point.
- Feature copy without headings: a single gray paragraph in which two or three phrases are set darker/bolder ("replay their whole session", "top queries, pages and week-on-week movers") so the sentence is both headline and body.
- Every section is the same hairline card (1px #dadad6-ish border, 10px radius, white on #fbfbfc) holding a screenshot inside its own bordered frame, two nested rectangles that read as a mounted print.
- Live-state pills inside the mockup: tiny green dot + "14 Live" / "3 online" in a gray outlined pill, repeated per row so the dashboard feels alive.
- The floating lifetime-deal bar: a dark rounded toast with a tiny accent badge ("LIFETIME DEAL"), scarcity copy in gray, and the accent button at its right end, the only dark surface on the page.
- Hero CTA pair: solid accent primary + flat light-gray secondary of identical height and radius, no outline on the secondary.

## Style recipe

Build a light, rounded SaaS page on a near-white ground (#fbfbfc) with white cards. Headings in Quicksand 600 (or a similarly geometric rounded sans), tracking -0.02em, sizes about 40px for the H1 and 26–28px for section copy; body in a soft humanist sans at 16–17px, line-height 1.65, color #6e6e70 with emphasised phrases stepped up to #1a1a1a at weight 600 rather than adding sub-headings. One accent only: #3600ff for primary buttons, links, chart strokes and small badges; a pale tint #e3dafd for highlight pills behind a single headline word and for chart fills. Secondary buttons are flat #efefef with dark text, same height (38px) and radius (10px) as the primary; primary text is white, 14px, weight 700, padding 9px 18px. Cards use a 1px #dadad6 hairline, 10px radius and no shadow; small controls and inputs use 4–6px radii, status pills 999px with a 6px green dot. Screenshots sit inside cards with their own 1px frame and slight inset. Keep sections as a vertical stack of equal-width cards with generous internal padding and text on the left, image on the right. Allowed dark surface: one floating bottom toast in #111 with white text and the accent button inside it. Avoid gradients, drop shadows and decorative illustration; let the accent and the rounded type carry the personality.