Color Primario

Oscuro--color-primario-d

Base--color-primario

Claro--color-primario-l

Color Secundario

Oscuro--color-secundario-d

Base--color-secundario

Claro--color-secundario-l

Color Atención

Oscuro--color-atencion-d

Base--color-atencion

Claro--color-atencion-l

Color Error

Oscuro--color-error-d

Base--color-error

Claro--color-error-l

Color Información

Oscuro--color-info-d

Base--color-info

Claro--color-info-l

Color Neutral

Oscuro--color-neutral-d

Base--color-neutral

Claro--color-neutral-l

Tipografía – Elementos Reales

H1. Todos los títulos del 1 al 6 no dejarán palabras sueltas al final.

H2. Todos los títulos del 1 al 6 no dejarán palabras sueltas al final.

H3. Todos los títulos del 1 al 6 no dejarán palabras sueltas al final.

H4. Todos los títulos del 1 al 6 no dejarán palabras sueltas al final.

H5. Todos los títulos del 1 al 6 no dejarán palabras sueltas al final.

H6. Todos los títulos del 1 al 6 no dejarán palabras sueltas al final.

Texto de lectura. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus. Curabitur venenatis mollis diam at facilisis. Mauris varius metus eget eros dapibus, sed sodales massa tincidunt. Sed ipsum tellus, maximus ac ipsum nec, ultricies auctor sapien. Curabitur erat odio, posuere eget cursus sed, volutpat in felis. Sed et iaculis nulla. Nam nec ante et eros feugiat dignissim. Nulla sit amet felis a nisi consequat placerat id in odio. Mauris imperdiet tempus rhoncus. Aenean id felis non erat molestie aliquet. Cras tincidunt massa quis diam pellentesque consequat.

Texto de lectura centrado. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus. Curabitur venenatis mollis diam at facilisis. Mauris varius metus eget eros dapibus, sed sodales massa tincidunt. Sed ipsum tellus, maximus ac ipsum nec, ultricies auctor sapien. Curabitur erat odio, posuere eget cursus sed, volutpat in felis. Sed et iaculis nulla. Nam nec ante et eros feugiat dignissim. Nulla sit amet felis a nisi consequat placerat id in odio. Mauris imperdiet tempus rhoncus. Aenean id felis non erat molestie aliquet. Cras tincidunt massa quis diam pellentesque consequat.

Escala Tipográfica

Texto 4XL
--txt-4xl

Texto 3XL
--txt-3xl

Texto 2XL
--txt-2xl

Texto XL
--txt-xl

Texto L
--txt-l

Texto M
--txt-m

Texto S
--txt-s

Texto XS
--txt-xs

Pesos de Fuente

Black (900)
--txt-black

Grueso (600)
--txt-grueso

Normal (400)
--txt-normal

Fino (300)
--txt-fino

Escala de Espaciado

XS

--space-xs

S

--space-s

M

--space-m

L

--space-l

XL

--space-xl

2XL

--space-2xl

3XL

--space-3xl

4XL

--space-4xl

Anchos de Contenedor

Ancho Caja (990px)
--ancho-caja

Ancho Caja XL (1190px)
--ancho-caja-xl

Border Radius

S

Small (4px)--radius-s

M

Medium (8px)--radius-m

L

Large (16px)--radius-l

XL

Extra Large (32px)--radius-xl

Full

Full (999px)--radius-full

Sistemas de GridGrid S (minmax 4rem / ~64px).grid-s

Ideal para iconos, avatares pequeños o elementos muy compactos.

1

2

3

4

5

6

7

8

9

10

11

12

Grid M (minmax 8rem / ~128px).grid-m

Para thumbnails, logos de clientes o cards muy pequeñas.

1

2

3

4

5

6

7

8

Grid L (minmax 16rem / ~256px).grid-l

Para cards de producto, servicios o contenido estándar.

Item 1

Item 2

Item 3

Item 4

Grid XL (minmax 24rem / ~384px).grid-xl

Para cards grandes con más contenido o artículos destacados.

Item 1

Item 2

Item 3

Grid 2 Columnas (minmax 300px).grid-2-col

Layout fijo de 2 columnas que colapsa a 1 en móvil.

Columna 1

Columna 2

Componentes – Botones

Botón CTA PrimarioLlamada a la acción

.boton-cta.boton-cta--principal

Botón CTA SecundarioAcción secundaria

.boton-cta.boton-cta--secundario

Botón CTA OscuroCTA estilo oscuro

.boton-cta.boton-cta--oscuro

Componentes – Tarjetas

Tarjeta Clara

✓

Solución: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

✕

Problema: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

★

Especial: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

Tarjeta Oscura

✓

Solución: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

✕

Problema: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

★

Especial: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

Tarjeta con Imagen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

Componentes – SeccionesSección Encabezado (Hero).seccion.seccion--encabezado

Montaje de setups para streamers de simracing.

Correr en iRacing, Assetto Corsa o Gran Turismo ya es bastante exigente como para encima tener que pelearte con OBS, cámaras y micrófonos.

Si tu streaming de carreras se ve pixelado, el sonido del volante tapa tu voz o tu cockpit se muestra oscuro y sin detalle, tu comunidad no disfruta de la experiencia.

Con nuestro montaje completo para simracers lo dejamos todo ajustado al milímetro: hardware, software y branding listos para que te centres en competir

Texto del botón

Sección con Tarjeta Centrada.seccion.seccion--tarjeta-centrada

Título de la tarjeta

✓

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

Ver proyecto

Sección con Tarjeta a la Izquierda.seccion.seccion--tarjeta-izquierda

Título de la tarjeta

✓

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

Contratar

Sección con Tarjeta a la Derecha.seccion.seccion--tarjeta-derecha

Título de la tarjeta

✕

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

Contratar

Sección con Tarjeta a la Izquierda y fondo de imagen.seccion.seccion--tarjeta-imagen-fondo

Título de la tarjeta

✓

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempor congue efficitur. Vivamus at est ante. Donec eu cursus libero, et sollicitudin metus.

Contratar