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 u is the person who gives the wisp context and a name. This is the part most tools skip. It's where generic ideas become unmistakably yours.
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 smallest wisp dot loses separation before the letterforms do. Sanity-check the full cluster 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 citrine. One continuous gray canvas
The palette is intentionally narrow. Citrine Signal is the only chromatic brand accent; it works as fill and wash with dark ink on top, never as text. Jewel tones appear only as data marks inside product mockups.
Brand
Citrine Signal
#E5FF5D
The sole everyday chromatic accent: highlights, chips, checks, and contained washes. Pair with dark ink; primary CTAs stay near-black.
Citrine Deep
#B8CF00
Borders, rings, and small solid marks where Signal is too pale. Not a CTA fill.
Foundation (neutrals)
Marketing canvas
#F7F7F8
One continuous brand-gray page; sections never alternate backgrounds.
Background
#FFFFFF
App foundation and contained white surfaces
Foreground
#0A0A0A
Body text, dark UI surfaces
Muted
#F4F4F5
Contained controls, hover fills, and mock chrome
Border
#E6E7E9
Hairlines, dividers, ring-1
Mock data only
Amber
#FFB020
Distinct series inside charts and product mockups only
Signal Blue
#3B9EFF
Distinct series inside charts and product mockups only
Pulse Green
#3AD389
Distinct series inside charts and product mockups only
Iris Violet
#8B7CF6
Distinct series inside charts and product mockups only
Coral
#FF6465
Distinct series inside charts and product mockups only
Typography
Three type voices, each in one lane
Geist runs the entire app and the body of this site. Anybody carries marketing display headlines (h1, h2) with a confident, expressive sans voice. Caveat is reserved for handwritten marketing annotations and job kickers. The monochrome wordmark uses a heavy Geist treatment.
Geist
Sans · body & UI
AaAa
The marketing OS where humans and AI agents ship marketing.
Anybody
Display sans · marketing h1/h2 (Anybody)
AaAa
Where humans and AI agents make marketing that sounds like you.
Caveat
Hand · annotations and job kickers only
AaAa
A note from the margin, never body copy.
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 brand chrome
Purple signals 'AI startup circa 2023'. It may distinguish a data series, never a CTA, section accent, or brand mark.
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 wordmark. Use the icon when space is tight, never a half-cropped wordmark.
Don't recolor the wordmark
Black on light, white on dark. The lockup is fully monochromatic; place Citrine around it, never inside it.