Design System — Showcase

Sergio Forés · actualizado 2026-04-12

Esta página muestra todos los tokens y componentes del sistema en un solo lugar. Sirve como referencia visual y como canario de regresiones: si algo del sistema cambia y rompe algo, aquí se verá antes que en ningún otro sitio.

No editar componentes desde este archivo. Solo sirve para visualizarlos.

Familias tipográficas

Dos familias en el sistema

Montserrat es la fuente principal del sistema. La secundaria es un stack de sistema para contextos que requieran contraste tipográfico.

Tipografía — 4 base + display

4 tamaños base + display especial para heros y contextos editoriales

Aliases semánticos

--font-size-display apunta a --text-display. heading a medium, body a base.

Letter spacing display

Los cuatro tamaños base usan clamp() con progresión áurea — escalan fluidamente entre móvil y desktop.

Colores de marca

4 colores de marca · nombres genéricos, valores intercambiables

Nombres genéricos (brand-a/b/c) para poder cambiar los valores sin renombrar variables. Uso: fondos, fills, gestos decorativos, marca.

Neutros

Blanco, negro y escala de grises 50-900

Colores de acento funcional

Estados UI con dos variantes: bright (fills/fondos oscuros) y text (texto legible sobre blanco)

Para texto sobre fondo claro — usar --accent-*-text

Versiones oscurecidas con ratio AA (6:1+ sobre blanco). Usar siempre que el color sea texto legible.

Para fills, iconos y fondos oscuros — usar --accent-*

Versiones brillantes. Solo para fills, backgrounds, iconos grandes o texto sobre fondo oscuro. No como texto sobre blanco.

--accent-*-bright son aliases de --accent-* (mismo valor, nombre explícito para uso sobre fondo oscuro). --accent-primary (#0055ff) pasa AA como texto — es el único que no necesita variante -text.

Aliases cromáticos directos

Atajos para los tokens semánticos más frecuentes

Weights y line-heights

5 pesos con contraste real, 3 line-heights

Font weights

Line heights

Letter spacing

Escala de espaciado (áurea)

Cada paso multiplica ~φ (1.618) · base 1rem = 16px

Tokens semánticos dimensionales: --space-card-padding (3.618rem), --space-card-image (13.708rem), --space-grid-min (15.326rem), --space-container-max (101.9rem). Los nombres antiguos en píxeles fueron eliminados en v3.0.0.

Botones

.btn + variantes modificadoras

Variantes

Especiales

Cards

.card con slots __header, __title, __body, __text

Sombras y radios

Spacing fluido

Tokens responsivos con clamp() para gaps y paddings

--gap para grids, --pad para contenedores. Escalan con el viewport, sin breakpoints.

Media tokens

Aspect ratios y object-fit como tokens del sistema

Scroll to Top

.c-scroll-top · componente flotante con animación

Slider

.c-slider · navegación horizontal por slides

Click izquierda/derecha para navegar. Transición: cubic-bezier(0.16, 1, 0.3, 1). JS: translateX(-N * slider.offsetWidth) por slide. Loop infinito con módulo.

Fade Scroll

.c-fade-scroll · opacidad controlada por scroll position

Usado en sergiofores para el hero section. La clase .c-fade-scroll aplica transition: opacity 0.1s linear y will-change: opacity.

Header y navegación

.pageheader + .menu · sistema completo de cabecera

Variantes: .pageheader--fixed, --sticky, --transparent, --dynamic. .menu--mobile-toggle para hamburger en mobile.

Hero

.hero-master · sección de impacto visual

Variantes: .hero-master--fullscreen (100svh), --image (background-image). .hero-title-master--inverse para texto claro sobre fondo oscuro.

Features Cards

.features__card · 8 variaciones para landing pages

Estándar

Otras variantes: --bg-only (fondo imagen), --circular (aspect-ratio 1:1), --clickable (hover scale), --two-cols / --two-cols-reverse (imagen + texto).

Notificaciones

.notification · alertas y avisos

Formularios

.form · campos, labels y estados de foco

Clases: .form (contenedor flex-column), .form--constrained (max-width áureo, centrado), .form__field (campo + label apilados), .form__label, .form__input. Estado :focus activa borde --color-accent-primary + sombra de halo. Funciona con input, textarea y select.

Dropdown

.dropdown · menú desplegable CSS puro, sin JS

Apertura por :focus-within en .dropdown — CSS puro, cero JavaScript. .dropdown__trigger contiene el label y la flecha SVG (.dropdown__arrow). .dropdown__content posicionado absolute bajo el trigger. .dropdown__list → .dropdown__item → .dropdown__link.

Iconos

.icon · SVG inline escalado en em, 4 tamaños

Clase base .icon: 1em × 1em, stroke: currentColor, fill: none, stroke-width: 2. Escala relativa al font-size del contexto — coherente en cualquier tamaño de texto. Modificadores: --sm 1.25em · --lg 1.5em · --xl 2em.

Code Windows

.c-code · ventanas de código con syntax highlighting CSS puro

/* tokens.css */
:root {
  --text-large: clamp(2.618rem, calc(2.4rem + 1.09vw), 3.236rem);
  --color-brand-a: #00FFFF;
}

<section class="c-hero">
  <h1>Título principal</h1>
  <p>Subtítulo del proyecto</p>
</section>

const slider = document.querySelector('[data-slider]');
// translateX en px absolutos
slider.style.transform = `translateX(-${offset}px)`;

Ventana de código estilo terminal con barra de título (3 dots + nombre de archivo). Syntax highlighting mediante clases semánticas CSS puro, sin JavaScript: .c-code__keyword (magenta) · .c-code__string (yellow) · .c-code__comment (gray-500, italic) · .c-code__property (cyan) · .c-code__value (accent-secondary) · .c-code__tag (accent-error). Fondo --color-gray-900, texto --color-gray-100, overflow-x: auto en pre para código largo.

Footer

.footer · pie de página con brand, links y social

Variantes: .footer--light, --accent, --tall.

Grid systems

Variantes de grid disponibles en layout.css

.grid--2-col

.grid--3-col

.grid--4-col

.grid--responsive-phi

Otras variantes: .grid--2-col-phi, --4-col-phi, --responsive-compact (gap: 0), --responsive-wide, .grid--cards, .grid--12-col. Column spans: .col-span-3/4/6/8/9.

.o-grid--breathing — respiración asimétrica

Grid editorial donde los hijos rompen el alineamiento rígido. Los offsets verticales y horizontales siguen la escala áurea inversa (φ⁻⁵ a φ⁻²) — misma proporción que el spacing, distinta unidad (% en vez de rem, porque el offset es proporcional al contenedor). Tokens: --offset-sm/md/lg/xl.

Escala de offset vertical (φ⁻⁵ → φ⁻²)

Offset en las 4 direcciones (con offset-lg)

Tokens: --offset-sm (9%, φ⁻⁵), --offset-md (14.6%, φ⁻⁴), --offset-lg (23.6%, φ⁻³), --offset-xl (38.2%, φ⁻²).
Top: .o-grid__offset-top-sm/md/lg/xl. Bottom: .o-grid__offset-bottom-sm/md/lg/xl.
Left: .o-grid__offset-left-sm/md/lg/xl. Right: .o-grid__offset-right-sm/md/lg/xl.
Layout: .o-grid--breathing (55/45 en desktop, stack en mobile), .o-grid__span-rows, .o-grid__full.
Logical properties: top = block-start, bottom = block-end, left = inline-start, right = inline-end.

Posicionamiento de hijos en grid (place-self)

Grid 3×3 donde cada celda demuestra una combinación de justify-self + align-self. El elemento oscuro (~60×40px) se posiciona dentro de su celda de 120px de altura.

Grid placement (grid-column / grid-row)

Grid de 3 columnas y 3 filas. Los hijos se posicionan con grid-column y grid-row explícitos — span de columnas, span de filas, ancho completo y celda concreta.

Containers

.container-master · max-width con padding variants

Section spacing

.section--spacing-* · ritmo vertical entre secciones

Border radius

Escala de radios del sistema

Transitions

Duraciones y curvas de animación

Duraciones (hover para ver)

Curvas (hover para ver)

Utilities

Helpers atómicos de spacing

Cómo usar este showcase

1. Ejecuta python3 -m http.server 8000 en la raíz de design-system/.
2. Abre http://localhost:8000/showcase.html.
3. Antes de cualquier cambio grande al sistema, abre el showcase y haz captura.
4. Después del cambio, recarga y compara. Si algo se ve distinto no previsto, el cambio introdujo regresión.

Auditorías asociadas: docs/audit-design-system-2026-04-07.md, docs/audit-accessibility-2026-04-07.md, docs/audit-tech-debt-2026-04-07.md.