Dub
Linkin mattapintainen riisipaperista valmistettu ohjauspaneeli
Dubin visuaalisella järjestelmällä on hillitty, lähes toimituksellinen SaaS-estetiikka: lähes valkoinen kangas on yhdistetty ohuilla reunuksilla ulkonevien elementtien sijaan, ja tiheä yksivärinen typografia tarjoaa rakenteellista tukea. Yksi kirkkaan sininen väri (#2563eb) tekee vaikutuksen. Pinnat pysyvät ensi silmäyksellä tasaisina ja reunuksettomina, mutta jokaisessa säiliössä on 1 pikselin #e5e5e5 marginaali, joka luo painetun dokumentin tunnelman. Persoonallisuus saavutetaan pienellä joukolla värillisiä "pilleri"-aksenttia (oranssi, vihreä, violetti), jotka leijuvat neutraalin paletin yläpuolella, ja otsikoilla, jotka tuntuvat itsevarmoilta ja moderneilta olematta kuitenkaan pröystäileviä. Komponentit ovat kompakteja ja tiheitä: 8 pikselin sisävälit, 12 pikselin kortin säde, pillerinmuotoiset otsikot 9999 pikselin tarkkuudella ja näkymättömät säätimet raskaiden, täytettyjen painikkeiden sijaan.
Sivu on keskitetty ja sen enimmäisleveys on noin 1200 pikseliä. Pääelementti on keskitetty tekstilohko, jossa on kolme kelluvaa elementtiä (kumppaniohjelmat, konversioanalytiikka, lyhyet linkit) vaakasuunnassa suuren tuoteasettelun yläpuolella. Osiot on järjestetty pystysuunnassa yhdenmukaisilla 64 pikselin sisäviivoilla, joissa vuorottelevat valkoinen kangas ja #f5f5f5 paperisumu sävyerottelun takaamiseksi. Alaosassa käytetään Z-kirjaimen muotoista asettelua: toimituksellinen teksti on keskitetty keskikolmannekseen ja kelluvat käyttöliittymäkortit on ankkuroitu vasempaan ja oikeaan reunaan luoden epäsymmetrisen, aikakauslehtimäisen rytmin. Logopilvi on yksinkertainen 5x2-ruudukko, joka on keskitetty sivulle. Navigointi on minimalistinen yläpalkki – logo vasemmalla, navigointi keskellä, kahden painikkeen ryhmä (haamu-"Kirjaudu"-painike + täytetty "Rekisteröidy"-painike) oikealla – ilman kiinteää tai megavalikkoa. Pääikkunan kojelaudan asettelu esittelee klassisen kaksisarakkeisen sovellusasettelun: kiinteä sivupalkki (samanlainen kuin 240px) + sisältöalue, joka määrittää tuotetietojen tiheyden vierailijoille ennen kuin he aloittavat vierittämisen.
Visuaaliset elementit ovat tuotekeskeisiä, eivät elämäntapakeskeisiä. Päänäyttö on keskitetty suureen kojelaudan kuvakaappaukseen, joka edustaa reaalimaailman tuotteen mallikuvaa sivupalkin navigoinnilla, datataulukolla ja kelluvilla käyttöliittymäelementeillä, jotka on aseteltu litteäksi paneeliksi valkoiselle kankaalle. Asiakkaiden logot näytetään harmaasävyisessä ruudukossa (mehiläispesä, supervoima, Chatbase jne.) heidän sosiaalisen median suorituksensa korostamiseksi. Värittömät ruudut mahdollistavat sivun yhden sinisen korostuksen säilyttämisen hallitsevana elementtinä. Kelluvat kumppanikortit (pienet profiilit ja ruudut, joissa on tulo-/maksutietoja) liikkuvat toimituksellisen tekstin lohkojen ympärillä alareunassa luoden syvyysvaikutelman ilman varjoja itse tekstissä. Pisteellinen ruudukkokuvio on tunnusomainen ominaisuus: ohut rivi pieniä pisteitä, joilla on erittäin alhainen läpinäkyvyys, luo tekstuuria ja suunnittelujärjestelmän/piirustuspinnan tuntua, korostaen sivuston asemaa "modernina linkkien attribuutioalustana". Ikonografia on minimalistinen, ääriviivoin ja täyttöin, ja ominaisuustunnisteissa käytetään korostuspalettia (mandariinin oranssi, laventelin violetti, mintunvihreä). Valokuvia, kuvituksia tai 3D-malleja ei käytetä – tuotteen käyttöliittymä itsessään on visuaalinen kieli.
Paletti
Merkki
- Electric Blue
#2563eb— Järjestelmässä käytetään ensisijaista brändiväriä – logoa, linkkejä, keskeisiä suorituskykyindikaattoreita, aktiivisuustiloja ja kuvakkeiden aksentteja. Järjestelmän ainoa visuaalinen vetovoimatekijä on syvän sininen valkoisella taustalla. - Deep Sapphire
#1e40af— Toimintopainikkeen pääasiallista taustaa, toimintakehotuksen lihavoitua täyttöä – ainoaa toimintoa ilmaisevaa väriä – käytetään säästeliäästi huomion herättämiseksi.
Neutraali
- Canvas White
#ffffff— Sivun tausta, kortin pinta ja ponnahdusikkunat ovat jokaisen näytön ehdoton perusta. - Paper Mist
#f5f5f5— Hienovaraiset muutokset sisäkkäisten korttien, lisäpaneelien ja täyttöjen värissä hiiren osoittimen vierellä. - Ash
#e5e5e5— Korttien, tuloliittimien ja väliseinien ohuet reunat ovat rakennelinja, joka pitää järjestelmän koossa. - Smoke
#d4d4d4— Terävämmät reunat valituille säilöille ja lisätty painikkeiden ääriviivat. - Pebble
#c8c8c8— Keskikontrastiset reunat, ohjausobjektien ääriviivat ja rakenteelliset jakajat. Tätä väriä ei tule käyttää toimintakehotuksen päävärinä. - Midnight Ink
#0a0a0a— Painikkeiden pääteksti, korostetut painikkeet ja navigointitekstit ovat lähes mustia kontrastin maksimoimiseksi.
Typografia
11:stä 48 pikseliin · 9 askelta
- Satoshi — korvaava: Inter (weight 500 · ääriviivat 500 · Näyttöotsikot – käytetään vain 36–48 pikselin riveillä otsikoissa ja osioiden otsikoissa. Fontin paksuus – 500 (keskikokoinen, ei lihavoitu): Otsikot näyttävät itsevarmoilta ja moderneilta, mutta eivät koskaan liian voimakkailta. Satoshin geometriset mittasuhteet antavat kirjasintyypille hieman toimituksellisen, modernin tunnelman, jota Interin leipäteksti ei pysty toistamaan.
- Inter — korvaava: Inter (native) · ääriviivat 400, 500, 600 · Leipäteksti, käyttöliittymän otsikot, navigointi, alaotsikot ja pienet otsikot. Inter on ensisijainen työjuhta, joka käsittelee kaiken 11 pikselin mikrootsikoista 30 pikselin toissijaisiin otsikoihin. Leipätekstin oletuspaino on 400, korostettujen elementtien ja painikeotsikoiden 500 ja tärkeiden käyttöliittymäotsikoiden 600. 16 pikseliä ja 1,5 rivinkorkeus on yleisin yksittäisen askeleen koko (1220 esiintymää), mikä vahvistaa, että 16 pikseliä on leipätekstin kaanoninen koko.
- Geist Mono — korvaava: JetBrains Mono or IBM Plex Mono · ääriviivat 400, 500 · Koodikatkelmia, teknistä metadataa ja upotettuja kiinteävälisiä tokeneita käytetään koodilohkoissa 12–14 pikselin ja suurissa koodinäyttöelementeissä 24 pikselin koossa. Tämä varmistaa kehitystyökalun uskottavuuden, joka on yhdenmukaista Dubin tuotepositionoinnin kanssa.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | keskimäärin |
| Perusvaihe | 8px |
| Painikkeen säde | 8px |
| Kortin säde | 12px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 64px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Dub -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- ElevenLabs — Lämpimin kermanvärisin sävyin kirjoitettu valokuvaessee hienovaraisilla otsikoilla. Bauhaus-tyylinen muistikirja – kananmunankuorenväristä paperia, mustaa mustetta ja yksi violetti-oranssi tehoste tuote-esittelyä varten.
- Awesomic — Toimituksellinen sinkkiverkko, jossa on oransseja konfettimaisisia välimerkkejä
- Monad — toimituksellinen tekninen aikakauslehti lämpimällä pergamentilla
- Seline Analytics — Hiljainen analyyttinen pöytä lämpimällä paperilla
- Notion — Lämmin paperinen muistikirja keskipäivän auringossa
- Anthropic — Tieteellinen kenttälehti lämpimällä pergamentilla – rauhallisilla norsunluunvärisillä pinnoilla, serifioiduilla otsikoilla ja yhdellä savesta tehdyllä aksentilla, joka ilmestyy vain silloin, kun toimintaa tarvitaan.
- Calendly — Tummansininen muste kylmällä marmorilla
- Augen Pro — Applen valkoisessa esitystavassa on kliininen, painoton, sähkönsininen ainoana aksenttina yksivärisessä tilassa.
- Antimetal — Pääkirjoituskronikka kermanvärisellä paperilla – hiljainen aamu tieteellisessä aikakauslehdessä, jossa hillitty tyyli välittää itsevarmuutta ja serifit tekevät raskaan työn.
- Perk — Sähkölime lämpimällä pergamenttipaperilla
- Ditto — Auringon valaisema työpaja, jossa luodaan luonnonkukkien näytteitä. Lämpimän kermanväriset pinnat, eloisan keltainen pohjaväri, syvän tummansiniset musteet, orgaaniset värimuodot kukkivat teoksen takana.
- Officevibe — Lämpimän kermanvärisellä paperilla painettu toimituksellinen aikakauslehti. Kuvittele harkittu essee henkilöstöhallinnosta, joka esitetään tuotteena – kursiivilla ja serif-fontilla kuiskaten modernin sinisen käyttöliittymän läpi.