Variables CSS base para tipografía, colores, espaciado y bordes. Fácil de personalizar y sin dependencias externas.
Descripción
Las Variables CSS Base de Kodeval Pages son un sistema minimalista de custom properties diseñado para servir como fundación visual en cualquier proyecto web moderno.
El objetivo del módulo es centralizar colores, tipografías, espaciados, bordes, tamaños y transiciones en un solo lugar, permitiendo modificar toda la apariencia del sitio sin tener que editar decenas de clases manualmente.
El sistema está construido completamente con CSS nativo y no requiere frameworks, preprocessors ni librerías externas.
Todas las variables se definen dentro de :root, facilitando su reutilización global en componentes, layouts y utilidades.
Esto hace que el código sea más mantenible, más limpio y muchísimo más fácil de escalar en proyectos personales, portfolios, dashboards, landings o sitios institucionales.
El paquete incluye variables predefinidas para colores principales y secundarios, backgrounds, superficies, tipografía, tamaños de texto, espaciados, paddings, border radius, sombras, transiciones y contenedores responsivos.
Gracias a esta estructura, podés crear una identidad visual consistente desde el inicio del proyecto.
Cambiando únicamente unas pocas variables dentro de :root, es posible transformar completamente el diseño del sitio sin tocar la lógica de los componentes.
La implementación es extremadamente simple: copiás el archivo CSS base dentro de tu proyecto y empezás a consumir las variables usando var(--nombre-variable) en cualquier regla CSS.
Esto permite reutilizar colores, tamaños y espaciados en toda la interfaz evitando inconsistencias visuales y simplificando futuras modificaciones.
El sistema también está preparado para integrarse fácilmente con temas claros y oscuros mediante clases o atributos personalizados.
Las variables pueden redefinirse dinámicamente para crear dark mode o variantes visuales sin necesidad de reescribir componentes completos.
Otro punto fuerte es la compatibilidad.
Al utilizar únicamente características estándar de CSS moderno, Variables CSS Base funciona en prácticamente cualquier navegador actual sin configuraciones especiales.
No necesitás instalar dependencias, compilar archivos ni configurar herramientas externas para empezar a usarlo.
Este módulo funciona especialmente bien como punto de partida para sistemas de diseño personalizados y proyectos escalables.
También puede extenderse fácilmente agregando variables semánticas, escalas tipográficas, grids o configuraciones específicas para componentes.
En resumen, Variables CSS Base ofrece una estructura limpia, reutilizable y flexible para construir interfaces modernas manteniendo consistencia visual y simplicidad técnica.
Es una solución ideal para desarrolladores que quieren empezar proyectos más rápido, mantener un código ordenado y evitar estilos inconsistentes a medida que el proyecto crece.
No disponible
/*
|--------------------------------------------------------------------------
| Variables CSS Base - Kodeval Pages
|--------------------------------------------------------------------------
| Este archivo contiene variables CSS reutilizables para ayudarte
| a mantener un diseño consistente y fácil de modificar.
|
| Las variables permiten centralizar colores, tamaños, espaciados
| y otros valores importantes en un solo lugar.
|
| Para usar una variable:
|
| var(--nombre-de-la-variable)
|
| Ejemplo:
|
| color: var(--color-text);
| Reemplazá estos valores con los colores,
| fuentes y espaciados de tu propio proyecto.
| Son ejemplos — no hay colores "correctos".
|--------------------------------------------------------------------------
*/
:root {
/*
|--------------------------------------------------------------------------
| COLOR PRINCIPAL
|--------------------------------------------------------------------------
| Este es el color más importante del proyecto.
| Se suele usar en botones, links o elementos destacados.
|--------------------------------------------------------------------------
*/
--color-primary: #5865f2;
/*
|--------------------------------------------------------------------------
| COLOR SECUNDARIO
|--------------------------------------------------------------------------
| Un color complementario para detalles o elementos secundarios.
|--------------------------------------------------------------------------
*/
--color-secondary: #7c3aed;
/*
|--------------------------------------------------------------------------
| COLOR DE FONDO
|--------------------------------------------------------------------------
| Define el color principal del fondo de la página.
|--------------------------------------------------------------------------
*/
--color-background: #0f172a;
/*
|--------------------------------------------------------------------------
| COLOR DE SUPERFICIE
|--------------------------------------------------------------------------
| Ideal para tarjetas, headers, modales o contenedores.
|--------------------------------------------------------------------------
*/
--color-surface: #1e293b;
/*
|--------------------------------------------------------------------------
| COLOR DE TEXTO PRINCIPAL
|--------------------------------------------------------------------------
| Color usado para párrafos y texto normal.
|--------------------------------------------------------------------------
*/
--color-text: #f8fafc;
/*
|--------------------------------------------------------------------------
| COLOR DE TEXTO SECUNDARIO
|--------------------------------------------------------------------------
| Para subtítulos, descripciones o texto menos importante.
|--------------------------------------------------------------------------
*/
--color-text-muted: #94a3b8;
/*
|--------------------------------------------------------------------------
| FUENTE PRINCIPAL
|--------------------------------------------------------------------------
| Define la tipografía principal del proyecto.
|
| Si la primera fuente no está disponible,
| el navegador utilizará una alternativa similar.
|--------------------------------------------------------------------------
*/
--font-main: "Inter", sans-serif;
/*
|--------------------------------------------------------------------------
| TAMAÑO DE TEXTO BASE
|--------------------------------------------------------------------------
| Tamaño estándar utilizado en párrafos.
|--------------------------------------------------------------------------
*/
--font-size-base: 16px;
/*
|--------------------------------------------------------------------------
| ESPACIADO PEQUEÑO
|--------------------------------------------------------------------------
| Útil para separaciones pequeñas o paddings internos.
|--------------------------------------------------------------------------
*/
--spacing-sm: 8px;
/*
|--------------------------------------------------------------------------
| ESPACIADO MEDIANO
|--------------------------------------------------------------------------
| Uno de los tamaños de separación más utilizados.
|--------------------------------------------------------------------------
*/
--spacing-md: 16px;
/*
|--------------------------------------------------------------------------
| ESPACIADO GRANDE
|--------------------------------------------------------------------------
| Recomendado para separar secciones completas.
|--------------------------------------------------------------------------
*/
--spacing-lg: 32px;
/*
|--------------------------------------------------------------------------
| BORDER RADIUS
|--------------------------------------------------------------------------
| Controla qué tan redondeadas son las esquinas.
|--------------------------------------------------------------------------
*/
--radius-base: 12px;
/*
|--------------------------------------------------------------------------
| SOMBRA BASE
|--------------------------------------------------------------------------
| Sombra estándar para elementos elevados como tarjetas.
|--------------------------------------------------------------------------
*/
--shadow-base: 0 4px 12px rgba(0, 0, 0, 0.25);
/*
|--------------------------------------------------------------------------
| TRANSICIÓN BASE
|--------------------------------------------------------------------------
| Hace que cambios visuales se vean más suaves.
|--------------------------------------------------------------------------
*/
--transition-base: 0.2s ease;
/*
|--------------------------------------------------------------------------
| ANCHO MÁXIMO DEL CONTENEDOR
|--------------------------------------------------------------------------
| Limita el ancho del contenido principal del sitio.
|--------------------------------------------------------------------------
*/
--container-width: 1200px;
}