Ui
plan kliniczny na papierze matowym
shadcn/ui to warsztat do tworzenia monochromatycznego systemu projektowego: czyste białe płótno, miękkie, ciepłe szare powierzchnie i karty o dużym promieniu umieszczone na najsubtelniejszych krawędziach. Interfejs jest niemal całkowicie achromatyczny – czarny tekst, białe powierzchnie, szare tony drugorzędne – z pojedynczym, wyrazistym czerwonym kolorem zarezerwowanym dla komunikatów o błędach i niczego więcej. Typografia opiera się na geometrycznej neutralności Geista z minimalną wysokością liter na ekranach, tworząc spokojny, kodowy klimat, który bardziej przypomina infrastrukturę dla deweloperów niż produkt konsumencki.
Minimalistyczna grafika — system składa się niemal wyłącznie z interfejsu użytkownika. Brak kluczowych zdjęć, ilustracji i grafik dekoracyjnych. Prezentacje produktów prezentowane są jako makiety komponentów (karty, pola wprowadzania, przyciski) w siatce, pełniąc zarówno funkcję dokumentacji, jak i treści wizualnej. Ikony to cienkie linie geometryczne (prawdopodobnie zapożyczone z Lucide) o grubości 1,5–2 pikseli w kolorach #0a0a0a lub #737373, używane oszczędnie jako wskazówki funkcjonalne. Językiem wizualnym są same komponenty interfejsu użytkownika — strona funkcjonuje jak żywy przewodnik stylistyczny, w którym każdy widoczny element jest widocznym elementem projektu.
Paleta
Neutralny
- Canvas
#f5f5f5— Tło strony, stonowane wypełnienie powierzchni, dodatkowe przyciski. - Paper
#ffffff— Powierzchnie kart, tła pop-up, wypełnienia głównych przycisków - Surface Alt
#fafafa— Tło paska bocznego, dyskretna opcja karty, stan bezczynności pola wprowadzania danych. - Ink
#0a0a0a— Tekst główny, nagłówki, etykiety przycisków, kontury ikon. - Ink Soft
#171717— Obrazy tła przycisków z wypełnieniem, dodatkowy tekst na jasnych powierzchniach. - Mid Gray
#737373— Główny tekst, tekst zastępczy, etykiety pomocnicze i wypełnienie ikony w stanie spoczynku są wyciszone.
Typografia
od 12 do 48px · 8 kroków
- Geist — wymiana: Inter · wytyczne 400, 500, 600 · Cały tekst interfejsu — tekst główny o grubości linii 14 px/400 px, nagłówki o grubości linii 24–48 px/600 px i przyciski o grubości linii 13–14 px/500 px. Geometryczne kształty liter Geist i jednolita grubość linii zapewniają neutralny charakter narzędzi programistycznych; grubość linii 600 px, odstępy między literami 48 px i odstępy między literami -0,05 em zapewniają czytelne i pewne nagłówki, które wyglądają na przemyślane, a nie edytowane.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8px |
| Promień przycisku | 18px |
| Promień karty | 24px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 48-80px |
| Szerokość strony | 1280px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Ui i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Ventriloc — Obserwatorium redakcyjne danych na temat ciepłego papieru – pojedynczy pomarańczowy żar podkreślający monochromatyczną precyzję
- Geniestudio — Miękki notes do czytania w świetle dziennym – taki z szerokimi marginesami i jedną grubą kreską pióra
- xAI — Ciepły krem laboratoryjny z czarną tabletką
- Cal — Monochromatyczna praktyczność, ludzkie podejście. System, który stawia na przejrzystość i funkcjonalność poprzez surową paletę czerni i bieli, ale łagodzi ją przyjazną typografią i zaokrąglonymi kształtami.
- Scale — Wysokiej jakości laboratorium fotograficzne o jakości muzealnej połączone z projektem technicznym
- Contractbook — kontrakty na kremowy papier pod ultramarynowym niebem
- AutoSend — Przytulne, kamienne studio z pojedynczą, fioletową lampą, w którym szeryfowe nagłówki i jaskrawe, indygowe wezwania do działania współistnieją w jednej cichej, niemal białej przestrzeni.
- Air — rzeźba „Północne niebo przez szkło”
- SpatialChat — fioletowy puls na białym pergaminie
- Squarespace — Kinowa galeria monochromatyczna
- Giga — Północny horyzont nad zmrożonym obsydianem
- Supabase — Edytor kodu o północy z fosforyzującą zieloną kropką – pojedynczym impulsem chromatycznym na morzu pyłu węglowego