Forme et profondeur

Feuille découpée à la main : coins légèrement irréguliers, une fine ligne d'encre et, pour ce qui flotte, l'ombre dure d'une feuille collée par-dessus.

Corners irréguliers

Chaque coin a son propre rayon (6, 10, 6 et 8 px), le même sur les blocs et les contrôles. Ni parfait ni carré.

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

La ligne d'encre

Elle mesure 1px, dans la couleur du texte. Une ligne de stylo, pas un cadre.

La barre de défilement est aussi en encre

Fine, en encre douce, sur une piste claire, dans chaque boîte à défilement. Elle arrive prête dans le CSS de base.

La ligne pointillée

La ligne pointillée marque ce qui n'est pas du contenu fixe : le bord d'une zone d'exemple, un endroit pour déposer quelque chose en train d'être glissé, une frontière que la page montre pour expliquer. Elle dit "c'est un espace", pas "c'est une chose". Même épaisseur que la ligne d'encre (1px), en encre douce.

• Lorsque : la zone de dépôt d'un upload ou d'un drag ; le bord d'une démonstration ; une frontière dessinée pour expliquer (comme le bord que traverse la grille dans Space).
• Lorsque non : comme cadre de contenu, pour séparer des sections (c'est l'espace) ou mettre en valeur quelque chose (c'est le papier soulevé).

Papier soulevé

Uniquement pour ce qui flotte : un menu, une fenêtre, une notification arrivante. Un contour d'encre, la surface la plus légère et une ombre dure, décalée vers le bas et à droite, jamais floue. Forte, elle est réservée à ce qui se tient vraiment sur le dessus.

Ouvrir le menu : papier soulevé, arrivant comme un papier posé.