Przykłady DESIGN.md
Prawdziwe pliki DESIGN.md wyodrębnione z publicznych stron. Każdy zawiera kolory, typografię, odstępy i komponenty strony w formacie, który czytają agenci AI do kodowania. Otwórz kartę, aby zobaczyć podgląd i skopiować plik do repozytorium.
Wyodrębnione z publicznych stron każdej witryny, to nie są oficjalne wytyczne marek. Nie znasz tego formatu? Przeczytaj, czym jest DESIGN.md.
Airbnb
Design system Airbnb opiera się na jednym zastrzeżonym zmiennym kroju pisma (Airbnb Cereal VF) i niemal monochromatycznej palecie neutralnych barw, z głębokim węglem (#222222) i jasnymi szarościami jako podstawą. Firmowy koral-róż „Rausch" (#ff385c) jest zarezerwowany wyłącznie dla głównych przycisków wezwania do działania i logo. Układ to responsywna siatka kart ze zdjęciami, z dużym udziałem obrazu w stosunku do tekstu, miękkimi, 20-pikselowymi zaokrągleniami rogów kart oraz wielowarstwowym systemem ambientowych cieni, który tworzy subtelną głębię bez ostrych kontrastów. Pasek wyszukiwania, w kształcie pigułki, jest wyraźnie wyeksponowany i łączy główną akcję użytkownika w jednym miejscu.
Anthropic
Design system Anthropic to oszczędna, typograficznie prowadzona tożsamość, zbudowana na dwóch autorskich krojach pisma: Anthropic Serif i Anthropic Sans, na ciepłym kremowym tle (#faf9f5). Paleta jest świadomie minimalna: niemal czarny (#141413) na ciepłej, lekko kremowej bieli, z wyciszonymi kamiennymi odcieniami do tekstu pomocniczego i obramowań. Duża, szeryfowa typografia nagłówków nadaje ton redakcyjny, a ciemny panel (niemal czarne tło z kremowym tekstem) tworzy wyrazisty kontrast. Całość wyraża intelektualną powagę i misję nastawioną na bezpieczeństwo dzięki dużej ilości white space, wysokiemu kontrastowi typograficznemu i zupełnemu braku ozdobników.
Apple
Tokeny projektowe wyodrębnione z analizy częstotliwości CSSOM bez interpretacji przez LLM.
Dribbble
Design system Dribbble opiera się na głębokim, niemal czarnym granacie (#0d0c22) zestawionym z czystą białą powierzchnią. Sygnaturowy gorąco różowy akcent (#ea4c89) jest używany oszczędnie, do wyróżnień redakcyjnych i podkreślania elementów interaktywnych. Cały system typograficzny opiera się wyłącznie na kroju Mona Sans we wszystkich wagach, a hierarchię buduje samą wagą i rozmiarem. Językiem geometrii są przyciski w kształcie pigułki (border-radius: 1e+07px) i zaokrąglone karty (promień 12px). Układ jest przestronny, oparty na siatce bazowej 8px, a elewację sygnalizują subtelne cienie zamiast ciężkiego nakładania warstw.
Duolingo - The world’s most popular way to learn
Tokeny projektowe wyodrębnione z analizy częstotliwości CSSOM bez interpretacji przez LLM.
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ę.
Harvey
Design system Harveya opiera się na autorskiej tożsamości z dwoma krojami pisma: HarveySerifFont, który buduje autorytet redakcyjny, oraz HarveySansFont, odpowiedzialny za funkcjonalną czytelność. Pasek nawigacji w ciepłej, niemal czarnej barwie (#0f0e0d) zestawiono z kremową, lekko złamaną bielą powierzchni treści (#fafaf9). Paleta jest celowo monochromatyczna: opiera się na stopniowanej skali ciepłych szarości (od gray-50 do gray-950) bez akcentów barwnych, co sygnalizuje zaufanie i powściągliwość, odpowiednie dla poważnych spraw prawnych. Wyniesienie elementów osiągnięto poprzez kontrast powierzchni, a nie cienie. Nagłówek główny korzysta z dużego kroju szeryfowego o wielkości 72px, co od razu nadaje typografii autorytetu, a tekst podstawowy i elementy interfejsu używają autorskiego kroju bezszeryfowego. Odstępy opierają się na siatce bazowej 8px z nazwanymi tokenami skali (xs, sm, md, xl, 2xl).
IKEA
IKEA-owa globalna strona główna opiera się na odważnym, płaskim systemie projektowym, którego głównym elementem jest ikoniczny żółty IKEA (#ffdb00) jako powierzchnia najważniejszych działań, a niebieski IKEA (#0058a3) pełni rolę akcentu logo marki. Cały system typograficzny opiera się na jednym, autorskim kroju pisma – Noto IKEA – w wagach 400 i 700, w ściśle określonej skali, od 14px dla tekstu podstawowego po 51px dla nagłówków wyróżniających. Wyniesienie elementów nad tło osiągnięte jest wyłącznie dzięki kontrastowi barw i strukturze układu, bez cieni. Układ korzysta z kontenera o maksymalnej szerokości 90rem z odstępem siatki 1,5rem na desktopie oraz spójnego tokenu zaokrąglenia 8px stosowanego do elementów interaktywnych. Ciepłe, lekko kremowe tło (#fffefb) łagodzi surowość tekstu w kolorze #111111, tworząc czytelne, wysokokontrastowe i dostępne doświadczenie lektury.
Klarna
System projektowy Klarna opiera się na wyrafinowanym, ciemnym granatowym kolorze podstawowym (#0b051d) oraz jaskrawych kolorach akcentowych, wśród których najbardziej charakterystyczny jest ich firmowy różowy (#ffa8cd). System wykorzystuje autorskie kroje pisma Klarna obok czcionek systemowych, stawia na zaokrąglone narożniki (najczęściej 32px) i utrzymuje wysoki kontrast zapewniający dostępność. Całość łączy profesjonalizm z przystępnością dzięki przestronnym odstępom i czytelnej hierarchii typograficznej.
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.
Magentix Studio
Magentix Studio ubiera studio produktów opartych na AI w redakcyjną, galeryjną estetykę.
Neon
System designu Neon to ciemna marka dla deweloperów, oparta na prawie czarnym tle (#000000, #18191b) z intensywnym neonowym zielonym kolorem podstawowym (#00e599) i uzupełniającym średnim zielonym (#34d59a). System typograficzny łączy Inter (interfejs i tekst podstawowy) z GeistMono (kod i dane), obie z ciasnym ujemnym odstępem między literami. Odstępy opierają się na siatce 4 px. Promień zaokrąglenia jest jednolicie minimalny, wynosi 4 px. Hierarchię warstw buduje kontrast obramowań, a nie cienie; pojedynczy, delikatny cień otoczenia pojawia się oszczędnie. Sekcja hero ma pełnoekranowe, animowane tło z wizualizacją danych, które wzmacnia tożsamość marki związanej z bazami danych i infrastrukturą.
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.
Paperclip
Paperclip to platforma do zarządzania agentami AI, zbudowana na śmiałym, ciemnym tle. Podstawą jest niemal czarny kolor (#0a0a0a), a tekst jest biały (#ffffff). Hero wyróżnia się wielobarwną, gradientową ilustracją ułożonych jeden na drugim kapsułkowych kształtów w kolorach magenta, fioletu, morskiej zieleni, pomarańczy i żółtego. Dzięki temu na ciemnym tle powstaje żywa, energetyczna tożsamość wizualna. Typografia łączy Inter Tight (wąski, mocny krój nagłówków z ujemnym odstępem między literami), Inter (tekst podstawowy i elementy interfejsu) oraz JetBrains Mono (kod i statusy). Główny przycisk wezwania do działania to biała pigułka na ciemnym tle. Semantyczny zielony kolor (#22c55e) oznacza w całym produkcie stany agentów i zadań. Nawigacja jest minimalistyczna i płaska, z subtelną dolną krawędzią.
PayPal
PayPal-homepage w wersji niderlandzkiej opiera się na odważnym, konsumenckim designie. Dominuje w niej intensywnie niebieska sekcja główna (#60cdff) z bardzo grubą, czarną typografią nagłówków w kroju PayPal Pro w900. Nawigacja jest biała z czarnym tekstem i zawiera dwa wyraźnie różne przyciski CTA: obrysowany „Inloggen” oraz wypełniony czarny „Rekening openen”. Na samej górze znajduje się ciemnogranatowy pasek z ogłoszeniem. Całość cechuje wysoki kontrast, mocno zaokrąglone, pigułkowe kształty i dominacja fontu marki, a jej przekaz to zaufanie i dostępność dla szerokiego grona odbiorców usług finansowych.
Railway
Design system Railway to ciemne, nastawione na twórców platformy deweloperskiej. Opiera się na głęboko granatowo-czarnych powierzchniach (#13111c, #0b0b0f) i wysokokontrastowym, lekko kremowym tekście (#f7f7f8) oraz charakterystycznym fioletowym akcentem marki (#853bce / #553f83). Nagłówek sekcji hero używa kroju IBM Plex Serif, nadającego mu redakcyjny ciężar, podczas gdy Inter obsługuje całą treść interfejsu, a JetBrains Mono i SF Mono pełnią rolę w kontekstach kodu. Wyniesienie elementów osiągnięto za pomocą wewnętrznych, białych obramówek z łagodnym blaskiem (rgba(255,255,255,0.2), 1.5px inset) zamiast cieni, co nadaje interfejsowi estetykę szklanych paneli. System odstępów oparty jest na wielokrotnościach 4px z wyraźnym rytmem 8/12/16/24/32. Promienie zaokrągleń są małe, przy czym dominuje 4px, a dla kart i kontenerów hero stosowane są selektywnie 8px i 16px.
Shopify
Strona główna marketingowa Shopify opiera się na dynamicznym, pełnoekranowym wideo w sekcji hero, z niemal czarnym tłem (#02090a), które wyraźnie kontrastuje z białym paskiem nawigacji nad nim. Główny akcent marki to intensywna miętowa zieleń (#36f4a4), używana oszczędnie do wyróżnień i stanów interaktywnych. Typografia łączy NeueHaasGrotesk w nagłówkach display i redakcyjnych z Inter-Variable w tekstach interfejsu. Przyciski CTA mają w pełni zaokrąglone kształty pigułki (border-radius: 9999px). Cały system jest pewny siebie, o wysokim kontraście i aspiracyjny, zaprojektowany tak, by zamieniać odwiedzających w sprzedawców.
Snapchat
Internetowa prezencja Snapchata opiera się na jasnym motywie o wysokim kontraście, z ikonicznym żółtym kolorem marki #FFFC00, prawie czarnymi powierzchniami podstawowymi (#121314) i czystym białym tłem strony. Projekt łączy krój Avenir Next (podstawowy) z Graphik (pomocniczym), tworząc przyjazną, a zarazem uporządkowaną hierarchię typograficzną. Elementy interaktywne, takie jak przyciski, pigułki i znaczniki, mają w pełni zaokrąglone narożniki (100px), natomiast pola wprowadzania używają subtelnego zaokrąglenia 5px. Nawigacja to unoszący się pasek w kształcie pigułki z delikatnym miękkim cieniem. Treści prezentowane są w dużych kartach z mediami i białym tekstem nałożonym na obraz, co tworzy immersyjny układ eksponujący podgląd aplikacji. Ogólna gęstość jest umiarkowana, z przestronnymi odstępami i wyraźną hierarchią wizualną, która łączy konwencje materiałów marketingowych z interfejsem produktu.
Stripe
Strona główna marketingowa Stripe opiera się na ściśle kontrolowanym systemie projektowym (HDS — Stripe Design System). Podstawą jest zmienna czcionka „sohne-var” w lekkich wagach (300–400), paleta od głębokiej granatowej do indygo z kolorem marki #533afd (Stripe Indigo) jako punktem odniesienia oraz charakterystyczne, rozciągnięte na całą szerokość spektralne tło sekcji hero. Komponenty mają niewielkie zaokrąglenia (4–6 px), płaskie do minimalnych cienie i układ oparty na siatce odstępów o podstawie 8 px. Ogólny ton jest autorytatywny, a zarazem przystępny: infrastruktura finansowa komunikowana pewną typografią i powściągliwym użyciem koloru.
Supabase
Supabase opiera się na systemie projektowym nastawionym przede wszystkim na ciemny motyw, z głęboko czarnym, prawie czarnym tłem (oklch ~0.19) i intensywnym zielonym akcentem marki (#3ecf8e / #3fcf8e). Układ tworzy responsywna siatka kart z funkcjami. Do nagłówków używany jest Manrope, a do tekstu podstawowego i elementów interfejsu Inter. Wszystkie konteksty monospace i kod obsługuje Source Code Pro. System kolorów oparty jest na niestandardowych właściwościach oklch z semantycznym nazewnictwem. Karty mają zaokrąglenie 12px i subtelne obramowanie, a przyciski 6–8px. Ogólna gęstość jest umiarkowana, a podstawą odstępów jest siatka 8px.
The Onion
The Onion to zdigitalizowany satyryczny dziennik: pogrubione, wąskie nagłówki gotyckie w kolorze czarnym, charakterystyczny leśny zielony akcent marki (#006b3a) używany w etykietach sekcji, odznakach trendów i wezwaniach do działania, a wszystko to na surowym, białym lub jasnoszarym tle. Typografia jest głównym narzędziem projektowym: nagłówki dominują wąskie i półwąskie groteski z Adobe Fonts (tablet-gothic, rocky-condensed), a tekst artykułów opiera się na utopia-std-caption. Układ jest gęsty informacyjnie, z ciasnymi siatkami kart, separatorami artykułów w postaci dolnych obramowań i niemal zerowymi promieniami zaokrągleń elementów konstrukcyjnych. Elewacja jest minimalna: kilka subtelnych cieni występuje wyłącznie w nakładkach.
Uber
Język designu Ubera łączy czysty minimalizm z żywymi ilustracjami, tworząc platformę transportową, która jest przystępna, a zarazem profesjonalna. Ostra baza czarno-biała zapewnia przejrzystość i czytelność, a kolorowe ilustracje w sekcjach hero dodają ciepła i ludzkiego wymiaru. Typografia opiera się na autorskiej rodzinie UberMove, co zapewnia spójność marki, a obfite odstępy tworzą przestrzeń oddechu w całym interfejsie.
WIRED
WIRED-owa dokumentacja systemu projektowego to wysokokontrastowa, redakcyjna struktura w skali szarości, oparta na zastrzeżonym systemie typograficznym (Breve Text, WIRED Mono, WiredDisplay, Apercu) i niemal zerowej palecie barw. Czerń (#000000), występująca w 2961 wystąpieniach, dominuje w tekście, obramowaniach, ikonach i stanach interaktywnych. Biel (#ffffff) stanowi główną powierzchnię. Kolor akcentu pojawia się oszczędnie: jedynie #057dbc, niebieski marki, używany jest w przyciskach wezwania do subskrypcji. Układ opiera się na uporządkowanej, wielokolumnowej siatce tekstów, z ciasnym podstawowym odstępem 8 px, płaskimi powierzchniami bez cieni i minimalnym zaokrągleniem narożników (standardowo 4 px). Kluczowym wyróżnikiem jest typografia: tekst artykułów składa się krojem Breve Text w rozmiarze 19 px, etykiety sekcji używają WIRED Mono, pisanego wielkimi literami z rozstrzeleniem, a nagłówki wyświetlane korzystają z WiredDisplay. Całość sprawia wrażenie autorytatywnej, gęstej informacyjnie i zorientowanej przede wszystkim na płynność czytania.
xAI
xAI to witryna marketingowa, która opiera się na ciepłej, kremowo-białej palecie powierzchni, z kolorem --color-ivory (#f9f8f6) i --color-white (#ffffff) jako punktami odniesienia, a prawie czarny #0a0a0a pełni rolę dominującego koloru tekstu i pierwszego planu. System typograficzny dzieli się na universalSansDisplay do dużych nagłówków (60–72 px, ciasne ujemne odstępy między literami), universalSans do treści podstawowej i elementów interfejsu oraz GeistMono do kodu i kontekstów terminalowych. Język zaokrągleń zdominowany jest przez kształty pigułek o promieniu 9999px w przyciskach CTA i znacznikach, a karty i pola wejściowe mają promień 12px i 6px. Elewacja jest minimalna: karty korzystają z miękkiego, wielowarstwowego cienia, podczas gdy większość powierzchni jest płaska. Ogólny ton jest techniczno-premium: stonowany kolor, obszerne białe przestrzenie i wyraźna estetyka kodu monospace, która sygnalizuje wiarygodność wobec deweloperów.
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.