Design systemy SaaS
Design systemy wyodrębnione ze stron oprogramowania i SaaS: aplikacji do produktywności, narzędzi projektowych, CRM-ów i innych produktów sprzedawanych jako usługa. Większość łączy stonowaną paletę i jeden kolor akcentu z czytelną skalą typograficzną, co czyni je dobrym punktem wyjścia dla dashboardu lub strony marketingowej produktu.
3 przykłady DESIGN.md w tej kategorii, ze stron: Figma, Linear i Notion. Wyodrębnione z publicznych stron każdej witryny, to nie są oficjalne wytyczne marek. Nie znasz tego formatu? Przeczytaj, czym jest DESIGN.md.
Figma
Marketingowa strona Figma opiera się na surowym, czarno-białym systemie monochromatycznym, zakotwiczonym we własnościowym zmiennym kroju pisma figmaSans. Projekt jest przede wszystkim typograficzny: duże nagłówki o rozmiarach 88px/56px z ciasnym ujemnym odstępem między literami kontrastują z lekkim tekstem podstawowym o wadze 330. Przyciski CTA mają w pełni zaokrąglone kształty pigułki (border-radius: 9999px), wypełnione czerni z białym tekstem. Układ jest oparty na siatce, z maksymalną szerokością treści 1440px, dużym pionowym odstępem sekcji wynoszącym 80px i czystym, białym tłem. Głębia jest minimalna, a cienie to subtelne nakładki oparte na oklch. Lawendowo-fioletowy akcent (#cb9fd2) pojawia się w banerze stopki. Całość sprawia wrażenie pewnej siebie, typograficznie wyrafinowanej i mocno zorientowanej na markę.
Linear
System projektowania Linear to interfejs produktu nastawiony przede wszystkim na ciemny motyw, o wysokiej gęstości informacji, stworzony z myślą o zespołach inżynierskich. Paleta powierzchni opiera się na niemal czarnych tłach (#08090a, #0f1011) oraz warstwowych ciemnych szarościach, które odróżniają pasek boczny, karty i panele. Typografia opiera się wyłącznie na Inter Variable, z precyzyjnym ujemnym odstępem między literami przy dużych rozmiarach nagłówków, a do kodu w tekście używany jest Berkeley Mono. Język zaokrągleń jest celowo niewielki (dominuje 2–6 px), a kształty pigułki zarezerwowano dla odznak i znaczników statusu. Elewację wyrażają subtelne, 1-pikselowe obramowania wewnętrzne oraz cienie o niskiej przezroczystości, a nie dramatyczne warstwowanie. Główny kolor przycisków wezwania do działania to charakterystyczny dla Linear indygo (#5e6ad2), używany na przycisku Sign Up i kluczowych linkach.
Notion
Strona główna marketingowa Notion łączy głęboko granatową sekcję hero (#02093a) z jasnym tłem treści (#f6f5f4), stosując niestandardowy krój pisma NotionInter we wszystkich rolach tekstowych. Układ opiera się na siatce 12-kolumnowej z odstępami 28px, a język zaokrągleń łączy dwie wartości: 8px dla kart i 9999px dla pigułek. Elementy pływające otrzymują wielowarstwowy, stopniowo narastający system cieni. Niebieski marki (#2537b1) wyznacza przyciski wezwania do działania i akcenty, a semantyczna skala szarości (od gray-200 do gray-900) porządkuje hierarchię tekstu i powierzchni.
Nie ma tu strony, której potrzebujesz?
Wklej URL dowolnej strony i wygeneruj jej DESIGN.md. Kolory, typografia, odstępy i tokeny, gotowe dla twojego workflow z AI.