Les menus à propos et outils sont faits comme ça : un bandeau, un chevron qui tourne, du contenu qui s’ouvre en dessous.
Philosophie du design
Le verre, le fond, le geste
Le site n’est pas un thème sombre plat. C’est une couche de verre posée sur une photo, avec des coins ronds, du flou, et un violet qui dit « Pixy » sans crier.
Chaque bloc reste léger : on voit encore le fond. Au survol, ça se soulève un peu, le rayon grandit, une lueur violette apparaît. Rien n’est brut : les boutons sont des pilules, les champs aussi. L’interface doit se toucher, pas seulement se lire.
Translucide
Surfaces sombres semi-transparentes, backdrop-filter, fond photo. Le site respire derrière l’UI.
Mouvement court
Lift de 3px, 0,3s, pas d’animation décorative sans but. Le hover dit « c’est cliquable ».
Deux langues
PDL pour le site. PDL AI pour les moments génératifs. Même verre, autre spectre.
PDL
Pixy Design Language
PDL est le langage des pages « site » : accueil, à propos, outils, cette aide. Violet Pixy, Oxygen, Lora pour les citations, pilules, blocs de verre.
Couleurs
Le fil est violet. Le fond reste quasi noir pour que la photo passe. Touchez les pastilles : ce sont les tokens du site.
Touchez une pastille.
Boutons
Pilule, bordure douce, flou. Au survol : bordure violette et lift. .on marque l’état actif. Cliquez-les.
Champ
Même verre que le bouton. Écrivez : le focus passe en violet clair.
Interrupteur
Le switch reprend la bordure et le violet une fois coché.
Nova
Une variante plus « glow » : au survol, un dégradé cyan / rose / violet se pose en bordure interne. Utilisée sur quelques cartes spéciales.
PDL AI
Quand ça génère
CoverGen et ComponLand n’utilisent pas le violet pour l’IA. Ils passent en rose, cyan, menthe — saturés, fluides. Le chrome reste du verre PDL ; seules les bords et l’attente deviennent « AI ».
Dégradé vivant
Autour du panneau (CoverGen) ou de la barre flottante (ComponLand), un dégradé rose–cyan–menthe circule lentement.
Prompt nu
Pas de petite boîte autour du champ : le texte et le bouton flèche vers le haut vivent dans le verre.
Vagues
Pendant le travail, le contenu passe derrière des vagues colorées en bas. À la fin, elles glissent vers le bas et s’effacent.
rose
cyan
menthe
Exemple CoverGen
Panneau entier, dégradé autour
Envoyez pour voir les vagues (démo locale, pas d’API).
Scène de pensée
Ici, l’équivalent de l’aperçu CoverGen / du workspace ComponLand. Envoyez ci-dessus : le contenu se cache, les vagues occupent le bas, puis tout revient.
Contenu d’avant. Il disparaît pendant la génération.
Barre flottante ComponLand
Même prompt, sans carte autour : seulement la barre de verre, comme en bas de l’atelier IA.
Repères
Typo
Oxygen partout. Lora pour les citations (comme ceci). Les icônes d’atelier et les chevrons sont des SVG Tabler (dossier css/icons).
Fonds
Paramètres propose plusieurs fonds. Ils s’appliquent via data-background et restent dans le navigateur. Le mode basse performance coupe une partie des flous.
Cette aide
La colonne d’articles vient de ComponLand. Les cartes et le verre viennent de PDL. L’idée : documenter le design dans le design.