Español EnglishFrançaisItaliano
Portal del cliente Solicitar cotización
Español Idioma
Español EnglishFrançaisItaliano
Solicitar cotización Agendar llamada

Marca

Guía de marca.

Cómo se ve y cómo suena LFW: el nombre, el logotipo, el color, la tipografía y las reglas detrás de cada página.

El nombre y el logotipo.

Siempre LFW. Una dirección de sitio web sola se escribe LFW.com. Donde corresponda la entidad legal, use LFW.com LLC d/b/a LFW. El logotipo usa Source Serif 4 Display con peso 600, el único lugar donde aparece la tipografía con serifa.

  • Logotipo de LFW, claro Claro Sobre fondos oscuros, como en el tema oscuro SVG PNG
  • Logotipo de LFW, casi negro Casi negro Sobre fondos blancos o claros SVG PNG
  • Ícono de perfil de LFW, blanco sobre Azul LFW Ícono de perfil Blanco sobre Azul LFW, cuadrado, para perfiles en redes sociales e íconos de aplicaciones. Admite un recorte circular. SVG PNG

Los archivos del logotipo son transparentes y están recortados al ras, con las letras convertidas en contornos; el ícono de perfil es un cuadrado completo. Deje espacio libre alrededor de la marca, conserve sus proporciones y nunca la recolore ni la estire.

Color.

Una paleta clara. El Azul LFW abre y cierra cada página, y marca las acciones intermedias. Cada combinación de texto cumple el contraste AA de WCAG, en ambos temas.

  • Azul LFW #1849B8 El color de la marca: el encabezado, las secciones de cierre, los botones principales, los antetítulos y los estados activos.
  • Azul profundo #123A96 El Azul LFW para fondos oscuros: el encabezado y las secciones de cierre en el tema oscuro, y los estados al pasar el cursor.
  • Tinta #0A0A0A Títulos y texto de cuerpo en páginas claras; el fondo del tema oscuro.
  • Gris 600 #555555 Texto secundario y descripciones.
  • Gris 500 #666666 Etiquetas, leyendas y letra pequeña.
  • Línea #EBEBEB Contornos de tarjetas y filas de tablas. El espacio, no las líneas, separa los elementos.
  • Superficie #FAFAFA Paneles suaves, tarjetas sobre blanco y el pie de página.
  • Blanco #FFFFFF La página. LFW.com es claro de forma predeterminada.
  • Verde #0E7D57 Solo para estados correctos: verificaciones aprobadas, disponibilidad, publicado.

Tipografía.

Public Sans para todo lo que la gente lee. Cinco niveles de título, de Display a Título pequeño, y luego cuerpo y etiqueta. Cada título del sitio usa uno de ellos. Interletraje ajustado en los tamaños grandes, ninguno en los pequeños. Nada por debajo de 14px.

  • DisplayPublic Sans 500 · 72px · 1.02 · −0.045emSu agencia web de referencia.
  • TítuloPublic Sans 500 · 48px · 1.08 · −0.035emLo que cubre la cuota.
  • SubtítuloPublic Sans 500 · 28px · 1.15 · −0.025emEl formulario de inscripción no avanza en iPhone
  • EncabezadoPublic Sans 600 · 20px · 1.25 · −0.02emCambios pequeños ilimitados
  • Título pequeñoPublic Sans 600 · 16px · 1.35 · −0.01emHorario de oficina
  • CuerpoPublic Sans 400 · 17px · 1.65Hacemos los cambios que nos envía, mantenemos su sitio actualizado y lo verificamos todos los días.
  • EtiquetaPublic Sans 500 · 14pxDatos de muestra para una organización ficticia.

Piezas de interfaz.

Botones en forma de píldora, tarjetas suaves y ventanas de producto con un contorno fino y una sombra suave.

Solicitar cotización Agendar una llamada Enlace de texto Etiqueta Estado
TarjetaUna superficie suave, esquinas de 12px, 28px de relleno, con contorno sobre blanco.
Ventana de producto

Pantallas reales del producto, dibujadas a un tamaño legible y marcadas como muestras.

Reglas de diseño.

  • Claro de forma predeterminadaPáginas blancas, con un tema oscuro para quien lo elija.
  • El azul es un acentoBotones, enlaces y estados activos. Nunca una franja a todo el ancho.
  • Mostrar el servicioLas imágenes del Portal, de Monitor y del informe explican el trabajo. Cada muestra está identificada.
  • Escaso y fácil de recorrerTítulos cortos, una línea debajo de cada uno, y luego la prueba.
  • Texto debajo de su títuloNunca al lado. Los botones van debajo de las palabras que los justifican.
  • Espacio entre elementosLas tarjetas y los elementos se separan con espacio, no con divisores.
  • Tarjetas, no tablasLas opciones, los plazos y las comparaciones son tarjetas. Tablas solo dentro de las imágenes de producto.
  • Serifa solo para el logotipoCada título y encabezado usa Public Sans.

Voz.

Segura, exacta y sencilla. Que suene como la gente que hace el trabajo.

Posicionamiento
Operaciones web de misión crítica.
La relación
Su agencia web de referencia.
La actitud
No hay carga demasiado pesada.
  • Ser directos sobre lo que hacemos, lo que cuesta y lo que sigue.
  • Hechos simples, en las palabras del cliente. Nada de eslóganes que dejen al lector preguntándose qué significan.
  • Tomar en serio los pedidos ambiciosos, y ser honestos sobre el alcance, las concesiones y las herramientas que usamos, incluida la IA.
  • Prometer lo que los clientes recibirán, como los tiempos de respuesta y la propiedad total de su sitio. No hacer afirmaciones sobre el tamaño del equipo ni sobre quién hace el trabajo, que cambian a medida que LFW crece.
  • Indicar el horario de atención dondequiera que aparezca un tiempo de respuesta.
  • Párrafos cortos. Cuando el contenido es una lista de pasos, funciones o requisitos, hacer una lista de verdad.
  • Sin rayas largas. En inglés, ortografía estadounidense. El dominio se escribe LFW.com, y en minúsculas solo cuando le sigue una ruta.
  • WordPress solo como descriptor, como en “sitios construidos en WordPress”.
  • Un poco de humor donde resulte personal, nunca en textos legales, de seguridad ni de contratación pública.