Design systemy AI
Design systemy wyodrębnione ze stron produktów AI, modeli i ośrodków badawczych: asystentów, dostawców modeli i narzędzi AI. Część łączy spokojną, redakcyjną typografię z ciepłymi, neutralnymi paletami; inne przejmują ciemny, techniczny styl produktów deweloperskich.
4 przykłady DESIGN.md w tej kategorii, ze stron: Anthropic, Harvey, Paperclip i xAI. Wyodrębnione z publicznych stron każdej witryny, to nie są oficjalne wytyczne marek. Nie znasz tego formatu? Przeczytaj, czym jest DESIGN.md.
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.
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).
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ą.
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.