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
Base para botones, cards y campos de texto.
Círculo
Identidad y representación de personas.
Pill
Tags, tracks de sliders y selecciones.
Beak
Punteros para popovers y callouts.
Rectángulo
Es la forma base para la mayoría de componentes y contenedores comunes: botones, textareas, menús, cards e imágenes.
Rectángulo: Radio de 8px por defecto para componentes base.
Círculo
Reservado para avatares y otros componentes que muestran o representan personas.
Círculo: 50% de radio para avatares y 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.
Pill: Extremos completamente redondeados para tracks y tags.
Beak
Ofrece un punto de referencia para superficies flotantes asociadas a un único objeto, como callouts o popovers.
Beak: Triángulo de referencia para elementos flotantes.
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.
Split Button: Sin radios internos para evitar huecos.
Bottom Sheet: El borde superior se redondea, los laterales no.
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).
Continuo y estable.
Énfasis y separación.
Guías y límites suaves.
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
| 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. |