Kit de marca · Marciano by Hostarys

Logotipos

La estrella de cuatro puntas es el símbolo de Hostarys: facetada, monocroma y siempre dentro de su contenedor redondeado cuando va sola. Negativo es para fondos oscuros y positivo, para fondos claros. Usa el SVG siempre que puedas.

Horizontal

Negativo SVG PNG

Positivo SVG PNG

Vertical

Negativo SVG PNG

Positivo SVG PNG

Horizontal sin contenedor

Negativo SVG PNG

Positivo SVG PNG

Vertical sin contenedor

Negativo SVG PNG

Positivo SVG PNG

Símbolo

Icono (contenedor claro)

Negativo SVG PNG

Icono (contenedor oscuro)

Positivo SVG PNG

Estrella

Negativo SVG PNG

Positivo SVG PNG

Logotipo horizontal, mínimo: 120 px · 25 mm
Icono, mínimo: 16 px (favicon)
Marciano, mínimo: 48 px de ancho

Marciano

La mascota de Hostarys es una llamita: la chispa con la que empieza toda web. Es el único color de la marca. Su versión oficial es Marciano Hostarys sobre Lavanda claro, la misma del favicon.

Nombre: Marciano. Siempre con mayúscula y sin artículo («Marciano te saluda»).
Qué es: una llama animada que mira, reacciona y se duerme. Tiene once expresiones y 69 accesorios (disfraces incluidos).
Sobre oscuro: en Lavanda y con brillo, para que no se pierda.
Firma: «Marciano by Hostarys» cuando aparece fuera de las webs de Hostarys.

Fondos

Lavanda claroSu fondo oficial (el del icono). Hostarys.
NieveDocumentos, correos y piezas claras.
PlataPiezas neutras. Hostarys o Negro.
VacíoFondos Hostarys oscuros. Lavanda con brillo.

Favicons e iconos

Para pestañas del navegador, accesos directos, apps y avatares. Los de Marciano son los de esta web; los de Hostarys, los de la marca. El PNG de 512 px vale para casi todo; el maskable deja margen para los recortes de Android.

Marciano

16px 32px 48px 64px 96px 128px 180px · Apple 192px 256px 512px

ICOfavicon.ico16, 32 y 48 px en un archivo · 3 KB PNGIcono maskable 192 pxCon margen de seguridad para Android · 8 KB PNGIcono maskable 512 pxCon margen de seguridad para Android · 30 KB

Hostarys

32px 180px · Apple 192px 512px

ICOfavicon.ico16, 32 y 48 px en un archivo · 2 KB SVGFavicon vectorialEscala a cualquier tamaño · 3 KB

Colores

Hostarys es monocromo: del Vacío a la Nieve, con la plata de sus degradados metálicos. El lavanda es de Marciano y es el único acento. Pulsa una muestra para copiar su código.

Hostarys

Marciano

Paleta para importar:JSON · JSON CSS · variables CSS ASE · Adobe y Affinity

Texto sobre fondo

Nieve sobre Vacío18,0:1 · AAA
Plata sobre Grafito10,6:1 · AAA
Lavanda claro sobre Vacío11,6:1 · AAA
Vacío sobre Nieve18,0:1 · AAA
Morado tinta sobre Lavanda claro5,6:1 · AA
Marciano Hostarys sobre Nieve5,7:1 · AA
Lavanda sobre Vacío4,7:1 · AA
Niebla sobre Vacío5,0:1 · AA

Más colores de MarcianoLos que acepta el componente por nombre (color="ember"). Para campañas y juegos, no para la marca.

Paleta Hostarys

Clásicos

Tipografía

Satoshi, de Indian Type Foundry. Geométrica, con carácter y muy legible. Es gratuita para uso personal y comercial con la licencia de Fontshare.

Regular · 400Toda web empieza con una chispa
Medium · 500Toda web empieza con una chispa
Bold · 700Toda web empieza con una chispa
Black · 900Toda web empieza con una chispa

Escala

Display58–128 px · Black · −5,8 %Marciano.
H142–84 px · Black · −5 %Kit de marca
H232–52 px · Black · −4,2 %Once caras
H320–24 px · Bold · −2,2 %Paquetes de stickers
Entradilla17–20 px · Regular · 1,55Una llamita curiosa de Hostarys.
Texto16 px · Regular · 1,6Toda web empieza con una chispa.
Pequeño14 px · Regular · 1,5Hecho a mano y vectorizado.
Rótulo12 px · Bold · +14 % · mayúsculasPara tus chats

TitularesBlack (900), interletrado negativo que se cierra con el tamaño (−2 a −6 %) e interlineado justo (0,86–1).
TextoRegular o Medium, 16 px o más, interlineado 1,5–1,6. Botones y rótulos en Bold.
Sin Satoshisystem-ui (San Francisco, Segoe UI) como respaldo.

Expresiones

Once caras, cada una para un momento. En el componente: mood="happy".

Normal dotsEstado normal, en reposo. La opción segura si dudas.
Feliz happyÉxito: pago hecho, formulario enviado, web publicada, bienvenida.
Guiño winkTrucos, consejos, «¡listo!» al terminar una carga, guiños de humor.
Enamorado heartsAgradecimientos, valoraciones positivas, San Valentín.
Sorprendido surprisedAnuncios, novedades, ofertas o algo inesperado (bueno).
Pensando thinkingCargas, búsquedas, «estamos pensando tu respuesta».
Triste sadErrores recuperables, 404, pago rechazado. Siempre con una salida.
KO crossServicio caído o error grave. Úsalo poco.
Mareado spiralConfusión, demasiados clics, «esto es un laberinto».
Dormir sleepyInactividad, mantenimiento programado, fuera de horario.
Enfadado angryCarga alta o spam. Siempre en tono de humor, nunca contra la persona.

Accesorios y temporadas

69 accesorios por zonas (también disfraces completos: vikingo, astronauta, pirata…); se combinan si están en zonas distintas (accessory="crown bowtie"). Con season="auto" se viste solo según la fecha en España.

Cabeza

Coronacrown
Gorro de Papá Noelsanta
Sombrero de brujawitch
Gorro de fiestaparty
Corona de floresflowers
Sombrero de pajabeach
Casco vikingoviking
Escafandra de astronautaastronaut
Tricornio piratapirate
Sombrero de magowizard
Gorro de chefchef
Kabuto de samuráisamurai
Gorra de detectivedeerstalker
Yelmo de caballeroknight
Gorracap
Casco de robotrobot
Sábana de fantasmaghost
Casco de bomberofirefighter
Astas de renoantlers
Cuernos de dragónhorns
Salacotexplorer
Chistera de muñeco de nievetophat
Gorro de lanabeanie
Gorro de elfoelfhat
Corona de Rey Magomagi

Cara

Gafasglasses
Gafas de solsunglasses
Parcheeyepatch
Antifazmask
Gafas de laboratoriogoggles
Nariz de renorednose
Nariz de zanahoriacarrot
Gafas de esquískigoggles

Cuello

Pajaritabowtie
Bufandascarf
Collar de floreslei
Prismáticosbinoculars

Orejas

Auricularesheadphones
Cascos gamerheadset
Orejas de elfoelfears
Orejerasearmuffs

Mano

Calabazapumpkin
Globo de corazónheart
Hachaaxe
Varitawand
Cucharónspoon
Katanakatana
Lupamagnifier
Guitarraguitar
Matrazflask
Escudoshield
Disco de vinilovinyl
Estrella Hostarysstar
Llave inglesawrench
Mandogamepad
Portátillaptop
Extintorextinguisher
Tabla de surfsurfboard
Escobabroom
Esquísskis
Bastón de caramelocandycane
Cofre de orochest
Patines de hieloskates
Chocolate calientecocoa

Espalda

Mochila propulsorabackpack
Capacape
Alas de dragónwings
Saco de regalossack
Estela de estrella fugazstartrail

Temporadas

Si varias coinciden, gana la de más prioridad (Nochevieja sobre Navidad).

Halloween15 oct – 1 novSombrero de bruja y Calabaza (la calabaza, solo el 31)
Navidad1 dic – 6 eneGorro de Papá Noel y Bufanda
Nochevieja31 dic – 1 eneGorro de fiesta
San Valentín7 feb – 14 febGlobo de corazón
Primavera21 mar – 31 mayCorona de flores
Verano1 jul – 31 agoSombrero de paja

Voz y tono

Marciano habla como un amigo que sabe de webs: cercano, claro y con chispa. Nunca suena a manual ni a contrato.

TuteaSiempre de tú, en español de España.
Frases cortasUna idea por frase. Si cabe en una línea, mejor.
Sin tecnicismosSi hace falta un término técnico, lo explica en pocas palabras.
Humor amableUn guiño a que es una llama (chispa, encenderse…) como mucho por mensaje. Nunca a costa de nadie.
Primero la personaSi algo falla, empatiza primero y da la solución después.

Así sí	Así no
«¡Listo! Tu web ya está encendida.»	«El proceso de despliegue ha finalizado correctamente.»
«Vaya, algo ha fallado. ¿Lo intentamos otra vez?»	«Error 500: excepción no controlada en el servidor.»
«Estoy pensando… dame un segundo.»	«Procesando solicitud. Por favor, espere.»
«¡Gracias! Me has subido la temperatura.»	«Agradecemos su valoración.»

Uso correcto e incorrecto

Pocas reglas, pero importantes. Si dudas, usa el logotipo negativo sobre Vacío y a Marciano Hostarys con su cara normal sobre Lavanda claro.

Sí

Logotipo

Usa el logotipo negativo sobre fondos oscuros (Vacío, Grafito) y el positivo sobre fondos claros (Nieve, Plata).
Deja alrededor del logotipo un espacio libre igual a la altura del contenedor de la estrella dividida entre dos.
Marciano va en su color Hostarys sobre Lavanda claro, Plata o Nieve; sobre fondos oscuros, en Lavanda con brillo.
Para favicons y avatares usa el icono (estrella en contenedor redondeado), nunca el logotipo completo.

Marciano

Úsalo en su color Hostarys sobre Lavanda claro, Plata o Nieve; sobre fondos oscuros, en Lavanda con brillo.
Elige la expresión según el momento (arriba tienes la guía).
Déjale aire: un margen de al menos un cuarto de su ancho a cada lado.
Combínalo con textos cortos y cercanos, como habla él.

No

Logotipo

No cambies los colores del logotipo ni le pongas degradados de color: la marca Hostarys es monocroma.
No deformes, gires ni recortes el logotipo, la estrella o a Marciano.
No pongas el logotipo sobre fotos o fondos con mucho detalle donde pierda contraste.

Marciano

Deformarlo, girarlo o recortarle las llamas.
Ponerle colores fuera de la paleta o degradados.
Usarlo en mensajes serios o delicados (cobros, avisos legales, bajas).
Ponerlo sobre fotos o fondos con mucho detalle donde no se lea.

Tamaño mínimo en pantalla: 48 px de ancho
Como emoji o icono: 24 px (sin brillo)
Espacio libre: ¼ de su ancho alrededor

Firmas de correo

Tu firma de Hostarys con Marciano animado, lista para pegar en Gmail, Outlook o Apple Mail. Se viste sola en cada temporada. También hay cabeceras para correos de bienvenida, pagos, facturas o incidencias.

Crear mi firma de correo

Descargas

Todo se descarga directamente. Stickers, vídeos y emojis vienen en color Hostarys; cambia a Negro con el selector.

Kit de marca completo

Logotipos (SVG y PNG), favicons e iconos de Marciano y Hostarys, paleta en ASE, CSS y JSON, el SVG animado de Marciano y un LEEME con las reglas de uso. 48 archivos.

Descargar .zip 639 KB