¿Qué es esto?
Frame Styleguide sirve como una guía de marca digital para construir sitios web y experiencias. El objetivo de una guía de estilo es mejorar la consistencia, la calidad y la comunicación en la interfaz de usuario, haciendo que el proceso de diseño y desarrollo sea más eficiente y centrado.
Esta Guía de Estilo es para establecer un vocabulario compartido entre el diseñador y el desarrollador, y proporcionar una guía clara y descubrible 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 usando Frame. Incluso si no necesita usar estos componentes directamente, el estilo base y la documentación deberían ser una referencia útil para saber cómo hemos hecho las cosas en otros lugares y para reducir la duplicación de trabajo y la contaminación de las hojas de estilo.
¿Cómo lo uso?
Consulte Introducción a Slite para saber cómo integrar esto en su proyecto y cómo editar el estilo base de su tema.
El color da vida a un diseño. El color es versátil; se usa para expresar emoción y tono, así como para poner énfasis y crear asociaciones.
rgb(0, 0, 0)
PRIMARIA DE COLOR
rgb(99, 115, 129)
$COLOR_SECUNDARIA
rgb(244, 241, 232)
ARENA DE COLOR
rgb(139, 0, 0)
COLOR_RED
rgb(79, 44, 29)
$COLOR_MARRÓN_OSCURO
rgb(0, 0, 0)
$COLOR_TEXTO_PRIMARIO
rgb(81, 81, 81)
$COLOR_TEXTO_SECUNDARIO
rgb(148, 148, 148)
$COLOR_TEXTO_LUZ
rgb(255, 255, 255)
$COLOR_TEXTO_INVERSO
rgb(0, 0, 0)
$COLOR_BACKGROUND_DARK
rgb(249, 248, 243)
$COLOR_FONDO_LUZ
rgb(255, 255, 255)
$COLOR_FONDO_BLANCO
rgb(245, 245, 245)
$COLOR_FONDO_GRIS
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)
BOTÓN DE COLOR
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, diálogos y más con soporte para múltiples tamaños, estados y más.
Ejemplos y directrices de uso de estilos de control de formularios, opciones de diseño y componentes personalizados para crear una amplia variedad de formularios.
El sistema de cuadrícula de Frame proporciona un sistema de disposición flexible, primero móvil y agnóstico de dispositivos. Tiene características para controlar la alineación, el orden, el flujo y las canaletas.
El sistema de cuadrícula se basa en materialize.css.
Columnas estándar
Escritorio 12 / Tableta 6 / Móvil 4
Escritorio 12 / Tableta 6 / Móvil 4 (Sin canaletas)
Los iconos están diseñados para ser simples, modernos, amigables y a veces extravagantes. Cada icono se reduce a su forma mínima, expresando características esenciales para reemplazar o acompañar las etiquetas.
Las variables de espaciado se utilizan para aplicar de forma consistente el margen y el relleno a través de los componentes y las UI. Tener una escala de espaciamiento fija le da un ritmo al producto y crea un flujo natural y familiar de página en página.
$SPACING_3XS
$SPACING_2XS
$SPACING_XS
$SPACING_S
$SPACING_M
$SPACING_L
$SPACING_XL
$SPACING_2XL
$SPACING_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 intencionadas que guíen a los usuarios a través del producto y la experiencia. Es la estructura básica de cualquier interfaz bien diseñada.
Pantalla 1
Pantalla 2
Pantalla 3
Cabeza 1
Cabeza 2
Rumbo 3
Rumbo 4
Rumbo 5
Rumbo 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 no ordenada nivel 1
- Lista no ordenada nivel 2
- Lista no ordenada nivel 2
- Lista no ordenada nivel 1
- Lista no ordenada nivel 1
Puedes usar la etiqueta de la marca para destacar texto.
Esta línea de texto debe ser tratada como texto eliminado.
Esta línea de texto está pensada para ser tratada como si ya no fuera precisa.
Esta línea de texto debe ser tratada como una adición al documento.
Esta línea de texto se mostrará como subrayada
Esta línea de texto está pensada para ser tratada como letra pequeña.
Esta línea se muestra en negrita.
Esta línea se presenta como texto en cursiva.
La aparición de los iconos de pago ayudan a reforzar la sensación de seguridad en el sitio web. Estas son las opciones de pago actualmente habilitadas 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 imagen en miniatura, el título y el precio. Estas tarjetas de productos se comparten a lo largo del tema y son uno de los componentes más reutilizables disponibles.
