wisp
A thin, fleeting trace. A coil of smoke. A will-o'-the-wisp drifting over the marshes. In English, a wisp of an idea is the moment a thought begins to form, before it has shape, before it can be lost. Every great piece of content starts here.
Brand
Every great piece of content starts as a wisp.
A flicker of an idea, before it has shape, before it can be lost. Wispu is the place where the wisp lands, and becomes yours. This page is the public reference for the brand: the story, the name, the mark, the voice. Use it to write about us, design with us, or build alongside us.
The name
Wispu = wisp + u
Two halves, each carrying half the product.
+ u
Yours. Your brand, your voice, your point of view. The dot above the dotless ı in the wordmark marks the moment the wisp lands and gets a name. This is the part most tools skip. It's where ideas stop being yours and start sounding like everyone else's.
The product does what the name promises: catches the wisp, grounds it in your brand, and turns it into something that ships.
Logo
Iso + wordmark, side by side
The lockup pairs the bare wisp ellipsis (three dots, no plate) with the lowercase wordmark. Iso and wordmark share the same fill so the lockup reads as one typographic unit. The lockup is fully monochromatic, no chromatic event — the 'i' uses its native typography tittle, no floating coloured dot. The squircle plate is reserved for the favicon, where the iso has to fight for attention in a browser tab. Two variants ship: dark fill on light surfaces, light fill on dark. Always render at sizes that keep the smallest iso dot ≥3px wide; below that, the cluster collapses into a single visual mass.
Clear space
Reserve at least the height of the wordmark itself on every side. No text, no ornament, no edge of a container inside that gutter.
Min size
Don't render below 80px wide. The tittle dot loses readability before the letterforms do. Sanity-check the dot at your target size.
Icon
An ellipsis, suspended
Three dots arranged as a wisp trail. The trio reads as the ellipsis punctuation, a thought still forming, suspended, trailing off. That is the brand-name's etymology drawn into the iso: a wisp of an idea is the moment a thought begins to form, before it has shape. On the favicon the dots render in a white-to-soft-grey gradient, like vapor on the black plate. In the lockup the dots flatten to the wordmark fill so iso and wordmark read as one monochromatic typographic unit. Survives at 16×16 px.
16px
32px
64px
128px
16px on dark
32px on dark
64px on dark
128px on dark
Color
One signature green. A neutral foundation. Five soft persona accents
The palette is intentionally narrow. The Wispu green is the only chromatic accent the app uses. The five marketing pastels live exclusively on the marketing site, applied as illustration tints and persona accents.
Brand
Wispu Green
#10B981
Primary CTA, wordmark tittle, favicon idea-dot, footer-link underline
Green Hover
#0EA66B
Primary CTA hover state
Foundation (neutrals)
Background
#FFFFFF
Page background, light mode
Foreground
#252525
Body text, dark UI surfaces
Muted
#F5F5F5
Secondary surfaces, tinted bands
Border
#E8E8E8
Hairlines, dividers, ring-1
Marketing cream
#F5F4EE
Cream warm. Used only on (marketing) routes
Marketing: persona accents
Peach
#F4C89A
Persona tile: Personal brands
Teal
#9ECECF
Persona tile: Agencies (NOT the brand green)
Mustard
#E1CD7E
Persona tile: In-house teams
Lavender
#C5B8E0
Persona tile: Business owners
Rose
#E5A9AC
Quiet accent: testimonials, illustrations
Typography
Two typefaces: one for prose, one for editorial display
Geist runs the entire app and the body of this site. Fraunces carries marketing display headlines (h1, h2) where editorial weight is needed. The wordmark itself is set in a system-bold sans (a separate concern from body type).
Geist
Sans · body & UI
AaAa
The marketing OS where humans and AI agents ship marketing.
Fraunces
Display serif · marketing h1/h2
AaAa
Where humans and AI agents collaborate to make epic marketing.
Type scale (marketing)
Display · h1
Headline
Section · h2
Section heading
Lead
Lead paragraph below the headline.
Body
Body text. The default reading size for prose.
Small
Captions, footnotes, metadata.
Overline
Section label
Voice
Direct. Specific. No marketing slop
Wispu talks like a precision instrument. Opinionated, plainspoken, no buzzwords. It assumes the reader is competent.
we say this
“One idea becomes ten formats. Every draft starts from your brand context, not from a blank prompt.”
we don't say this
“Unlock revolutionary AI-powered content workflows that supercharge your team's productivity at scale.”
- Use the customer's words, not category jargon.
- Specific numbers beat adjectives. "4× the volume" > "more volume".
- Verbs over nouns. "Ship marketing" beats "marketing solutions".
- No exclamation marks. No "unlock". No "empower".
- Lowercase product name in body copy: wispu is a tool, not a deity.
- Spanish-speaking team: Spanish in chat, English in product copy and code.
Don'ts
What we avoid, and why
No rainbow gradients
The brand has one accent. Multi-color gradients drag us into generative-AI-image-tool territory, which is not our category.
No drop shadows on text
Shadows belong on cards, modals, and popovers. Never on type. Use weight + color contrast instead.
No purple
Purple signals "AI startup circa 2023". Stay green-and-neutral.
No emoji as UI
Decorative emoji in product UI reads as toy. Reserve them for messaging surfaces and chat output.
Don't crop the wordmark
Always render the full word + tittle dot. Use the icon when space is tight, never a half-cropped wordmark.
Don't recolor the wordmark
Black on light, white on dark. The teal tittle dot is the only chromatic event in the brand.