Technos
En bref
System design (tokens, material, components) and public design storytelling.
Sur une plage, un bout de verre trop longtemps oublié dans le ressac. Plus de angles, plus de reflet agressif : juste quelque chose de doux dans la main. C’est de là que part Sea Glass. Pas d’une feuille de specs, d’un moodboard ni d’une mode. D’une envie simple : que les interfaces arrêtent de crier. Qu’elles se tiennent un peu en retrait, comme un objet qu’on aime sans pouvoir dire pourquoi. Le but n’était pas d’ajouter une couche de plus au web. C’était de proposer une matière commune, une façon de faire sentir la lumière, le calme, le temps qui a passé, et de la laisser libre, pour que d’autres puissent construire dessus sans tout réinventer.
Projet indépendant, licence MIT.
Huit couches de matière, du verre à l’encre. Avant les boutons, on assemble la texture : ce que la plage laisse dans la main, couche après couche.
Avant les boutons, la matière. Couleur, typo, forme et mouvement : quatre règles pour qu’une surface se comporte comme le même galet, sous la même lumière.
Douze galets pastels, saturation basse, chacun avec son encre clair / sombre. Les couleurs Seafoam et Kelly sont dédiées aux actions. Aqua et Cobalt sont dédiées à l’information. Ruby est dédiée au favori et à l’erreur. La palette teinte le verre au lieu de crier.
Outfit est réservée aux titres et aux contrôles : large, amicale, lisible à distance. Roboto porte le corps de texte. Roboto Mono affiche les valeurs et les tokens. Les interlignes restent généreux pour que la translucidité ne brouille pas la lecture.
La grille part de 4 px, les paddings suivent des multiples de 8. Les angles restent doux : pilules, rectangles arrondis de 8 à 28 px, ou cercles. Sur un fond uni, le verre reste opaque. Le Givre n’apparaît que lorsqu’une image ou une scène se trouve derrière.
Les transitions nettes suivent une courbe douce (0.2, 0, 0, 1). Un ressort léger pose les éléments. Au survol, scale ×1.05 ; à l’appui, ×0.97. Un contact laisse un disque et deux ondes. Tout s’arrête si prefers-reduced-motion est actif.
