--- version: 1 name: Reach description: One more on the team. Plain, warm, concrete — Ink and Purple, Geist throughout, a thread that reaches every customer. colors: primary: "#6C5CFF" # Reach Purple — CTAs, links, the knot on light; shared with Hilo on-primary: "#FFFFFF" lilac: "#8F80FF" # the knot and links on dark surfaces ink: "#0D1133" # hero and nav surface, primary text, wordmark on light on-ink: "#FFFFFF" blue: "#4A90E2" # the thread's transit color; data viz teal: "#00B894" # the reached dot; confirmations, done, success purple-tint: "#ECEAFB" # chips, selection, quiet emphasis purple-hover: "#5B4CE6" purple-active: "#5140C8" lavender: "#C9B8FF" # labels and quotes on very dark surfaces paper: "#F8F8FC" # page background, alternating sections soft-gray: "#F5F5F7" # cards, inputs, chat bubbles line: "#E5E4F2" # hairline borders text-secondary: "#505570" text-secondary-dark: "#B9B8D0" surface-dark: "#17171A" # dashboard and Punch surfaces surface-dark-2: "#26262B" line-dark: "#3A3A40" typography: display: fontFamily: "Geist, -apple-system, sans-serif" fontSize: "clamp(44px, 7vw, 84px)" fontWeight: 600 lineHeight: 1.02 letterSpacing: "-0.025em" heading: fontFamily: "Geist, -apple-system, sans-serif" fontSize: "clamp(28px, 4vw, 40px)" fontWeight: 600 lineHeight: 1.15 letterSpacing: "-0.02em" body: fontFamily: "Geist, -apple-system, sans-serif" fontSize: "17px" fontWeight: 400 lineHeight: 1.6 label: fontFamily: "Geist, -apple-system, sans-serif" fontSize: "12px" fontWeight: 500 lineHeight: 1.4 letterSpacing: "0.25em" wordmark: fontFamily: "Geist, -apple-system, sans-serif" fontSize: "1.25em" fontWeight: 600 lineHeight: 1 letterSpacing: "-0.025em" rounded: sm: 8px md: 12px lg: 16px xl: 24px pill: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 40px 2xl: 80px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" padding: "12px 20px" button-primary-hover: backgroundColor: "{colors.purple-hover}" textColor: "{colors.on-primary}" button-primary-active: backgroundColor: "{colors.purple-active}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" borderColor: "{colors.line}" rounded: "{rounded.pill}" padding: "12px 20px" button-secondary-on-ink: backgroundColor: "transparent" textColor: "{colors.on-ink}" borderColor: "rgba(255,255,255,0.25)" rounded: "{rounded.pill}" card: backgroundColor: "#FFFFFF" textColor: "{colors.ink}" borderColor: "{colors.line}" rounded: "{rounded.lg}" padding: 24px chip: backgroundColor: "{colors.purple-tint}" textColor: "{colors.primary}" rounded: "{rounded.sm}" padding: "4px 8px" status-done: backgroundColor: "#E6F8F2" textColor: "#0B7A5E" rounded: "{rounded.pill}" surface-ink: backgroundColor: "{colors.ink}" textColor: "{colors.on-ink}" check-bullet: iconColor: "{colors.teal}" --- # Reach ## Overview Reach is one more member of your team, on WhatsApp, your website, and email. It knows the business and its real prices; it answers every customer, recommends, books on the real calendar, takes the payment, handles the paperwork, and follows up. It is a Hilo product — Hilo is the agent layer, Reach is the teammate that customer-facing businesses hire from it. The brand rests on one idea: **every customer, reached**. Not a chatbot, not more software: a colleague who never leaves anyone waiting, at 2pm or 2am, in the customer's language, with the business's own prices. Every visual and verbal decision serves that idea. The thread (inherited from Hilo) is here the line that *reaches* — it travels, lifts, and lands on the customer, marked by a teal dot. The register is plain, warm, and concrete: real calendars, real bookings, real cards, real records. If a choice makes Reach look like generic AI SaaS, the choice is wrong. Brand line: **Reach all your customers.** · *Llega a todos tus clientes.* Tagline: **Every customer, reached.** Canonical domain: **reachallcustomers.com**. ## 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 dark Ink stage, and its own thread device. Every Reach surface carries the endorsement **Powered by Hilo** (footer, social card, decks) — never inside the Reach lockup itself. Reach never gets a mark of its own; the knot *is* the family. Demo businesses Reach invents to show itself (Punch, and any that follow) are sub-brands with their own personality and a single fixed rule: they always lock up as **[name] by [knot] reach** and always disclose that they are fictional. ## Colors Two colors are Reach: **Ink** `{colors.ink}` and **Purple** `{colors.primary}`. Ink is the stage — the hero, the nav, the social card, thesis slides. Purple is the one accent: the knot on light, the CTA, the link, one emphasis per view. On Ink, the knot and links switch to **Lilac** `{colors.lilac}` so they hold their contrast; the wordmark goes white. Proportion across a typical page: **55 paper/white · 25 ink · 15 soft gray and hairlines · 5 purple**. Purple is never a background wash; `{colors.purple-tint}` is its quiet version for chips and selection. **Teal** `{colors.teal}` has one meaning: reached — the dot at the end of the thread, the tick on a confirmation, "Paid", "Booked", "Signed". **Blue** `{colors.blue}` only exists inside the thread gradient and in charts. Neither appears in the logo. The **thread gradient** — `90deg, #6C5CFF → #4A90E2 60% → #00B894` — is reserved for the moments where the thread literally appears: the underline beneath the key word of a headline ("all", "everyone", "todos"), the divider that lifts to a teal dot, the social card. Never on buttons, text fills, or the logo. Channel chrome stays authentic: a WhatsApp mock-up looks like WhatsApp (its greens, its dark bubbles), not like Reach. Credibility comes from the real channel, the brand comes from the words. ## Typography One typeface: **Geist** (variable, 100–900), everything from the wordmark to the smallest label. Reach has no serif — the serif belongs to Hilo, and appears on a Reach surface only inside the *Powered by Hilo* endorsement. - **Display / headlines** — Geist SemiBold 600, tight (−0.025em), leading 1.0–1.02. Two lines maximum. The key word carries the thread underline. - **Body** — Geist Regular 400, 15–19px, leading 1.6, secondary lines in `{colors.text-secondary}`. Line length ≤ 70ch. - **Labels / kickers** — Geist Medium 500, 12px, uppercase, tracking 0.25em, in Purple (light) or Lilac (dark). Numbered in demo pages: `01 DISCIPLINES`. - **Data** — Geist with `font-variant-numeric: tabular-nums`; the system mono only for code. The wordmark is **reach**, lowercase, Geist SemiBold at 1.25em with −0.025em tracking, shipped as outlines in the logo SVGs. It is **always lowercase** — in the lockup, the site nav, product and chat headers, avatars, and display names; a capitalized "Reach" is never a wordmark. It is a drawn asset: never retype it, never set running text as if it were the logo. In running prose only, *Reach* is a proper noun and takes a capital. ## Layout Content column 1152px max (`max-w-6xl`), 24px side padding, sections breathing at `{spacing.2xl}`. The hero is a two-column stage on Ink: headline and body left, a live product mock-up right (a phone, a chat window, a calendar). Below the fold, sections alternate white and `{colors.paper}`, each pairing one plain claim with one product mock-up that proves it. The pattern is claim → proof, never claim → claim. Demo pages (Punch) use edge-to-edge grids with 1px `rgba(255,255,255,.1)` hairlines on near-black; the brand site never does. The logo module is **the loop** (ink width of one knot loop, ≈ 0.377 × mark height). The gap between knot and wordmark is 0.625em ≈ 1 loop; clear space ≥ 1 loop on every side. Minimum sizes: lockup 96px wide; knot 20px. ## Elevation & Depth Flat, with one exception. Cards are white on paper (or paper on white) with a hairline `{colors.line}` border and `{rounded.lg}` corners; no shadow at rest. Product mock-ups that float over the Ink hero may carry one soft shadow (`0 30px 60px -30px rgba(13,17,51,.6)`). Chat windows use the channel's own chrome. No glassmorphism, no glow, no gradient borders, no "AI sparkle". ## Shapes Buttons are **pills** (`{rounded.pill}`) — the one place Reach is rounder than Hilo, because it speaks to front desks, not to operators. Cards `{rounded.lg}`, chips `{rounded.sm}`, phone mock-ups 28–32px. The app icon tile uses a 22.5% corner radius. Icons: single 1.5–1.8px stroke, round caps and joins, the same drawing logic as the knot; outlined, never filled. Checkmarks in Teal. ## Components - **Primary button**: Purple pill, white Geist Medium 500 text, hover `{colors.purple-hover}`, active `{colors.purple-active}`. One per view, repeated rather than multiplied; the label is always *Book a demo* on the brand site. - **Secondary button**: outlined pill (hairline on light, 25% white on Ink). - **Language toggle**: pill segmented control, EN · ES, the active segment white on Ink. - **Check list**: Teal check, Geist Regular, one line each — the feature list under every claim. - **Status line**: small muted text under a mock-up that reads like a receipt: `Paid · on the calendar · reminder set for Thursday 9:00`. - **Chips**: `{colors.purple-tint}` fill, Purple text, `{rounded.sm}` — products, discount codes, prices inside a chat. - **Chat mock-up**: the channel's own chrome. On WhatsApp: dark header `#111B21`, customer bubbles in WhatsApp green, agent bubbles `#202C33`; the agent's name is Reach, its avatar the Ink tile. Motion tells one story: the thread reaches. Underlines draw left to right (600–900ms, `cubic-bezier(.22,.61,.36,1)`), never fade in; the divider's dot appears when the line arrives. Product mock-ups play a real conversation, one message at a time, at reading speed. Always honor `prefers-reduced-motion`. ## Do's and Don'ts **Do** - Show the product working: a real booking, a real payment, a real signed form. - Put one claim next to one proof; let the mock-up carry the detail. - Use Ink as the stage and Purple as the single accent. - Keep the thread meaningful: it underlines the key word or lands on the customer. - Carry *Powered by Hilo* on every outward surface. - Keep channel chrome authentic — WhatsApp looks like WhatsApp. - Write EN and ES with equal care; both are first languages. **Don't** - Don't call Reach a chatbot, a bot, an assistant, or "AI software" — it is one more on the team. - Don't invent a new mark, recolor the knot outside Purple / Lilac / Ink / White, or set the wordmark in another face or case. - Don't put the gradient on buttons, text, or the logo. - Don't use robots, sparkles, glowing orbs, or abstract "AI" imagery. - Don't put the serif anywhere except the Hilo endorsement. - Don't ship exclamation marks or superlatives in product UI. - Don't promise what the product does not do today; every claim on the site has a mock-up or a customer number behind it.