Definición de la marca

PeopleCloud es la mejor herramienta para la administración del Recurso Humano de las empresas, gestiona el capital humano y soluciona los procesos del área de RH en la nube.

Es una plataforma integral, por que involucra dentro de sus funciones muchos procesos del departamento; es también amigable, debido a que nuestro software esta diseñado especialmente para ser una herramienta intuitiva que sea fácil de manejar; somos una plataforma accesible, debido a que somos un sistema modular, el cliente puede tomar los módulos que requiera para su departamento sin necesidad de contratar todas las funcionalidades de PeopleCloud.

El objetivo de nuestra marca en general es ser una empresa profesional, con un desarrollo inteligente que solucione todos los procesos largos del área de Recursos humanos y brindarles confianza en los clientes.

Voz del texto

Definimos nuestra manera de dirigirnos hacia los usuarios web de manera profesional utilizando frases y palabras que se dirijan con respeto y amabilidad.

Área de seguridad de logo

Es el espacio que debe existir alrededor del logotipo de PeopleCloud sin que otro elemento lo rebase e interfiera.

Debemos tomar en cuenta estas indicaciones para siempre conservar nuestro logo con una buena imagen.

Grid (retícula)

Utilizaremos el grid de Foundation, la documentación la pueden checar aquí.

Aquí puedes ver un tutorial sobre como utilizar el grid(inglés).

Tipografía

Los estilos tipográficos se definieron utilizando la siguiente escala:

<h1>Título 1</h1>

<h2>Título 2</h2>

<h3>Título 3</h3>

<h4>Título 4</h4>

<h5>Título 5</h5>

<p>Párrafo</p>

<blockquote>Blockquote</blockquote>

Las tipografías que estamos utilizando son Open Sans y FF Tisa Pro.

Esquema de colores (Web)

Colores oficiales PeopleCloud en RGB y Hex, para uso en elementos web y la plataforma del sistema.

Botones

Los botones se implementan con un conjunto de clases en donde “btn” es la clase principal para convertir un link en botón y se le pueden agregar clases dependiendo la acción del mismo:

<a class="btn">Botón regular</a>

<a class="btn btn-done">Botón</a>

<a class="btn btn-submit">Botón para enviar</a>

<a class="btn btn-error">Botón error</a>

<a class="btn btn-block">Botón full width</a>

<a class="btn btn-block btn-done">Botón full width</a>

<a class="btn btn-block btn-submit">Botón full width enviar</a>

<a class="btn btn-block btn-error">Botón full width error</a>

Formas de Contacto

Para las formas de contacto se tienen considerados estilos para las siguientes situaciones:

• Labels
• Campo standard
• Campo seleccionados (Focus)
• Campo validado (Correcto, advertencia y error)

Imagenes

Para agregar una imagen sin ninguna propiedad especial:

Con las esquinas redondeadas:

Circular:

Marco:

Iconografía

Para los íconos, vamos a usar los de Streamline Icons ya que tienen más de 1,600 íconos y se pueden utilizar en dos modalidades(outline y filled).