KI-Designsysteme
Designsysteme, extrahiert aus Websites von KI-Produkten, Modellen und Forschung: Assistenten, Modellanbieter und KI-Tools. Manche kombinieren ruhige, redaktionelle Typografie mit warmen, neutralen Paletten; andere übernehmen den dunklen, technischen Look von Entwicklerprodukten.
4 DESIGN.md-Beispiele in dieser Kategorie, von Anthropic, Harvey, Paperclip und xAI. Aus den öffentlichen Seiten der jeweiligen Website extrahiert, keine offiziellen Markenrichtlinien. Neu beim Format? Lies, was eine DESIGN.md ist.
Anthropic
Das Designsystem von Anthropic ist eine zurückhaltende, typografisch geprägte Identität, die auf zwei eigens entworfenen Schriftarten basiert: Anthropic Serif und Anthropic Sans. Sie stehen vor einem warmen elfenbeinfarbenen Hintergrund (#faf9f5). Die Farbpalette ist bewusst minimal gehalten: Nahezu Schwarz (#141413) auf warmem Off-White, ergänzt durch gedämpfte Steintöne für sekundären Text und Rahmen. Großformatige Serifen-Display-Schrift trägt die redaktionelle Stimme, während ein dunkler Panelbereich (nahezu schwarzer Hintergrund mit elfenbeinfarbenem Text) für dramatischen Kontrast sorgt. Die Gesamtästhetik vermittelt intellektuellen Ernst und eine sicherheitsorientierte Mission durch großzügigen Weißraum, hohen typografischen Kontrast und vollständigen Verzicht auf dekorative Ornamente.
Harvey
Harveys Designsystem basiert auf einer eigenständigen Dual-Schrift-Identität: HarveySerifFont für redaktionelle Autorität und HarveySansFont für funktionale Klarheit. Dazu kommen eine warm-schwarze Navigationsleiste (#0f0e0d) und eine elfenbeinfarbene Off-White-Fläche (#fafaf9) für den Inhalt. Die Palette ist bewusst monochrom und arbeitet mit einer abgestuften warmen Graustufenskala (gray-50 bis gray-950) ohne Akzentfarben. Das vermittelt Vertrauen und Zurückhaltung, was für hochsensible juristische Arbeit passend ist. Erhebung entsteht über Flächenkontraste statt über Schatten. Die Hero-Überschrift setzt eine große Serifenschrift mit 72px und schafft so sofort typografische Autorität, während Fließtext und UI-Elemente die eigene Sans-Schrift verwenden. Der Abstand folgt einem 8px-Raster mit benannten Skalen-Tokens (xs, sm, md, xl, 2xl).
Paperclip
Paperclip ist eine Plattform zur Verwaltung von KI-Agenten mit einem markanten Design auf dunkler Fläche, verankert durch einen nahezu schwarzen Hintergrund (#0a0a0a) und weißen (#ffffff) Vordergrundtext. Der Hero-Bereich wird von einer lebendigen, mehrfarbigen Verlaufsillustration aus übereinandergestapelten Pill- und Kapselformen in Magenta, Violett, Türkis, Orange und Gelb geprägt, die vor dem dunklen Hintergrund eine bunte, energiegeladene visuelle Identität erzeugt. Die Typografie kombiniert Inter Tight (schmal, schwere Überschriften mit negativem Buchstabenabstand), Inter (Fließtext und UI) und JetBrains Mono (Code und Statusangaben). Der primäre Call-to-Action ist ein weißer Pill-Button auf dunklem Grund. Ein semantisches Grün (#22c55e) als Statussystem kennzeichnet durchgängig in der Produkt-Oberfläche den Zustand von Agenten und Aufgaben. Die Navigation ist minimal und flach gehalten, mit einer dezenten unteren Linie.
xAI
xAI nutzt auf seiner Marketingseite eine warme Off-White-Flächenpalette, die sich auf --color-ivory (#f9f8f6) und --color-white (#ffffff) stützt, während nahezu schwarzes #0a0a0a als dominierende Text- und Vordergrundfarbe dient. Das typografische System gliedert sich in universalSansDisplay für große Display-Überschriften (60–72px mit engem negativem Buchstabenabstand), universalSans für Fließtext und UI-Texte sowie GeistMono für Code- und Terminal-Kontexte. Die Formensprache wird von 9999px-Pillenformen bei Call-to-Action-Buttons und Tags bestimmt, während Karten und Eingabefelder 12px bzw. 6px Radius verwenden. Die Elevation ist minimal: Karten erhalten einen weichen, mehrschichtigen Schlagschatten, die meisten Flächen bleiben jedoch flach. Der Gesamtton ist technisch-premium: zurückhaltende Farbigkeit, großzügiger Weißraum und eine ausgeprägte Monospace-Code-Ästhetik, die Entwicklerkompetenz signalisiert.
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.