Lio
Lio is the face of Folio: a small lemon bird in a graduation cap who watches you write. Lio is also the logo and the imagery system. This page is everything Lio: the mark, the anatomy, the tile, and the archived cast.
Move your cursor around and Lio turns to follow. Hover to open the beak.
The mark
Folio's mark is Lio the graduate. It is the only logo; there is no separate wordmark lockup yet. Two forms, one bird: the app icon sits on the porcelain-to-silver gradient squircle at the Close crop, feet grazing the frame; the bare mark is the bird alone, for placement on our own surfaces. In product the mark is alive; in print and export it holds the rest pose, facing right.
App icon (live, say hello)
Bare mark (rest pose)
Lio is procedural, not drawn once: the body morphs between three artist poses and the beak is rebuilt every frame as a constant-width wedge, so the silhouette survives every angle. Under the cap the beak obeys a brim rule: it never rises past the cap's band, and looking up foreshortens it to a stub tucked beneath the brim. The mark has no "master file": the geometry in bird-poses.ts is the source of truth, and every export is a render of it.
Clear space
Minimum size
✓ 64px
Full detail
✓ 32px
Smallest for UI
✕ 16px
Blush and tassel vanish
Misuse
The mark's four colors and its proportions are fixed.
SVG and PNG exports of both forms live in Resources → Assets.
Anatomy
The character is not an illustration that we animate; it is a live rig. Everywhere Lio appears, Lio can blink, follow, and react.
Poses
Lio has exactly three artist poses (facing right, up, and left) and lives on the arc between them.
0° (right)
rest pose
45°
blend
90° (up)
artist pose
135°
blend
180° (left)
artist pose
Expression
Expression comes from the blush and the eye, never from redrawing the bird. The sanctioned blush range; the mark uses "Bead," the round amber blush:
The sanctioned eye range, for campaign use only. In brand use Lio's eye is the standard-size anime eye with the double catchlight.
In the round
For moments that need depth, the mark exists as a procedural 3D model: same four colors, same proportions, with a turntable idle: it bobs, blinks, pulses its beak, and lets the tassel swing.
Character rules
How Lio moves, and when it must not, is covered in Character → Motion; the named emotional states (sad, angry, sleeping, and the rest) live in Character → Emotions.
Imagery: the tile
Folio's art direction is one shape: a 120-unit squircle with a two-stop vertical gradient and a live bird inside. Everything the brand has ever drawn fits in this frame; the tile is the imagery system.
- Shape: 120×120 with a 32-unit corner radius. Never a circle, never a sharp rectangle.
- Gradient: two stops, top to bottom. The brand tile is Porcelain→Silver; campaign tiles may use any pair that keeps the bird readable.
- Occupant: exactly one bird per tile, alive. No static screenshots of the bird, no second character.
- Crop: one of the sanctioned placements: Centered, Tall, Giant, or Close. The brand mark uses Close: feet grazing the bottom edge.
The sanctioned crops, from Centered to a nudged Giant. The mark uses "Close" (second tile).
Vertical is brand, diagonal is campaign
Brand surfaces use the vertical gradient only. The diagonal gradient belongs to campaign art, where the cast is allowed out:
Vertical gradients: calm, on-brand backdrops.
Campaign energies: diagonals, stretches, goo, a bird looking away. Quote these in campaigns; keep them off product surfaces.
Photography
We don't use stock photography. When a real surface needs an image, it gets a tile. The bird is the photography.
The cast
The exploration cast is reference, not toolkit: campaign work may quote it (a spooky-season Haunt, a cooking-feature Saffron), but product surfaces use Lio only.