# 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é.

```css
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.

Do

Déposez le fichier ici

Une zone de dépôt : la ligne pointillée indique que quelque chose s'y adapte.

Don’t

Rappel enregistré à 14h32.

Une notification avec un cadre pointillé : elle évoque le temporaire ou le défectueux.

-   **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](/fr/design/espaco/#grid)).
-   **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.

-   Plus ancien en premier
-   Propriétaire
-   Statut

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

Do

Modification approuvée.

Une notification arrivante sur le dessus : papier soulevé, ombre dure.

Don’t

Modification approuvée.

Ombre floue et coins parfaitement arrondis : n'importe quelle carte d'app.

Do

Un bloc sur la page : pas d'ombre.

Ce qui se trouve sur la page ne flotte pas : surface relevée, rien de plus.

Don’t

Bordure épaisse sur tout.

Bordure épaisse et coin carré : lourd, et combat la ligne de plume.
