Seline Analytics
Cichy analityczny stół na ciepłym papierze
Seline jest osadzona na ciepłym, kamiennym tle (#fafaf9) z pojedynczym, żywym, niebieskim akcentem – wszystkie pozostałe kolory są neutralne i zaczerpnięte z palety kolorów Tailwind Stone. Nagłówki są renderowane w specjalnie zaprojektowanym, geometrycznym króju pisma bezszeryfowego (roobert) o grubości 400 i wąskim, ujemnym odstępie między literami, nadając tekstowi leniwy, niemal szepczący charakter, kontrastujący z typowym dla SaaS, krzykliwym stylem. Interfejs użytkownika to płaskie, białe karty, unoszące się nad ciepłym tłem z pojedynczym, miękkim rozmyciem o szerokości 16 pikseli; obramowania są tworzone cienkimi, 1-pikselowymi liniami w odcieniu kamienia, hojnie wykorzystywanymi jako główny element strukturalny zamiast grubych przekładek lub paneli. Układ tętni życiem: treść na całej szerokości skupiona na szerokim, pionowym rytmie, z interaktywnymi elementami sterowania w kształcie pigułek, ilustracją maskotki podkreślającą osobowość i zrzutami ekranu z pulpitu jako dowodem na produkt. Ogólne wrażenie jest redakcyjnie analityczne: spokojne, monochromatyczne, pewne siebie, z niebieskim wezwaniem do działania jako najbardziej uderzającym elementem na stronie dzięki celowemu umiarowi we wszystkim innym.
Strona ma maksymalną szerokość, wyśrodkowaną na około 1200 px, z dużą ilością miejsca w pionie. Główny element to dwuwierszowy, wyrównany do lewej blok tekstu z pojedynczą, wyróżnioną frazą („proste i skuteczne”) w kolorze niebieskim, po którym następuje wiersz z dwoma wezwaniami do działania (niebieska pigułka + pigułka ducha), wiersz logo partnerów w skali szarości, wiersz ocen zaufania, a następnie pełnoekranowy podgląd pulpitu nawigacyjnego, lekko nachodzący na kolejną sekcję. Poniżej linii zagięcia znajdują się naprzemiennie wiersze referencji w siatce jednokolumnowej, a następnie pełnoekranowe sekcje z opisami funkcji, tekstem wyrównanym do lewej i wyśrodkowanymi wizualizacjami produktów. Nawigacja to minimalistyczny pasek górny – logo po lewej stronie, wyśrodkowane linki nawigacyjne, logowanie + niebieskie wezwanie do działania po prawej – z ruchomym klastrem awatarów pośrodku nawigacji, służącym do weryfikacji tożsamości. Odstępy między sekcjami są szerokie (96 px), aby nadać rytm redakcji, a nie gęstemu natłokowi informacji.
Język wizualny jest zdominowany przez zrzuty ekranu interfejsu użytkownika produktu — podgląd pulpitu nawigacyjnego to fotografia renderowana filtrem kontrastu skali szarości (1) (0,94), który wycisza kolory danych do odcienia monochromatycznego. Jedyną postacią ludzką jest liniowa naklejka maskotki (postać w kapturze), narysowana w stylu SVG tylko z konturami, umieszczona raz na sekcję jako zabawny kontrapunkt dla treści analitycznej, z miękkim cieniem, aby stworzyć efekt głębi przypominający naklejkę. Logo marki i glify to małe czarne iskry/płomienie. Nie ma zdjęć — żadnych ujęć lifestylowych, żadnych zdjęć drużynowych, żadnych obrazów środowiskowych. Obiekt (pulpit nawigacyjny) jest protagonistą. Wszystkie ikony dekoracyjne są w stylu konturu 1 px w #0c0a09 lub #3ba6f1, nigdy nie są wypełnione.
Paleta
Marka
- Cyan Signal
#3ba6f1— Główne wezwanie do działania, aktywne linki i zarys ikon marki to jedyne akcenty kolorystyczne na stronie, użyte oszczędnie, aby przyciągnąć uwagę do działania. - Cyan Edge
#3398e1— Niebieski służy do wyróżniania konspektów działań, etykiet linków i elementów interaktywnych. Nie powinien być używany jako kolor podstawowy w wezwaniach do działania.
Neutralny
- Ink Black
#0c0a09— Główne nagłówki, wyróżniony tekst i wyraziste ikony mają ciepły, niemal czarny kolor. - Stone Canvas
#fafaf9— Tło strony ma ciepły, kremowy odcień, który w dotyku przypomina raczej papier niż biel ekranu. - Pure White
#ffffff— Powierzchnie mapy, wystające panele i wypełnienia pól wprowadzania danych są domyślnie płaskie i bezcieniowe. - Stone Border
#e8e6e5— Podstawowym elementem strukturalnym są cienkie obramowania kart, nawigacji i pól wprowadzania danych, a nie separatory. - Stone Muted
#d6d3d1— Dodatkowe ramki, delikatne odcienie tła, ozdobne przekładki. - Ash Gray
#a8a29e— Tekst pomocy, kontury ikon, stany wyłączone - czytelne, ale nieaktywne.
Typografia
od 10 do 52px · 5 kroków
- Roobert — wymiana: Inter Tight or Satoshi · wytyczne 400, 500 · Czcionka do nagłówków i układu tekstu to unikatowy geometryczny krój bezszeryfowy z minimalnymi odstępami między literami (-0,025 em przy 32 px, -0,021 em przy 52 px). Grubość 400 x 52 px to wizytówka tej czcionki: niekonwencjonalna, subtelna, a jednocześnie autorytatywna i stonowana. Nagłówki zajmują swoje miejsce, nie narzucając się.
- Inter — wymiana: Inter · wytyczne 400, 500, 600 · Podstawowym krojem tekstu głównego, nawigacji, interfejsu użytkownika i nagłówków jest neutralny, uniwersalny krój pisma przeznaczony do wszystkich tekstów poza ekranem. Dominującym rozmiarem czcionki dla tekstu głównego jest 14 px, grubość 400 i odstęp między wierszami 1,64 (częstotliwość 1174). Dodatni odstęp między literami (0,004 em) przy małych rozmiarach zapewnia czytelność gęstego interfejsu użytkownika.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przestronny |
| Podstawowy krok | 8px |
| Promień przycisku | 9999px |
| Promień karty | 10px |
| Cienie | miękkie cienie |
| Między sekcjami | 96px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Seline Analytics 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
- Dub — Panel sterowania z matowego papieru ryżowego firmy Link
- 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.