¿Qué es esto?
La guía de estilo Frame sirve como directriz digital de marca para crear sitios web y experiencias. El objetivo de una guía de estilo es mejorar la coherencia, la calidad y la comunicación en toda la interfaz de usuario, haciendo que el proceso de diseño y desarrollo sea más eficiente y específico.
Esta guía de estilo tiene como objetivo establecer un vocabulario común entre diseñadores y desarrolladores, y proporcionar una orientación clara y accesible sobre las mejores prácticas de diseño y desarrollo.
Más información sobre la importancia de los sistemas de diseño.
¿Para quién es esto?
Cualquiera que esté diseñando o desarrollando un nuevo sitio web utilizando Frame. Aunque no necesites utilizar estos componentes directamente, el estilo básico y la documentación te servirán de referencia útil para saber cómo hemos hecho las cosas en otros casos y para reducir la duplicación de trabajo y la contaminación de las hojas de estilo.
¿Cómo se utiliza?
Consulte Introducción a Slite para saber cómo integrar esto en su proyecto y cómo editar el estilo básico de su tema.
El color da vida al diseño. El color es versátil; se utiliza para expresar emociones y tonos, así como para enfatizar y crear asociaciones.
rgb(0, 0, 0)
$COLOR_PRIMARY
rgb(99, 115, 129)
$COLOR_SECUNDARIO
rgb(244, 241, 232)
$COLOR_SAND
rgb(139, 0, 0)
$COLOR_RED
rgb(79, 44, 29)
$COLOR_DARK_BROWN
rgb(0, 0, 0)
$COLOR_TEXT_PRIMARY
rgb(81, 81, 81)
$COLOR_TEXT_SECONDARY
rgb(148, 148, 148)
$COLOR_TEXT_LIGHT
rgb(255, 255, 255)
$COLOR_TEXT_INVERSE
rgb(0, 0, 0)
$COLOR_BACKGROUND_DARK
rgb(249, 248, 243)
$COLOR_BACKGROUND_LIGHT
rgb(255, 255, 255)
$COLOR_BACKGROUND_WHITE
rgb(245, 245, 245)
$COLOR_BACKGROUND_GREY
rgb(229, 229, 229)
$COLOR_BORDER_LIGHT
rgb(204, 204, 204)
$COLOR_BORDER_DARK
rgb(127, 85, 28)
$COLOR_LINK
rgb(0, 0, 0)
$COLOR_LINK_HOVER
rgb(127, 85, 28)
$COLOR_BUTTON
rgb(0, 0, 0)
$COLOR_BUTTON_HOVER
rgb(0, 0, 0)
$COLOR_SUPPORT_INFO
rgb(0, 170, 0)
$COLOR_SUPPORT_SUCCESS
rgb(230, 87, 34)
$COLOR_SUPPORT_WARNING
rgb(139, 0, 0);
$COLOR_SUPPORT_ERROR
rgb(94, 158, 214)
$COLOR_SUPPORT_FOCUS
Estilos de botones personalizados para acciones en formularios, cuadros de diálogo y mucho más, con compatibilidad con múltiples tamaños, estados y mucho más.
Ejemplos y directrices de uso para estilos de control de formularios, opciones de diseño y componentes personalizados para crear una amplia variedad de formularios.
El sistema de cuadrículas Frame proporciona un sistema de diseño flexible, orientado a dispositivos móviles e independiente del dispositivo. Cuenta con funciones para controlar la alineación, el orden, el flujo y los márgenes.
El sistema de cuadrículas se basa en materialize.css.
Columnas estándar
Ordenador de sobremesa 12 / Tableta 6 / Móvil 4
Escritorio 12 / Tableta 6 / Móvil 4 (Sin márgenes)
Los iconos están diseñados para ser sencillos, modernos, agradables y, en ocasiones, extravagantes. Cada icono se reduce a su forma mínima, expresando las características esenciales para sustituir o acompañar a las etiquetas.
Las variables de espaciado se utilizan para aplicar de forma coherente los márgenes y el relleno en todos los componentes y las interfaces de usuario. Disponer de una escala de espaciado establecida aporta ritmo al producto y crea un flujo natural y familiar entre las distintas páginas.
$ESPACIO_3XS
$ESPACIO_2XS
$ESPACIO_XS
$ESPACIO_S
$ESPACIO_M
$ESPACIO_L
$ESPACIO_XL
$ESPACIO_2XL
$ESPACIO_3XL
$LAYOUT_2XS
$LAYOUT_XS
$LAYOUT_S
$LAYOUT_M
$LAYOUT_L
$LAYOUT_XL
$LAYOUT_2XL
La tipografía se utiliza para crear jerarquías claras, organizaciones útiles y alineaciones significativas que guían a los usuarios a través del producto y la experiencia. Es la estructura central de cualquier interfaz bien diseñada.
Pantalla 1
Pantalla 2
Pantalla 3
Título 1
Título 2
Título 3
Título 4
Título 5
Título 6
Subtítulo 1
Subtítulo 2
Cuerpo 1
Cuerpo 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Lista ordenada nivel 1
- Lista ordenada nivel 2
- Lista ordenada nivel 2
- Lista ordenada nivel 1
- Lista ordenada nivel 1
- Lista desordenada nivel 1
- Lista desordenada de nivel 2
- Lista desordenada de nivel 2
- Lista desordenada nivel 1
- Lista desordenada nivel 1
Puede utilizar la etiqueta de marca para resaltar texto.
Esta línea de texto debe considerarse como texto eliminado.
Esta línea de texto debe considerarse como ya no precisa.
Esta línea de texto debe considerarse como una adición al documento.
Esta línea de texto aparecerá subrayada.
Esta línea de texto debe tratarse como letra pequeña.
Esta línea se muestra en negrita.
Esta línea se muestra en cursiva.
La aparición de iconos de pago ayuda a reforzar la sensación de seguridad en el sitio web. Estas son las opciones de pago habilitadas actualmente definidas en la configuración de la tienda.
Las tarjetas de productos son un componente de tamaño mediano que contiene información clave sobre el producto, como una miniatura destacada, el título y el precio. Estas tarjetas de productos se comparten en todo el tema y son uno de los componentes más reutilizables disponibles.
