Seline Analytics
Tichý analytický stôl na teplom papieri
Seline je zasadený do teplého kamenného pozadia (#fafaf9) s jediným žiarivým modrým akcentom – všetky ostatné farby sú neutrálne a prevzaté z palety kameňových farieb Tailwind. Nadpisy sú vykreslené vo vlastnoručne navrhnutom geometrickom bezpätkovom písme (roobert) s hrúbkou 400 a úzkym negatívnym rozstupom písmen, čo textu dodáva pokojnú, takmer šepotajúcu sebadôveru, ktorá kontrastuje s typicky hlasným štýlom SaaS. Povrchy používateľského rozhrania sú ploché biele karty, vznášajúce sa nad teplým pozadím s jediným, mäkkým rozostrením s hrúbkou 16px; okraje sú vytvorené tenkými čiarami s hrúbkou 1px v kamennom odtieni, ktoré sa hojne používajú ako primárny štrukturálny prvok namiesto ťažkých oddeľovačov alebo panelov. Rozloženie dýcha: obsah na celú šírku je sústredený na veľkorysom vertikálnom rytme, s interaktívnymi ovládacími prvkami v tvare tabletky, ilustráciou maskota pre osobnosť a snímkami obrazovky z dashboardu ako dôkazom produktu. Celkový dojem je redakčne analytický: pokojný, monochromatický, sebavedomý, pričom modrá výzva na akciu je najvýraznejším prvkom na stránke vďaka zámernému obmedzeniu všetkého ostatného.
Stránka má maximálnu šírku, je vycentrovaná na približne 1200 pixelov s dostatkom vertikálneho priestoru. Hlavným prvkom je dvojriadkový blok textu zarovnaný doľava s jednou zvýraznenou frázou („jednoduché a efektívne“) modrou farbou, za ním nasleduje riadok s dvoma výzvami na akciu (modrá pilulka + ghost pilulka), potom riadok log partnerov v odtieňoch sivej, potom riadok hodnotení dôveryhodnosti a nakoniec plávajúci náhľad panela na celú šírku, ktorý mierne prekrýva nasledujúcu sekciu. Pod záhybom sa striedajú riadky referencií v mriežke s jedným stĺpcom, za ktorými nasledujú sekcie na celú šírku s popismi funkcií, textom zarovnaným doľava a centrovanými vizuálmi produktov. Navigácia je minimalistický horný panel – logo vľavo, centrované navigačné odkazy, prihlásenie + modrá výzva na akciu vpravo – s plávajúcim zhlukom avatarov uprostred navigácie, ktoré slúžia na overenie identity. Medzery medzi sekciami sú široké (96 pixelov), aby sa vytvoril redakčný rytmus a nie hustý zhluk informácií.
Vizuálnemu jazyku dominujú snímky obrazovky používateľského rozhrania produktu – ukážka ovládacieho panela je fotografia vykreslená s kontrastným filtrom v odtieňoch sivej (1) (0,94), ktorý stlmí farby údajov na monochromatický odtieň. Jedinou ľudskou postavou je lineárna nálepka maskota (postava s kapucňou), nakreslená v štýle SVG iba s obrysmi, umiestnená raz na sekciu ako hravý kontrapunkt k analytickému obsahu, s jemným tieňom, ktorý vytvára efekt hĺbky podobný nálepke. Logo značky a glyfy sú malé čierne iskry/plamene. Nie sú tam žiadne fotografie – žiadne zábery životného štýlu, žiadne tímové fotografie, žiadne obrázky prostredia. Objekt (ovládací panel) je protagonista. Všetky dekoratívne ikony sú v štýle obrysu 1px s farbou #0c0a09 alebo #3ba6f1, nikdy nie sú vyplnené.
Paleta
Značka
- Cyan Signal
#3ba6f1— Hlavná výzva na akciu, aktívne odkazy a obrys ikon značiek sú jediné farebné akcenty na stránke, ktoré sa používajú striedmo na upriamenie pozornosti na akciu. - Cyan Edge
#3398e1— Modrá sa používa na zvýraznenie obrysov akcií, označení odkazov a interaktívnych prvkov. Nemala by sa používať ako primárna farba pre výzvy na akciu.
Neutrálny
- Ink Black
#0c0a09— Hlavné nadpisy, zvýraznený text a výrazné ikony sú v teplej, takmer čiernej farbe. - Stone Canvas
#fafaf9— Pozadie stránky je teplého, krémového odtieňa, ktorý pôsobí skôr ako papier než ako biela obrazovka. - Pure White
#ffffff— Povrchy mapy, vyčnievajúce panely a výplne vstupných polí sú štandardne ploché a bez tieňov. - Stone Border
#e8e6e5— Tenké orámovanie kariet, navigácie a vstupných polí je primárnym štrukturálnym prvkom, nie oddeľovače. - Stone Muted
#d6d3d1— Doplnkové rámy, jemné odtiene pozadia, ozdobné priečky. - Ash Gray
#a8a29e— Text nápovedy, obrysy ikon, deaktivované stavy – čitateľné, ale neaktívne.
Typografia
od 10 do 52px · 5 krokov
- Roobert — náhrada: Inter Tight or Satoshi · obrysy 400, 500 · Písmo pre nadpisy a rozloženie textu je unikátne geometrické bezpätkové písmo s minimálnym negatívnym rozstupom písmen (-0,025 em pri 32px, -0,021 em pri 52px). Veľkosť 400 x 52px je charakteristickým znakom písma: je nekonvenčné, decentné, no zároveň autoritatívne a zároveň decentné. Nadpisy zaujímajú svoje miesto bez toho, aby boli dominantné.
- Inter — náhrada: Inter · obrysy 400, 500, 600 · Primárne písmo pre text tela, navigáciu, používateľské rozhranie a nadpisy je neutrálne, univerzálne písmo pre všetok text mimo obrazovky. Prevládajúca veľkosť textu tela je 14px s hmotnosťou 400 a riadkovaním 1,64 (frekvencia 1174). Kladné riadkovanie (0,004em) pri malých veľkostiach zaisťuje čitateľnosť hustého používateľského rozhrania.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | priestranný |
| Základný krok | 8px |
| Polomer tlačidla | 9999px |
| Polomer karty | 10px |
| Tiene | mäkké tiene |
| Medzi sekciami | 96px |
| Šírka stránky | 1200px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Seline Analytics a naplní ju
- Doplňte produktmi a príspevkami cez odkaz - Instagram, TikTok, Facebook.
- Preneste obsah zo svojej starej stránky – stačí zadať adresu.
- Moderný dizajn na najlepšom engine: React ( Next.js) s vykresľovaním servera a SEO optimalizáciou hneď po vybalení.
- Plne automatizovaná SEO optimalizácia pre výsledky vyhľadávania a odporúčania neurónových sietí.
Podobné štýly
- ElevenLabs — Fotoesej v teplých krémových tónoch s jemnými nadpismi. Zápisník v štýle Bauhaus – papier farby vaječnej škrupiny, čierny atrament a jeden fialovo-oranžový akcent na vystavenie produktov.
- Awesomic — Redakčná zinková sieťovina s oranžovými interpunkčnými znamienkami pripomínajúcimi konfety
- Monad — redakčný technický časopis na teplom pergamene
- Dub — Ovládací panel z matného ryžového papiera Link
- Notion — Teplý papierový zápisník na poludňajšom slnku
- Anthropic — Vedecký časopis z oblasti teplého pergamenu – pokojné slonovinové povrchy, pätkové úvodné nadpisy a jediný hlinený prízvuk, ktorý sa objavuje iba vtedy, keď je potrebná akcia.
- Calendly — Tmavomodrý atrament na studenom mramore
- Augen Pro — Biela prezentácia spoločnosti Apple sa vyznačuje klinickou, beztiažovou, elektrickou modrou ako jediným akcentom v monochromatickom priestore.
- Antimetal — Redakčná kronika na krémovom papieri – tiché ráno vo vedeckom časopise, kde zdržanlivosť vyjadruje sebavedomie a pätkové písmo robí ťažkú prácu.
- Perk — Elektrické vápno na teplom pergamenovom papieri
- Ditto — Slnečná dielňa, kde sa tvoria vzorky divých kvetov. Teplé krémové povrchy, žiarivá žltá základná farba, sýto tmavomodré atramenty, organické farebné formy kvitnúce za dielom.
- Officevibe — Redakčný časopis na teplom krémovom papieri. Predstavte si premyslenú esej o riadení ľudských zdrojov, prezentovanú ako produkt – kurzívne pätkové písmo šepkajúce cez moderné modré rozhranie.