Sistema de diseño
Todos los colores, estilos de texto y componentes de esta plantilla, con una nota sobre cuándo usar cada uno. Cambia un estilo aquí y cambia en todas las páginas.
Colores
Quince estilos de color. Cada uno tiene un valor claro y uno oscuro, así que el cambio de tema funciona sin trabajo extra. Usa los estilos, nunca un color suelto.
Color/Background
Fondo de todas las páginas.
Color/Surface Muted
Bandas de sección, filas de preguntas y tarjetas sobre el fondo.
Color/Surface
Tarjetas y paneles sobre una banda, menús de navegación y campos.
Color/Border
Bordes de tarjetas y separadores de sección.
Color/Border Strong
Separadores dentro de tarjetas, filas de datos y puntos.
Color/Text Primary
Títulos, etiquetas y fondo del botón principal.
Color/Text Body
Párrafos y entradillas.
Color/Text Muted
Datos, pies de foto y etiquetas secundarias.
Color/Accent
Solo para el estado hover de botones principales y enlaces.
Color/Accent Soft
Etiquetas discretas detrás de texto de acento. Úsalo poco.
Color/Text On Primary
Texto sobre un fondo Text Primary (botones principales).
Color/Surface Dark
La barra de aviso y los paneles oscuros fijos.
Color/Text On Image
Texto e iconos sobre fotos o sobre Surface Dark.
Color/Glass
Marco esmerilado alrededor de las pantallas de producto.
Color/Success
Iconos de estado y números positivos.
Tipografía
Geist Serif para display y títulos, Satoshi para todo lo demás. Elige el estilo por su función, nunca pongas un tamaño a mano.
Text/Display
Título del hero, una vez por sitio.
Diseño de producto sénior
Text/H1
Título de página (h1) en las páginas interiores.
Seis servicios, un equipo sénior
Text/H2
Títulos de sección.
Del arranque al lanzamiento en 8 a 16 semanas
Text/H3 Serif
Títulos divididos en casos y páginas de servicio.
Text/Large
Títulos de paneles y formularios.
Text/H3
Títulos de tarjeta.
Text/H4
Títulos pequeños dentro de tarjetas.
Text/Quote
Citas de testimonios.
Text/Stat
Números grandes (cuentan hacia arriba si la capa se llama Stat Value).
Text/Price
Precios de los planes.
Text/Lead
El párrafo bajo el título de una página o sección.
Text/Body
Párrafos.
Text/Small
Texto de tarjetas, datos y filas de información.
Text/Label
Nombres, elementos de lista y enlaces.
Text/Caption
Etiquetas, notas y notas al pie.
Text/Button
Texto de los botones (dentro del componente Button).
Text/Nav
Enlaces de navegación.
Componentes
Reutilízalos en lugar de crear otros nuevos. Cada tarjeta muestra todas las variantes; cambia la variante en el panel derecho.
Button
Primary para la acción principal, Secondary a su lado, Light sobre fondos oscuros o fotos.
Text Link
Enlaces en línea como “Ver todo el trabajo”. Light sobre fondos oscuros.
Default
Light
FAQ Item
Una pregunta por elemento. Conectado a la colección Questions en cada página.
Closed
¿Cuándo podéis empezar?
Open
¿Cuándo podéis empezar?
Normalmente en las tres semanas siguientes a la firma.
Submit Button
Botón de envío de formularios con sus cuatro estados.
Default
Pending
Success
Error
Announcement
La barra sobre la navegación. Cambia el texto o ciérrala.
Plans
Tarjetas de precios con el cambio mensual / trimestral.
Mensual
Trimestral
Work Tabs
Casos que se deslizan solos y se pausan al pasar el ratón.
Halyard
Review Carousel
Reseñas de la colección Reviews, con la tarjeta central grande.
Secciones de ejemplo
Secciones hechas solo con los estilos y componentes de arriba: un bloque de preguntas y la tarjeta final que cierra cada página.
Preguntas sobre nuestros servicios
¿Qué herramientas usáis?
¿También desarrolláis el producto?
¿Podemos contrataros solo para research?
¿Listo para empezar tu proyecto?
Cuéntanos tu producto y tus objetivos. Te respondemos en un día laborable.
Use this free template ↗