Tarjeta destacada
Franja verde de 4 px arriba. Como mucho una por página; si hay dos, ya no destaca ninguna.
Enlace terciario
Sistema de diseño
Normas de diseño de la web de Ficheo
Todo lo que se ve en ficheo.app sale de esta página: los colores, las medidas, los botones, los espacios, las piezas y los iconos. Si algo no está aquí, no se usa; y si te falta, se pide, no se inventa.
01 · Color
Negro que manda, verde que señala
Once colores y ninguno más. El negro es la marca: manda en botones, en el cierre y en los titulares. El verde es el acento corporativo: tiene que verse en cada pantalla sin buscarlo, pero nunca es un fondo grande ni un botón.
Negro
--negro · #111111Negro hover
--negro-80 · #2b2b2bTinta
--tinta · #141622Gris
--gris · #646a7aLínea
--linea · #e8eaeeLienzo
--lienzo · #f7f8faBlanco
--blanco · #ffffffVerde
--verde · #16a34aVerde oscuro
--verde-700 · #15803dVerde fondo
--verde-50 · #f0fdf4Verde borde
--verde-100 · #dcfce7Dónde va el verde, exactamente
| Sitio | Clase | ¿Siempre? |
|---|---|---|
| El kicker, encima de cada H1 y de cada H2 | .kicker | Siempre |
| La ficha del icono de una tarjeta | .ico | Siempre que haya icono |
| Los tics de una lista de ventajas | .tics | Siempre |
| La chapa de «incluido» o «gratis» | .chapa.ok | Donde toque |
| La cifra buena dentro de un texto | .marca | A veces |
| El enlace de la sección actual del menú | [aria-current] | Siempre |
| El aviso de «esto ya lo cumples» | .aviso.ok | A veces |
| La franja de 4 px de una tarjeta destacada | .tarjeta.destacada | Una por página |
Así
Cumplir la ley
El verde señala, el negro manda
Kicker verde, ficha de icono verde, tics verdes, botón negro. Se ve el color corporativo sin que grite.
- El registro se llena solo
- Se guarda cuatro años
Así no
Nunca
- Un botón principal verde: el principal es negro, siempre.
- Una sección entera con el fondo verde, o un degradado.
- Un titular en verde: los titulares van en tinta.
- Los tics de «lo que no hace»: esa lista va en gris, con cruces.
- Un color que no esté en los once de arriba, escrito a mano en la página.
02 · Tipografía
Dos familias y diez tamaños
Space Grotesk para los titulares (600 y 700). Inter para todo lo demás (400, 500 y 600). Un solo H1 por página, y los H2 estructuran: no se salta un nivel para conseguir un tamaño.
Titular de portada
--t-hero · clamp(40, 5.2vw, 64) px · interlínea 1.05 · solo el H1 de la portada, con .hero.grande
--t-1 · clamp(34, 4vw, 48) px · interlínea 1.1 · el H1 del resto de páginas. El ejemplo vivo es el título de esta misma página, ahí arriba.
Título de sección
--t-2 · clamp(26, 3vw, 34) px · interlínea 1.2 · todos los H2
Título de tarjeta
--t-3 · 22 px · interlínea 1.3 · H3 de tarjeta y de bloque
Subtítulo de tarjeta
--t-4 · 18 px · interlínea 1.4 · H4, resúmenes de pregunta, acordeón móvil
Entradilla debajo de un H1: dos frases, no cinco.
--t-lead · 20 px · interlínea 1.55 · clase .lead
Cuerpo de texto normal. Frases cortas, segunda persona, lo concreto antes que lo abstracto.
--t-base · 17 px · interlínea 1.65 · el body entero
Texto secundario: pies de tabla, notas de una tarjeta, enlaces del pie.
--t-sm · 15 px · interlínea 1.5 · clase .sm
Letra pequeña: migas, chapas, la nota de precios sin IVA.
--t-xs · 13 px · interlínea 1.4 · clase .xs
Kicker de sección
.kicker · 13 px · mayúsculas · tracking .06em · SIEMPRE en verde, siempre encima de un H1 o un H2
Columna de lectura:
.prosa = 760 px. Es para el texto largo de una guía, no para la página entera: la cabecera, las tarjetas y el pie siguen a 1200.
Anchuras: --ancho 1200 px (.contenedor) · --ancho-texto 760 px (.prosa) · --ancho-estrecho 560 px (.estrecho, para formularios).
Márgenes laterales: 24 px en móvil, 40 px a partir de 640 px. Nunca se escriben a mano: los pone .contenedor.
03 · Espacio
Una escala de cuatro, y nada fuera de ella
Diez pasos. Ninguna página escribe un píxel a mano: si un hueco no cuadra con ninguno de estos diez, el hueco está mal, no la escala.
--e1 4 px · separación mínima, dentro de una chapa--e2 8 px · entre un icono y su texto--e3 12 px · entre el kicker y su H2; entre botones--e4 16 px · entre un H2 y su párrafo; entre párrafos--e5 24 px · dentro de una tarjeta, y entre tarjetas de una rejilla--e6 32 px · entre dos bloques de una misma sección--e7 48 px · debajo de la cabecera de sección--e8 64 px · entre secciones en móvil--e9 96 px · entre secciones en escritorio--e10 128 px · reservado, casi nunca hace falta
Entre secciones:
.seccion ya pone 64 px en móvil y 96 en escritorio. No se le suma nada.
Fondo alterno: .seccion.alterna pinta el lienzo y traza una línea arriba y otra abajo. Se alterna, no se encadenan dos seguidas.
Ajustes sueltos: solo existen .mt4 .mt5 .mt6 .mt7 .mb5 .mb6 .mt0 .mb0. No hay más, a propósito.
04 · Controles
Tamaño normal · alto 48 px (Botones, en dos tamaños
El principal es negro con texto blanco. El secundario, blanco con borde. El terciario es solo texto con una flecha. No hay botón verde en ninguna parte de la web.
--control) · padding lateral 24 px · texto 16 px/600 · esquina 4 px · icono opcional de 18 px a la derecha
Tamaño pequeño (.sm) · alto 40 px (--control-sm) · padding lateral 16 px · texto 15 px · es el de la cabecera y el de dentro de una tarjeta
Esquinas: 4 px en TODO (
--radio): botones, tarjetas, fichas de icono, campos, huecos de imagen y tablas. Solo las chapas y los puntos van redondos (--radio-chapa).
Sombras: ninguna. Solo el menú desplegado y el panel móvil abierto llevan sombra.
Ancho completo: .btn.ancho. Dentro de la franja negra del cierre, el botón claro es .btn.pri.claro.
Campos
La pista va debajo, en 13 px y en gris.
--linea · esquina 4 px · etiqueta de 15 px/600 encima · el formulario entero a 560 px (.estrecho)
05 · Piezas
Tarjetas, rejillas, chapas y avisos
Estas son todas las piezas que existen. Si te falta una, no la montes en tu página con CSS nuevo: se pide y se añade aquí, para que la siguiente persona la encuentre.
Rejillas
.rejilla.c2 · .c3 · .c4 · hueco de 24 px · una columna en móvil, dos a partir de 640 px, y las tres o cuatro a partir de 960 px
Tarjeta normal
Ficha de icono de 48 px, H3 de 22 px, texto en gris y un enlace terciario abajo del todo, alineado con los demás.
Enlace terciarioTarjeta numerada
Para listas largas contadas: las doce preguntas, los pasos de un proceso. El número va en negro, no en verde.
Pasos
.pasos.p3 para tres, .pasos para cuatro · el número lo pone el CSS, no se escribe
Das de alta
Nombre y correo de cada persona.
Ficháis
Un toque al entrar y otro al salir.
Cierras el mes
Sale el registro y el CSV de horas.
Listas de lo que sí y de lo que no
- Lo que el producto hace hoy, con tic verde.
- Una cosa por línea, concreta.
- Lo que no hace, con cruz gris.
- Nunca en verde: esta lista no es una ventaja.
Chapas
Alto 26 px · esquina redonda · texto de 13 px/600 · nunca dos chapas seguidas diciendo lo mismo
Neutra
Incluido
Novedad
Y las cuatro chapas de plan, que dicen desde qué nivel entra una función. Van de claro a oscuro, como la escalera:
Gratis
Esencial
Equipo
Pro
Cifras
.cifra · solo con números verdaderos: precios de la página de precios y plazos de la ley. Nunca resultados ni cifras de clientes.
0 €fichar y cumplir la ley, sin límite de empleados
12 hde descanso entre jornadas (art. 34.3 ET)
4 añosque hay que guardar el registro
Avisos
Aviso bueno
Fondo verde muy claro. Para «esto ya lo cumples». En una guía es el sitio de la respuesta directa.
Ojo con esto
Barra negra a la izquierda. Para lo que hay que leer dos veces. No hay rojo en la web: el aviso serio se marca con el negro de marca.
Aviso neutro
Fondo lienzo. Para una nota al margen que no es ni buena ni preocupante.
Preguntas
.faq con <details>. Solo las preguntas que se ven aquí entran en el JSON-LD de FAQPage.
¿Puedo inventarme una pieza si me falta?
No. Se pide y se añade a la hoja de estilos y a esta página. Es la única forma de que 53 páginas hechas por cinco personas distintas se parezcan entre sí.
¿Y si necesito un color que no está?
No lo necesitas. Once colores dan para todo, y el comprobador rechaza cualquier color escrito a mano fuera de un icono.
06 · Planes
Las tarjetas de plan
Cinco en una fila a partir de 1200 px, tres a partir de 960 y dos en tableta. Solo Esencial lleva la franja verde y la chapa «El primer paso»: ninguna lleva reclamos de popularidad, porque no hay datos que lo sostengan. Los precios y los textos salen de PLANES.md, no de la cabeza de nadie.
Gratis
Fichar y cumplir. Sin límite de plantilla.
0 €/empleado/mes
Para siempre.
- Fichaje móvil y sin conexión
- Registro legal cuatro años
Esencial
Gestionar el día a día sin complicarse.
0,99 €/empleado activo/mes
Facturado al año, sin IVA.
- Turnos simples y plantillas
- Bolsa de horas
Precio por empleado activo y mes, facturado al año. Sin IVA.
.toggle), la calculadora (.calc) y la matriz de 25 filas (.matriz) están montados y listos para copiar en PLANTILLA.html. En móvil la matriz enseña una columna cada vez con los chips de arriba.
07 · Imágenes
El hueco de imagen, y sus seis medidas
Todavía no hay fotos: cada sitio donde va una lleva un hueco que dice qué imagen es y de qué tamaño, para poder generarlas todas de una tanda. Cuando el archivo exista en /img/, el hueco desaparece solo y en su lugar aparece la foto. El HTML no cambia.
| Medida | Proporción | Para qué |
|---|---|---|
| 1200 × 720 | 5:3 | Hero de la portada |
| 1200 × 600 | 2:1 | Hero de una página interior |
| 800 × 520 | 20:13 | Tarjeta de sector o de función |
| 1440 × 900 | 16:10 | Captura del panel, dentro de .foto.marco |
| 600 × 600 | 1:1 | Retrato o icono grande de sección |
| 1600 × 500 | 16:5 | Franja ancha |
1200 × 600
Ejemplo vivo de un hueco: sala de una peluquería a media mañana con dos profesionales trabajando y una tablet en el mostrador. Luz natural, sin marcas de producto visibles y sin ningún texto dentro de la imagen.
img/diseno-hueco-ejemplo.webp
La descripción manda: mínimo 60 caracteres y lo bastante concreta para generar la imagen. Qué se ve, cuánta gente, qué luz, y qué NO debe salir: logos de marcas y texto dentro de la foto.
El nombre de archivo es único en toda la web y va en
img/. Dos páginas no pueden pedir el mismo archivo.
Cada página lleva al menos una imagen. La portada, cuatro o cinco. La descripción es también el texto alternativo de la foto cuando exista.
Capturas del panel: hueco de 1440 × 900 y la descripción dice qué pantalla es, con el nombre que tiene en el producto.
08 · Iconos
El juego entero, con el nombre de cada uno
Cuarenta y cuatro iconos, y ni uno más sin pasar por aquí. Todos en SVG dentro del HTML, viewBox="0 0 24 24", trazo de 1,9, esquinas redondas, sin relleno y con el color heredado. En una ficha (.ico) miden 24 px sobre 48 de caja; sueltos en línea, 20 px.
Los mismos, a 20 px
Prueba de legibilidad: a este tamaño van dentro de una chapa o de un enlace del menú, y tienen que distinguirse igual.
Cómo se copia: el SVG entero, tal cual está aquí, con su
data-ico y su aria-hidden="true". El color y el grosor los pone la hoja de estilos: no se escriben en el icono.
Dentro de una tarjeta: envuelto en <span class="ico">, que es la ficha verde de 48 px. En el menú, .ico.sm (32 px).
Si te falta un icono: se pide, se dibuja aquí con su nombre y entonces se usa. Uno inventado en una sola página rompe el juego entero.
09 · Antes de dar una página por buena
Lo que mira
Lo que mira node _comprobar.js
Se pasa a cada página antes de darla por terminada. Si sale con error, la página no está lista. Comprueba, por este orden:
- Que no haya ni una etiqueta de estilo ni un atributo de estilo dentro del HTML.
- Que no haya ningún color escrito a mano fuera de un icono o de un ejemplo de código.
- Que estén el título, la descripción, el canónico y un único H1.
- Que todos los bloques de datos estructurados sean JSON válido.
- Que ningún enlace interno apunte a una página que no existe.
- Que cada hueco de imagen lleve una de las seis medidas, una descripción de más de 60 caracteres y un nombre de archivo que no use ninguna otra página.
- Que el verde aparezca al menos tres veces.
- Que no haya ninguna de las frases prohibidas de PLANES.md §5: promesas de facturación que todavía no existe, reclamos de popularidad sin datos, cifras de clientes y opiniones inventadas.
- Que la página comprimida no pase de 140 KB.
Las dos páginas de referencia, PLANTILLA.html y esta misma, pasan la comprobación. Si tu página no pasa, compárala con ellas antes que con tus recuerdos.
Y si algo falta
Se pide, no se inventa
Una regla nueva escrita en una sola página es una web desigual dentro de un mes. Si te falta una pieza, un icono o un color, se añade aquí y lo usa todo el mundo.