Guía de estilo

Nombres de clases «Client-First», variables de Webflow y controles del Designer. Código personalizado solo para lo que el Designer no puede expresar (:has, :checked, autocompletado, fotogramas clave), ubicado en el encabezado de la página y comentado.

El ritmo vertical se aplica al relleno de la sección, nunca al margen entre secciones. Dentro de una sección, el espacio se define mediante «flex» o un espaciado de cuadrícula, nunca mediante «margin-bottom». Cada clase de texto restablece sus márgenes superior e inferior a 0; de lo contrario, se aplicarán los márgenes predeterminados de Webflow para los encabezados y los párrafos.

px solo para bordes y sombras, que son elementos decorativos. rem para el texto, el relleno y los espacios, de modo que se adapten al tamaño de fuente del lector. ch para la medida de lectura (el ancho máximo del texto es de 60 ch). El espaciado entre letras en em, para que se adapte al tamaño del texto.

Los tamaños se definen por punto de ruptura en el Diseñador (ordenador, tableta, móvil), nunca con la función `clamp()`. Lo que ves en un punto de ruptura es exactamente lo que se publica.

Las clases de texto tienen su propia fuente, tamaño y color. La alineación y el ancho vienen determinados por el contenedor: el mismo estilo de encabezado «h1» aparece centrado en la página de inicio (dentro de «section-header.is-center») y alineado a la izquierda en las páginas de contacto y ventas.

Todas las reglas son casi negras, nunca grises; las reglas grises se interpretan como ausentes. La opción «border/subtle» solo se aplica a los bordes de los paneles.

Un ajuste específico de una página se convierte en una clase de combo, de modo que la clase compartida permanece inalterada en el resto de lugares. Asigna a la clase de combo un nombre que refleje su función (is-line, is-full, is-tight) y cámbialo cuando esa función cambie.

No se admiten etapas fijadas, ajuste al desplazamiento ni desplazamientos por la rueda del ratón. «Motion» solo aplica estilos al contenido que se desplaza normalmente; se permite el «sticky» nativo de CSS, ya que sigue siendo el lector quien lo controla.

Un párrafo introductorio, que se utiliza con moderación cuando una sección necesita un toque adicional de énfasis.

Texto del cuerpo. Negro, nunca atenuado ni secundario. Combínalo con «max-width-text» (60 caracteres) para cualquier texto que supere una línea.

Detalle secundario: funciones asociadas a un nombre de usuario, descripciones de las tarjetas.

Los botones, las etiquetas, las pastillas, las pestañas y los elementos de navegación conservan su propia clase, pero vinculan el tamaño de fuente, la altura de línea y la familia tipográfica a los mismos tokens de ui/type. Nunca escribas un tamaño de fuente sin formato.

Los números de Geist Mono (ui-num, ui-mono, ui-deal_num), las iniciales del avatar a 11 píxeles, el glifo de las teclas del teclado (ui-key) y la hora de la barra de estado con un peso de 600.

Un tamaño único para todos los dispositivos: 16 píxeles, tanto en pantallas de ordenador como de móvil. El glifo adopta el color de su contenedor, así que aplica el color al elemento padre, nunca al icono. Nunca pegues un archivo SVG directamente en una ilustración: añade primero el icono a la carpeta «Iconos de productos» y, a continuación, insértalo.

Los símbolos del logotipo de «Orbit» y «Consolidate» conservan su tamaño original. Las flechas de líneas finas, las estrellas, los cursores, las barras onduladas y los avatares fotográficos no son iconos.

container-large: 90 rem (1440 px), por lo que los portátiles de 1440 a 1728 px conservan un margen lateral. container-medium: 64 rem; container-small: 48 rem. Las bandas multimedia se sitúan dentro del contenedor, sin llegar hasta el borde; solo la banda principal se extiende más allá de él.

1,5 rem a cada lado en cada punto de ruptura.

Espaciado superior e inferior de cada sección. .is-hero establece 3 rem en la parte superior para que la imagen del producto se vea en la página de inicio.

Título e introducción de una sección. .is-tight reduce la distancia con respecto al contenido; .is-center centra todo lo que hay en su interior (hero de la página de inicio).

Según las medidas en Figma: las tarjetas de 5 en fila y la fila de logotipos de 6 en fila no encajan en una cuadrícula de 12 columnas. Lo que se mantiene constante es la medida y el espacio entre columnas de 1,5 rem, por lo que las filas son fracciones iguales. Los elementos destacados de dos columnas utilizan su propia cuadrícula (contact-hero: 1 fr 1 fr, espacio de 6 rem, apilados en tableta).

Ordenador de sobremesa a partir de 992 píxeles (con 1440 y 1920 por encima); tableta hasta 991 píxeles; móvil en horizontal hasta 767 píxeles; móvil en vertical hasta 479 píxeles. El tipo de letra y el espaciado cambian en tableta y móvil.

Cómo comienza una sección: una línea que atraviesa el contenedor, seguida de su título. Se utiliza en todas las secciones de la página de inicio después del «hero», y en el «hero» de contacto y ventas.

Solo la regla, cuando el contenido establece su propio espaciado (CTA del pie de página).

Las listas se separan mediante una línea muy fina en la parte superior de cada fila, nunca solo mediante espacios en blanco.

Hay esquinas afiladas por todas partes: tarjetas, paneles, campos, mosaicos con el logotipo. La única excepción es la llamada a la acción principal, un «pill» completo (radio de 999 píxeles).

Los trazos de los paneles utilizan el contorno (las cuatro variantes de trazo largo), por lo que no ocupan espacio en la maquetación y se superponen a los elementos subordinados. Cualquier elemento de un solo lado, como una línea horizontal o un subrayado, utiliza el borde.

Elemento contenedor .signup-form_wrap, formulario con el atributo data-folk-demo="contact", un campo de entrada [type=email] y un elemento .js-select cuyos valores son 1-2, 3-9, 10-49, 50-249, 250-999 y 1000+. El script busca la empresa al perder el foco del campo de correo electrónico y, a continuación, redirige a los usuarios que cumplen los requisitos (10+) a /demo-calendly, a los que cumplen los requisitos (3–9) a /book-a-folk-demo-2 y al resto a la redirección para usuarios que no cumplen los requisitos.

Correo electrónico, tamaño del equipo y botón en una fila con borde, 0,875 rem, 3 rem de altura.

Ponte en contacto con el departamento de ventas. Sin recuadro ni fondo, texto de 1,25 rem, subrayado negro de 1 px y altura de 4 rem. El texto de ayuda es el título (sin etiquetas; cada campo lleva una etiqueta «aria-label»). El texto de ayuda y el menú desplegable sin seleccionar se muestran en «text/secondary». Sin subrayado cuando no hay foco: el cursor sirve de indicación, y el menú desplegable muestra una línea de 2 px solo cuando se le da foco mediante el teclado.

Pastilla negra, ancho total, 1 rem, 3,5 rem de altura.

Campos juntos (0,5 rem), botón y pila de notas (1 rem), bloque (2 rem) entre los dos grupos.

La opción «select» nativa sustituye a las fichas de opciones: las fichas necesitaban un script puente para acceder al script de calificación, mientras que la opción «select» no necesita ninguno. La cabecera de la página se superpone al autocompletado azul de Chrome y mantiene la tipografía del campo en los valores sugeridos.

En una sección o una cuadrícula. La carga se adapta a la página (héroes); se muestra cuando el grupo entra en la pantalla y se desplaza elemento por elemento a medida que van apareciendo. El atributo `data-reveal-at="60%"` retrasa la visualización hasta que la parte superior alcance esa altura.

arriba: desvanecimiento y desplazamiento hacia arriba de 1 rem. líneas: un título que se revela línea a línea. desvanecimiento: solo opacidad; se utiliza para contenedores muy estrechos, de modo que la regla aparezca junto con su sección.

Un atributo en lugar de tres, como es habitual en los patrones.

Los títulos que aparecen en la parte superior de la página utilizan la función de visualización basada únicamente en CSS, por lo que se consideran pintados de inmediato (LCP). Nunca apliques un efecto de fundido con JavaScript a un contenedor que albergue el H1.

Con animaciones reducidas, sin JavaScript o en el Diseñador, todo se ve perfectamente. El motor es reveal.js, que se encuentra en el pie de página del sitio web; los modos exclusivos para la página de inicio se encuentran en reveal-extra.js.

Si editas cualquiera de ellos, se modificarán todas las páginas. La variante «Base» del pie de página incluye el formulario de llamada a la acción (CTA). No cambies nunca el nombre de .nav-items-wrapper, .nav-item-wrapper, .logo-context-menu ni .sub-nav-item: los scripts y el CSS hacen referencia a ellos.

La pared con el logotipo de la empresa y las filas de testimonios, reutilizadas en las ventas por contacto.

El formulario de demostración integrado, ya vinculado al script de calificación.

Las ilustraciones son elementos de Webflow codificados, no imágenes: nítidas a cualquier DPI, interactivas y animables. Utilizan sus propias clases y tokens de interfaz de usuario y nunca toman prestado el espaciado de la página. Cada ilustración animada contiene una instancia de su componente «Code», por lo que el script solo hay que editarlo una vez. Todas las ilustraciones aparecen en /illustrations; añade allí cada nueva ilustración.

• Obtenga una demostración
• Descubre qué plan es el más adecuado para ti