Dub
Tauler de control de paper d'arròs mat de Link
El sistema visual de Dub té una estètica SaaS restringida, gairebé editorial: un llenç gairebé blanc unit per vores primes en lloc d'elements que sobresurten, amb una tipografia monocroma densa que proporciona suport estructural i un únic color blau brillant (#2563eb) que fa una declaració. Les superfícies romanen planes i sense marc a primera vista, però cada contenidor té un marge #e5e5e5 d'1px, que evoca la sensació d'un document imprès. La personalitat s'aconsegueix mitjançant un petit conjunt d'accents de "píndola" de colors (taronja, verd, morat) que suren per sobre de la paleta neutra, i capçaleres que semblen segures i modernes sense ser cridaneres. Els components són compactes i densos: marcs de 8px, radi de targeta de 12px, etiquetes en forma de píndola a 9999px i controls invisibles en lloc de botons pesats i plens.
La pàgina està construïda sobre un disseny centrat amb una amplada màxima d'aproximadament 1200 px. L'element principal és un bloc de text centrat amb tres elements flotants (Programes d'afiliació, Analítica de conversions, Enllaços curts) situats horitzontalment sobre un disseny de producte gran. Les seccions estan disposades verticalment amb marges consistents de 64 px, alternant entre llenç blanc i boira de paper #f5f5f5 per a la separació tonal. La secció inferior utilitza un disseny en forma de Z: el text editorial està centrat al terç central i les targetes d'IU flotants estan ancorades als marges esquerre i dret, creant un ritme asimètric, semblant al d'una revista. El núvol del logotip és una simple quadrícula de 5x2, centrada a la pàgina. La navegació és una barra superior minimalista: el logotip a l'esquerra, la navegació al centre, un grup de dos botons (un botó fantasma "Iniciar sessió" + un botó "Registrar-se" ple) a la dreta, sense un menú fix o mega. El disseny del tauler de control de la finestra principal mostra un disseny clàssic d'aplicació de dues columnes: una barra lateral fixa (similar a 240px) + una àrea de contingut que defineix la densitat d'informació del producte per als visitants abans que comencin a desplaçar-se.
Els elements visuals estan centrats en el producte, no en l'estil de vida. La pantalla principal està centrada en una gran captura de pantalla del tauler de control, que representa una maqueta d'un producte del món real amb una navegació lateral, una taula de dades i elements d'IU flotants, disposats com un panell pla sobre un llenç blanc. Els logotips dels clients es mostren en una quadrícula desaturada en escala de grisos (beehiv, superpower, Chatbase, etc.) per reconèixer el seu rendiment a les xarxes socials, sense color per permetre que l'únic accent blau de la pàgina continuï sent dominant. Les targetes flotants dels socis (perfils petits i mosaics amb dades d'ingressos/pagaments) es mouen al voltant de blocs de text editorial a la part inferior, creant una sensació de profunditat sense l'ús d'ombres al text en si. El patró de fons de la quadrícula puntejada és una característica distintiva: una fila fina de punts petits amb molt baixa opacitat crea textura i la sensació d'un sistema de disseny/superfície de dibuix, emfatitzant el posicionament del lloc com una "plataforma moderna d'atribució d'enllaços". La iconografia és mínima, amb contorns i farciments, i utilitza una paleta d'accent (taronja mandarina, porpra lavanda, verd menta) per a les etiquetes de funcions. No s'utilitzen fotografies, il·lustracions ni models 3D; la interfície d'usuari del producte en si mateixa és un llenguatge visual.
Paleta
Marca
- Electric Blue
#2563eb— S'utilitza el color principal de la marca (el logotip, els enllaços, els indicadors clau de rendiment, els estats actius i els detalls de les icones). Un blau intens sobre un fons blanc crea l'únic atractiu visual del sistema. - Deep Sapphire
#1e40af— El fons principal del botó d'acció, el farciment en negreta de la crida a l'acció (l'únic color que denota l'acció), s'utilitza amb moderació per atraure l'atenció.
Neutral
- Canvas White
#ffffff— El fons de la pàgina, la superfície de la targeta i els panells emergents són la base absoluta de cada pantalla. - Paper Mist
#f5f5f5— Canvis subtils de color en passar el cursor per sobre per a targetes imbricades, panells addicionals i farciments. - Ash
#e5e5e5— Les vores primes de les targetes, els connectors d'entrada i els divisors són la línia estructural que manté el sistema unit. - Smoke
#d4d4d4— Vores més nítides per a contenidors seleccionats i contorns de botons addicionals. - Pebble
#c8c8c8— Vores, contorns de control i divisors estructurals amb contrast mitjà. Aquest color no s'ha d'utilitzar com a color principal per a les crides a l'acció. - Midnight Ink
#0a0a0a— El text principal dels botons, els botons ressaltats i el text de navegació són gairebé negres per obtenir el màxim contrast.
Tipografia
d'11 a 48 px · 9 passos
- Satoshi — reemplaçament: Inter (weight 500 · esquemes 500 · Encapçalaments per mostrar: només s'utilitzen en línies de 36 a 48 px per a títols d'encapçalament i secció. Pes de la lletra: 500 (mitjà, no negreta): els encapçalaments tenen un aspecte segur i modern, però mai massa potent. Les proporcions geomètriques de Satoshi donen a la tipografia un toc lleugerament editorial i modern que el text del cos d'Inter no pot replicar.
- Inter — reemplaçament: Inter (native) · esquemes 400, 500, 600 · Cos del text, etiquetes de la interfície d'usuari, navegació, subtítols i encapçalaments secundaris. Inter és l'eina principal, ja que gestiona tot, des de microetiquetes d'11 px fins a encapçalaments secundaris de 30 px. Un pes de 400 és el valor per defecte per al cos del text, 500 per als elements ressaltats i les etiquetes dels botons, i 600 es reserva per a les etiquetes importants de la interfície d'usuari. 16 px amb una alçada de línia d'1,5 és la mida de pas únic més freqüent (1220 aparicions), cosa que confirma que 16 px és la mida canònica del cos del text.
- Geist Mono — reemplaçament: JetBrains Mono or IBM Plex Mono · esquemes 400, 500 · Els fragments de codi, les metadades tècniques i els tokens monoespaiats incrustats s'utilitzen en blocs de codi de 12 a 14 px i en elements de visualització de codi grans de 24 px. Això garanteix la credibilitat de l'eina de desenvolupament, d'acord amb el posicionament del producte de Dub.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | mitjana |
| Pas bàsic | 8px |
| Radi del botó | 8px |
| Radi de la targeta | 12px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 64px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Dub i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- ElevenLabs — Un assaig fotogràfic en tons crema càlids amb titulars subtils. Un quadern d'estil Bauhaus: paper color closca d'ou, tinta negra i un únic detall morat i taronja per a la presentació del producte.
- Awesomic — Malla de zinc editorial amb signes de puntuació taronges que recorden confeti
- Monad — revista tècnica editorial en pergamí calent
- Seline Analytics — Una taula analítica silenciosa sobre paper calent
- Notion — Un quadern de paper calent al sol del migdia
- Anthropic — Una revista científica de camp sobre vitel·la càlida: superfícies d'ivori tranquil·les, encapçalaments editorials amb serigrafia i un únic accent d'argila que només apareix quan cal actuar.
- Calendly — Tinta blava fosca sobre marbre fred
- Augen Pro — La presentació blanca d'Apple presenta un blau elèctric clínic, ingràvid i com a únic accent en un espai monocrom.
- Antimetal — Una crònica editorial en paper crema: un matí tranquil en una revista científica, on la contenció transmet confiança i les serifes fan la feina més pesada.
- Perk — Llima elèctrica sobre paper de forn calent
- Ditto — Un taller assolellat creant mostres de flors silvestres. Superfícies crema càlides, un color base groc vibrant, tintes blau marí intens, formes de color orgàniques que floreixen darrere la peça.
- Officevibe — Una revista editorial en paper de color crema càlid. Imagineu-vos un assaig reflexiu sobre la gestió de recursos humans, presentat com un producte: una font cursiva serif que xiuxiueja a través d'una interfície blava moderna.