Saltar al contenido

DiseñoColor, tipografía, espacio e íconos como tokens, las pautas detrás de ellos y el kit de Figma.Resumen
Fundamentos
ColoresOcho escalas OKLCH del Palette Generator, y los tokens semánticos que cambian entre oscuro y claro.
TipografíaCrimson Pro para títulos, Inter para todo lo demás, JetBrains Mono para código, en una sola escala de tamaños.
Espacio y tamañosUna escala de espacio de 4 px, alturas de controles, radios y sombras.
ÍconosÍconos de Lucide en los tamaños y el trazo del kit, a través de un componente Icon que puedes apuntar a otro set.
Pautas
AccesibilidadLo que hace cada componente por el teclado, el lector de pantalla, el contraste y el movimiento, y lo que todavía te toca a ti.
Kit de diseño
Kit de FigmaLos mismos tokens como variables de Figma en Dark y Light, y componentes con las mismas props.
DesarrolloInstala, envuelve tu app, adáptala a tu marca y pruébala en vivo.Resumen
Primeros pasos
IntroducciónEl sistema de diseño completo para React
InstalaciónInstala desde npm o copia el código con la CLI, agrega la hoja de estilos y el proveedor de tema.
TemasTemas oscuro, claro y del sistema, por página o por área, y cómo cambiar los tokens para tu marca.
Herramientas
PlaygroundCada componente en cada estado, oscuro y claro lado a lado.
ComponentesCada componente por categoría, accesible y documentado.Resumen
RecursosPlantillas, bloques, el playground y Alea Pro.Resumen
Plantillas y bloques
BloquesSecciones listas hechas con los componentes
PlantillasPáginas completas para empezar
Alea Pro
LicenciaCómo se licencia Alea
Alea ProLa parte paga de Alea
MotionPatrones con nombre hechos con tokens de curva y duración, modos y efectos.Resumen
Motion
Sistema de motionLas curvas y duraciones detrás de cada transición, y cómo se maneja el movimiento reducido.
Componentes de movimientoLa prop motion en cada overlay, y los componentes pequeños detrás de los patrones
MorphMorphing de elemento compartido

Maquetación

AspectRatio

Mantiene el contenido multimedia en una proporción ancho-alto al cambiar de tamaño.

import { AspectRatio } from '@alea/ui';

Ejemplos

Proporciones

Cajas 16:9, 4:3 y cuadradas que conservan su forma al cambiar de tamaño.

16:9

4:3

1:1

Props

`AspectRatio` props

Mantiene su contenido en una proporción ancho-alto: videos, mapas, imágenes.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-	Clases extra para el elemento raíz.
`ratio`	`number`	`16`	ancho / alto, por ejemplo 16 / 9. Por defecto 16 / 9.
`style`	`CSSProperties`	-	Estilos en línea para el elemento raíz.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-aspect

Solo da tamaño a su hijo: los nombres, el texto alternativo y los controles vienen de lo que pongas dentro.
El contenido nunca queda oculto por la proporción: usa object-fit o scroll para que nada se corte a quienes usan teclado o zoom.

Qué hacer y qué evitar

Hacer

Úsalo para embeds (video, mapas) así la página no salta mientras cargan.

Evitar

No recortes imágenes que llevan información.