Design systems d’outils pour développeurs
Des design systems extraits de sites d’outils pour développeurs et d’infrastructure : hébergement, bases de données, API, IDE et produits DevOps. Beaucoup misent sur des surfaces sombres, des touches de police à chasse fixe et des blocs de code traités comme des composants à part entière, avec une typographie serrée et technique.
3 exemples de DESIGN.md dans cette catégorie, issus de Neon, Railway et Supabase. Extraits des pages publiques de chaque site, pas de chartes de marque officielles. Vous découvrez le format ? Lisez ce qu’est un DESIGN.md.
Neon
Le système de design de Neon est une marque orientée développeurs, pensée d'abord pour le sombre, construite sur un fond presque noir (#000000, #18191b) avec un vert néon vif comme couleur primaire (#00e599) et un vert intermédiaire en appui (#34d59a). Le système typographique associe Inter (interface et texte courant) à GeistMono (code et données), avec un interlettrage serré et négatif pour les deux. Les espacements suivent une grille de base de 4 px. Le rayon de bordure est uniformément minimal, à 4 px. L'élévation repose sur le contraste des bordures plutôt que sur les ombres, avec une seule ombre portée diffuse utilisée avec parcimonie. La section héro présente un fond de visualisation de données animé, pleine largeur, qui renforce l'identité de marque autour des bases de données et de l'infrastructure.
Railway
Le système de design de Railway est une interface de plateforme pour développeurs pensée d'abord pour le mode sombre, reposant sur des surfaces bleu marine presque noir (#13111c, #0b0b0f), un texte blanc cassé à fort contraste (#f7f7f8) et un accent violet distinctif (#853bce / #553f83). La section héros utilise IBM Plex Serif pour un poids éditorial, tandis qu'Inter assure tout le texte de l'interface et que JetBrains Mono / SF Mono sont réservées aux contextes de code. L'élévation repose sur des bordures à lueur blanche en retrait (rgba(255,255,255,0.2) 1.5px inset) plutôt que sur des ombres portées, ce qui donne à l'interface une esthétique de panneaux en verre. Le système d'espacement est basé sur une grille de 4px, avec un rythme marqué de 8/12/16/24/32. Les rayons de bordure sont serrés (4px dominant), avec des valeurs de 8px et 16px appliquées sélectivement aux cartes et aux conteneurs du héros.
Supabase
Supabase utilise un système de design orienté sombre, ancré sur un fond presque noir et profond (oklch ~0.19) avec un accent vert vif de marque (#3ecf8e / #3fcf8e). La mise en page s'organise autour d'une grille responsive de cartes de fonctionnalités, avec Manrope pour les titres d'affichage et Inter pour le texte de corps et l'interface. Source Code Pro gère l'ensemble des contextes monospace et de code. Le système de couleurs repose sur des propriétés personnalisées en oklch, nommées de façon sémantique. Les cartes ont un rayon de 12 px avec un traitement de bordure discret, les boutons un rayon de 6 à 8 px, et la densité globale reste modérée, sur une grille d'espacement de base de 8 px.
Vous ne trouvez pas le site qu’il vous faut ?
Collez une URL pour obtenir le DESIGN.md de n’importe quel site. Couleurs, typographie, espacements et tokens, prêts pour votre workflow IA.