Dub
Ovládací panel Link z matného rýžového papíru
Vizuální systém Dubu má zdrženlivou, téměř redakční SaaS estetiku: téměř bílé plátno držené pohromadě tenkými okraji spíše než vyčnívajícími prvky, s hustou monochromatickou typografií poskytující strukturální oporu a jedinou jasně modrou barvou (#2563eb), která vzbuzuje dojem. Povrchy zůstávají na první pohled ploché a bez rámečku, ale každý kontejner má okraj 1px #e5e5e5, který evokuje pocit tištěného dokumentu. Osobnosti je dosaženo malou sadou barevných akcentů ve tvaru „pilulek“ (oranžová, zelená, fialová), které se vznášejí nad neutrální paletou, a záhlavími, která působí sebevědomě a moderně, aniž by byla okázalá. Komponenty jsou kompaktní a husté: mezery o velikosti 8px, poloměr karty 12px, štítky ve tvaru pilulek o rozlišení 9999px a neviditelné ovládací prvky místo těžkých, vyplněných tlačítek.
Stránka je postavena na centrovaném rozvržení s maximální šířkou přibližně 1200 pixelů. Hlavním prvkem je centrovaný textový blok se třemi plovoucími prvky (Partnerské programy, Analýza konverzí, Krátké odkazy) umístěnými horizontálně nad velkým rozvržením produktu. Sekce jsou uspořádány vertikálně s konzistentními mezerami o velikosti 64 pixelů, střídavě mezi bílým plátnem a papírovým oparem #f5f5f5 pro tonální oddělení. Spodní část používá rozvržení ve tvaru Z: redakční text je vycentrován ve střední třetině a plovoucí karty uživatelského rozhraní jsou ukotveny k levému a pravému okraji, čímž vytvářejí asymetrický rytmus podobný časopisu. Logo cloud je jednoduchá mřížka 5x2, vycentrovaná na stránce. Navigace je minimalistický horní panel – logo vlevo, navigace uprostřed, skupina dvou tlačítek (duché tlačítko „Přihlásit se“ + vyplněné tlačítko „Registrovat“) vpravo – bez pevné nebo mega nabídky. Rozvržení hlavního okna dashboardu představuje klasické dvousloupcové rozvržení aplikace: pevný postranní panel (podobný 240px) + oblast obsahu, která definuje hustotu informací o produktu pro návštěvníky předtím, než začnou posouvat stránku.
Vizuální prvky jsou zaměřeny na produkt, nikoli na životní styl. Hlavní obrazovka je středem velkého snímku obrazovky dashboardu, který představuje maketu produktu z reálného světa s postranní navigací, datovou tabulkou a plovoucími prvky uživatelského rozhraní, rozloženými jako plochý panel na bílém plátně. Loga klientů jsou zobrazena v desaturované mřížce v odstínech šedi (beehiv, superpower, Chatbase atd.), aby se ocenil jejich výkon na sociálních sítích, a jsou zbavena barev, aby dominantnímu zůstal jediný modrý akcent stránky. Plovoucí karty partnerů (malé profily a dlaždice s údaji o příjmech/platbách) se pohybují kolem bloků redakčního textu ve spodní části a vytvářejí tak pocit hloubky bez použití stínů na samotném textu. Charakteristickým prvkem je tečkovaná mřížka na pozadí: tenká řada malých teček s velmi nízkou neprůhledností vytváří texturu a dojem designového systému/kreslící plochy, čímž zdůrazňuje pozici webu jako „moderní platformy pro atribuci odkazů“. Ikonografie je minimalistická, s obrysy a výplněmi, a pro označení funkcí používá akcentovou paletu (mandarinkově oranžová, levandulově fialová, mátově zelená). Nejsou použity žádné fotografie, ilustrace ani 3D modely – samotné uživatelské rozhraní produktu je vizuálním jazykem.
Paleta
Značka
- Electric Blue
#2563eb— Používá se primární barva značky – logo, odkazy, klíčové ukazatele výkonnosti, aktivní stavy a zvýraznění ikon. Sytá modrá na bílém pozadí vytváří jediný vizuální prvek systému. - Deep Sapphire
#1e40af— Hlavní pozadí tlačítka akce, tučná výplň výzvy k akci – jediná barva označující akci – se používá střídmě k upoutání pozornosti.
Neutrální
- Canvas White
#ffffff— Pozadí stránky, povrch karty a vyskakovací panely jsou absolutním základem každé obrazovky. - Paper Mist
#f5f5f5— Jemné změny barev při najetí myší na vnořené karty, další panely a výplně. - Ash
#e5e5e5— Tenké okraje karet, vstupních konektorů a dělicích přepážek tvoří strukturální linii, která drží systém pohromadě. - Smoke
#d4d4d4— Ostřejší ohraničení vybraných kontejnerů a další obrysy tlačítek. - Pebble
#c8c8c8— Ohraničení, obrysy ovládacích prvků a strukturální oddělovače se středním kontrastem. Tato barva by se neměla používat jako primární barva pro výzvy k akci. - Midnight Ink
#0a0a0a— Hlavní text tlačítek, zvýrazněná tlačítka a navigační text jsou pro maximální kontrast téměř černé.
Typografie
od 11 do 48 pixelů · 9 kroků
- Satoshi — nahrazení: Inter (weight 500 · obrysy 500 · Zobrazovací nadpisy – používají se pouze v řádcích o velikosti 36–48 pixelů pro nadpisy a názvy sekcí. Váha písma – 500 (střední, ne tučné): Nadpisy vypadají sebevědomě a moderně, ale nikdy ne příliš výrazně. Satoshiho geometrické proporce dodávají písmu mírně redakční, moderní nádech, který Interův text nedokáže napodobit.
- Inter — nahrazení: Inter (native) · obrysy 400, 500, 600 · Text textu, popisky uživatelského rozhraní, navigace, podnadpisy a vedlejší nadpisy. Inter je hlavním pracantem, který zvládá vše od mikro-popisků o velikosti 11px až po sekundární nadpisy o velikosti 30px. Výchozí váha pro text textu je 400, pro zvýrazněné prvky a popisky tlačítek 500 a pro důležité popisky uživatelského rozhraní je vyhrazena váha 600. Nejčastěji se vyskytující velikost pro jeden krok je 16px s výškou řádku 1,5 (1220 výskytů), což potvrzuje, že 16px je kanonická velikost textu textu.
- Geist Mono — nahrazení: JetBrains Mono or IBM Plex Mono · obrysy 400, 500 · Úryvky kódu, technická metadata a vložené tokeny s pevnou šířkou se používají v blocích kódu o velikosti 12–14 pixelů a ve velkých prvcích zobrazení kódu o velikosti 24 pixelů. To zajišťuje důvěryhodnost vývojářského nástroje, která je v souladu s produktovým umístěním společnosti Dub.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | průměrný |
| Základní krok | 8px |
| Poloměr tlačítka | 8px |
| Poloměr karty | 12px |
| Stíny | ne - okraje místo stínů |
| Mezi sekcemi | 64px |
| Šířka stránky | 1200px |
Umělá inteligence vám vytvoří web ve stylu Dub a naplní ho
- Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
- Přeneste obsah ze starého webu – stačí zadat adresu.
- Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
- Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.
Podobné styly
- ElevenLabs — Fotoesej v teplých krémových tónech s decentními nadpisy. Zápisník ve stylu Bauhausu – papír barvy vaječné skořápky, černý inkoust a jeden fialovooranžový akcent pro vystavení produktů.
- Awesomic — Redakční zinková síťovina s oranžovými interpunkčními znaménky připomínajícími konfety
- Monad — redakční technický časopis na teplém pergamenu
- Seline Analytics — Tichý analytický stůl na teplém papíře
- Notion — Teplý papírový zápisník v polední slunci
- Anthropic — Vědecký časopis z oblasti teplého pergamenu – klidné slonovinové povrchy, patkové úvodní nadpisy a jediný hliněný akcent, který se objevuje pouze tehdy, když je potřeba něco udělat.
- Calendly — Tmavě modrý inkoust na studeném mramoru
- Augen Pro — Bílá prezentace společnosti Apple se vyznačuje klinickou, beztížnou, elektrickou modrou barvou jako jediným akcentem v monochromatickém prostoru.
- Antimetal — Redakční kronika na krémovém papíře – klidné dopoledne ve vědeckém časopise, kde zdrženlivost vyjadřuje sebevědomí a patky odvádějí těžkou práci.
- Perk — Elektrické vápno na teplém pergamenovém papíru
- Ditto — Sluncem zalitá dílna, kde se vytvářejí vzorky divokých květin. Teplé krémové povrchy, zářivá žlutá základní barva, tmavě tmavě modré inkousty, organické barevné formy rozkvétající za dílem.
- Officevibe — Redakční časopis na teplém krémovém papíře. Představte si promyšlenou esej o řízení lidských zdrojů, prezentovanou jako produkt – kurzivní patkové písmo šeptající skrz moderní modré rozhraní.