# Formas Las formas dan carácter y estructura sin agregar ruido. ## Formas Los componentes Lexy usan cuatro formas básicas: rectángulo, círculo, pill y beak. ### Rectángulo Es la forma base para la mayoría de componentes y contenedores comunes: botones, textareas, menús, cards e imágenes. ### Círculo Reservado para avatares y otros componentes que muestran o representan personas. ### Pill Útil para representar trayectorias como el track de un slider o el canal de un toggle. También aparece en tags, palabras clave o selecciones dentro de listas. ### Beak Ofrece un punto de referencia para superficies flotantes asociadas a un único objeto, como callouts o popovers. Las formas se distinguen del entorno por **fill** (relleno que define y enfatiza la forma) o por ** border** (borde que identifica el contenedor en formas sin relleno, como las cards). ## Radio de esquina En la mayoría de casos, los radios de esquina sobre rectángulos son de 4px por defecto. Para formas menores a 32px el ángulo baja a 2px. Componentes large y x-large usan 8px y 12px, respectivamente. En contextos móviles, sigue las guías de iOS y Android. ### Tokens de radio - **None** (0px): navigation bars, tab bars. - **Small** (2px): badges pequeños. - **Medium** (4px): botones, dropdown. - **Large** (8px): botones grandes. - **X-Large** (12px): button sheets, popovers. - **Circle** (50%): personas. Las esquinas redondeadas se aplican a tres familias: elementos rectangulares, flyouts y elementos en pill o circulares. ### Cuándo evitar esquinas redondeadas Hay casos en que redondear genera huecos visuales incómodos: evita los espacios innecesarios entre componentes UI dentro de un mismo contenedor (como las dos partes de un split button), y omite el redondeo cuando el componente toca el borde de la pantalla. ## Trazo Aplica propiedades de trazo para construir líneas, flechas, bordes y redes vectoriales. Puedes controlar el grosor, el color, la distribución y los terminales. ### Grosor del trazo Cambia el grosor con tokens dedicados: ** Thin** 1px, ** Thick** 2px, ** Thicker** 3px (web) / 4px (móvil), ** Thickest** 4px (web) / 6px (móvil). ### Patrón de trazo Los trazos pueden incluir patrones de guiones y espacios. Escala todo proporcionalmente al grosor del trazo (n). ### Terminales del trazo Usa los tokens de radio listados para redondear los terminales y mantener una sensación uniforme. Prefiere terminales redondeados sobre terminales cuadrados. ## Tokens Tokens canónicos de radio de esquina y grosor de trazo. Los valores viven en src/app/tokens.css; esta tabla es la referencia rápida para IA y diseño. | Token | Valor | Uso | | --- | --- | --- | | `--borderRadiusNone` | `0` | Sin redondeo: tablas densas, separadores duros. | | `--borderRadiusSmall` | `2px` | Inputs compactos, chips inline. | | `--borderRadiusMedium` | `4px` | Inputs/buttons por defecto. Lo más usado. | | `--borderRadiusLarge` | `6px` | Cards y superficies de contenido. | | `--borderRadiusXLarge` | `8px` | Modales, popovers, contenedores principales. | | `--borderRadiusCircular` | `10000px` | Avatares, pill tags, dots. | | `--strokeWidthThin` | `1px` | Trazo por defecto en bordes y separadores. | | `--strokeWidthThick` | `2px` | Énfasis: estados activos, focus ring. | | `--strokeWidthThicker` | `3px` | Iconos lineales destacados. | | `--strokeWidthThickest` | `4px` | Trazos heroicos o ilustrativos. |