DESIGN.md-Beispiele
Echte DESIGN.md-Dateien, extrahiert aus öffentlichen Websites. Jede erfasst Farben, Typografie, Abstände und Komponenten einer Website in dem Format, das KI-Coding-Agenten lesen. Öffne eine Karte, um sie anzusehen und in dein Repo zu kopieren.
Aus den öffentlichen Seiten der jeweiligen Website extrahiert, keine offiziellen Markenrichtlinien. Neu beim Format? Lies, was eine DESIGN.md ist.
Airbnb
Das Designsystem von Airbnb basiert auf einer einzigen proprietären Variablenschrift (Airbnb Cereal VF) und einer nahezu monochromen neutralen Palette, die von tiefem Anthrazit (#222222) und hellen Grautönen getragen wird. Das markentypische Korallenrosa „Rausch“ (#ff385c) ist ausschließlich für primäre Call-to-Actions und das Logo vorbehalten. Das Layout besteht aus einem responsiven Raster mit Fotokarten, großzügigen Bild-Text-Verhältnissen und weichen, 20 px großen abgerundeten Ecken bei den Karten. Ein mehrschichtiges, ambientes Schattensystem erzeugt subtile Tiefe ohne harte Kontraste. Die Suchleiste ist ein auffälliger, pillenförmiger Container, der die zentrale Nutzeraktion bündelt.
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.
Apple
Design-Tokens, aus einer CSSOM-Häufigkeitsanalyse ohne LLM-Interpretation extrahiert.
Dribbble
Das Designsystem von Dribbble basiert auf einem tiefen, nahezu schwarzen Marineton (#0d0c22), der mit einer klaren weißen Fläche kombiniert wird. Akzentuiert wird es durch das markante Pink (#ea4c89), das sparsam für redaktionelle Hervorhebungen und interaktive Elemente eingesetzt wird. Das gesamte Typografiesystem stützt sich ausschließlich auf Mona Sans in allen Schnitten und erzeugt Hierarchie allein über Gewicht und Größe. Pillenförmige Schaltflächen (border-radius: 1e+07px) und abgerundete Karten (12px Radius) prägen die geometrische Formensprache. Das Layout ist großzügig und folgt einem 8px-Grundraster. Die Elevation wird eher über dezente Schlagschatten als über starke Überlagerungen vermittelt.
Duolingo - The world’s most popular way to learn
Design-Tokens, aus einer CSSOM-Häufigkeitsanalyse ohne LLM-Interpretation extrahiert.
Figma
Figmas Marketingseite setzt auf ein konsequent schwarz-weißes Monochrom-System, das von der eigenen Variable-Schrift figmaSans getragen wird. Das Design ist typografisch geprägt: große Display-Überschriften mit 88px und 56px und engem negativen Buchstabenabstand stehen im Kontrast zu leichtem Fließtext mit Schriftstärke 330. CTAs sind vollständig abgerundete Pillenformen (border-radius: 9999px) in massivem Schwarz mit weißer Schrift. Das Layout basiert auf einem Raster mit maximaler Inhaltsbreite von 1440px, großzügigem vertikalem Abschnittsabstand von 80px und einer klaren weißen Fläche. Tiefe wird minimal eingesetzt, Schatten sind dezente, auf oklch basierende Überlagerungen. Ein lavendelfarbener Lila-Akzent (#cb9fd2) erscheint im Footer-Banner. Die Gesamtästhetik wirkt souverän, typografisch anspruchsvoll und markenbetont.
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).
IKEA
IKEAs globale Startseite setzt auf ein kräftiges, flaches Design-System, das sich um das ikonische IKEA-Gelb (#ffdb00) als primäre Aktionsfläche und das IKEA-Blau (#0058a3) als Akzent des Markenlogos gruppiert. Das gesamte typografische System basiert auf einer einzigen Schrift, Noto IKEA, in den Gewichten 400 und 700 und einer streng definierten Skala von 14px Fließtext bis zu 51px Display-Überschriften. Erhöhung wird ausschließlich über Farbkontraste und Layoutstruktur vermittelt, nicht über Schatten. Das Layout verwendet einen Container mit maximaler Breite von 90rem und einen Grid-Abstand von 1,5rem auf dem Desktop sowie einen einheitlichen 8px-Border-Radius-Token für interaktive Elemente. Der cremeweiße Hintergrund (#fffefb) verleiht dem stark kontrastierenden Text (#111111) Wärme und sorgt für ein kontrastreiches, gut lesbares Leseerlebnis.
Klarna
Das Designsystem von Klarna setzt auf ein anspruchsvolles, dunkles Marineblau als Primärfarbe (#0b051d), ergänzt durch leuchtende Akzentfarben mit dem charakteristischen Pink (#ffa8cd). Das System verwendet eigens entwickelte Klarna-Schriften zusammen mit Systemschriften, betont abgerundete Ecken (32px am häufigsten) und hält einen hohen Kontrast für gute Barrierefreiheit ein. Durch großzügige Abstände und eine klare Typografie-Hierarchie verbindet das Design Professionalität mit Nahbarkeit.
Linear
Das Designsystem von Linear ist dark-first, eine Produkt-UI mit hoher Informationsdichte für Engineering-Teams. Die Flächenpalette basiert auf nahezu Schwarz (#08090a, #0f1011), ergänzt durch geschichtete dunkle Grautöne, die Seitenleiste, Karten und Panels voneinander abheben. Die Typografie besteht ausschließlich aus Inter Variable mit präzisem, negativem Buchstabenabstand bei Display-Größen, für Inline-Code wird Berkeley Mono verwendet. Die Eckenradien sind bewusst klein gehalten (überwiegend 2–6px), Pillenformen sind Badges und Status-Chips vorbehalten. Elevation entsteht über dezente 1px-Innenrahmen und Schatten mit niedriger Deckkraft statt über dramatische Schichtung. Die primäre CTA-Farbe ist das charakteristische Indigo von Linear (#5e6ad2), eingesetzt beim Sign-Up-Button und bei zentralen Links.
Magentix Studio
Magentix Studio kleidet ein KI-first-Produktstudio in redaktionelle, galerieartige Gestaltung.
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.
Notion
Die Marketing-Startseite von Notion kombiniert einen tiefen Marineton (#02093a) im Hero-Bereich mit einem hellen Hintergrund (#f6f5f4) im Hauptteil. Für alle Textrollen kommt eine eigene Schrift (NotionInter) zum Einsatz. Das Design basiert auf einem 12-Spalten-Raster mit 28px Rinnenabstand und einer doppelten Eckenlogik: 8px für Karten, 9999px für Pills. Schwebende UI-Elemente erhalten ein mehrschichtiges, progressives Schattensystem. Die Markenfarbe Blau (#2537b1) prägt CTAs und Akzenthervorhebungen, während eine semantische Graustufenleiter (gray-200 bis gray-900) Text- und Flächenhierarchie strukturiert.
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.
PayPal
PayPals niederländische Startseite setzt auf ein kräftiges, verbraucherorientiertes Design mit einem leuchtenden Himmelblau (#60cdff) im Hero-Bereich und extrem fetten schwarzen Display-Schriften (PayPal Pro w900). Die Navigation ist weiß mit schwarzer Schrift und enthält zwei deutlich unterschiedliche CT
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.
Shopify
Die Styling-Zusammenfassung der Marketing-Startseite von Shopify setzt auf einen eindrucksvollen Video-Hero über die volle Breite mit einem nahezu schwarzen Hintergrund (#02090a), der sich scharf von der weißen Navigationsleiste darüber absetzt. Die primäre Markenakzentfarbe ist ein kräftiges Mintgrün (#36f4a4), das sparsam für Hervorhebungen und interaktive Zustände eingesetzt wird. Die Typografie teilt sich auf: NeueHaasGrotesk für Display- und redaktionelle Überschriften, Inter-Variable für UI-Fließtext. CTAs verwenden vollständig abgerundete Pill-Formen (border-radius: 9999px). Das Gesamtsystem wirkt selbstbewusst, kontraststark und aspirativ und ist darauf ausgelegt, Besucher in Händler zu verwandeln.
Snapchat
Die Webpräsenz von Snapchat setzt auf ein kontrastreiches helles Design, das sich um das markante Markengelb #FFFC00 gruppiert. Dazu kommen nahezu schwarze Flächen in #121314 als primäre Oberflächen und ein klarer weißer Seitenhintergrund. Das Design kombiniert Avenir Next (primär) mit Graphik (sekundär) für eine freundliche, zugleich klar strukturierte typografische Hierarchie. Schaltflächen, Pills und Tags verwenden vollständig abgerundete Ecken mit 100px Radius, Eingabefelder hingegen einen dezenten Radius von 5px. Die Navigation ist eine schwebende Pill mit einem weichen Schatten. Inhalte werden in großen Medienkarten mit darüberliegendem weißem Text präsentiert, was ein immersives, app-vorschau-orientiertes Layout schafft. Die Informationsdichte ist moderat, mit großzügigen Abständen und einer klaren visuellen Hierarchie, die Marketing- und Produkt-UI-Konventionen miteinander verbindet.
Stripe
Stripes Marketing-Startseite nutzt ein streng kontrolliertes Design-System (HDS – Stripe Design System), das auf der Variablenschrift „sohne-var“ in leichten Schnitten (300–400) basiert. Die Markenpalette reicht von tiefem Marineblau bis Indigo und wird durch #533afd (Stripe Indigo) verankert. Die Hero-Sektion zeigt einen charakteristischen randlosen spektralen Verlauf. Komponenten haben kleine Eckradien (4–6px), flache bis minimale Schatten und folgen einem 8px-Basisraster für Abstände. Insgesamt wirkt der Ton maßgebend und dennoch nahbar: Finanz-Infrastruktur wird durch selbstbewusste Typografie und zurückhaltenden Farbeinsatz vermittelt.
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.
The Onion
Das Designsystem von The Onion ist eine digitalisierte Satirezeitung: markante, schmale Gothic-Headlines in Schwarz, ein unverwechselbarer Waldgrün-Akzent (#006b3a) für Rubrikenlabels, Trend-Badges und CTAs, alles vor einem nüchternen weißen bis hellgrauen Hintergrund. Typografie ist das zentrale Gestaltungsmittel: Adobe-Fonts-Grotesken in schmaler und halbschmaler Schnitt (tablet-gothic, rocky-condensed) dominieren die Headlines, während utopia-std-caption den Fließtext übernimmt. Das Layout ist informationsdicht, mit engen Kartenrastern, Trennlinien unterhalb der Artikel und nahezu keinen Eckenradien bei strukturellen Elementen. Die Elevation ist minimal: nur wenige dezente Schatten auf Overlays.
Uber
Die Designsprache von Uber verbindet klaren Minimalismus mit lebendigen Illustrationen zu einer zugänglichen und zugleich professionellen Transportplattform. Die kontrastreiche Basis aus Schwarz und Weiß sorgt für Klarheit und Lesbarkeit, während farbige Hero-Illustrationen Wärme und menschliche Nähe schaffen. Die Typografie stützt sich auf die eigens entwickelte Schriftfamilie UberMove, die für eine konsistente Markenwirkung sorgt, und großzügige Abstände schaffen überall in der Oberfläche Raum zum Atmen.
WIRED
WIRED's Designsystem ist ein kontraststarkes, redaktionell geprägtes Monochrom-Framework, das auf einer proprietären Schriftfamilie (Breve Text, WIRED Mono, WiredDisplay, Apercu) und einer nahezu farblosen Palette aufbaut. Schwarz (#000000) dominiert mit 2961 Treffern und prägt Text, Rahmen, Icons und interaktive Zustände. Weiß (#ffffff) bildet die primäre Fläche. Akzentfarbe wird sparsam eingesetzt: Nur #057dbc erscheint als Markenblau für Abo-CTAs. Das Layout nutzt ein strukturiertes mehrspaltiges Story-Raster mit engem 8px-Grundabstand, flachen Flächen ohne Schatten und minimalen Eckradien (4px als Standard). Typografie ist das wichtigste Unterscheidungsmerkmal: Redaktioneller Fließtext verwendet Breve Text in 19px, Abschnittslabels setzen WIRED Mono in Großbuchstaben mit gesperrtem Laufweite, und Display-Überschriften nutzen WiredDisplay. Die Gesamtästhetik wirkt autoritativ, informationsdicht und auf den Lesefluss ausgerichtet.
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.