Vivid+Co
światło pryzmatyczne przechodzące przez obsydian
Vivid+Co operuje w kinowej, mrocznej pustce: niemal czarnym płótnie o wymiarach #101010–#495764, przerywanym pojedynczym, niemal białym odcieniem (#fffdf9), używanym w niemal wszystkich krojach pisma i elementach interfejsu. Typografia jest renderowana głównie w Neue Montreal w grubości 400 pikseli – celowo odrzucając pogrubienie, gdzie autorytet uzyskuje się poprzez skalę (136 px i 105 px), a nie grubość. Charakterystyczną techniką jest pryzmat chromatyczny: bloki nasyconego światła w kolorze czerwonym, zielonym i niebieskim, oddzielone kolorami RGB, filtrują się przez szklane sześciany, zakłócając monochromatyczną powierzchnię. Układ jest wyśrodkowany i przestronny; nawigacja, tekst główny i linki są w jednym kolorze #fffdf9, bez oddzielnych przycisków akcentujących, wypełnień ani cieni – zróżnicowanie uzyskuje się poprzez odstępy, skalę i artefakt tęczy, który stanowi jedyny akcent kolorystyczny marki.
Ciemne płótno o pełnej szerokości z pojedynczą kolumną treści o maksymalnej szerokości ~1440 px. Głównym elementem jest wyśrodkowany pryzmatyczny artefakt z nakładającym się tytułem (tekst przecinający sześciany) i podtytułem wyrównanym do lewej. Nawigacja znajduje się na cienkim górnym pasku: logo po lewej stronie, cztery niewidoczne linki po prawej i dedykowany przycisk „Kontakt” na końcu wiersza. Rytm sekcji naprzemiennie obejmuje panele główne o pełnej wysokości i węższe paski treści z odstępami ~108 px. Układ treści jest asymetryczny: pryzmatyczny artefakt stanowi wizualne centrum, a tytuły otaczają go. Jednokolumnowe bloki tekstu mają maksymalną szerokość około 440 px; brakuje siatek wielokolumnowych, matryc kart i tabel cenowych. Stopka to cienki pasek, podzielony cienką linią, z dwiema kolumnami metadanych.
Głównym elementem projektu jest abstrakcyjny, trójwymiarowy obraz szklanych sześcianów z aberracją chromatyczną na krawędziach, rozdzielonych kolorem RGB. Brak fotografii, wizerunków ludzi i produktów. Pryzmat to wizerunek marki; reszta to monochromatyczna typografia na ciemnym płótnie. Ikonografia jest minimalistyczna: subtelne etykiety nawigacyjne i niewielki akcent kursora/glifu (obszar 142765) na końcu jednego z nagłówków sugerują pojedynczą, monoliniową ikonę o wymiarach 16 pikseli. Brak ilustracji, dekoracyjnych wzorów i tekstur.
Paleta
Neutralny
- Bone White
#fffdf9— Główny tekst, etykiety nawigacyjne, kolor linków i wypełnienie nagłówka są prawie białe i zajmują wszystkie powierzchnie typograficzne na ciemnym płótnie. - Obsidian
#101010— Płótno strony, tło wypełniające główny i dzielący pas, ma głęboki, czarny kolor z pryzmatycznym artefaktem w środku. - Graphite Veil
#495764— Za nagłówkami i blokami treści dominuje chłodna, ciemna barwa, nadająca płótnie głębi bez użycia płaskiej czerni. - Ash Border
#403f3f— Zastosowano subtelną linię podziału i obrys karty o szerokości 1 piksela, aby oddzielić wiersze, nie kolidując z tekstem. - Fog Blue
#6f879c— Stonowany tekst drugorzędny i subtelne etykiety przycisków (kontrast 3,7:1) – oznaczenia kategorii usług, takie jak „Strategia”, „Kreatywność”, „Komunikacja + Marketing” są postrzegane jako niepodświetlone metadane. - Pure Black
#000000— Wypełnienie dekoracyjne ikon i ilustracji SVG — stosowane w obrazach pryzmatów i glifach ikon; nie jako tło.
Typografia
od 15 do 136px · 9 kroków
- Neue Montreal — wymiana: Söhne · wytyczne 400, 700 · Ta ekskluzywna czcionka jest używana w całym interfejsie użytkownika — nagłówkach, treści, nawigacji, przyciskach, linkach i stopce. Domyślna grubość to 400; grubość 700 jest zarezerwowana tylko dla podtytułów. Nagłówki o grubości 105 px i 136 px mają odstęp między wierszami 1,00–1,01 em i odstęp między literami -0,02 em, tworząc kinowe, piętrowe nagłówki, które sprawiają wrażenie bardziej rzeźbiarskich niż typograficznych.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przestronny |
| Podstawowy krok | 7px |
| Promień przycisku | 0px |
| Promień karty | 15px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 108px |
| Szerokość strony | 1440px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Vivid+Co 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
- Sequel — Prywatny pokaz po zmroku to jedyne ciepłe światło w ciemnym kinie.
- ThoughtLab — Obsydianowy monument z karmazynowym sygnałem. Płótno czarnej pustki, gdzie jedynym nasyconym czerwienią obiektem w katedrze, wydrukowanym dużymi białymi literami, jest pojedyncza, chromatyczna figura.
- Dovetail — Plan pod czarnym księżycem – ledwo widoczne linie wykresu, biała czcionka, jeden fioletowy błysk
- MekaVerse — Monochromatyczna galeria cyfrowych artefaktów — jednolita, czarna pustka, w której wyrenderowany świat wisi niczym eksponat muzealny, a cały interfejs użytkownika jest wykonany białą farbą na matowym czarnym szkle.
- Krea — galeria noir o północy
- Factory — Terminal „pokoju wojennego” o północy. „Fabryka” to surowy, czarny panel sterowania, na którym pojedyncza biała karta ląduje niczym oświetlona latarką dyspozytornia – jedynym przedmiotem w pomieszczeniu jest samo dzieło.
- basement — Pusta maszyna drukarska o trzeciej nad ranem – ogromne, skompresowane czcionki rozciągające się po czarnej smole, pojedynczy promyk pomarańczowego światła na pasku nawigacyjnym, wszystko inne białe lub upiornie szare.
- Stink Studios — Studio filmowe o północy – projektor brzęczy, w pomieszczeniu jest ciemno, oświetlony jest tylko film
- Apple (España) — czarny teatr z oświetlonymi oprawami
- Charlie — Typografia wyrzeźbiona w kamieniu klasztornym na obsydianie. Portfolio, w którym pojedyncza czerwona ściana tworzy ogłuszającą ciszę.
- Rive — Precyzyjna wizja nocna. Interfejs wyposażony jest w specjalny obiektyw, który przenika ciemność, umożliwiając precyzyjne widzenie szczegółów technicznych.
- Datalands — Czarna katedra z pojedynczym neonowym impulsem. Logo wypełnia nawę; reszta to ledwo słyszalny tekst pod spodem.