vito.
design book · volume 01
volume 01 · spring '26 design book
vito.

A design system for a virtual try-on app, drawn as an atelier.

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.

01  ·  foreword vito. vol. 01 · sp'26

The problem is not visualisation.

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 — the palette, the type, the grid, the icons — is the raw material. The behavioural layer — the motion system — is how the product breathes. The compositional layer — the home, the reveal, the archive, the first-run, the stress test — is the product speaking in full sentences.

What follows is eight 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.

six specimens · one coda · one language — to begin.
02  ·  contents vito. vol. 01 · sp'26

Contents.

Eight specimens. Read them in order on first visit. Return to them out of order forever after.

01
The atelier Palette, papers, inks, the seal. The pigments of the room.
p. 4
02
The three voices Type. Serif, sans, mono. How the page is set.
p. 6
03
Grid & rhythm Base eight. Margin twenty-eight. The cadence of the page.
p. 8
04
The hand Icons. Phosphor Fill, ink by default, twelve in the working set.
p. 10
05
Motion Three curves. Five durations. The held breath of the reveal.
p. 12
06
The compositions The Atelier home. The Reveal. The Archive. Three signature screens.
p. 14
07
The alphabet Thirteen components. All extracted from real screens.
p. 20
08
Graceful failure Error and empty states. The stress test.
p. 22
09
The threshold Onboarding. The first thirty seconds.
p. 24
Coda A closing note. The rules that govern the rules.
p. 26
specimen № 01  ·  palette vito. vol. 01 · sp'26

The atelier.

Paper, thread, linen, ink. The 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.

i. papers

surfaces · grounds
Ivory
#F5EEDC
Uncoated page. The canvas.
Linen
#E8DDC5
Woven raw flax. Surfaces.
Muslin
#D7C9AA
Dividers, chips, hairlines.
Kraft
#B8A887
Archive covers, deep cards.

ii. inks

text · line
Ink
#1F1B14
Warm black, never true black. Wordmark, headings, primary text.
Graphite
#5A5243
Body copy, secondary labels.
Chalk
#8E8674
Metadata, captions, timestamps, muted states.

iii. the seal

the one accent
Seal
#8C2A24  ·  cochineal

One pigment. Cochineal — the red of a tailor's thread and a wax stamp. Used sparingly and with intent: the period after vito, the tick on a kept item, the seam on a chosen study, the seal on a signed post. Never the surface of a button. The mark, not the field.

iv. marks

states · signals
Thread
#5F6B3F
The ledger's tick. Kept, confirmed, noted.
Chalk-blue
#3E4F67
A tailor's chalk line. Drafts, processing, passed items.

v. evening

after hours

The atelier at dusk. A single lamp. Not an inversion of the day palette — a different room.

Walnut
#14100B
Paper-light
#E8DDC5
Graphite-rev
#A69F8C
Seal, lit
#A83E36

the rules

non-negotiable
01
The page is not white. Ivory is the default. Cold backgrounds break the room.
02
The Seal is a mark, never a field. Used on the period, the stamp, a tick — never as a button fill.
03
Two functional marks only. Thread confirms. Chalk-blue drafts or processes.
04
Errors borrow the Seal. No separate warning or error colour exists.
05
Evening is a room, not an inversion. Walnut preserves the paper-and-ink logic at night.
06
If the palette starts asking for a sixth colour, the problem is elsewhere.
specimen № 02  ·  type vito. vol. 01 · sp'26

Three voices.

A serif that speaks, a sans that works, a mono that stamps. Each chosen so the page feels set, not typed. All three are free for commercial use under the SIL Open Font License.

i. the serif  —  Fraunces

display · editorial · italic-first
vito.
wordmark · italic · weight 300 · the period is always cochineal
48 / 1.1 The linen shirt. 32 / 1.15 Does it suit you? 18 / 1.7 Raw oatmeal linen, generous cut. Photographed in afternoon light against a cream wall. Kept in the spring volume.

Italic is the default serif voice. Upright is the exception, reserved for long-form editorial body where italic would fatigue. This is inverted from ninety-nine percent of type systems — it is what makes the voice unmistakable.

ii. the sans  —  Geist

UI · chrome
14 / 400 Upload a photo of yourself. First upload becomes your primary. 13 / 500 Keep  ·  Pass  ·  Regenerate 12 / 400 Tap to set as primary. Existing studies are preserved.

Sentence case. Two weights only: 400 regular, 500 medium. Never bold a word inside a sentence. The sans is the valet, not the host.

iii. the mono  —  Geist Mono

metadata · stamps
study no.
012
date
14.03.26
gen.
7.2s
vol.
01 · sp'26

Mono is the catalogue. Numbers, serials, timestamps, volume markers. Used sparingly — if everything is stamped, nothing is.

iv. in conversation

the three together
study no. 012 14.03.26
The linen shirt.
Raw oatmeal linen, generous cut. Photographed in afternoon light.
Does it suit you?
Keep Pass

Mono timestamps the thing. Serif names and describes the thing. Sans asks you what to do with the thing. Three voices, three jobs. They never trade places.

the rules

non-negotiable
01
Italic is the default serif voice. Upright serif is reserved for long editorial paragraphs.
02
Sentence case everywhere. Not Title Case, not ALL CAPS, not in buttons or section headers.
03
Two weights only across the entire system. 400 and 500. No 600, no 700, no black.
04
Never bold a word mid-sentence. Hierarchy through size, color, italic, space — not weight.
05
Fraunces display uses opsz 72–144; body uses opsz 14–18. Optical sizing is part of the type.
06
Mono is for numbers, stamps, and serials. If a label has no number in it, it is usually sans.
specimen № 03  ·  grid & rhythm vito. vol. 01 · sp'26

A base of eight.

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.

i. the spacing scale

base 8 · in px
4
8
16
24
32
48
64
96
close

4, 8, 16 — inside a component. Between a label and its value. The tick and the seal.

separated

24, 32, 48, 64, 96 — between sections. Between the image and its caption. Between one study and the next.

ii. the mobile page

390 · 4 col · 28px outer
vito. vol. 01
The linen shirt.
Raw oatmeal linen.
outer margin

28px. Generous. Most apps hold 16. We give up the width.

columns

4 on mobile. 12 on desktop. Same content, different measure.

gutter

16px between columns. Tight. The margin does the breathing.

iii. vertical rhythm

8px baseline
study no. 012
The linen shirt.
Raw oatmeal linen, generous cut. Photographed in afternoon light against a cream wall.
Does it suit you? Keep

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.

the rules

non-negotiable
01
All dimensions are multiples of 8. Exceptions require review. 4 is reserved for hairline adjustments.
02
Outer margin on mobile is 28, not 16. The air is the product. This is the most contested rule; hold it.
03
Close or separated. Choose 24 or 48. Never 36. No values in between.
04
Line-height is part of the grid. 16→24, 24→32, 32→40. Baseline rhythm is what makes paragraphs feel set.
05
No full-bleed images on editorial screens. The margin holds.
06
When in doubt, add air. Take nothing away from the seal.
specimen № 04  ·  the hand vito. vol. 01 · sp'26

The hand.

Icons drawn, not stroked. Phosphor Fill — a free, MIT-licensed library with proper solid weight built in. Ten to twelve in the working set. Labels always. Never a guess.

i. the starter set

phosphor · fill · MIT
Seal
circle
Check
check
Cross
x
Plate
image
Page
file
Volume
trend
Bust
user
Garment
bag
Lens
camera
Ribbon
bookmark
Rules
list
Kept
check-circle

ii. ours vs. theirs

the difference
lucide / stroked

Uniform 2px stroke. Hollow. Geometric. Correct. Generic. Could sit in any product.

vito · phosphor fill

Solid. Weighted. Sits on the page like type. Could only be us.

iii. in context

labels always
reveal · footer
Does it suit you?
Keep Pass
profile · stats
42
studies
11
kept
8
following

the rules

non-negotiable
01
Phosphor Fill only. Never mix with Regular, Duotone, or Thin. One weight across the entire product.
02
Ink colour by default. Cochineal reserved for the Seal and the Kept state. Never decorative.
03
Twelve icons in the working set. A thirteenth requires retiring one.
04
Icons accompany words. Never stand alone in primary UI. No mystery-meat tab bars or icon-only buttons.
05
If a word will do, a word does. Scarcity is the discipline.
06
Install via @phosphor-icons/react. Use the weight prop: weight="fill".
specimen № 05  ·  motion vito. vol. 01 · sp'26

The held breath.

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.

i. the reveal  —  three beats

0 · 400 · 1000 · 2400ms
t = 0ms
Empty frame.
Dots pulsing.
t = 400ms
Frame settles.
Dots fade.
t = 1000ms
Warmth enters.
Lamplight up.
t = 2400ms
Image resolves.
Held breath.

Beat 1 uses the whisper curve for 400ms. Beat 2 warms the frame with the curtain curve for 600ms. Beat 3 resolves the image with the curtain curve for 1400ms. The entire reveal takes 2.4 seconds. Nothing else moves; nothing after suggests "tap me." This is the silence after.

ii. the three curves

the whole system
The curtain
cubic-bezier(.2, .8, .2, 1)

Slow start. Swift finish. Reveals and major transitions.

The drawer
cubic-bezier(.4, 0, .2, 1)

Balanced. Material-standard. Everyday transitions.

The whisper
cubic-bezier(0, 0, .2, 1)

Sharp start, soft tail. Tooltips, meta strips.

iii. the duration ladder

five rungs
80ms
the tick
icon state change, color shift on selection 200ms
the pass
hover, button press-down, small hover shifts 400ms
the door
modal opens, tab transition, meta strip 700ms
the page
screen-to-screen navigation, archive opening 1200ms
the curtain
the reveal, the one moment we hold

the rules

non-negotiable
01
In ease-out, out ease-in. Arrivals decelerate; departures accelerate. Never the same curve for both.
02
No bounce, no elastic, no overshoot. Our curves are velvet, not rubber.
03
Five durations only. 80, 200, 400, 700, 1200. 350ms is forbidden.
04
Respect prefers-reduced-motion. Curtains collapse to doors. Doors to passes. Everything still composes.
05
A single haptic tick at the moment beat 3 completes. Never on every tap.
06
The silence after the reveal is part of the motion. Nothing moves until the user does.
specimen № 06  ·  the compositions vito. vol. 01 · sp'26

Three signature screens.

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.

a. the atelier home

the room

On opening the app, the user arrives somewhere that feels continuous with their last visit. The most recent study is on the workbench. The current volume is open to its latest spread. No greeting, no streak, no "you have 3 unfinished studies" nudge. No tab bar.

9:41
vito.
vol. 01 · sp'26
on the workbench study 012 · 14.03
The linen shirt.
Raw oatmeal linen, generous cut. Kept yesterday.
kept
Revisit
the current volume 42 studies
See all
correspondence
Rohan kept a linen shirt yesterday.
1 new · this week
Try something new.
Upload Catalogue
specimen № 06  ·  continued vito. vol. 01 · sp'26

b. the reveal  —  three states

the moment

The product's emotional payoff. An in-progress page is composed before the image exists; when the image 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.

i. in progress
9:41
vito.vol. 01 · sp'26
study no. 013 in progress
Drafting...
The cotton tunic, in afternoon light.
drafting
light
Afternoon
Preparing your study...
ii. revealed
9:41
vito.vol. 01 · sp'26
study no. 013 14.03.26
The cotton tunic.
Unbleached cotton, cropped cut. Photographed against a warm wall.
gen.
7.2s
light
Afternoon
mood
Riviera
Does it suit you?
Keep Pass
iii. kept
9:41
vito.vol. 01 · sp'26
study no. 013
kept
The cotton tunic.
Added to your spring volume.
Try another?
New garment Back to atelier
specimen № 06  ·  continued vito. vol. 01 · sp'26

c. the archive  —  three layers

the record

The archive is 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.

i. the shelf
9:41
vito.archive
Four volumes.
136 studies, gathered since summer '25.
Vol. 01 — Spring '26 current
Linen, oatmeal, raw cotton. The riviera.
42 studies · 11 kept
Vol. 04 — Winter '25 closed
Heavy wool, evergreen, aubergine.
38 studies · 14 kept
Vol. 03 — Autumn '25 closed
Corduroy, rust, tobacco leather.
29 studies · 9 kept
Vol. 02 — Summer '25 closed
Cotton, sun-bleached, terracotta.
27 studies · 8 kept
ii. volume open
9:41
vito.vol. 01 · sp'26
volume 01
Spring '26.
Linen, oatmeal, raw cotton. The riviera.
all 42 kept 11 drafts 31
showing 1–9 of 42 Load more
iii. the narrative
9:41
vito.vol. 01 · narrative
early spring
You began with cotton. Cautious cuts. Two kept.
mid spring
Bolder colour crept in. The linen period.
this week
Still linen. Still you.

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 of studies reveals about the user's evolving taste. Never flattering, never generic. If confidence is low, we fall back to the mono cluster heading alone.

specimen № 07  ·  the alphabet vito. vol. 01 · sp'26

Thirteen primitives.

Each extracted from a real composition, not imagined. Every screen in Vito is built from these. Nothing speculative; nothing redundant.

01
The Rule
Rule weight

Horizontal divider. Two weights only: Ink for section breaks, Muslin within sections.

02
The Masthead
Masthead context

Wordmark plus context line in mono, under four words. No avatar, no nav beyond Rules.

vito. vol. 01 · sp'26
03
The Frame
Frame aspect state

Image container with crop marks. 4 by 5 ratio only. States: empty, drafting, resolved.

04
The Caption
Caption title body

Italic serif. Title under five words. Body one sentence. Never two paragraphs.

The linen shirt.
Raw oatmeal linen, generous cut.
05
The Meta Strip
MetaStrip fields

Mono labels, sans values. Max 4 fields. Never show an empty field.

gen.
7.2s
light
Afternoon
mood
Riviera
06
The Action Row
ActionRow prompt actions

Italic serif prompt, up to 2 links. First link primary (underlined). Never more than two actions.

Does it suit you?
Keep Pass
07
The Tag
Tag tone

Icon plus mono label. Three tones (ink, seal, chalk). Max one word. No pill backgrounds.

kept
passed
drafting
08
The Button
Button icon label

Ink border at 0.5px, 2px radius, sans label. Max two words. Never filled. Icons optional.

Upload Catalogue
09
The Link
Link italic

Hairline underline. Sans for actions (Keep, Revisit). Italic serif for navigation (See all).

Revisit See all
10
The Stamp
Stamp kind

Applied to the page. Never a toast, never a banner. Stays with the study forever.

11
The Dot Cluster
Dots count

Our loading state. Three cochineal dots with the whisper curve. Chalk-blue for system states.

12
The Card
Card media body

Media thumbnail plus body (caption + meta). No borders unless isolated from its section.

Rohan kept a linen shirt yesterday.
1 new · this week
13
The Contact Sheet
ContactSheet cols

Grid of Frames. 4 columns mobile, 6 tablet, 8 desktop. 8px gutter. No hover states on mobile.

the library rules

non-negotiable
01
Every component earns its place from a real screen. No speculative primitives.
02
Components compose from components. Action Row is a Caption plus Links. Stamp is an Icon plus Mono.
03
States are whispers. Hover means subtle border darkening. No fill flash, no shadow.
04
Every component has a content rule. The design system is a guard rail, not a suggestion.
specimen № 08  ·  graceful failure vito. vol. 01 · sp'26

When the room goes quiet.

Seven states most systems treat as afterthoughts. For Vito they are the stress test — the moments where the atelier either holds or breaks. The rule throughout: Vito takes the blame. The user is never shamed.

vito.
Welcome. There is nothing here yet, which is exactly as it should be.
Begin
i. First run
empty · welcoming

Opening the app for the first time, with no account yet. Where most apps show a tutorial, we show a page.

decision

No tutorial, no carousel, no "swipe to continue." The foreword is the onboarding.

archive · volume 01
Your first volume is still open.
You have tried eight things this week. Nothing has been kept yet — and that is also a kind of answer.
ii. Zero kept
empty · dignified

The archive with drafts but nothing kept. Where most apps guilt-trip, we reframe.

decision

A non-decision is a decision. The copy gives passing equal weight to keeping — the archive is a record of considered taste, not an inventory of successes.

study no. 013 paused
This one didn't come out.
I'll try again. Nothing was charged to your account.
Try again Skip
iii. Generation failed
error · quiet

Gemini returned an error, or the job timed out after 300 seconds. The frame holds.

decision

The frame is preserved. A chalk-blue X replaces the image — not cochineal, because the user has done nothing wrong. "Vito takes the blame": "this one didn't come out," never "generation failed."

upload
photo received but the subject isn't centred
Let's try one more.
A clear photo from the front works best. Full body if you have one.
iv. Upload rejected
error · guided

The photo is blurry, miscropped, oversized, or the AI can't identify a human subject.

decision

Never "invalid photo." Describe what makes a good one. The next action is always clear. No shame. No "try harder."

vito.
offline
Your archive is here with you.
New studies will wait until the room comes back online.
v. Offline
state · patient

Network dropped mid-session or on launch. The archive remains fully browsable.

decision

Dots become chalk-blue (system state), never cochineal (which means failure on our side). No red banner. The atelier still functions; only the generation queue waits.

specimen № 08  ·  continued vito. vol. 01 · sp'26
studio paused
Let's pause for a moment.
You have tried fifteen things in the last hour. The atelier is yours again at 3:42.
in the meantime
Revisit your archive, or see what your circle has kept this week.
vi. Rate limited
state · gracious

The user has exhausted their generation quota. Gemini costs must be contained without punishing behaviour.

decision

Never "slow down" or "too many requests." Rephrase the constraint as an invitation to rest. Offer a second door — archive or correspondence — so the user is never dead-ended.

close the volume?
You'll still be able to read it.
Closing volume 01 moves it to the shelf. Nothing is deleted. You can reopen it any time.
Close the volume Keep it open
vii. Destructive confirm
decision · reversible

The user is about to close a volume, unfollow someone, or delete their account. The only moment the Seal touches a link.

decision

Destructive links wear cochineal, one single exception across the entire product. Reassure before asking. Safe action (keep) is the second option, never the default dismiss.

the rules

non-negotiable
01
Vito takes the blame. First-person copy. Never "error" or "failed" — "this one didn't come out."
02
No red banners, no toasts, no modals. Errors sit in the composition, with the same type and frame as success.
03
Cochineal means "this decision is permanent." Everything else uses Chalk-blue.
04
Every error has a next action. Nothing dead-ends.
05
Empty states do not guilt. "Zero kept" is reframed; it is not a deficit.
06
Loading never tricks. The dots are honest. No fake progress bars.
specimen № 09  ·  the threshold vito. vol. 01 · sp'26

The first sixty seconds.

Five screens. No tutorial cards, no carousel, no permissions wall, no sign-up before reveal. The user's first Kept tap is what asks for an account — earned trust, not demanded.

i · 0s
vito.
Before it's yours.
Begin
ii · 6s
step 1 of 2
A photo of you.
Front-facing, well-lit. I'll work from here.
Take photo From library
iii · 14s
step 2 of 2
Something to try.
Pick one to see yourself in it.
iv · 22s
study no. 001 now
The linen shirt.
v · 28s
study no. 001 now
Does it suit you?
Keep Pass
To save this study, sign in.
Continue with Apple

the choreography

five beats
t = 0s Threshold The wordmark holds the page. One line. One action. t = 6s Photo The first ask. Your own face, before any product is on it. t = 14s Catalogue Six curated openers. The fourth is pre-selected — a gift, not a commitment. t = 22s Reveal The full three-beat reveal, from the first visit. No "tip: you can..." overlay. t = 28s Keep or pass The sign-up lives below the decision, not in front of it.

the rules

non-negotiable
01
No sign-up wall before the first reveal. Prove value first, ask second.
02
No tutorial cards, no tooltips, no "tap to continue" arrows. Every screen teaches through composition.
03
Six curated items on first visit. Hand-picked. The selection changes weekly.
04
The fourth item is pre-selected. Most users hesitate to choose first — Vito chooses for them.
05
Apple / Google sign-in only. No email + password in v1. No "sign up with email" friction.
06
Under 60 seconds from Begin to first Keep. Anything longer and we failed the brief.
coda  ·  the rules that govern the rules vito. vol. 01 · sp'26

Coda.

The eight specimens describe the language. This page describes the posture — a handful of working principles that sit above the rules. If there is ever a conflict, these win.

i. the posture

how we decide
i.
When in doubt, remove.

Every element in Vito has earned its place. An addition must displace, not accumulate. If a design begins to feel "full," the problem is never "add more structure."

ii.
Vito takes the blame.

Across errors, failures, rate limits, dropped connections. The user has never done anything wrong. This is so consistently applied that it functions as a voice, not a rule.

iii.
The pause before the purchase is the product.

Not the generation, not the catalogue, not the social feed. Everything we build exists to make that one moment of consideration feel considered.

iv.
Serif is for care, sans is for labour, mono is for facts.

Every piece of copy answers one question: is this a considered voice, a working label, or a catalogued number? That question routes to a typeface. No further decisions.

v.
Never steal the reveal.

No celebratory confetti, no share prompts at beat 3, no "50% off" nudges. The silence after the image appears is part of the motion. Respect it.

vi.
The language can fit in one head.

Nine pigments. Three typefaces. Twelve icons. Thirteen components. Three curves. Five durations. Six specimens plus two addendums. If this system needs a search index, we have failed.

ii. how to read this book

for the team
the designer

Start at specimen 01 and read in order once. Return to 03 (grid) and 07 (components) most often. When stuck on a new screen, consult 06 (the compositions) before inventing.

Figma library forthcoming; until then, every component in this book is copy-pasteable SVG / HTML.

the engineer

Tokens are in the top of this file as CSS variables. Type is loaded from Google Fonts. Icons install via @phosphor-icons/react with weight="fill".

Motion tokens are named, not just timed — --ease-curtain, --dur-page. Use the names; the values may tune.

iii. what this book doesn't cover

known gaps
— Commerce / checkout flow
— Notifications & re-engagement
— Catalogue browsing & search
— Settings & account management
— Correspondence (follow/like/comment) screens
— Tablet and desktop adaptations
— Accessibility: screen reader patterns
— Internationalisation & RTL layouts

These are intentional omissions, not oversights. Volume 02 covers them. Beginning with a language rather than a feature list is the discipline of this first book.

colophon vito. vol. 01 · sp'26
vito.
Before it's yours.
A considered pause, composed for the moment before you commit.
typeset in fraunces, geist, geist mono
all three SIL open font license
icons phosphor fill, MIT
printed in ivory, sealed in cochineal

volume 01 · spring '26
prepared for yahya