Sistema de diseño
Dentro del desarrollo web los
¿Qué es un sistema de diseño?

Un sistema de diseño es un conjunto de directrices y reglas que se utilizarán en el proceso de creación de los componentes y de todos los elementos del proyecto al que acompañe. Estas reglas pueden ser tipografía, paletas de colores, formas de componentes, el cómo interactúa el usuario final con los elementos del sitio web, etc.
Principalmente, los sistemas de diseño nacieron de la falta de consistencia en los proyectos web, ya que lo que sucedía era que en un mismo proyecto, se iban modificando estilos aplicados a los mismos componentes debido a no tener guías. Este hecho en proyectos de cierto tamaño se hacía aún más visible, por esta razón, se decidió crear sistemas de diseño para mantener la consistencia y coherencia dentro de un proyecto, pudiendo así los desarrolladores disfrutar de un camino menos escarpado durante su estancia en estos.
¿Qué son los tokens de diseño?
Los tokens de diseño son variables que representan las guías y directrices que se utilizan en los sistemas de diseño. Un ejemplo de estas variables de diseño son los colores dentro de las paletas seleccionadas en el sistema de diseño, otro sería el tipo de letra y los tamaños correspondientes dependiendo de dónde se use, ya sea un título o subtítulo, etc.
En este caso las variables serán representadas por
Ventajas de utilizar un sistema de diseño

Coherencia: Gracias a compartir los mismos patrones durante todo el proyecto, se reduce la posibilidad de que en mismos componentes en distintas secciones varien en estilo.
Reutilización: Este apartado es clave, los sistemas de diseño se suelen utilizar en varios proyectos o una vez acabado con uno, hacer unas pequeñas modificaciones y usarlo en otro. También se reutilizan los tokens de diseño constantemente sobre un mismo proyecto para mantener la cohesión.
Flexibilidad: Permite una amplia libertad al poderse usar en cualquier plataforma o tecnología. Al ser unos patrones/reglas/directrices, se pueden aplicar sobre casi cualquier proyecto.
Eficiencia y calidad: Se ahorra mucho tiempo debido a no tener que ir revisando cómo se han aplicado los estilos en otras secciones. Simplemente tienes que mirar los tokens de diseño y aplicarlos. Otro punto fuerte de esto es que si se hace una modificación en los tokens de diseño, se aplican en todos los elementos en que se usen, lo que permite mejorar la calidad y la eficiencia de los productos reduciendo así el número de fallos.
Entre muchas otras ventajas.
Sistema de diseño Palaze
El sistema de diseño empleado en Palaze destaca por buscar el minimalismo, no se pretende saturar al usuario con elementos excesivamente llamativos que distraigan el foco de lo verdaderamente importante.
Paletas de colores
Las paletas de colores que se muestran a continuación son las que se usan en Palaze, tokens incluidos.
Tipografía
A continuación se muestra un ejemplo de los distintos tipos de letra, tamaño, espacio entre lineas, espacio entre letras, etc.
Familia Tipográfica
Para nuestra fuenta principal tenemos
Token | Valor | Ejemplo |
---|---|---|
--plz-font-primary | La octaba maravilla del mundo. |
|
La octaba maravilla del mundo. |
Tamaño de fuente
Distintos tipos de tamaño de fuente que son utilizados tanto en el landing page, como en la documentación, como en los propios componentes de Palaze.
Token | Valor | Ejemplo |
---|---|---|
--plz-font-size-very-small | 12px | Aa |
--plz-font-size-small | 14px | Aa |
--plz-font-size-normal | 16px | Aa |
--plz-font-size-sub-section | 20px | Aa |
--plz-font-size-mid-section | 30px | Aa |
--plz-font-size-below-titles | 24px | Aa |
--plz-font-size-section | 48px | Aa |
--plz-font-size-titles | 64px | Aa |
Grosor de fuente
La fuente tipográfica
Token | Valor | Ejemplo |
---|---|---|
--plz-font-weight-regular | 400 | Visteme despacio que tengo prisa. |
--plz-font-weight-bold | 700 | Visteme despacio que tengo prisa. |
Espacio entre lineas
Token | Valor | Ejemplo |
---|---|---|
--plz-line-height-smaller | 1 |
La octaba maravilla del mundo. |
--plz-line-height-small | 1.4 |
La octaba maravilla del mundo. |
--plz-line-height-normal | 1.8 |
La octaba maravilla del mundo. |
--plz-line-height-big | 2.4 |
La octaba maravilla del mundo. |
Espacio entre letras
Token | Valor | Ejemplo |
---|---|---|
--plz-letter-space-smaller | -0.48px | La octaba maravilla del mundo. |
--plz-letter-space-small | -0.24px | La octaba maravilla del mundo. |
--plz-letter-space-normal | normal | La octaba maravilla del mundo. |
--plz-letter-space-big | 1.2px | La octaba maravilla del mundo. |
--plz-letter-space-bigger | 2.4px | La octaba maravilla del mundo. |
Formas de los bloques
Cada elemento, ya sea componente o no puede cambiar visualmente de una manera drástica cambiando su
Token | Valor | Ejemplo |
---|---|---|
--plz-border-radius-circle | 50% |
|
--plz-border-radius-rounded | 9999px |
|
--plz-border-radius-low-rounded | 25px |
|
--plz-border-radius-default | 4px |
|
--plz-border-radius-square | 0px |
|