Reach

Reach is one more member of your team, on WhatsApp, your website, and email. It knows your services and your real prices; it answers every customer, recommends, books on your real calendar, takes the payment, handles the paperwork, and follows up. Powered by Hilo.

Every customer, reached.

Brand architecture

Reach is an endorsed Hilo product. It shares the family mark — the knot — and the family color, Purple, and adds its own wordmark, its own Ink stage, Lilac on dark, and the thread device. Reach never gets a mark of its own: the knot is the family. Every outward surface (footer, social card, decks, email) carries Powered by Hilo — never inside the Reach lockup itself. Demo businesses Reach invents to show itself (Punch) are sub-brands with one fixed rule: they lock up as [name] by [knot] reach and always disclose that they are fictional.

Logo · light

Logo · dark

On Ink the knot switches from Purple to Lilac (#8F80FF) so it keeps its contrast, and the wordmark goes white. The lockup is never Purple-on-Ink.

Monochrome single-color contexts only

Use the two-color lockups whenever possible. Monochrome is for engraving, embossing, single-color print, and strict co-brand bars. On photography, always the white lockup.

Scale

The knot, the app icon, the avatar

The knot is identical to Hilo’s — same grid, same stroke. What makes it Reach is the company it keeps: the Ink tile with the lowercase wordmark beneath the knot is the Reach app icon and the Reach avatar on every network (Hilo’s tile is Purple; Reach’s is Ink — that is how the two are told apart at a glance). One image for WhatsApp, X, Instagram, LinkedIn, Slack, and the app stores: logo/reach-avatar-1024.png, full-bleed, sized so the knot and wordmark survive a circular crop.

Animated knot

The knot draws itself once along its natural construction direction, then holds. Email-safe GIF (logo/reach-icon-animated.gif), opens on the finished mark so clients that freeze GIFs never show a blank. Play it once per surface — an entrance, not a loader. For web, draw the SVG path with a stroke-dashoffset animation (600–900 ms, cubic-bezier(.22,.61,.36,1)) and honor prefers-reduced-motion.

Spacing the loop is the unit

Minimum sizes

Construction

Color

The thread gradient

Reach Purple → Blue (60%) → Teal, 90°. Reserved for the moments where the thread literally appears — the headline underline, the divider that lands on its dot, the social card. Never on buttons, text fills, or the logo. Proportion across a page: 55 paper/white · 25 ink · 15 soft gray and hairlines · 5 purple. Purple is an accent, never a wash.

The thread the one brand device

The thread is inherited from Hilo and given one job here: it reaches. It travels flat across the section, lifts at the end, and lands on a Teal dot — the customer. Use it as a section divider on Ink, on the social card, and as the hero’s background line. Stroke 3–5, round caps, always the full gradient, always ending in Teal. If it doesn’t reach something, cut it.

Typography one typeface: Geist

Reach has no serif. The serif belongs to Hilo and appears on a Reach surface only inside the Powered by Hilo endorsement. Numbers set with tabular-nums; the system mono only for code. Spanish and English are both first languages — the same scale, the same care.

Components

Claim → proof

It charges before the no-show

Pay-first products collect through Stripe inside the conversation: the session is confirmed when the money is.

• Stripe checkout in the chat
• Pay-first gate per product
• Discount codes that redeem themselves

Reachonline · replies in seconds

Hi, any physio slots on Thursday afternoon?

Yes. Thursday still has 17:30 and 18:15 with Noa at the centre. Which works better?

17:30 please

Booked. Here is the payment to confirm it:Physiotherapy 45 min · €42

Paid · on the calendar · reminder set for Thursday 9:00

Buttons are pills — the one place Reach is rounder than Hilo, because it speaks to front desks. One primary per view, repeated rather than multiplied; on the brand site the label is always Book a demo. Every feature is a claim beside its proof: a short heading, one paragraph, three Teal checks, and a product mock-up that shows the thing happening. Chat mock-ups keep the channel’s own chrome; Reach’s name and Ink avatar are the only brand in them. Cards are white on paper with a hairline border, no shadow at rest; only mock-ups floating over the Ink hero carry one soft shadow.

Voice & tone one more on the team

Reach talks like the best colleague on the front desk: present, concrete, warm, and never in a hurry. It inherits Hilo’s calm intelligence and moves one step closer to the counter. Full guide: BRAND_TONE_OF_VOICE.md · messaging: MESSAGING.md · tokens: DESIGN.md.

Messaging the lines

Words we reach for: team, teammate, one more on the team, real, answers, books, charges, follows up, reached, done, live, in days. Words we ban: chatbot, bot, virtual assistant, automation (as a promise), omnichannel, seamless, engagement, supercharge, 24/7, platform, ecosystem.

Powered by Hilo the endorsement

The social card: Ink stage, the dark lockup, the brand line with the key word carried by the thread, the divider landing on its dot, the domain, and the endorsement. Every Reach card follows this composition.

Demo brands Punch by Reach

Reach invents businesses to show itself. The first is Punch — a wellness center that doesn’t exist, with 12 disciplines, 3 centers, and Punchy, a crochet monkey, all-round athlete, and chief motivation officer. Punch is loud where Reach is plain: black stage, Geist Black uppercase wordmark, neon Punch Purple, gym photography, jokes. It is allowed all of that because of three fixed rules.

Usage rules

Files in this kit

Every file is served from this same location — click to view, or use ↓ to download.