A brand for conversations that cross languages.
intelecho connects two people on a real phone call and translates both ways. The identity is built around one idea: your voice, echoed in theirs. Precise enough to trust, warm enough to pick up.
The echo mark
A lowercase e, for echo, sends out two arcs. The ember arc is your voice and the iris arc is theirs. Together they show one sentence heard in two languages. The wordmark is Geist SemiBold set tight, and the dot on the i carries the ember accent.
- The e. Drawn on a 64-unit grid: a 16-unit radius with a 6.5-unit stroke and round caps. The crossbar runs the full inner width.
- Ember echo. Radius 24, 4.5-unit stroke. Your voice: the first thing heard.
- Iris echo. Radius 32, same stroke. Their language: the voice coming back.
- Clear space. Keep at least the height of the e's counter clear on every side. Minimum size: 20px for the mark, 88px wide for the lockup.
Ink, paper and two voices
A calm ink-and-paper base keeps the product readable and trustworthy. Two voice colours, ember and iris, always mean the same thing: ember is the other person and iris is you. Where the two voices meet, the Signal gradient blends them.
#0F1424Text, primary actions, app icon. Contrast 17.9:1 on paper.
#F7F6F3Page background. Warm, not clinical. Cards sit on white above it.
#FF5A36Brand accent and the other person's voice. Use Ember 700 for small text.
#5B5BFFYour voice, links and focus rings. Iris 600 for text on light.
Ink 950 → 50
Ember 700 → 50
Iris 700 → 50
Precise, with one human note
Geist does nearly all the work: tight and confident in headlines, open and legible in forms. Geist Mono labels system states and metadata. Instrument Serif Italic appears once per view, for the emotional line.
Headlines 600, UI 500–550, body 400. Tracking −4.5% at display sizes.
Uppercase at 11px with +12% tracking. For steps, states, and metadata only.
Italic, filled with Signal. Only one phrase per screen.
Display · 66/1.02Speak your language. Meet in the middle.Heading · 28/1.25A phone call. With a little help.Title · 22/1.25Review your callBody · 15/1.6We call you first, then the other person. Each of you hears the other in your own language.Label · 13/550Your phone numberMicro · Mono 11Make a connectionBuilt for one hand and one try
People often use intelecho on a phone, just before an important call. Controls are big (50–52px tall), labels are always visible, and each step asks for one thing. Ink means act, ember means live, and iris means focus.
US and Canadian numbers only. We'll call you first.
- 1You
- 2Them
- 3Review
The echo rings pulse while a call is live and stop when it ends.
Talk like a good interpreter
A good interpreter is clear, calm and never the centre of attention. Write short sentences in plain words, and say exactly what will happen next.
Clear
Say what will happen, in order.
Warm
Put people first and the technology second.
Honest
Set expectations, including limits.
Echo, never bounce
Motion only shows something happening: a voice being carried across. Use one easing curve, cubic-bezier(.22,1,.36,1), and three durations (140, 240 and 420ms). All motion stops when the visitor asks for reduced motion.
One source of truth
Every value lives as a CSS custom property in /styles.css. Components use semantic roles, never raw hex. The product is light mode only; dark ink surfaces are reserved for the app icon and brand moments.
| Token | Light | Role |
|---|---|---|
--bg | #F7F6F3 | Page background |
--surface | #FFFFFF | Cards and fields |
--text / --text-2 / --text-3 | #0F1424 / #5E6579 / #737A8D | Primary, secondary and supporting text (all pass AA) |
--btn-bg | #0F1424 | Primary action |
--voice-you / --voice-them | #5B5BFF / #FF5A36 | The two speakers, everywhere |
--focus | #5B5BFF | Focus outline and 4px field ring |
--radius-sm / md / lg / xl | 10 / 14 / 20 / 28px | Fields, buttons, tiles, primary cards |
--shadow-sm / md / lg | layered, ink-tinted | Chips, content cards, the call panel |
--ease-out | cubic-bezier(.22,1,.36,1) | All transitions |
Downloads
Vector files with outlined type. The fonts are open source (SIL OFL) and served from /fonts.
