Canonical brand artifact · v1.0
Hello — Brand Guide
The brand is the other person.
What Hello feels like
Essence
You had me at Hello. Live blind voice dates. Talk first; reveal only if you both feel it.
Hello is never the protagonist of its own surfaces. The product is the person on the other side, so every screen stages them, and the interface disappears. Apple's register is admiration — look at it. Ours is longing — listen, someone's there.
The six feelings — and the device that delivers each
Anticipation
Their ring, present before you know anything about them; blur and soft light = almost-here.
Serendipity
The journey — two lights finding each other; motion that feels like weather, not choreography.
Progress
Overlap grammar (§3): closeness you can see increasing.
Safety
Craft. A flawless, seamless page implies a curated pool — plus the plain-spoken line.
Trust
Discretion: dark warm canvas, no faces ever, nothing performative, quiet typography.
Playfulness
Pixar body language: squash & stretch, bounce, mirroring — motion only, never faces.
One family, similar hues
Color & type
Depth comes from texture, blur and gradient — never from adding colors. Their gradient runs rose→coral; you are neutral ivory. Warmth belongs to them.
Palette
Plum Ink
#0C0709 · --ink
Canvas. A warm dark room, not a black screen.
Ivory
rgba(247,240,238,·)
YOUR ring; near-white marks.
Dusty Rose
#E98FA0 · --rose
THEIR ring, gradient start; the blush.
Coral Rose
#E76F63 · --coral-rose
Their gradient end; CTA light.
Cream
#F5EFE6 · rgba ·.66 body
Headlines / body text.
The One
pure white
Reserved (§3.4). Faint rose cast ≤8% allowed in glow.
The rule — light, not fill
Do — rose appears as glowing light: strokes, blooms, blurred gradients
Don't — flat gradient fill
the moment it fills, we look like everyone
Depth stack: film grain ~3% (static) + soft blurred glows at layered depths + warm vignette. Pure black and zero texture are tech signifiers — always warm, always material. Body text ≥4.5:1; rose/coral never used for body text.
Typography — Onest + Instrument Serif
You had me at Hello
Talk first. Reveal only if you both feel it. Modest, warm — the rings are the hero, not the type.
hi. i'm supposed to break the ice.
NEVER Inter / Inter Tight or SF-adjacent faces (Apple trademark distance). The wordmark "hello" is lowercase Onest 600 — never cursive, never script, never a greeting-card face.
The heart of the brand
The circle language
Two imperfect rings of light. Yours: ivory, crisp. Theirs: rose→coral, warm. Slightly irregular radius — hand-drawn in light, slowly rotating so the irregularity travels. Never faces, eyes or features — expression is motion only. Never perfect circles, except the One.
3.1 · The overlap grammar — compatibility & progression as geometry
Strangers
haven't met
Lobby · browse-free waiting
First hello
the round begins
Round start animation
Vibing
conversation warming
Mid-round · predicted compatibility, low
Spark
real chemistry
"Talk again" · predicted compatibility, high
Mutual
both said yes
The reveal moment
The One
two became one
Post-reveal · reserved
Compatibility, without a score
Match confidence is SHOWN as degree of overlap — no numbers, no ranking, just two rings drawn closer or further. Warmer and less judgmental than a percentage.
Progression over time
A user's history with one person is the same two rings, closer each round. Weekly recaps can replay the drift.
3.2 · Motion grammar — what each movement means
Audio vibration
A voice, speaking. 8–12Hz radial oscillation in speech-cadence bursts; live audio drives it — the ring IS the voice meter.
Ripples
Sound made visible; fired on strong speech bursts.
Squash & stretch
Playfulness; joy. Anticipation dips, overshoot settles — springy ease, volume-preserving.
Blush
Being noticed; noticing. Their glow deepens + a shy dip.
Mirroring
Chemistry — one ring replays the other's motion a beat later, smaller. Unconscious mimicry.
Stillness
Listening.
Convergence
Progress. Always scroll- or interaction-earned, never automatic.
Amplitudes stay small: 2–10px, ≤9% deform, volume-preserving. Cute, not cartoon. Character moves use the springy ease; everything else uses the calm ease (§5).
3.3 · The journey — scroll grammar for narrative pages
Talking
apart, vibrating
Approach
scroll-driven, monotonic, hesitant
The silent merge
an empty stretch, no words
Ignition
full overlap flares white
The One
breathing, presiding over the only CTA
Continuity rule: the rings never teleport or vanish mid-journey; they dim — never hide — while text is read. Reduced-motion = staged static states.
3.4 · The One
two became one
The only perfect circle and the only pure white in the brand. Reserved for achieved mutuality — the mutual reveal in-product, the final CTA moment in marketing. It must stay scarce to stay meaningful. Never use it decoratively.
3.5 · The mark
Lowercase "hello" + the two-ring mark — rings at ~25% overlap, the vibing state — with a rose dot option. Never cursive. The two-ring mark alone is the app icon seed.
The dark must feel like material, not void
Materials
Grain
Static SVG turbulence, ~3% opacity, overlaid on every dark surface.
Glass — restrained
Frost appears only where light passes through it meaningfully — the CTA pill: rose light glowing through frost from behind, brightening on hover ("the person leaning closer"). Glass = the interface; light behind it = the person. ≤3 backdrop-filter surfaces per viewport; always a solid fallback.
Blur — anonymity
Blurred = not-yet-revealed. Anticipation, not obfuscation. Nothing human ever fully sharpens except at mutual reveal.
Calm by default, springy in character
Motion tokens
| Token | Value | Use |
|---|---|---|
| --ease · calm | cubic-bezier(.22, 1, .36, 1) | All UI: hovers 150–250ms, reveals 400–600ms |
| --ease-play · springy | cubic-bezier(.34, 1.56, .64, 1) | Ring character moves only |
| Breath | 6–9s cycles, sine | Ambient life: rings, the One, glows |
| Press | scale .97, 120ms | Every button |
| Scroll-buzz | amp ≈ lerped |scroll velocity| · ~300ms attack / ~700ms decay | Rings speak as you scroll |
Hover lifts on the calm ease; press depresses to .97 in 120ms. Reduced-motion: every animated device has a designed static state — never just "off and empty". Zero layout shift; font-display swap + preconnect.
A friend who believes in you, talking to a frustrated dater
Voice & copy
The canon — four beats
Dating apps are performative. So you end up wasting time, energy & hope on people you don't have chemistry with.
Hello is a live dating experience — real singles on short, blind voice dates. Say what you truly feel. Reveal yourself if you feel a spark.
Every round, Hello learns more about who you'd vibe with — from real conversations, not curated profiles.
Chemistry first. Everything else, after. — Just show up and say hello.
Standing lines
Hard rules
- Never say match, swipe or profile.
- No exclamation points.
- Never speak as the company when you can stage the person.
- Italic serif = the human register, used sparingly — 1–2 words per beat.
Reference implementations live in the Blush page
Components
Round card
Reveal card
It's mutual.
Say hi to Maya. Blurred avatar, rose glow — no face.
CTA — The Ring (the button is circle language)
Glass with rose light behind it; press-depress. ONE per narrative page, at the journey's end.
Nav — quiet, left-aligned
Wordmark + one link; a full-width ink scrim gradient behind it — content dims passing under, never collides.
Applying the system to the prototype user flow
The product flow
Waitlist signup
The journey page — this repo's Blush page is the template.
"You have a date" → lobby
Your ring alone, breathing; theirs approaches from the edge as the countdown runs — anticipation is their light arriving.
Mic check
Your ring vibrates to YOUR live mic input — you see your own voice. It also teaches the metaphor.
In-round
Both rings, tangent → drifting closer; each vibrates to its speaker's LIVE audio — the ring is the voice. Prompt and game cards deal between them.
Countdown ending
The rings' rotation slows; a gentle dimming — never a harsh timer.
Decision
Shown as geometry: reveal = push the rings together; talk again = hold at vesica; walk away = they drift apart with grace. Never a red X — progression, not rejection.
Mutual reveal
Ignition → the One → then the person.
No pairing tonight
Your ring joined by the city's distant lights — never alone in a void. "Someone's hoping next Friday."
Adjacency — who we rhyme with, and the separation
Risks & separations
Instagram story rings
Mitigated: dusty rose (not IG orange-pink), irregular hand-light rings, two-in-relationship — IG rings are solo.
Tinder
Exited the coral-orange family; rose is blush, not flame.
Siri / AI orbs
Our forms are imperfect, there are TWO, they flirt, and they go quiet.
Glossier / beauty pink
The dustiness + plum-dark canvas + light-not-fill keep us out of packaging-pink — tenderness at night, not beauty-counter daylight.
Apple
Behavior borrowed (seamlessness, restraint), look not: no SF-adjacent type, no cursive hello, no pill nav, no product-pedestal shots.
Inventory
Assets
- variant-bd-duet-blush/index.html — the brand page: living reference implementation, single file.
- BRAND-GUIDE.html — this visual brand book (BRAND-GUIDE.md, rendered).
- variant-bg / bh / bi — motion personality studies (Playful / Shy / Playmates) — source material for product motion states.
- CREATIVE-DIRECTION.md — rationale + standing rules · BRAND-EXPLORATION.md — 12-round history.
- Retired variants remain on disk for reference.
Founder decisions pending
Open items
- Final wordmark lockup — two-ring mark position, dot or no dot.
- Whether ring personality (shy → playmates → playful) becomes a product state machine tied to conversation stage.
- Real waitlist backend for the production page — the current CTA is visual-only.
- Name / domain confirmation (STRATEGY open item) before any public deploy.