Before it's yours — a quiet fitting room for the considered pause before you commit. This book is the language in which Vito is written: its pigments, its voices, its marks, its moments.
Every competitor in the virtual try-on space is racing to feel faster, lighter, more technologically impressive. They have read the brief as a visualisation problem — "what would this look like on me?" — and they design accordingly. Sci-fi blues. Glass surfaces. AI-powered taglines. Try-on-as-tech-demo.
The real problem is quieter. It is the pause before you commit. The second-guess before checkout. The considered moment in a fitting room when you turn, slightly, and try to decide whether this is you. That moment is intimate, emotional, and almost comically underserved.
Vito is not a try-on tool. Vito is a tailor. An old-world name for an old-world profession, applied with precision to a new one. The product is designed not to race but to compose; not to generate but to reveal; not to show you what you look like in something, but to hand you the thread back and ask — does it suit you?
This book is the language Vito is written in. It has three parts. The atomic layer — palette, type, grid, icons — is the raw material. The behavioural layer — motion — is how the product breathes. The compositional layer — the home, the reveal, the archive, the threshold, the stress test — is the product speaking in full sentences.
What follows is nine specimens, one coda. A designer arriving tomorrow would have what they need by the end of it. An engineer likewise. The language is small enough to be held in one head, and rigorous enough not to drift when three people touch it at once. That balance is the whole point.
Nine specimens. Read them in order on first visit. Return to them out of order forever after.
Paper, thread, linen, ink. Materials the body already knows, photographed in the light of a tailor's back room. Every pigment has a physical referent you could pick up and touch.
Cochineal — the red of a tailor's thread and a wax stamp. Used sparingly: the period after vito, the tick on a kept item, the seal on a signed post. Never a button fill. The mark, not the field.
The atelier at dusk. A single lamp. Not an inversion of the day palette — a different room.
A serif that speaks, a sans that works, a mono that stamps. Each chosen so the page feels set, not typed. All three free for commercial use under the SIL Open Font License.
Italic is the default serif voice. Upright is the exception, reserved for long editorial paragraphs where italic would fatigue. This is inverted from ninety-nine percent of type systems — it is what makes the voice unmistakable.
Sentence case. Two weights only: 400 regular, 500 medium. Never bold a word inside a sentence. The sans is the valet, not the host.
Mono is the catalogue. Numbers, serials, timestamps. Used sparingly — if everything is stamped, nothing is.
Mono timestamps. Serif names and describes. Sans asks what to do. Three voices, three jobs. They never trade places.
Margins held wide. A baseline the eye can feel even when it can't see it. The grid is the least glamorous specimen and the most load-bearing.
4, 8, 16 — inside a component. Between a label and its value. The tick and the seal.
24, 32, 48, 64, 96 — between sections. Between image and caption. Between one study and the next.
28px outer. Most apps hold 16. We give up the width.
4 on mobile. 12 on desktop. Same content, different measure.
16px between columns. Tight. The margin does the breathing.
Every line sits on a rule. Every gap is a multiple of eight. Line-height is part of the grid, not a separate choice — 16 gets 24, 24 gets 32, 32 gets 40.
Icons drawn, not stroked. Phosphor Fill — free, MIT-licensed, solid weight built in. Twelve in the working set. Labels always. Never a guess.
A closed vocabulary. Naming keeps it in the atelier: seal not circle, plate not image, page not file. The Phosphor identifier is in mono below each name — for the engineer's import statement.
Uniform 2px stroke. Hollow. Correct. Generic. Could sit in any product.
Solid. Weighted. Sits on the page like type. Could only be us.
Three curves. Five durations. Motion is identity for Vito because every other app is racing to feel faster, and we earn our place by refusing that race.
Beat 1 uses the whisper curve for 400ms. Beat 2 warms with the curtain curve for 600ms. Beat 3 resolves with the curtain curve for 1400ms. Total: 2.4 seconds. Nothing else moves after; nothing suggests "tap me." This is the silence after.
Slow start, swift finish. Reveals and major transitions.
Balanced. Everyday transitions.
Sharp start, soft tail. Tooltips, meta.
The atomic and behavioural layers, now speaking in full sentences. The home is the room. The reveal is the moment. The archive is the record.
On opening the app, the user arrives somewhere continuous with their last visit. No greeting, no streak, no "you have 3 unfinished studies" nudge. No tab bar. The most recent study sits on the workbench; the current volume is open to its latest spread.
Wordmark plus volume context. No avatar, no notifications. Ever.
The most recent study, full-frame. This is the continuity — the user picks up where they left off.
A 4-up contact sheet of this season's studies. Tappable.
One line only. What your small circle kept this week. No feed.
An invitation, not a tab bar. The two doors out: something new, or the catalogue.
The product's emotional payoff. The in-progress page is composed before the image exists; when it arrives, it fades into a frame that was always waiting. On Keep, a cochineal wax seal is applied to the page and stays there forever.
Empty frame. Chalk-blue dots (system state, not failure). Gentle cadence.
Three-beat choreography. Frame settles, warmth enters, image resolves.
Cochineal wax seal. Permanent. The decision is on the page forever.
Organised by volume, not by date. Each volume is a season's issue with a cover, a count, and an emergent palette drawn from its own studies. The shelf is a bookshelf, not a photo library. No search bar in v1.
The narrative view is AI-generated from each volume's pattern of Kept and Passed decisions. Vito writes a single italic serif sentence that describes what this cluster reveals about the user's evolving taste. Never flattering, never generic. Low confidence falls back to the mono cluster heading alone.
Every screen in the system can be assembled from these pieces. Naming keeps the atelier alive — masthead not header, frame not card, stamp not badge.
A hairline. The quietest divider. Never bold, never coloured.
Top strip. Wordmark, context, mono timestamp. No avatar. No notifications.
The image container. Crop marks at the corners. Linen fill when empty.
Italic serif title, graphite sub. Lives below a frame. Never above.
Mono row. Study number, date, generation time. Always ranged left-right.
Italic prompt left, two links right. The choice is always binary.
Tiny mono chip. Kept in Seal, drafts in Chalk-blue, closed in Chalk.
Rare. Outlined, not filled. Primary action only. Never Seal-coloured.
The system's workhorse. Text with a hairline underline. No hover fills.
The wax seal. Applied on Keep. Permanent. Small corner mark is the default.
Processing. Three dots, fading trail. Chalk-blue for neutral, Seal for actively composing.
Study card. Frame + meta strip + caption + action row. Not a "card" — a study.
The volume view. Grid of plates. Kept gets a corner dot; passed dims.
The stress test. Vito takes the blame, never the user. Empty states don't guilt. Errors borrow the Seal — we do not invent a new colour for bad news.
No zero state, no mascot, no "get started" coaching. A single sentence naming the condition. One door out.
The drafts are visible, dimmed. Patience is modelled. No "Keep more!" nudge.
First-person apology. Vito takes the blame. No error code. Seal-bordered frame, not red banner.
States what Vito needs, not what the user did wrong. Specific: face unobstructed, soft light.
The past is always readable. New studies queue quietly. No banner, no alarm.
Concrete time. Self-aware phrasing. The limit is framed as Vito's capacity, not the user's over-use.
The one exception: Seal-coloured link text. The gravity is borne by the word, not a red button.
Sixty seconds. No account asked for until after a first Keep — this is the inversion. The user is a guest in the atelier, not a signup funnel. Five screens. No skip, no tour, no tutorial overlay.
Wordmark, tagline, one door. No "Sign in," no "Learn more."
The guidance is in one sentence, in italic serif. Not a list.
Four curated items. Fourth pre-selected — the nudge in, not a menu.
Three-beat reveal. 2.4s. The moment the product earns its place.
The seal appears first. Signup is framed as preserving a kept thing.
Nine specimens and ninety non-negotiables are a lot to hold in one head. When they conflict — and they will — these six postures resolve the dispute.
Every other try-on app is optimising for speed-to-conversion. We are designing for the considered moment that precedes it. If a choice makes the reveal feel more like a tap and less like a turn in a fitting room, the choice is wrong.
In every failure state, in every empty state, the voice is first-person. I couldn't, not You did. The user is a guest in the atelier and the tailor absorbs the friction. There is no "system error."
Two type families. Two weights. Two functional marks. Twelve icons. Thirteen primitives. Five durations. When a new piece is proposed, something existing must be retired. Pressure keeps the language small; small keeps it unmistakable.
Twenty-eight pixel outer margin on mobile is the hardest rule to defend in a review with a growth PM. Defend it anyway. The air around the content is doing load-bearing work — it is what makes the product read as considered rather than efficient.
The Seal is the only chromatic accent in the entire system. If a new state, new surface, new screen seems to require a second accent, the diagnosis lives elsewhere — in the copy, the hierarchy, or the composition.
Every quiet Vito screen was once a crowded Vito screen. The default gesture, when anything is unclear, is to subtract. The answer is almost never another label, another button, another badge.
A designer arriving Monday should read front-to-back once, then keep it as reference. An engineer should read specimens 04, 05, 07, and 08 — those are where the code lives. A PM can stop at page 3.
Accessibility audit. Internationalisation (italic behaves differently in Devanagari). Dark-mode for photography — currently walnut is a room, not a mode. These are volume 02.
Fraunces, by Undercase Type. SIL OFL.
Geist, by Vercel. SIL OFL.
Geist Mono, by Vercel. SIL OFL.
Phosphor Icons, by Helena Zhang and Tobias Fried.
MIT licensed. Fill weight only.
Set at A4. Uncoated page. Base eight grid. Italic default.
Spring, 2026. For Yahya, who asked for something worth signing.