Seline Analytics
Una taula analítica silenciosa sobre paper calent
Seline està ambientada sobre un fons de pedra càlid (#fafaf9) amb un únic accent blau vibrant; tots els altres colors són neutres i s'han extret de la paleta de colors de pedra Tailwind. Els titulars es representen amb una font sans-serif geomètrica de disseny personalitzat (roobert) amb un pes de 400 i un espaiat negatiu estret entre lletres, cosa que dóna al text una confiança pausada, gairebé com un xiuxiueig, que contrasta amb l'estil SaaS típicament sorollós. Les superfícies de la interfície d'usuari són targetes blanques planes, que suren sobre el fons càlid amb un únic desenfocament suau de 16 px; les vores es creen amb línies primes d'1 px en tons pedra, utilitzades generosament com a element estructural principal en lloc de divisors o panells pesats. El disseny respira: contingut d'amplada completa centrat en un ritme vertical generós, amb controls interactius en forma de píndola, una il·lustració de mascota per a la personalitat i captures de pantalla del tauler de control com a prova del producte. La impressió general és editorialment analítica: tranquil·la, monocromàtica, segura, amb la crida a l'acció blava com l'element més cridaner de la pàgina gràcies a la contenció deliberada de tota la resta.
La pàgina té amplada màxima, centrada a aproximadament 1200 px amb molt d'espai vertical. L'heroi és un bloc de text de dues línies alineat a l'esquerra amb una sola frase ressaltada ("simple i eficaç") en blau, seguida d'una fila amb dues crides a l'acció (píndola blava + píndola fantasma), després una fila de logotips de socis en escala de grisos, després una fila de qualificacions de confiança i, a continuació, una vista prèvia flotant del tauler de control d'amplada completa, que se superposa lleugerament a la secció següent. A sota del plec hi ha files alternes de testimonis en una quadrícula d'una sola columna, seguides de seccions d'amplada completa amb descripcions de funcions, text alineat a l'esquerra i visuals de productes centrats. La navegació és una barra superior minimalista (logotip a l'esquerra, enllaços de navegació centrats, inici de sessió + crida a l'acció blava a la dreta) amb un grup flotant d'avatars al mig de la navegació que serveix com a verificació d'identitat. Els espais entre les seccions són amplis (96 px) per crear un ritme editorial en lloc d'un dens embolic d'informació.
El llenguatge visual està dominat per captures de pantalla de la interfície d'usuari del producte: la vista prèvia del tauler de control és una fotografia renderitzada amb un filtre de contrast en escala de grisos (1) (0,94), que silencia els colors de les dades a un to monocrom. L'única figura humana és un adhesiu de mascota lineal (un personatge amb caputxa), dibuixat en estil SVG amb només contorns, col·locat una vegada per secció com a contrapunt lúdic al contingut analític, amb una ombra suau per crear un efecte de profunditat semblant a un adhesiu. El logotip i els glifos de la marca són petites espurnes/flames negres. No hi ha fotografies, ni fotos d'estil de vida, ni fotos d'equip, ni imatges de l'entorn. L'objecte (el tauler de control) és el protagonista. Totes les icones decoratives tenen un estil de contorn d'1 px en #0c0a09 o #3ba6f1, mai s'omplen.
Paleta
Marca
- Cyan Signal
#3ba6f1— La crida a l'acció principal, els enllaços actius i el contorn de les icones de la marca són els únics accents de color de la pàgina, utilitzats amb moderació per cridar l'atenció sobre l'acció. - Cyan Edge
#3398e1— El blau s'utilitza per ressaltar els esquemes d'acció, les etiquetes d'enllaços i els elements interactius. No s'hauria d'utilitzar com a color principal per a les crides a l'acció.
Neutral
- Ink Black
#0c0a09— Els encapçalaments principals, el text destacat i les icones expressives són d'un color càlid, gairebé negre. - Stone Canvas
#fafaf9— El fons de la pàgina és d'un to càlid i cremós que sembla més paper que no pas el blanc d'una pantalla. - Pure White
#ffffff— Les superfícies del mapa, els panells que sobresurten i els farciments dels camps d'entrada són plans i sense ombres per defecte. - Stone Border
#e8e6e5— Les vores primes de les targetes, la navegació i els camps d'entrada són l'element estructural principal, no els separadors. - Stone Muted
#d6d3d1— Marcs addicionals, tons de fons subtils, divisors decoratius. - Ash Gray
#a8a29e— Text d'ajuda, contorns d'icones, estats desactivats: llegibles però inactius.
Tipografia
de 10 a 52 px · 5 passos
- Roobert — reemplaçament: Inter Tight or Satoshi · esquemes 400, 500 · La font per als encapçalaments i la disposició del text és una sans-serif geomètrica única amb un espaiat mínim entre lletres negatiu (-0,025 em a 32 px, -0,021 em a 52 px). El gruix de 400 x 52 px és la signatura de la font: poc convencional, subtil, però autoritària, però discreta. Els titulars ocupen el seu lloc sense ser prepotents.
- Inter — reemplaçament: Inter · esquemes 400, 500, 600 · La font principal per al text del cos, la navegació, la interfície d'usuari i els encapçalaments és una font neutra i universal per a tot el text fora de la pantalla. 14 px amb un pes de 400 i un interlineat d'1,64 és la mida predominant per al text del cos (freqüència 1174). L'interlineat positiu entre lletres (0,004 em) en mides petites garanteix la llegibilitat d'una interfície d'usuari densa.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | espaiós |
| Pas bàsic | 8px |
| Radi del botó | 9999px |
| Radi de la targeta | 10px |
| Ombres | ombres suaus |
| Entre seccions | 96px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Seline Analytics 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
- Mollie — Un taulell de caixmir, un llibre major fosc. Deixeu un ampli espai blanc per al disseny editorial al voltant del text negre i, a continuació, reforceu els punts relacionats amb el producte amb cremes càlides, cafès exprés i fotos tàctils de mètodes de pagament reals.
- Kagi — Una sala de lectura separada. Crea un espai blanc obert al voltant de text de grafit en negreta, utilitzant subtils detalls morats i superfícies pastel càlides per trencar la tranquil·litat.
- Milanote — Milanote és un estudi creatiu dedicat. Crea pàgines d'estil galeria editorial utilitzant taulers visuals flotants: parets emmarcades fosques, espai de visualització blanc i captures de pantalla que semblen objectes reals amb una profunditat suau.
- Co2 — Un atles climàtic a la llum d'hivern. Crea pàgines com un paisatge de documents aeris, on els encapçalaments amb serif, les dades codificades per categoria i les imatges gelades destaquen els amplis marges blancs.
- GitButler — Turquesa al final del text. Una combinació de titulars serif d'alt contrast amb quadrícules tècniques subtils, superfícies de grafit càlides i un discret accent turquesa.
- 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
- Dub — Tauler de control de paper d'arròs mat de Link
- 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