Brand guidelines
Shisa Speech
Shisa ASR (speech to text) and Shisa TTS (text to speech). Vector wordmarks, the head emblem, a listen-and-speak motion loop and app icons.
01
The wordmark
Shisa in Poppins Light and Speech in Poppins Bold, outlined to vector. The gradient runs across Speech only, from blue to vermilion. Use the ink version on light grounds and the white one on dark.
02
Shisa ASR and Shisa TTS
The two products follow the family pattern: Shisa in Light, then the product name in Bold, set solid in that product's colour: blue for ASR and vermilion for TTS. The gradient belongs to Speech alone, because it stands for both directions at once.
03
Emblem and hero band
A head in profile. Sound comes in at the ear on the blue side and goes out of the mouth on the vermilion side, and the outline of the head carries the ramp between them. The hero band adds a waveform on each side over a split tint, for page and slide headers.
04
App icons
The emblem on the split tint, cropped at the shoulders. Square to the edge, in a light version and a night version. The 64 and 32 px sizes come from a compact drawing with one arc a side and heavier strokes, so they stay legible.
05
Motion
The brand moves the way the product works. It listens, understands, then speaks, in one four-second loop. Sound always comes in from the blue side and goes out on the vermilion side, so the motion reads left to right like the gradient.
| Phase | When | What moves |
|---|---|---|
| Listen | 0 – 1.7 s | The blue bars move, the arcs pulse in towards the ear, and the ear swells as the sound lands. |
| Understand | 1.5 – 2.3 s | A glow runs along the head outline from the back of the head to the face. The eye blinks once. |
| Speak | 2.2 – 3.8 s | The mouth moves, the arcs pulse outwards and the vermilion bars move. |
| Rest | 3.8 – 4.0 s | Everything settles, so the loop never feels frantic. |
Direction never reverses
Sound enters on the blue side and leaves on the vermilion side.
One at a time
Only the hero band and the emblem loop; the wordmark reveal plays once and stops. Have at most one animated Speech element on screen, and pause it when it scrolls out of view.
Calm
Nothing bounces, spins or overshoots, because this is a listening product. Don’t run the loop faster than three seconds or it starts to look like a loading spinner.
Reduced motion
Under prefers-reduced-motion, show the still composition with every bar at full height. Use the toggle above to see it.
06
Palette
Two colours for the two directions, plus a neutral ink and paper. Click a swatch to copy it.
07
Typography
- Family
- Poppins (free, Open Font License)
- Shisa
- Light 300
- Speech, ASR, TTS
- Bold 700
- Tracking
- −0.03em on the wordmark, −0.02em on product names
- Labels
- Poppins, uppercase, +0.12em, e.g. “SPEECH → TEXT”
- Gradient
- 90°, #2F5FD0 → #C8441A, across “Speech” only
08
Usage
Blue listens, vermilion speaks
Keep that mapping everywhere. ASR, input, ears and incoming waves are blue; TTS, output, mouths and outgoing waves are vermilion. Never swap them, and never use one colour for both.
Clear space and minimum size
Leave the height of the S clear on every side. The wordmark holds down to about 110 px wide; below that, use the emblem or the icon.
On dark grounds
Use the -white files. Both brand colours drop to about 3.5 : 1 against Night, which is fine for logos and large headings but not for small text, so set small copy on dark in white.
Don't
- Swap the blue and vermilion, or use one for both directions
- Run the gradient across “Shisa” or over the product names
- Animate the wordmark in a loop; the reveal plays once
- Reverse the motion so sound travels right to left