# Avello — Closer

An initial design system for a face-to-face voice translator on iOS and Android. The job is to let two people understand each other while keeping their attention on the conversation.

## Source audit

The supplied workspace contained an empty Git repository and no application files, components, styles, or design tokens. There was no codebase design system to extract. This is a new system, grounded in the supplied image and competitor research.

The reference image contributes soft violet, peach, and blue light; paired speaker surfaces; language selection before conversation; audible replay; and conversation repair tools. Avello changes the visual hierarchy: fewer gradients, quieter surfaces, generous readable transcripts, and a new waveform arch mark instead of the reference's spherical logo. The reference's Veyra name is not used.

[Omilo's website](https://omiloai.com/) was reviewed on October 10, 2026. It describes a shared phone, a top speaker area turned toward the other person, hold-to-speak and release-to-translate, and audible translated output. Avello adopts the useful shared-device interaction as a starting point while exploring quick repair phrases and explicit transcript saving. The supplied Google Play URL had no app identifier, so no specific store listing could be evaluated.

## Direction

**Closer**: soft light, clear ownership, human language. Two intersecting voice bubbles represent the meeting of two speakers. Violet belongs to the phone's owner; apricot belongs to the person opposite them. The waveform arch is an original vector brand exploration. It is a concept mark, pending name and trademark checks before release.

Home → choose languages → conversation ↔ quick phrases → transcript → optional save.

One bold visual moment appears on the start screen. During a conversation, decoration recedes and words take priority. No accuracy percentages, unsupported language counts, or invented response-speed claims appear in the design.

## Color

| Token | Value | Role |
|---|---|---|
| Iris | `#6951DF` | Primary action; your voice |
| Dark iris | `#5039C3` | Hover / pressed emphasis |
| Pale iris | `#EEE9FF` | Your transcript surface |
| Apricot | `#F3B493` | Other speaker identity; decorative accent |
| Pale apricot | `#FFF0E6` | Other speaker transcript surface |
| Ink | `#25233E` | Headings, readable transcripts |
| Muted | `#777489` | Secondary copy on white |
| Mist | `#F6F6FB` | Main canvas |
| Surface | `#FFFFFF` | Cards, sheets, language controls |
| Line | `#E8E5F0` | Separators |
| Sage | `#4F9577` | Status accent with a written label |

Speaker colors must always be accompanied by textual ownership labels. Apricot is a surface/accent, not a foreground text color. Decorative and caption colors in this scaled presentation must be audited for native release; production essential copy uses Ink or a verified contrast-compliant foreground.

## Typography

Manrope provides friendly, open conversation typography. DM Sans supports compact controls and practical labels. The prototype loads them from Google Fonts and falls back to sans-serif if unavailable. A production app should bundle licensed font files for predictable offline rendering.

| Role | Native target | Treatment |
|---|---|---|
| Welcome title | 32–36 pt/sp | Manrope 650, tight tracking |
| Conversation text | 24 pt/sp | Manrope 600, 1.4 line height |
| Controls | 16 pt/sp | DM Sans 550 |
| Supporting copy | 14–16 pt/sp | DM Sans 400 |
| Metadata | 13 pt/sp minimum | DM Sans 500 |

The desktop phone frames are artboard previews, so some labels are intentionally scaled down. Their CSS sizes are not native implementation specifications. Native screens must support Dynamic Type / Android font scaling, reflow long translations, and allow scrolling rather than truncating content. Japanese and other scripts require tested font fallbacks and typography; right-to-left languages need a separate mirrored layout audit.

## Components and behavior

**Language selector:** language names and codes, no flags. A language is not a nationality. Search by English or native name. Selecting the other speaker's language swaps the pair. This prototype starts a new sample session on a language change so transcripts keep their original language metadata. Production should preserve sessions with explicit per-message metadata.

**Primary action:** solid Iris, white label, 12–14 px corner radius. 48 dp minimum height on Android and 44 pt on iOS. Maintain clear loading and disabled states.

**Speaker panel:** ownership, selected language, translated phrase, original phrase, replay, and microphone control. Content hierarchy follows comprehension rather than decoration. The upper panel can rotate 180° for the person opposite the phone.

**Voice control:** native target 64 pt/dp with a stable touch area. Production default is press, speak, release, with haptic start/end feedback; offer an accessible tap-to-start/tap-to-stop alternative. The prototype microphone buttons play prepared samples and never record sound.

**Conversation repair:** repeat, slower speech, clarification, and thanks. Show source and translated text. A phrase tap plays its target-language version and adds it to the sample transcript. Free-form translation is not simulated: only prepared demo phrases can be submitted in the phrase editor.

**Transcript:** optional local save or text export. No automatic persistent saving. Prototype saves explicitly selected sessions in browser localStorage, capped at 20. Prototype saving is not encrypted. Production storage requires a deliberate privacy and retention design, including deletion controls.

**Sheets:** language selection, settings, phrase editor, and transcript. Web dialogs provide modal focus containment, Escape dismissal, explicit close controls, and backdrop dismissal. Native uses platform sheets with equivalent semantics.

## State model for the native app

Idle → microphone permission → recording → sending → translating → speaking → idle.

Every state needs a distinct label, cancellation behavior, and screen-reader announcement. Only one speaker records at a time; playback should not be transcribed as incoming speech. Brief accidental taps, interruptions, Bluetooth routing, backgrounding, and incoming calls need explicit handling.

Permission denied: show how to enable the microphone and offer text entry. Network lost: preserve unsent content in memory, explain the state, allow retry or discard, and never silently resend. Translation failure: retain source text and offer a clear retry. Missing voice: display translated text and explain unavailable playback. Silence detected: return to idle without inventing a transcript. Spoken translations should be described as translations, without claiming guaranteed correctness.

## Platform adaptation

Shared brand and flow; native interaction conventions. iOS uses safe areas, Dynamic Type, VoiceOver, platform permission sheets and haptics. Android uses system insets, TalkBack, font scaling, predictive back, and Material sheets. The prototype platform switch changes device chrome only; it does not imply native builds exist.

## Motion and accessibility

150 ms control feedback; 220 ms sheet transitions. Only the active sample exchange animates the waveform. Respect reduced motion. Native must meet minimum target sizes, WCAG AA text contrast, language-aware announcements, and non-color state differentiation. The prototype includes keyboard focus and reduced-motion styles, but is not a completed accessibility certification.

## Implementation handoff

Machine-readable values are in `design-tokens.json`. Shared CSS variables are in `styles.css`. The prototype is dependency-free HTML/CSS/JavaScript. It uses device speech synthesis for prepared translations when matching voices are installed. It does not implement recognition, streaming translation, native app packaging, account management, subscriptions, or backend storage.

Next requirements to settle: release languages, turn-taking versus automatic listening, translation provider, latency targets, offline behavior, conversation retention, accessibility testing, pricing, and native delivery approach. Client secrets must not be bundled in an app; a production translation provider needs an authenticated server boundary or provider-supported short-lived credentials.

## Landing page and screen concepts

The web landing page now carries the shared-phone idea through the full product story: the face-to-face hero, a three-step explanation, an interactive iOS/Android conversation preview, use cases, privacy notes, and an FAQ. It keeps the existing Iris and Apricot colors and the Manrope / DM Sans pairing. The supplied café image is used as the hero scene; the working copy is `assets/avello-conversation-hero-clean.png`.

The screen gallery extends the original conversation preview with welcome, language selection, microphone permission context, quick phrases, saved history, saved phrases, profile preferences, and an Avello Plus concept. The Plus screen is intentionally labeled as a concept. There is no price, free trial, billing flow, or purchase action because those details have not been defined. The gallery screens are visual design assets in the web preview; the Expo app’s existing onboarding, setup, conversation, history, and settings flows remain separate native implementations.

The hero crops the supplied photograph responsively to keep both speakers visible, with the caption and message left to the site UI. Screen cards stack into a swipeable rail on narrow displays. The web preview’s microphone controls continue to use prepared sample phrases and browser speech synthesis; they do not record audio or demonstrate live translation.