Découpé en morceaux.
Le shader construit le logo avec six blocs : la boule, l’anneau en quatre arcs, et le disque. La boule tourne autour de l’anneau, et l’anneau et le disque se déforment autour d’elle.
Une question.
Taillée dans le verre.
Le logo devutils est un Q devenu nœud de graphe.
Il a été dessiné pour ATFQ, et il est rendu ici en verre dans un shader.
D’OÙ IL VIENT
Né d’une question.
Gardé comme un instrument.
Le logo a d’abord été dessiné pour ATFQ, « Ask The F*cking Question », une plateforme collaborative d’apprentissage de l’informatique construite autour des questions à se poser avant les réponses. Le concept de marque, le logo, l’ambiance de l’interface et le prototype Figma ont été faits en interne. atfq, le compagnon du terminal, a hérité du nom, et devutils du logo.
- Une clarté géométrique.
- Uniquement des cercles et des lignes tangentes : le logo passe d’une icône de 16 pixels à la 3D de l’accueil sans être redessiné.
- Un minimalisme open source.
- Net et technique, dans le langage visuel des outils de développement qu’il côtoie.
- Une abstraction utile.
- Il se lit toujours comme un Q, et évoque aussi un nœud de graphe, un schéma technique et un œil.
LE LOGO / ANATOMIE
Un Q, un nœud,
un œil.
Quatre parties, chacune avec un sens. La queue du Q n’est pas un trait : c’est un second cercle relié au premier, comme une arête dans un graphe.
- 01 / ANNEAU
La question.
Le cercle extérieur est la question au centre du logo : ouverte, universelle et accessible.
- 02 / SATELLITE
Un nœud dans un graphe.
Au lieu d’une queue classique, un petit cercle s’accroche à l’anneau. Une bonne question relie de nombreux domaines de l’informatique.
- 03 / DISQUE
Un œil.
Le grand cercle intérieur dessine un œil : la vision et la concentration, la capacité à voir à travers la complexité.
- 04 / ORBITE
Le mouvement.
Les cercles sont posés sur une orbite, qui évoque la découverte : apprendre comme un chemin qu’on suit, pas comme une pile qu’on accumule.
LE VERRE / CALCULÉ, PAS DESSINÉ
Un logo qu’on peut
bousculer.
Sur le site, le logo n’est pas une image. C’est une plaque de verre calculée par lancer de rayons dans un simple shader WebGL, dessinée seulement dans le carré qui l’entoure, et qui réfracte les lumières derrière elle.
Il ne répond que de près.
Chaque forme bouge lentement d’elle-même. Près du pointeur, les blocs se changent en bulles et s’en écartent, puis reviennent en place.
Il suit la page.
Il se tient sur l’accueil, glisse derrière les panneaux dépolis quand la page défile, et revient pour l’appel final.
Il se replie sur le SVG.
Sans WebGL, le fichier statique mark.svg prend sa place. Avec les animations réduites, le verre reste immobile. La page ne dépend jamais de la 3D.
UNE FORME PAR OUTIL
Le même verre.
Un autre instrument.
Chaque page d’outil affiche sa propre forme de verre, avec les mêmes règles de matière, de lumière et de mouvement. La forme montre ce que fait l’outil.
?01 / ATFQ · ACCUEIL
Le logo
Le Q d’origine, pour l’organisation et pour atfq : boule, anneau et disque, repoussés par le pointeur.
◎02 / OMNISCIENT
Une lentille
Une sphère dans trois anneaux, chacun tournant sur ses propres axes. Près du pointeur, ils s’alignent de face et concentriques, comme une lentille qui fait la mise au point.
⧉03 / DISTROPROOF
Une matrice de cibles
Neuf cubes de verre, un par cible, et une perle (votre programme) qui saute de l’un à l’autre. Le pointeur écarte la grille et soulève le cube qui se trouve dessous.
▥04 / XPAC
Un graphe qui devient un plan
Cinq paquets reliés par des tiges, qui dérivent. Près du pointeur, ils s’empilent en une colonne bien rangée et les tiges disparaissent.
◰05 / VMANYWARE
Une définition et ses instances
Un cube de verre qui respire. Près du pointeur, des instances en bourgeonnent comme un liquide, s’éloignent, puis refondent dans l’unique définition.
COULEURS / DE LA GLACE AU VIOLET
Un fond presque noir.
Une lumière du cyan au violet.
La lumière vient d’une seule gamme, de la glace au violet, utilisée pour le dégradé du logo et les couleurs des outils. Les outils s’y placent dans l’ordre du parcours, d’Omniscient côté noyau jusqu’à VMAnyware côté homelab.
Fond et texte
- Fond
#050507Arrière-plan de la page et couleur du thème - Texte
#f0f0f5Titres et texte courant - Atténué
#9696a5Texte secondaire - Cyan
#82e9ffContours de focus, invites, accents - Violet
#b7a0ffSecond accent
Le dégradé du logo
- Glace
#e6fbffEn haut à gauche du logo - Brume
#c9d4ffArrêt du milieu, à 55 % - Lilas
#c3a8ffEn bas à droite du logo
Les outils, dans l’ordre du parcours
- Omniscient
#9cf5ffObserver - ATFQ
#8fdcffExpliquer - distroproof
#96b9ffVérifier - xpac
#aea0ffMettre en ordre - VMAnyware
#c38affDéployer
Les variables sont dans src/style.css ; les couleurs des outils dans src/tools.ts, le fichier que lit chaque page.
TYPOGRAPHIE ET SURFACES
Des titres serrés.
Des instruments en chasse fixe.
La même direction artistique que le premier site d’Omniscient : une police sans empattement pour ce qu’on lit, et une police à chasse fixe pour ce que dit la machine.
| Élément | Règle | Où |
|---|---|---|
h1, h2 | Inter, interlettrage négatif serré : titres en semi-gras, titres de section en medium | Titres de l’accueil et des sections |
eyebrow | Chasse fixe, 10–11 px, majuscules, interlettrage large | Étiquettes de section, numéros de cartes (01 / LABEL), textes d’interface |
code | Chasse fixe du système, ui-monospace en premier | Commandes, captures du terminal, valeurs |
.glass | Panneau dépoli : flou de l’arrière-plan, bordure claire de 1 px, douce lumière qui suit le pointeur | Cartes, terminaux, tableaux, blocs d’installation |
radius | Panneaux 18 px · contrôles 12 px · pastilles 6 px | Chaque surface |
motion | Apparition au défilement, décalée de 80 ms ; aucune avec les animations réduites | Chaque section |
Écrivez backdrop-filter sans son jumeau -webkit- : l’outil de minification du CSS ajoute le préfixe lui-même, et quand les deux sont présents il ne garde que la version préfixée, que Chrome ignore.
UTILISER LE LOGO
Un seul fichier.
Chaque page.
Utilisez le logo depuis une seule source, public/mark.svg, partout où il apparaît. Ne le copiez pas.
DANS UNE PAGE
<img class="logo-icon" src="/mark.svg" alt="" />