Brand Kit
The brand at a glance
Logo, icon, palette, typography, components. The foundation that runs through every Wispu surface, on the product and on this site.
Logo
Wordmark: the lowercase Latin name with the teal i-tittle dot
Two variants ship: the dark wordmark for light surfaces and the light wordmark for dark surfaces. Always render at sizes that keep the tittle dot ≥4px tall. Below that, the signature gesture disappears and the brand reads as a generic name.
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.
File names
Naming uses background-color, not glyph-color: logo-white-v2.svg = the variant for white/light backgrounds (its fill is dark).
Icon
Idea → outputs. The brand metaphor in four marks
One vivid teal dot on the left ("the idea") plus three smaller white dots fading right ("the outputs"). It compresses Wispu's value prop into the smallest possible silhouette and survives at 16×16 px.
16px
32px
64px
128px
16px on dark
32px on dark
64px on dark
128px on dark
Implementation lives at app/icon.svg. Geometry is hand-pathed (no font dependency) and ASCII-only (favicon image sandbox falls back to ASCII parsing in some browsers, and a UTF-8 em-dash inside a comment is enough to break the parse silently).
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
Brand accent
oklch(0.69 0.17 162)
Primary CTA, wordmark tittle, favicon idea-dot, footer-link underline
Green Hover
#0EA66B
oklch(0.62 0.17 162)
Primary CTA hover state
Foundation (neutrals)
Background
#FFFFFF
--background
oklch(1 0 0)
Page background, light mode
Foreground
#252525
--foreground
oklch(0.145 0 0)
Body text, dark UI surfaces
Muted
#F5F5F5
--muted
oklch(0.96 0 0)
Secondary surfaces, tinted bands
Border
#E8E8E8
--border
oklch(0.92 0 0)
Hairlines, dividers, ring-1
Marketing cream
#F5F4EE
--marketing-bg
Cream warm. Used only on (marketing) routes
Marketing: persona accents
Peach
#F4C89A
--m-peach
oklch(0.85 0.08 60)
Persona tile: Creators
Teal
#9ECECF
--m-teal
oklch(0.78 0.10 195)
Persona tile: Agencies (NOT the brand green)
Mustard
#E1CD7E
--m-mustard
oklch(0.86 0.10 92)
Persona tile: In-house teams
Lavender
#C5B8E0
--m-lavender
oklch(0.82 0.07 295)
Persona tile: Business owners
Rose
#E5A9AC
--m-rose
oklch(0.84 0.07 15)
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
The marketing OS where humans and AI agents ship marketing.
Fraunces
Display serif · marketing h1/h2
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
Components
Buttons, links, badges. The atoms that build everything else
Hover the primary CTA to see the shimmer sweep. The default treatment is shared between this site and the app. Only the tonality of the surface around it changes.
Primary CTA
Flat green + shimmer-on-hover. Used for the single most important action on a surface.
Secondary
Outline ring + plain face. For the secondary action when a primary already exists.
Ghost
No chrome until hover. For inline navigation and tertiary actions.
Footer-link hover treatment
Hover the link below to see the teal pen-stroke underline draw in from the left with a slight overshoot.
Hover me: animated underline previewMotion
Three eases cover everything
The marketing site uses motion for editorial pacing, never for decoration. The app uses motion sparingly: focus indicators, modal transitions, and intentional state changes only.
ease-out-quint
cubic-bezier(0.22, 1, 0.36, 1)Duration · 600–800ms
Page-load reveal animations. Sharp acceleration into a soft landing. Feels like an object hitting a soft floor.
ease-out (fast)
cubic-bezier(0, 0, 0.2, 1)Duration · 150–250ms
Hover transitions on buttons, links, and interactive surfaces.
overshoot-spring
cubic-bezier(0.34, 1.56, 0.64, 1)Duration · 400–500ms
Underlines and small accents that benefit from a slight pop on entry. The line briefly exceeds 100% then settles.
Always respect prefers-reduced-motion. globals.css ships a wildcard rule that suppresses every decorative animation when the user opts out.
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.