SOSIE

Design system · Stage 3

Paper, ink and light.

The interface is quiet so the avatar is the only colour on the page. Every screen in the consumer app, the brand dashboard and the widget is built from what is on this page.

colour

Colour

Six warm neutrals and one accent. Ultramarine is the only colour in the interface, and it means one thing: the action that matters on this screen. Errors get a red nobody else uses. Toggle the moon in the top bar to see the dark theme.

  • BoneGround
  • PaperSurface
  • Stone 100Hairlines
  • Stone 300Strong lines
  • Stone 500Quiet text
  • InkText, buttons
  • UltramarineThe one accent
  • ErrorErrors only
type

Type

Seven styles, no more. Fraunces for the three display sizes, Inter Tight for body and small text, JetBrains Mono for eyebrows and measurements, where digits must line up.

  • DisplayTry everything on you.
  • HeadlineYour fit profile
  • TitleBias-cut slip dress
  • BodyPhotos are processed in the EU and deleted within 24 hours.
  • SmallUsed only to fit garments. Never shown to brands.
  • EyebrowAtelier Nord
  • MonoChest 94 · Waist 78 · Hips 98
mark

The mark

Twin: two rings, slightly offset. You and your digital version, and the overlap is the mirror. It is the widget icon on partner sites, so it is tuned to read at 16 pixels.

See the five candidates it was chosen from

96
48
24
16
SOSIEWordmark
Try on with Widget button on a brand site
buttons

Buttons

Primary is an ink pill. Secondary is an outlined pill. Quiet is text with a rule. Signal is oxblood and appears once per screen at most. A loading button keeps its width.

forms

Forms

Underlined fields, no boxes. Units live inside measurement fields. Consent switches say exactly what happens, in plain words, and errors explain what to do. Usual sizes are asked per category, because a 38 in trousers says nothing about a jacket.

We only use it to sign you in.

cm

Asked once. Everything else is estimated.

cm

Your usual sizes

One line per category. This is what you usually buy, not a measurement. It helps the size advice from the first try-on, before the scan has refined anything.

Tops
Trousers
Dresses
Shoes
chips

Sizes and colours

Chips are designed like a garment label. Unavailable sizes stay visible and struck through, so nobody wonders whether a size exists. Swatches show the selected colour's name beside the group.

Your size

Ink

viewer

The viewer frame

Everything 3D lives inside this frame. Editorial ground, soft floor shadow, three angle presets, zoom, reset and a loading overlay. The placeholder is an abstract silhouette, never a body.

Drag to turn · pinch to zoom

Placeholder silhouette · the real avatar arrives in Stage 7

The frame owns the ground, the angle presets, zoom and reset, the hint and the loading overlay. The 3D canvas is passed in as a child, so the same frame works for the avatar preview, the try-on and the brand’s QC view.

products

Product tiles

Tall image, hairline rule, brand as eyebrow, price in mono. No box, no shadow. The heart is the only control on the tile.

Brands and garments shown are fictional demo data.

states

Loading, empty and error states

Written in the brand voice. A loading state names what is happening. An empty state offers one action. An error explains what went wrong and how to fix it.

Assembling your avatar62%
  1. Reading your scan
  2. Shaping the body
  3. Matching your face
  4. Dressing the base layer
Loading garment

Preview quality

Your avatar’s face is an estimate. You can refine it at any time from My avatar.

Saved

Bias-cut slip dress in Bone, size M, is in your saved items.

Photos still uploading

Keep this page open for a few more seconds so the scan can finish.

Saved

Nothing saved yet

Tap the heart on any garment you want to come back to. Saved items also shape your weekly picks.

surfaces

Surfaces and details

One panel, one radius. Label/value pairs use a hairline list. Tags mark states like demo data or preview quality.

Your fit profile

Height
172 cm
Chest
94 cm
Waist
78 cm
Hips
98 cm
Shoulders
41 cm

Estimated from your scan. Used only to fit garments.

Demo dataTry-on readyPreview qualityNeeds a retakeNew this week
motion

Motion

Slow and physical. One orchestrated moment per screen, everything else instant. Three durations, two easings, and every animation respects reduced-motion settings.

Fast
160 ms · hover, focus, toggles
Base
320 ms · reveals, notices
Slow
640 ms · avatar turns, page moments
Ease out
cubic-bezier(0.22, 1, 0.36, 1)
Ease in-out
cubic-bezier(0.65, 0, 0.35, 1)