Form und Tiefe

Papier, das von Hand geschnitten ist: leicht unebene Ecken, eine dünne Tintenlinie und für das, was schwebt, den harten Schatten von Papier, das oben draufklebt.

Unebene Ecken

Jede Ecke hat ihren eigenen Radius (6, 10, 6 und 8 px), gleich auf Blöcke und Controls. Nicht perfekt noch quadratisch.

border-radius: var(--feitio-radius);  /* 6px 10px 6px 8px */

Die Tintenlinie

Sie ist 1px, in der Textfarbe. Eine Stiftlinie, kein Rahmen.

Auch die Scrollleiste ist Tinte

Dünn, in weicher Tinte, über einem klaren Track, in jedem scrollenden Box. Sie kommt bereit in der Basis-CSS.

Die gestrichelte Linie

Die gestrichelte Linie markiert, was kein fester Inhalt ist: die Kante eines Beispielbereichs, ein Ort zum Ablegen von etwas, das gezogen wird, eine Grenze, die die Seite zeigt, um zu erklären. Sie sagt "dies ist ein Raum", nicht "dies ist eine Sache". Gleiche Dicke wie die Tintenlinie (1px), in weicher Tinte.

• Wenn: der Abgabebereich eines Uploads oder eines Drag-and-Drop; der Rand einer Demonstration; eine Grenze, die gezeichnet wird, um zu erklären (wie der Rand, den das Raster überschreitet in Space).
• Wenn nicht: als Rahmen für Inhalte, um Abschnitte zu trennen (das ist Raum) oder etwas hervorzuheben (das ist angehobenes Papier).

Angehobenes Papier

Nur für das, was schwebt: ein Menü, ein Fenster, eine ankommende Benachrichtigung. Eine Tinteumrisse, die leichteste Oberfläche und ein harter Schatten, nach unten und rechts verschoben, nie verschwommen. Da es stark ist, wird es nur für das bewahrt, was wirklich oben liegt.

Das Menü öffnen: angehobenes Papier, als platziertes Papier ankommend.