Designsysteme von Entwickler-Tools
Designsysteme, extrahiert aus Websites für Entwickler-Tools und Infrastruktur: Hosting, Datenbanken, APIs, IDEs und DevOps-Produkte. Viele setzen auf dunkle Flächen, Monospace-Akzente und Codeblöcke als vollwertige Komponenten, dazu eine knappe, technische Typografie.
3 DESIGN.md-Beispiele in dieser Kategorie, von Neon, Railway und Supabase. Aus den öffentlichen Seiten der jeweiligen Website extrahiert, keine offiziellen Markenrichtlinien. Neu beim Format? Lies, was eine DESIGN.md ist.
Neon
Das Designsystem von Neon ist eine dunkel-zentrierte Entwickler-Marke, aufgebaut auf einer nahezu schwarzen Fläche (#000000, #18191b) mit einer leuchtenden neongrünen Primärfarbe (#00e599) und einem unterstützenden mittleren Grün (#34d59a). Das typografische System kombiniert Inter (UI/Fließtext) mit GeistMono (Code/Daten), beide mit engem negativem Buchstabenabstand. Der Abstand folgt einem 4px-Raster. Der Eckenradius ist durchgängig minimal bei 4px. Erhebung entsteht über Rahmenkontraste statt über Schatten, mit einem einzigen, sparsam eingesetzten weichen Schlagschatten. Der Hero-Bereich zeigt einen randlos gestalteten, animierten Hintergrund mit Datenvisualisierung, der die Markenidentität rund um Datenbank und Infrastruktur unterstreicht.
Railway
Railways Designsystem ist eine dunkel geprägte Entwicklerplattform-Oberfläche, verankert in tief nahezu schwarzen Marineflächen (#13111c, #0b0b0f), kontrastreichem Off-White-Text (#f7f7f8) und einem markanten lila Markenakzent (#853bce / #553f83). Der Hero-Bereich setzt IBM Plex Serif für redaktionelles Gewicht ein, während Inter sämtliche UI-Texte übernimmt und JetBrains Mono / SF Mono die Code-Kontexte bedienen. Erhebung entsteht durch innere weiß leuchtende Rahmen (rgba(255,255,255,0.2) 1.5px inset) statt durch Schlagschatten, was der Oberfläche eine Glas-Panel-Ästhetik verleiht. Das Abstandssystem basiert auf 4px mit einem klaren Rhythmus aus 8/12/16/24/32. Die Eckradien sind knapp gehalten (vorherrschend 4px), mit gezielt eingesetzten 8px und 16px für Karten und Hero-Container.
Supabase
Supabase setzt auf ein dunkel-zuerst ausgerichtetes Design-System, das auf einem tiefen, nahezu schwarzen Hintergrund (oklch ~0.19) und einer leuchtenden grünen Markenakzentfarbe (#3ecf8e / #3fcf8e) basiert. Das Layout ist um ein responsives Raster aus Feature-Karten aufgebaut, mit Manrope für Überschriften und Inter für Fließtext und UI-Elemente. Source Code Pro kommt in allen Monospace- und Code-Kontexten zum Einsatz. Das Farbsystem beruht auf oklch-Custom-Properties mit semantischer Benennung. Karten haben einen Eckenradius von 12px und eine dezente Rahmengestaltung, Buttons 6–8px Radius, und die Gesamtdichte ist moderat mit einem 8px-Basisraster für Abstände.
Deine Website ist nicht dabei?
Füge eine beliebige URL ein und hol dir eine DESIGN.md von jeder Website. Farben, Typografie, Abstände und Tokens, bereit für deinen KI-Workflow.