# unfair.so

Source: https://unfair.so/
Captured: 2026-09-13
Tags: saas, landing, light, both, editorial, minimal, playful, confident, playful, technical, trustworthy
Colors: #f0f5fe, #cdd1d8, #aaaeb6, #0130ff, #5878fe, #2e57fc, #8b8e95, #99acfe
Type (h1): newPixel · 57.6px/59.904px · 400 · tracking -1.728px — "100+ creators. 0% fee. First post today."
Type (h2): newPixel · 44px/47.52px · 400 · tracking -1.32px — "Creator marketing that ends in revenue"
Type (body): Inter · 18px/26px · 400 — "Creators your buyers already follow. Pick them by their real audience, launch in"
Type (small): Inter · 13px/17px · 400 — "Every engager becomes a lead. Email and LinkedIn, in your CSV."
Type (button): Inter · 16px/24px · 400 — "Try unfair.so"
Button (primary): "Try unfair.so" — fill #212121, text #ffffff, radius 12px, border 0px, padding 0px 20px, height 44px, type 16px/400
Button (secondary): "unfair.so" — text #1a1a1a, radius 0px, border 0px, padding 0px 0px, height 30px, type 26px/400
Radii: 9999px (17), 12px (13), 26px (8), 16px (4), 8px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/unfair-so/hero.webp?v=62e8871d
- Page crop (mid-1): https://media.lvly.design/library/unfair-so/mid-1.webp?v=e1239ede
- Page crop (mid-2): https://media.lvly.design/library/unfair-so/mid-2.webp?v=980c75da
- Hero (mobile): https://media.lvly.design/library/unfair-so/mobile-hero.webp?v=90c69f93
- Full page (desktop): https://media.lvly.design/library/unfair-so/full.jpg?v=e0194566
- Full page (mobile): https://media.lvly.design/library/unfair-so/mobile-full.jpg?v=36bda1c4
- Clip preview (mp4): https://media.lvly.design/library/unfair-so/video-1vxzf1.preview.mp4?v=18063901

A creator-marketing SaaS landing page that pairs a condensed, slightly distressed serif display face (newPixel at ~58px, 400 weight, tight −1.7px tracking) with plain Inter body copy on a near-white, faintly blue-tinted ground (#f4f4f4 → #f0f5fe). The hero is a centered two-line headline written as a terse pitch ("100+ creators. 0% fee. First post today.") flanked by scattered, gently rotated creator avatars with cartoon googly eyes and tiny "N impressions" caption tags — a playful, sticker-like device that humanises a data product. One saturated electric-blue pill (#0130ff) holds the website-entry input and its lighter-blue "Show creators" button, and is the only loud color on the page; everything else is grays, hairline dividers and white cards with soft shadows. Lower sections use white rounded cards with black progress bars and small monospaced all-caps badges ("VERIFIED ONLY"), a near-black 12px-radius primary button, and a "by the teams from" logo strip typeset in pixel-ish monospace caps. The overall read is a data-serious tool wearing an editorial, slightly mischievous face.

## Steal-worthy details

- Headline-as-pitch: three clipped sentences with numbers ("100+ creators. 0% fee. First post today.") set in a distressed condensed serif — the type does the branding, no logo lockup needed.
- Googly-eyed avatar stickers scattered around the hero at random small rotations, each with a checkbox-badge caption card ("6.2K impressions") — social proof rendered as toys.
- The single-color rule: one full-bleed electric-blue (#0130ff) input pill in the hero, a paler blue (#5878fe-ish) button nested inside it; no other saturated element competes above the fold.
- Stacked three-line proof cards under the hero (icon in a tinted square + one sentence each), each a white 12px card with a hairline and soft shadow — a compact "what you get" list instead of a feature grid.
- Audience-breakdown card: label / count rows with thin black progress bars on gray tracks, a tiny five-bar age histogram with one blue bar, and a monospaced uppercase badge — dense analytics made calm.
- Paired CTAs: near-black solid "Try unfair.so" (#212121, 12px radius, 44px tall) next to a white bordered "Book a demo" with a calendar icon — clear primary/secondary hierarchy with zero color.
- Logo strip prefixed by a pixel-heart and "BY THE TEAMS FROM" in wide-tracked monospace caps — the credibility bar gets its own typographic voice.
- Serif display used at three scales (hero, section titles, side headings) while all functional copy stays in Inter — display type is reserved for the argument, never the interface.

## Style recipe

Build on a near-white, faintly cool ground (#f4f4f4 body, #f0f5fe section tints) with white (#ffffff) cards at 12px radius, 1px hairline borders in #cdd1d8 and a soft, low-alpha shadow. Set all display type in a condensed, lightly distressed serif (newPixel or a similar condensed transitional serif) at weight 400, 56–60px for the hero with letter-spacing around −0.03em and line-height ~1.04; section titles 40–48px in the same face. All body and UI text is Inter 400: 18px/26px body, 16px buttons and labels, 12–13px captions in #8b8e95. Use exactly one accent, electric blue #0130ff, and spend it on one large element per screen (a full-width pill input, a single histogram bar, a checkbox badge); nested controls inside it go to a lighter tint (#5878fe / #99acfe). Primary buttons are near-black #212121 on white text, 44px tall, 12px radius, 0 border, 20px horizontal padding; secondary buttons are white with a hairline border and a Lucide-style icon. Radii: 9999px for pills and badges, 12px for cards and buttons, 26px for large hero containers. Add a second, monospaced voice — uppercase, +0.1em tracking, 11–12px — for badges, eyebrow labels and logo-strip captions. Illustrate with photographic or cartoon avatars given oversized googly eyes, cut out on white sticker squares with 4–8px radius, rotated ±3–8° and scattered around headlines, each paired with a small white caption card. Data displays use black bars on light-gray tracks, tabular numbers right-aligned, and hairline row dividers. Keep layouts centered and single-column with generous vertical rhythm; avoid gradients, glass and drop-shadow heavy UI — depth comes from white cards on the tinted ground.