Dub
Ovládací panel z matného ryžového papiera Link
Vizuálny systém Dubu má zdržanlivú, takmer redakčnú SaaS estetiku: takmer biele plátno držané pohromade tenkými okrajmi a nie vyčnievajúcimi prvkami, s hustou monochromatickou typografiou poskytujúcou štrukturálnu oporu a jednou jasne modrou farbou (#2563eb), ktorá robí dojem. Povrchy zostávajú na prvý pohľad ploché a bezrámové, ale každý kontajner má okraj 1px #e5e5e5, ktorý evokuje pocit vytlačeného dokumentu. Osobnosť sa dosahuje malou sadou farebných akcentov v tvare „tabletky“ (oranžová, zelená, fialová), ktoré sa vznášajú nad neutrálnou paletou, a hlavičkami, ktoré pôsobia sebavedomo a moderne bez toho, aby boli okázalé. Komponenty sú kompaktné a husté: medzery 8px, polomer karty 12px, štítky v tvare tabletky s rozlíšením 9999px a neviditeľné ovládacie prvky namiesto ťažkých, vyplnených tlačidiel.
Stránka je vytvorená na centrovanom rozložení s maximálnou šírkou približne 1200 pixelov. Hlavným prvkom je centrovaný textový blok s tromi plávajúcimi prvkami (Partnerské programy, Analýza konverzií, Krátke odkazy) umiestnenými horizontálne nad veľkým rozložením produktu. Sekcie sú usporiadané vertikálne s konzistentnými 64px medzerami, striedavo sa s bielym plátnom a papierovým oparom #f5f5f5 pre tónové oddelenie. Spodná časť používa rozloženie v tvare Z: redakčný text je centrovaný v strednej tretine a plávajúce karty používateľského rozhrania sú ukotvené k ľavému a pravému okraju, čím vytvárajú asymetrický rytmus podobný časopisu. Logo cloud je jednoduchá mriežka 5x2, vycentrovaná na stránke. Navigácia je minimalistický horný panel – logo vľavo, navigácia v strede, skupina dvoch tlačidiel (tlačidlo „Prihlásiť sa“ + vyplnené tlačidlo „Registrovať“) vpravo – bez pevnej alebo mega ponuky. Rozloženie hlavného okna zobrazuje klasické dvojstĺpcové rozloženie aplikácie: pevný bočný panel (podobný 240px) + oblasť obsahu, ktorá definuje hustotu informácií o produkte pre návštevníkov predtým, ako začnú posúvať stránku.
Vizuály sú zamerané na produkt, nie na životný štýl. Hlavná obrazovka je centrovaná na veľkej snímke obrazovky z dashboardu, ktorá predstavuje maketu produktu z reálneho sveta s bočným navigačným panelom, tabuľkou údajov a plávajúcimi prvkami používateľského rozhrania, rozloženými ako plochý panel na bielom plátne. Logá klientov sú zobrazené v desaturovanej mriežke s odtieňmi sivej (beehiv, superpower, Chatbase atď.), aby sa zdôraznil ich výkon na sociálnych sieťach, zbavené farieb, aby dominantným zostal jediný modrý akcent stránky. Plávajúce karty partnerov (malé profily a dlaždice s údajmi o príjmoch/platbách) sa pohybujú okolo blokov redakčného textu v dolnej časti, čím vytvárajú pocit hĺbky bez použitia tieňov na samotnom texte. Vzor bodkovanej mriežky na pozadí je charakteristickým prvkom: tenký rad malých bodiek s veľmi nízkou nepriehľadnosťou vytvára textúru a dojem dizajnového systému/povrchu na kreslenie, čím zdôrazňuje pozíciu stránky ako „modernej platformy na pripisovanie odkazov“. Ikonografia je minimalistická, s obrysmi a výplňami a používa akcentovú paletu (mandarínkovo oranžová, levanduľovo fialová, mätovo zelená) pre označenia funkcií. Nepoužívajú sa žiadne fotografie, ilustrácie ani 3D modely – samotné používateľské rozhranie produktu je vizuálnym jazykom.
Paleta
Značka
- Electric Blue
#2563eb— Používa sa primárna farba značky – logo, odkazy, kľúčové ukazovatele výkonnosti, aktívne stavy a zvýraznenie ikon. Sýta modrá na bielom pozadí vytvára jediný vizuálny dojem systému. - Deep Sapphire
#1e40af— Hlavné pozadie akčného tlačidla, tučná výplň výzvy na akciu – jediná farba označujúca akciu – sa používa striedmo na upútanie pozornosti.
Neutrálny
- Canvas White
#ffffff— Pozadie stránky, povrch karty, vyskakovacie panely sú absolútnym základom každej obrazovky. - Paper Mist
#f5f5f5— Jemné zmeny farby povrchu pre vnorené karty, ďalšie panely a výplne pri podržaní kurzora myši. - Ash
#e5e5e5— Tenké okraje na kartách, vstupných konektoroch a prepážkach tvoria štrukturálnu líniu, ktorá drží systém pohromade. - Smoke
#d4d4d4— Ostrejšie okraje pre vybrané kontajnery a ďalšie obrysy tlačidiel. - Pebble
#c8c8c8— Okraje, obrysy ovládacích prvkov a štrukturálne oddeľovače so stredným kontrastom. Táto farba by sa nemala používať ako primárna farba pre výzvy na akciu. - Midnight Ink
#0a0a0a— Hlavný text tlačidiel, zvýraznené tlačidlá a navigačný text sú pre maximálny kontrast takmer čierne.
Typografia
od 11 do 48px · 9 krokov
- Satoshi — náhrada: Inter (weight 500 · obrysy 500 · Zobrazovacie nadpisy – používajú sa iba v riadkoch s veľkosťou 36 – 48 pixelov pre nadpisy a názvy sekcií. Hrúbka písma – 500 (stredná, nie tučná): Nadpisy pôsobia sebavedomo a moderne, ale nikdy nie príliš výrazne. Satoshiho geometrické proporcie dodávajú písmu mierne redakčný, moderný nádych, ktorý Interov text nedokáže napodobniť.
- Inter — náhrada: Inter (native) · obrysy 400, 500, 600 · Text tela, popisky používateľského rozhrania, navigácia, podnadpisy a vedľajšie nadpisy. Inter je hlavným pracantom, ktorý spracováva všetko od 11px mikro-popisov až po 30px sekundárne nadpisy. Predvolená hmotnosť 400 je pre text tela, 500 pre zvýraznené prvky a popisky tlačidiel a 600 je vyhradených pre dôležité popisky používateľského rozhrania. 16px s výškou riadku 1,5 je najčastejšie sa vyskytujúca veľkosť s jedným krokom (1220 výskytov), čo potvrdzuje, že 16px je kanonická veľkosť textu tela.
- Geist Mono — náhrada: JetBrains Mono or IBM Plex Mono · obrysy 400, 500 · Úryvky kódu, technické metadáta a vložené tokeny s monospaced rozmiestnením sa používajú v blokoch kódu s veľkosťou 12 – 14 pixelov a vo veľkých prvkoch zobrazenia kódu s veľkosťou 24 pixelov. To zaisťuje dôveryhodnosť vývojárskeho nástroja, čo je v súlade s umiestnením produktu Dub.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | priemerný |
| Základný krok | 8px |
| Polomer tlačidla | 8px |
| Polomer karty | 12px |
| Tiene | nie - okraje namiesto tieňov |
| Medzi sekciami | 64px |
| Šírka stránky | 1200px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Dub 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
- Seline Analytics — Tichý analytický stôl na teplom papieri
- 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.