SaaS-Designsysteme
Designsysteme, extrahiert aus Software- und SaaS-Websites: Produktivitäts-Apps, Projekt-Tools, CRMs und andere Produkte, die als Service verkauft werden. Die meisten kombinieren eine zurückhaltende Palette und eine Akzentfarbe mit einer klaren Typo-Skala. Damit sind sie ein guter Ausgangspunkt für ein Dashboard oder eine Marketing-Seite für ein Produkt.
3 DESIGN.md-Beispiele in dieser Kategorie, von Figma, Linear und Notion. Aus den öffentlichen Seiten der jeweiligen Website extrahiert, keine offiziellen Markenrichtlinien. Neu beim Format? Lies, was eine DESIGN.md ist.
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.
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.
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.
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.