🔧 Fundaciones y variables

Fundaciones y variables

Manual del diseño para programación

Breakpoints

Los breakpoints son variables que se definen según los anchos de los dispositivos en los que se quiere que se visualice la página web, la unidad en que se definen los breakpoints es pixeles. Estas variables le indican a los media queries cuando realizar la adaptación del contenido del sitio web a las características y resolución de la pantalla de cada dispositivo.

Tipografía

Tipografía principal

Para los headings (H1, H2, H3) y párrafos hemos seleccionado Hind

Tamaños y Características en Desktop (Breakpoints Xl y Lg)

Tipografía secundaria

La tipografía secondaria la utilizaremos para resaltar o usar Italic usaremos Raleway

Tamaños y Características en Tablet (Breakpoints Md, Sm) y Teléfono (Breakpoints Xs, Xxs y X0)

Colores del website

💡

Evita usar colores muy contrastantes como el negro y el blanco, igualmente no utilices negro y blanco puro.

Paleta de colores principal

Hex #2e279d

rgb 46, 39, 157

cmyk 93%, 95%, 0%, 0%

hsl 242°, 74%, 61%

pantone 2746 C

Hex #46b3e6

rgb 70, 179, 230

cmyk 88%, 3%, 11, 0%

hsl 199°, 69%, 90%

pantone 279 C

Hex #0779e4

rgb 7, 121, 228

cmyk 92%, 51%, 0%, 18%

hsl 208°, 96%, 89%

pantone 3005 C

Hex #ceddef

rgb 206, 221, 229

cmyk 27%, 10%, 4%, 0%

hsl 211°, 13%, 93%

pantone 2707 C

Color para backgrounds

Hex #eff4f9

rgb 239, 244, 249

cmyk 4%, 2%, 0%, 2%

hsl 210°, 50%, 96%

pantone 656 C

Paleta de colores en grises

Hex #39383B

rgb 57, 56, 59

cmyk 3%, 5%, 0%, 77%

hsl 260°, 3%, 23%

pantone 426 C

Hex #76737B

rgb 118, 115, 123

cmyk 4%, 7%, 0%, 52%

hsl 270°, 3%, 46%

pantone Cool Gray 10 C

Hex #BAB7C1

rgb 186, 183, 193

cmyk 4%, 5%, 0%, 24%

hsl 252°, 8%, 74%

pantone 2746 C

Hex #fefefe

rgb 254, 254, 254

cmyk 0%, 0%, 0%, 0%

hsl 0°, 0%, 100%

pantone white

Layout - Spaces

Layout determina como van a estar distribuidos nuestros elementos en la pagina. (Ejemplo: Sidebar a la derecha, Títulos, descripción de la pagina, etc.) y además debemos tener en cuenta el espaciado entre los elementos.

Espacios de variables

Icono de cierre del menu

Cómo te podemos ayudar