Prosper

Overview

Prosper sells outbound prospecting as a service to freelancers and independent consultants: it cross-references buying signals, then runs LinkedIn and email sequences until a meeting lands in the client's calendar. The aesthetic movement is best described as Warm Editorial Minimalism: a paper-toned canvas (#f7f7f4), near-black ink (#111214) and a single saturated orange accent (#fa5418) carry all the energy, with a faint 1px grid texture behind the hero to suggest a planning sheet rather than a sales funnel. The emotional response is calm confidence with a hint of urgency.

The voice is direct, French, and numerical: it states outcomes ("Chaque semaine, on décroche des RDV"), quantifies offers (885 € HT/mois, 10 premiers clients) and avoids superlatives. Headlines use the accent to highlight a single key phrase, never more than two words. Example sentence: "Tarif de lancement : 885 € HT/mois pour les 10 premiers clients."

Colors

The brand accent is Prosper Orange (#fa5418), used exclusively for primary calls to action, the active nav indicator, the highlighted phrase inside the H1 (rendered with an aurora text-fill from #fc8b62 to #af3b11), and the pulsing live dot. Its hover state darkens to #e14b15, and deeper ink variant #c13a0a is reserved for orange text on tinted backgrounds. Orange-tint surfaces (#fff1ea, #f6e1d7) sit behind accent-coloured labels.

Neutrals form the surface stack: paper #f7f7f4 is the page canvas, #ffffff is used for raised pills and cards, #f2f2ef for sunken hub panels, and ink #111214 for headings and primary buttons' labels. Secondary text uses mute-2 #5e6067 and tertiary meta text uses mute #8b8d93. A LinkedIn blue #0a66c2 appears only as a channel marker and must never be used for int

Typography

A single family, Geist Variable, carries the entire system, with Geist Mono Variable reserved for data-like microcopy such as the launch-price line. Display and headline levels use weight 500 with aggressive negative tracking: the H1 at 69.12px uses letter-spacing -3.8016px (about -0.055em) and a line-height of 1.04 (71.88px), so lines read as a dense, poster-like block. The H2 at 54px uses -0.04em tracking.

Body copy is 16px / 24px with -0.01em tracking, and the hero subtitle steps up to 18px with max-width 60ch. Apply font-variant-numeric: tabular-nums to price figures so "885 €" aligns in comparison tables. Labels on pills and CTAs use 17px weight 500. Uppercase is avoided entirely.

Layout

The layout is a fixed-width centred container of 1240px (class .wrap) with horizontal padding of clamp(16px, 3vw, 32px). Sections stack vertically with generous vertical rhythm; the hero starts 156px from the top to clear the floating header. Spacing follows a 4px-derived scale: xs 5px for tight pairs, sm 7px for chip gaps, md 11px for button padding, lg 18px for card internals, xl 22px and 2xl 26px for section inner rhythm. Hero stacks use gap-6 (24px) between eyebrow, headline, copy and CTA. Use the gutter token 24px between grid columns and reserve the largest vertical gaps for section separation.

Elevation & Depth

Hierarchy is conveyed through soft, cool-tinted shadows rather than borders. Pills and the eyebrow chip use shadow-pill-like layering: 0 2px 4px rgb(17 18 20 / .05), 0 14px 32px -12px rgb(17 18 20 / .3). Cards use --shadow-card: 0 30px 60px -20px #11121414, 0 10px 30px -12px #1112140d, lifting to --shadow-card-hover: 0 42px 84px -24px #11121421, 0 14px 36px -12px #11121414 on hover. The floating header switches to a pill (36px radius, 920px max width) with a white 75% translucent backdrop of blur 12px and --shadow-header: 0 1px 1px #11121405, 0 4px 8px #11121408, 0 12px 24px #1112140d, 0 32px

Shapes

The shape language is Soft-Geometric Pill: buttons and CTAs are full-capsule (62px radius, a true pill at 48–62px height), eyebrow chips and nav items use fully rounded 9999px, and cards and feature panels use 32px. Inputs and small tags sit at 12px and 2px respectively to read as more technical. The 50% radius is reserved for avatars, status dots and the circular icon chip inside each CTA's trailing pip, which holds the pepper icon on a 26–36px disc.

Components

Action Elements The primary CTA (`button-primary`) is a 62px-tall orange capsule with a 26px left padding and a trailing 36px ink disc containing the arrow glyph. On hover it transitions background to #e14b15 over 200ms with ease-out, and the arrow nudges 3px right over 300ms using --ease-spring cubic-bezier(.34, 1.56, .64, 1). The header variant (`cta-sm`) is 40px tall with 14px horizontal padding. The secondary action is a white pill with a 1px white border and the shadow-pill layering, transitioning to surface-container-high on hover.

Containers & Surfaces Cards (`card`) sit on surface-container-lowest with 32px radius and 18px internal padding; hover lifts them via the shadow-card-hover stack and background to surface-bright over 650ms ease-out. Eyebrow chips (`pill-eyebrow`)

Do's and Don'ts

**Do**

• Do reserve Prosper Orange (#fa5418) exclusively for primary CTAs, active indicators and the single highlighted headline phrase.
• Do keep the H1 at tight -0.055em letter-spacing on Geist 500 to preserve the poster-like density.
• Do pair every orange CTA with a near-black circular trailing icon to maintain the brand's pip motif.
• Do set prices and data in Geist Mono with tabular-nums so figures stay aligned.

**Don't**

• Don't introduce a second saturated accent alongside orange; LinkedIn blue appears only as channel metadata.
• Don't use pure black (#000) for text; ink #111214 is the only dark value.
• Don't apply uppercase transforms or heavy weights above 600 on any label.
• Don't place shadows with warm tints; all elevation uses the cool ink-based rgba(17,18,20,…) layering.