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
- 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
- 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.