Feel and sound

Valet keeps still most of the time. What moves, moves because something changed, and it’s short.

Things you take off the page

When you archive a saved link, clear finished to-dos, remove a rule or a torrent, unpin a card, wave away an approval with Not now, or dismiss the year in review, it doesn’t just vanish. It comes apart from the left into fine dust that drifts off, and the room it leaves closes up behind it. It takes about two thirds of a second.

Only for what someone just did, on the page or by approving it in chat. A list that changes on its own (a download that finishes, a feed that moves on) just changes.

Small things

• A switch’s knob is carried across on a spring and widens a little under your finger.
• Allowing something in chat shows a tick on the button for a moment before the card gives way to what it set off.
• Sending a message lifts the arrow out of the button as the stop square takes its place.
• A notice at the bottom of the page can be swiped away sideways.
• Copying a reply turns the copy icon into a tick that draws itself.
• A poster under the mouse leans away from the pointer a little.
• Desk and List slide their pill to the one you pick.

Bars

Every bar that says how far along is drawn the same way: fully rounded, on a faint track, in three thicknesses (thin over a picture, middle in lists and popovers, thick in the year in review). Its colour is the thing’s own when it has one: green, orange or red for a status, a live activity’s colour in its popover. Otherwise, in a set of bars the leader is in the accent and the rest are grey, and a bar on its own is in the accent. The number sits at the end of the line beside the bar. Downloads fill their whole row instead, with the percentage at its end, and turn orange when stalled.

A ranking says how much, not how far along, so its bars have no track and squarer ends. In the race and in Most watched the others are a quiet grey and only the leader takes its poster’s colour. The race’s names sit inside its bars.

When a number changes, its bar slides to it. With reduced motion it simply moves.

The context meter

A small pie beside the model’s name in the chat shows how full the model’s context is. See Models.

Sound

Off unless you turn it on. Valet makes its sounds in the browser as they play, with no files: a tap for a switch, two rising notes when something’s done, a falling one for Not now or a failure, a bell for a notice, a lift when you send a message, and a soft puff when something turns to dust. They’re short and quiet.

appearance:
  sounds: { enabled: true, volume: 0.4 }   # volume is 0 to 1

Each browser can also turn them on or off in ⌘K: type “sound”. That choice is remembered in that browser and wins over the config, so the kitchen tablet can stay quiet while your desk isn’t. Nothing plays until you’ve touched the page.

Less motion

appearance.motion: reduced or your system’s reduce-motion setting keeps fades and drops the rest: something you take off fades out, with no dust. motion: none drops the fades too. Sounds don’t depend on motion; use the ⌘K switch.

One set of parts

The page is built from a small set of parts, so the same thing looks the same wherever it is:

• One card. Every widget sits in the same glass card, with the same corners, edge, shadow and padding. Its title row is the first thing inside it: the app’s icon, the title, a short note and the card’s buttons (a row’s Previous and Next, See archived) at the far right, at the same height in every card, so titles line up across a row. Artwork lives inside the card: a row of posters scrolls to the card’s edges, and a big picture (the stream playing, a photo, a saved page, the sky over the day) is a panel inside it. Nothing floats on the wallpaper, and cards and tiles are the same distance apart.
• Chips are 32 pixels high with the same corner and size of words, whether they pick a room, a part of the desktop, a camera or a suggestion. The one that’s on is filled with the ink.
• Buttons come in two heights, 28 for a card’s quick actions and 36 for a form, and are quiet, tonal or solid. A meeting’s Join in its popover is the one wide blue button, and the calendar’s Join for the same meeting is a blue-tinted chip.
• Text uses eight sizes: small notes, the line under a name, the body, a row’s name, a card’s title, and three for numbers. Card titles are a step bolder than the rest.
• Corners follow appearance.shape’s radius by role: cards and popovers, then controls, then chips; pictures by their size (small thumbnails, then posters and covers, then a picture as wide as its card).
• Colour is graphite with one brass accent and green, orange and red for status. Meetings keep their blue and the forecast’s rain its sky blue, the same wherever they show.
• Status dots are one size; legends use a slightly larger one.
• Focus is one ring in the accent around whatever the keyboard is on.
• Fills under chips and buttons are the theme’s own ink, faint, so they read in light and dark alike.
• App icons that would vanish on the glass (a white logo in light mode, a black one in dark) are drawn in the ink, or set on a small plate when they have colours of their own.
• Artwork in light mode takes the glass’s own edge, so a dark poster panel sits in a white card as one of the set.