lilo
The Cursor
A bold geometric wordmark — tall ls, minuscule i and o. The purple dot over the o is gone. In its place: a modern cursor over the i, in Signal teal. The mark says what the product does: bring interfaces to life with motion.
The cursor completes the name
Without the cursor, the wordmark is just weight. With it, lilo becomes a verb — click, move, animate. The pointer sits where the letter i expects a tittle, so the accent is both typographic and product-native: every demo this app makes is driven by a cursor.
Never put the cursor over the o. Never replace it with a plain dot. The pointer is the brand’s one chromatic moment.
Geometry
Drawn on a locked unit grid. Ascender 88u (the two ls), x-height 56u (minuscule i stem and o), stem width 20u, gap 14u. The o is a ring: outer radius 28u, inner radius 8u. A modern Lucide-style pointer sits above the i as its tittle.
Optical rules (locked)
- The two ls are full ascenders; i and o share x-height — never stretch them to match the ls
- Cursor is a modern filled pointer (not the classic jagged OS arrow), always Signal (#2FBFB0)
- Letters are Ink or Paper only — cursor is the sole chromatic moment
- Corners stay sharp at all sizes; no rounded stems except app-icon tile radius
Four approved variants, no others
Ready for LinkedIn, Instagram, X, App Store
Square assets with solid backgrounds — drop into profile photo uploads. Prefer 1024×1024; platforms downscale automatically.
Favicon: lilo-favicon.svg — black rounded square, cursor only (the chromatic mark).
Product family — lilo.video
One wordmark, three os. Studio replaces the ring with a play circle; API replaces it with a gear + API. Tagline: Lilo — Create anything in motion.
| Surface | Host | The o |
|---|---|---|
| Website | lilo.video |
Ring (canonical) |
| Studio | app.lilo.video |
Signal play circle |
| API | api.lilo.video |
Signal gear + API |
Ink structure, Paper space, Signal attention
The wordmark is two inks maximum: Ink/Paper for letterforms, Signal for the cursor. Composition ratio: 60% Ink / 30% Paper / 10% Signal. Signal is the product teal from the app — bluish, never purple.
Ink
#000000 · structure, dark surfaces · 60%
Paper
#FFFFFF · light surfaces, reversed mark · 30%
Signal
#2FBFB0 · cursor, accents only · 10%
Carbon
#121418 · UI chrome, body text on Paper
Night
#0B0E13 · dark-mode product surface
Signal Ink
#06211E · text on Signal fields
Accessibility: Ink on Paper = max contrast. Signal is for the cursor and graphic shapes — never for long-form body text. Support: Slate #5C6670 · Mist #A3ABBA · Amber #E2A15A (UI only, not in the mark).
Dark and light map 1:1
Same geometry. Invert letter ink only. Cursor stays Signal on both.
One stem of air, always
| Asset | Digital minimum | Print minimum |
|---|---|---|
| Wordmark | 120 px wide | 28 mm |
| Favicon (cursor only) | 16 px | — |
| App icon | 32 px | — |
Clear space equals one stem width (22u) on all sides, measured from the outer edges of the figure including the cursor tip.
Incorrect usage
Naming convention
lilo-[asset]-[variant].[format]
| File | Use |
|---|---|
svg/lilo-wordmark-*.svg |
Vector masters (print / scale freely) |
png/lilo-wordmark-*-512.png / -1024.png |
Raster exports for decks & social |
svg/lilo-app-icon.svg · png/lilo-app-icon-1024.png |
lilo.video · stores, avatars |
svg/lilo-studio-icon.svg |
app.lilo.video · play circle replaces the o |
svg/lilo-api-icon.svg |
api.lilo.video · gear + API replaces the o |
png/lilo-profile-{light,dark,signal}-1024.png |
Square profile photos |
svg/lilo-favicon.svg |
Browser favicon |
Raster exports derive from these SVG masters — never redraw.
Regenerate PNGs with node brand/export-png.mjs.