Dub
Panel sterowania z matowego papieru ryżowego firmy Link
System wizualny Duba charakteryzuje się powściągliwą, niemal redakcyjną estetyką SaaS: niemal białe płótno, połączone cienkimi obramowaniami, a nie wystającymi elementami, z gęstą monochromatyczną typografią zapewniającą wsparcie strukturalne i pojedynczym, jasnoniebieskim kolorem (#2563eb), który tworzy wyrazisty akcent. Na pierwszy rzut oka powierzchnie pozostają płaskie i bezramkowe, ale każdy kontener ma 1-pikselowy margines #e5e5e5, przywodzący na myśl wydrukowany dokument. Osobowość jest podkreślana przez niewielki zestaw kolorowych akcentów w kształcie „pigułki” (pomarańczowy, zielony, fioletowy), które unoszą się nad neutralną paletą barw, oraz nagłówki, które są pewne siebie i nowoczesne, ale nie krzykliwe. Komponenty są kompaktowe i gęste: 8-pikselowe marginesy, 12-pikselowy promień karty, etykiety w kształcie pigułki o szerokości 9999 pikseli oraz niewidoczne elementy sterujące zamiast ciężkich, wypełnionych przycisków.
Strona zbudowana jest w oparciu o wyśrodkowany układ o maksymalnej szerokości około 1200 px. Głównym elementem jest wyśrodkowany blok tekstowy z trzema ruchomymi elementami (Programy partnerskie, Analityka konwersji, Krótkie linki) umieszczonymi poziomo nad dużym układem produktów. Sekcje ułożone są pionowo z równomiernymi odstępami między wierszami o szerokości 64 px, naprzemiennie z białym tłem i mgiełką papieru #f5f5f5 dla separacji tonalnej. Dolna sekcja ma układ w kształcie litery Z: tekst redakcyjny jest wyśrodkowany w środkowej tercji, a ruchome karty interfejsu użytkownika są zakotwiczone na lewym i prawym marginesie, tworząc asymetryczny, przypominający magazyn rytm. Chmura z logo to prosta siatka 5x2, wyśrodkowana na stronie. Nawigacja to minimalistyczny górny pasek – logo po lewej stronie, nawigacja pośrodku, grupa dwóch przycisków (przycisk „Zaloguj” i wypełniony przycisk „Zarejestruj”) po prawej – bez stałego lub dużego menu. Układ pulpitu nawigacyjnego głównego okna prezentuje klasyczny dwukolumnowy układ aplikacji: stały pasek boczny (o szerokości zbliżonej do 240 px) + obszar treści, który określa gęstość informacji o produkcie dla odwiedzających, zanim zaczną przewijać.
Wizualizacje koncentrują się na produktach, a nie na stylu życia. Ekran główny jest wyśrodkowany na dużym zrzucie ekranu pulpitu, przedstawiającym makietę rzeczywistego produktu z nawigacją boczną, tabelą danych i ruchomymi elementami interfejsu użytkownika, rozmieszczonymi jako płaski panel na białym płótnie. Loga klientów są wyświetlane w siatce w odcieniach szarości (beehiv, superpower, Chatbase itp.), aby podkreślić ich obecność w mediach społecznościowych. Są one pozbawione koloru, aby pojedynczy niebieski akcent strony pozostał dominujący. Pływające karty partnerów (małe profile i kafelki z danymi o przychodach/płatnościach) poruszają się wokół bloków tekstu redakcyjnego u dołu, tworząc wrażenie głębi bez użycia cieni na samym tekście. Wzór tła w postaci kropkowanej siatki to charakterystyczna cecha: cienki rząd małych kropek o bardzo niskim stopniu krycia tworzy teksturę i wrażenie systemu projektowego/powierzchni rysunkowej, podkreślając pozycjonowanie witryny jako „nowoczesnej platformy atrybucji linków”. Ikonografia jest minimalistyczna, z konturami i wypełnieniami, a znaczniki cech wykorzystują paletę akcentów (mandarynkowy, lawendowy fiolet, miętowa zieleń). Nie użyto żadnych fotografii, ilustracji ani modeli 3D – sam interfejs użytkownika produktu jest językiem wizualnym.
Paleta
Marka
- Electric Blue
#2563eb— Zastosowano główny kolor marki – logo, linki, kluczowe wskaźniki efektywności (KPI), stany aktywności i akcenty ikon. Jedynym wizualnym atutem systemu jest intensywny błękit na białym tle. - Deep Sapphire
#1e40af— Główne tło przycisku akcji, pogrubione wypełnienie wezwania do działania — jedyny kolor oznaczający czynność — jest stosowane oszczędnie, aby przyciągnąć uwagę.
Neutralny
- Canvas White
#ffffff— Tło strony, powierzchnia karty, panele pop-up stanowią absolutny fundament każdego ekranu. - Paper Mist
#f5f5f5— Subtelne zmiany koloru po najechaniu kursorem na zagnieżdżone karty, dodatkowe panele i wypełnienia. - Ash
#e5e5e5— Cienkie obramowania kart, złączy wejściowych i przegródek stanowią linię konstrukcyjną, która spaja system. - Smoke
#d4d4d4— Bardziej wyraźne obramowania wybranych kontenerów i dodatkowe kontury przycisków. - Pebble
#c8c8c8— Obramowania, kontury kontrolek i podziały strukturalne o średnim kontraście. Tego koloru nie należy używać jako koloru podstawowego w wezwaniach do działania. - Midnight Ink
#0a0a0a— Główny tekst przycisków, wyróżnione przyciski i tekst nawigacyjny są prawie czarne, aby zapewnić maksymalny kontrast.
Typografia
od 11 do 48px · 9 kroków
- Satoshi — wymiana: Inter (weight 500 · wytyczne 500 · Nagłówki wyświetlane – używane tylko w wierszach o szerokości 36–48 pikseli do tytułów nagłówków i sekcji. Grubość czcionki – 500 (średnia, nie pogrubiona): Nagłówki wyglądają pewnie i nowocześnie, ale nigdy nie przytłaczająco. Geometryczne proporcje Satoshiego nadają krójowi lekko redakcyjny, nowoczesny charakter, którego Inter nie jest w stanie odtworzyć w tekście głównym.
- Inter — wymiana: Inter (native) · wytyczne 400, 500, 600 · Tekst główny, etykiety interfejsu użytkownika, nawigacja, podtytuły i nagłówki drugorzędne. Inter to główny „koń roboczy”, obsługujący wszystko, od mikroetykiet o szerokości 11 pikseli po nagłówki drugorzędne o szerokości 30 pikseli. Grubość 400 pikseli jest domyślna dla tekstu głównego, 500 pikseli dla wyróżnionych elementów i etykiet przycisków, a 600 pikseli jest zarezerwowana dla ważnych etykiet interfejsu użytkownika. 16 pikseli i wysokość linii 1,5 to najczęściej spotykany rozmiar pojedynczego kroku (1220 wystąpień), co potwierdza, że 16 pikseli to kanoniczny rozmiar tekstu głównego.
- Geist Mono — wymiana: JetBrains Mono or IBM Plex Mono · wytyczne 400, 500 · Fragmenty kodu, metadane techniczne i osadzone tokeny o stałej szerokości są używane w blokach kodu o szerokości 12–14 pikseli oraz w dużych elementach kodu o szerokości 24 pikseli. Zapewnia to wiarygodność narzędzia programistycznego, spójną z pozycjonowaniem produktu Dub.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 8px |
| Promień przycisku | 8px |
| Promień karty | 12px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 64px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Dub 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
- ElevenLabs — Fotoesej w ciepłych, kremowych tonach z subtelnymi nagłówkami. Notatnik w stylu Bauhaus – papier w kolorze skorupki jajka, czarny tusz i pojedynczy fioletowo-pomarańczowy akcent do ekspozycji produktu.
- Awesomic — Siatka cynkowa redakcyjna z pomarańczowymi znakami interpunkcyjnymi przypominającymi konfetti
- Monad — czasopismo techniczne redakcyjne na ciepłym pergaminie
- Seline Analytics — Cichy analityczny stół na ciepłym papierze
- Notion — Ciepły papierowy notatnik w południowym słońcu
- Anthropic — Naukowy dziennik terenowy na ciepłym pergaminie — spokojne, kości słoniowe powierzchnie, szeryfowe nagłówki redakcyjne i pojedynczy gliniany akcent, który pojawia się tylko wtedy, gdy zachodzi potrzeba działania.
- Calendly — Ciemnoniebieski tusz na zimnym marmurze
- Augen Pro — Biała prezentacja Apple charakteryzuje się klinicznym, lekkim, elektryzującym błękitem jako jedynym akcentem w monochromatycznej przestrzeni.
- Antimetal — Kronika redakcyjna na kremowym papierze – spokojny poranek w czasopiśmie naukowym, gdzie powściągliwość wyraża pewność siebie, a szeryfy wykonują ciężką pracę
- Perk — Elektryczna limonka na ciepłym papierze pergaminowym
- Ditto — Rozświetlony słońcem warsztat, w którym powstają próbki dzikich kwiatów. Ciepłe, kremowe powierzchnie, żywa żółta baza, głęboki granatowy kolor, organiczne formy kolorystyczne rozkwitające za dziełem.
- Officevibe — Magazyn redakcyjny na ciepłym, kremowym papierze. Wyobraź sobie przemyślany esej o zarządzaniu zasobami ludzkimi, zaprezentowany jako produkt – kursywny krój pisma szeryfowego, szepczący przez nowoczesny, niebieski interfejs.