Wise
Głęboki mech z wapiennym napięciem. Wapień iskrzy na niemal czarnym dnie lasu, a masywne, kanciaste postacie sygnalizują każdy ruch.
Krój pisma Wise przemawia pewnym, nieco donośnym głosem: głęboka zieleń lasu (#163300) zajmuje większość powierzchni — tekst, nawigację, ciemne sekcje, ikony — podczas gdy pojedyncza jasna limonkowa zieleń (#9fe870) służy jako funkcjonalna interpunkcja w wezwaniach do działania, aktywnych kartach i elementach kluczowych. Krój pisma jest niemal agresywny: Wise Sans o grubości linii 900, gęsto upakowany, wyróżnia się dużymi literami (ponad 100 px) na ekranie głównym. Reszta systemu pozostaje dyskretna na złamanej bieli płótna z delikatnymi szarymi powierzchniami (#e8ebe6). Komponenty mają domyślnie kształt pigułki — przyciski, segmenty nawigacyjne, miniatury pól wyboru, maski obrazów — z małymi promieniami (10 px) zarezerwowanymi dla kart i pól wprowadzania danych. Gradienty kolorów są rzadkie; zamiast tego połączenie zieleni salamandry i zieleni lasu płynnie zmienia się wraz ze ciemnieniem sekcji, tworząc rytm bez nadmiernej dekoracji.
Kontener o maksymalnej szerokości 1200 pikseli, wyśrodkowany, z górną i ciemną sekcją rozciągającą się na całą szerokość strony. Układ nagłówka charakteryzuje się masywnym, wyśrodkowanym nagłówkiem na białym tle, z dużą ilustracją (globusem) wystającą poza dolną krawędź okna widoku. Rytm sekcji zmienia się między bielą, jasną zielenią i ciemną sekcją w kolorze „forest ink”, tworząc naturalny rytm kolorów. Układ treści jest przede wszystkim wyśrodkowany: bloki tekstu i obrazy w dwóch kolumnach u góry lub wiersze z elementami głównymi w trzech kolumnach w sekcjach drugorzędnych. Do wyświetlania listy krajów używana jest pięciokolumnowa siatka z flagami. Nawigacja to pojedynczy, stały górny pasek z segmentowanym przełącznikiem. Kod QR pozostaje nieruchomy w prawym dolnym rogu we wszystkich pozycjach przewijania.
Trójwymiarowe ilustracje przedstawiające kulę ziemską ze złotymi monetami tworzą wizualny świat marki – namacalny, lekko surrealistyczny, wykonany z miękkimi gradientami i ciepłym oświetleniem. Fotografia jest minimalistyczna, a w użyciu – stonowana i swobodna. Flagi narodowe przedstawiono jako okrągłe miniatury w pięciokolumnowej siatce – jedynym „ikonicznym” systemem jest tożsamość narodowa. Brak abstrakcyjnych elementów graficznych, brak standardowych szablonów. Kula ziemska i monety to powtarzający się motyw maskotki, sygnalizujący globalny zasięg poprzez pojedynczy, ciepły, optymistyczny obiekt, a nie montaż.
Paleta
Marka
- Forest Ink
#163300— Dominujący ciemny styl marki — tekst nawigacyjny, ciemne tła sekcji, tekst główny na jasnych powierzchniach, kontury ikon i wypełnione elementy nawigacyjne — to cechy decydujące o jej sile: wszędzie tam, gdzie liczy się powaga i autorytet, wybierasz Forest Ink. - Lime Voltage
#9fe870— Zieleń jest używana jako drugorzędny akcent w przypadku detali dekoracyjnych i do wyróżnienia rzadziej używanych zapytań w wyszukiwarce. Nie powinna być używana jako kolor podstawowy w wezwaniach do działania. - Spruce
#054d28— Drugorzędny ciemnozielony kolor stosowany jest na powierzchniach kart, w drobnej ikonografii oraz w celu dodania głębi ciemnym obszarom, gdzie tusz Forest Ink jest zbyt nasycony.
Neutralny
- Linen Mist
#e2f6d5— Jasnozielony odcień do delikatnych akcentów na powierzchniach, przyciemnianych teł kart i efektów najechania kursorem na paski nawigacyjne. Subtelny, charakterystyczny odcień zieleni do dyskretnych elementów wystroju pojemników. - Signal Blue
#0b4c72— Kolor niebieski służy jako dodatkowy akcent dekoracyjny i podkreśla niskie częstotliwości. - Alarm Red
#cb272f— Czerwień służy jako dodatkowy akcent dekoracyjny i podkreśla nietypowe kolory. Używaj jej jako dodatkowego akcentu, a nie jako koloru statusu. - Charcoal
#454745— Treść, tekst główny, bogaty interfejs użytkownika — nieco ciepła czerń, która wydaje się bardziej miękka niż czysty kolor #000 na białym tle. - Obsidian
#0e0f0c— Nagłówki, nagłówki o wysokim kontraście, elementy w nawigacji i menu głównym w kolorze czystej czerni. Czerń z lekko zielonkawym odcieniem, a nie neutralna szarość. - Pebble
#868685— Stonowany tekst pomocniczy, tekst zastępczy, kontury ikon i obramowania pól wprowadzania danych. Średnio szary, oddala się w oddali.
Typografia
od 12 do 105px · 10 kroków
- Inter — wymiana: Inter (native Google Fonts) · wytyczne 400,500,600,700 · Tekst główny, interfejs użytkownika, podpisy i podtytuły w całym produkcie. Czcionka o grubości 700 jest używana do nagłówków średniego poziomu (36–45 px), 500–600 do podtytułów i podpisów oraz 400 do tekstu głównego i podpisów. Czcionka Inter zapewnia subtelniejszy wygląd, a Wise Sans – odważniejszy.
- Wise Sans — wymiana: Inter Black (900) with -0.04em tracking · wytyczne 900 · Nagłówki to wizytówka marki. Supergęsta czcionka 900 o rozstawie 89–105 pikseli i małych odstępach między literami sprawia, że każdy nagłówek staje się wyrazistą, odważną reklamą. Są one używane oszczędnie: jako tekst główny, w nagłówkach sekcji i w najważniejszych momentach kampanii.
- monospace — wymiana: Inter · wytyczne 400 · o stałej szerokości - znalezione w wyodrębnionych danych, ale nieopisane przez sztuczną inteligencję.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8-12px |
| Promień przycisku | 9999px |
| Promień karty | 10px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 64-80px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Wise 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
- Integrated Biosciences — laboratorium bioluminescencji o północy
- Huly — Zorza polarna w obserwatorium północy – bohaterem jest pionowy promień fioletu przechodzący w koral, a każda cicha sekcja poniżej zapożycza tę samą dwubarwną historię opowiedzianą w bardziej stonowanym tonie
- Dia Browser — Przestrzeń galerii-ciemni łączy się z redakcją gazety. Scena w głębokiej ciemności odsłania rozświetloną słońcem rozkładówkę gazety, z każdą sekcją oznaczoną pojedynczym nagłówkiem szeryfowym.
- Mintlify — Ogród chmur nad szklanym stołem. Ręcznie rysowane niebo i dokument są ze sobą połączone – to jedyne miejsce, gdzie kolor i koncepcja spotykają się, zanim strona rozpłynie się w mnisiej bieli.
- Gleap — Przestrzeń robocza utrzymana w ciepłych kremowych odcieniach z grafitowymi akcentami — studio, w którym matowe, czarne kropki atramentu zdają się unosić nad lnianą architekturą.
- ClickUp — Potężny pulpit nawigacyjny na białym marmurze. Strona jest broszurą produktową narzędzia do zwiększania produktywności, więc język wizualny został zapożyczony z samego produktu: gęste listy, wskaźniki statusu, grupy awatarów i wyraziste oznaczenia typograficzne, które wyglądają jak specyfikacja produktu na wyświetlaczu.
- monday — Biały warsztat z naklejkami pastelowymi
- Portal — Twilight Serif Editorial – rozkładówka premium w niezależnym magazynie, zaprojektowana w stylu iOS
- Slack — Scena ma barwę bakłażana, z białymi reflektorami. Głęboki śliwkowy odcień dominuje w ciemnych partiach, a kremowobiałe płótno pozwala swobodnie oddychać dużym, awangardowym napisom.
- Base44 — Słoneczny notatnik z markerem wapiennym
- Letters — Poranna wizyta w klinice na świeżym powietrzu – sterylny biały stół pod delikatnym, niebieskim sufitem, zasłany niebieskimi narzędziami chirurgicznymi
- Duolingo — Zielony plac zabaw z grubymi liniami