Foolscap

A notes application from the era when software pretended to be furniture. Aqua's discipline was not the leather or the felt. It was that every bevel, inset and shadow in the entire system was lit from one place, and this keeps that and throws away most of the rest.

Client: Fictional, self-initiated
Sector: Software, notes and journals
Scope: Icon, material system, interface
Method: After Apple's Aqua and the Iconfactory
Built: CSS shadows from one variable

The icon

A leather band over a paper page, with a letterpressed initial. It is the only place in the product where two materials meet without a control between them.

F F F

Icon at 96, 64 and 40 points

Proportion: The band is a third of the height at every size. Below forty points the stitching is dropped and the band stays.
Initial: Letterpressed into the paper, never raised off it. The page is under the light, not on top of it.
Corner: Twenty one per cent at large sizes, opening to twenty four below forty points so it does not read as a circle.
Never: Never place the icon on a photograph. It is an object and needs a surface to sit on.

The light

One source, fixed at three hundred and fifteen degrees. Every highlight, inset and drop shadow in the product is derived from it. Move it and watch all five materials answer at once.

Save A line of writing

Cancel Title

Light

Fixed: Three hundred and fifteen degrees, which is above and to the left. It is declared once and every material reads it.
Derived: Highlight opposite the light, occlusion towards it, drop shadow away from it. Three rules, five materials.
Depth: Two shadow distances only. Two pixels for a surface detail, four for a floating object.
Why: This is what separated Aqua from the plastic imitations of it. They copied the gloss and lit each control from wherever suited it.

Materials

Five surfaces and no more. Each one has a job, and a control is made of exactly one of them so a user learns the vocabulary in a minute without being told.

Leather#6B4A2FChrome. Title bars and anything that holds the app together.

Paper#F6F1E4Content. Everything the user wrote themselves.

Linen#C9C2B0The ground behind everything. Never carries type.

Brass#B08A3EThe one action worth taking on a screen. Never two.

WellinsetAnything the user can type into. Pressed in, never raised.

One material: A control is made of one material. A brass button on a leather field, never a brass button with a leather edge.
In or out: Raised means you can press it. Pressed in means you can fill it. Nothing is both.

Typography

The system face for anything the application says, and a book serif for anything the user wrote. The two never mix in a line, which is how you can tell them apart at a glance.

The user
LoraThursday, and the boiler again

The app
System 600Three notes, one unsynced

Body
Lora 17 / 30Rang the landlord twice. He says Friday, which is what he said about the window in March, so I am writing it down this time with the date on it.

Controls
System 600Save · Cancel · New note

The application

Three screens. The leather never carries content, the paper never carries a control, and the one brass element on each screen is the thing the screen is for.

NoteEdited 14.02

Thursday

Rang the landlord twice. He says Friday, which is what he said about the window in March, so I am writing it down this time with the date on it.

Save

Note

All notesThree

ThursdayRang the landlord twice, he says Friday

Seed orderBroad beans, two rows of chard

Not sentThe letter about the boundary hedge

New note

List

Settingsv2.0.1

Sync

Ruled paper

Sounds

Licensed to one person. Thank you for buying it.

Settings

What breaks it

Skeuomorphism got its bad name from these four, not from the leather. Each one is a control that lies about what it does.

× Save Cancel

Do not light a control on its own One button lit from the other side breaks the illusion for every other object on the screen, not just itself.

× A line of writing

Do not press out a button A pressed in surface means you can type into it. Using that for a button teaches the wrong lesson and the user stops trusting the depth.

× Save Delete

Do not use two brass Brass is the one action worth taking. Two of them and the screen has no opinion, which is the only thing the material is for.

× Rang the landlord twice. He says Friday, which is what he said in March.

Do not put content on chrome Leather holds the app together. The moment the user's own writing sits on it, the metaphor says their notes are part of the furniture.