Colores por función
Utiliza los roles de fondo, superficie, texto y acción. Cada botón mantiene su pareja de fondo y texto en ambos modos.
Diseñar y construir con la misma identidad.
Guía de aplicación del sistema visual de Replanta.
Una identidad. Una fuente de verdad.
La portada, las páginas de servicio y la documentación comparten colores y componentes. La composición responde a cada contenido; las reglas de identidad son comunes.
Tipografía con jerarquía
Inter para titulares y lectura. IBM Plex Mono para pequeños detalles técnicos. Reserva las mayúsculas para etiquetas breves.
Interacción previsible
Foco visible, controles nativos y movimiento reducido. La animación acompaña al contenido y no bloquea el desplazamiento.
Los colores del sistema.
Estos valores proceden de la configuración de identidad. Los componentes deben usar las variables, no repetir códigos de color.
| Variable | Modo oscuro | Modo claro |
|---|---|---|
--rpl-bg | #0D1211 | #F6F8F5 |
--rpl-soft | #151D1A | #EAF0E9 |
--rpl-surface | #1D2823 | #FFFFFF |
--rpl-surface-hover | #25332C | #EDF3ED |
--rpl-text | #F2F5F1 | #14352A |
--rpl-muted | #ABB8AF | #4D6558 |
--rpl-accent | #93F1C9 | #246247 |
--rpl-on-accent | #0C2B1E | #FFFFFF |
--rpl-accent-hover | #B9F8DC | #174D36 |
--rpl-border | #35423B | #C9D6CC |
--rpl-focus | #D0FFE9 | #236044 |
--rpl-hero-wash | #244D3B | #DCEBE1 |
--rpl-footer-bg | #0D1211 | #071815 |
Componer sin acumular excepciones.
- Base compartida. Tipografía, colores, botones y navegación.
- Familia de página. Servicios, lectura, documentación o herramientas.
- Detalle específico. Solo el CSS y el JavaScript necesarios para esa página.
Los estilos específicos no deben cambiar otros componentes ni utilizar selectores globales de enlace para resolver un botón.
Comprobar antes de entregar.
- Un encabezado principal y una jerarquía de títulos comprensible.
- Lectura cómoda y controles completos en móvil y escritorio.
- Contraste en reposo, interacción, foco, carga y error.
- Imágenes con espacio reservado y recursos cargados por página.
- Respeto a la preferencia de movimiento reducido.
Componentes con el mismo criterio.
Una acción principal.
El acento señala la decisión. Los enlaces complementarios conservan una jerarquía más discreta.
Hablar de mi proyecto ↗Iconos Phosphor Thin.
Vectores locales y un mismo grosor de trazo. Un icono acompaña a la función; la etiqueta mantiene su significado.
Información progresiva.
El contenido complementario se puede desplegar con ratón o teclado.
Ver el detalle
Una explicación breve, legible y con espacio suficiente. El control conserva su foco y su nombre accesible.
Espacio, tipo y respuesta.
| Función | Criterio |
|---|---|
| Separaciones | Base de 4 px; pasos de 8, 16, 24, 32, 48 y 64 px. |
| Texto de lectura | Inter; interlineado 1,6–1,8; líneas de 60–72 caracteres. |
| Titulares | Inter, peso 500–700; espaciado óptico negativo; saltos al servicio del contenido. |
| Detalles y datos | IBM Plex Mono en etiquetas breves; cifras tabulares para comparar precios. |
| Controles | Área de interacción cómoda; foco visible y etiqueta comprensible. |
| Movimiento | Respuesta breve, 180 ms de referencia; respetar movimiento reducido. |
Variables, listas para aplicar.
.componente {
background: var(--rpl-surface);
color: var(--rpl-text);
border: 1px solid var(--rpl-border);
}
.componente a { color: var(--rpl-accent); }
.componente a:focus-visible {
outline: 2px solid var(--rpl-focus);
outline-offset: 4px;
}La referencia CSS utiliza data-replanta-palette="dark" o data-replanta-palette="light" en el contenedor. El tema de la web resuelve el modo con sus propias variables compartidas.