Shape and depth
Paper cut by hand: slightly uneven corners, a thin ink line and, for what floats, the hard shadow of paper glued on top.
On this page
Uneven corners
Each corner has its own radius (6, 10, 6 and 8 px), the same on blocks and controls. Neither perfect nor square.
border-radius: var(--feitio-radius); /* 6px 10px 6px 8px */The ink line
It is 1px, in the text color. A pen line, not a frame.
The scrollbar is ink too
Thin, in soft ink, over a clear track, in every scrolling box. It comes ready in the base CSS.
The dashed line
The dashed line marks what is not fixed content: the edge of an example area, a place to drop something being dragged, a boundary the page shows to explain. It says "this is a space", not "this is a thing". Same thickness as the ink line (1px), in soft ink.
Do
A drop area: the dashed line says something fits there.
Don’t
A notice with a dashed frame: it looks temporary, or broken.
- When: the drop area of an upload or a drag; the edge of a demonstration; a boundary drawn to explain (like the edge the grid goes past in Space).
- When not: as a frame for content, to separate sections (that is space) or to highlight something (that is lifted paper).
Lifted paper
Only for what floats: a menu, a window, a notice arriving. An ink outline, the lightest surface and a hard shadow, offset down and to the right, never blurred. Being strong, it is kept for what truly sits on top.
Open the menu: lifted paper, arriving as placed paper.
Do
A notice arriving on top: lifted paper, hard shadow.
Don’t
Blurred shadow and perfect round corners: any app’s card.
Do
What sits on the page does not float: raised surface, nothing more.
Don’t
Thick border and square corner: heavy, and fights the pen line.