'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Tipografía
Heading y Text
Títulos en Crimson Pro o Inter, texto con tonos, la etiqueta eyebrow, código en línea y teclas.
import { Heading, Text, Eyebrow, Code, Kbd } from '@alea/ui';
Ejemplos
Títulos
Crimson Pro Light para títulos (serif), Inter para títulos de interfaz (sans). level define el elemento, size el aspecto.
Design that plays
Section title
Card title
Interface heading
With the gradient
Texto
Tamaños, tonos y pesos de los tokens.
Large lead text for introductions.
Body text at 16 px, the default.
Muted text for secondary details.
Faint text for the least important things.
Saved to the file
Couldn't connect
A long line that gets cut with an ellipsis when it runs out of room.
Eyebrow, código y teclas
La pequeña etiqueta sobre un título, código en línea y teclas del teclado.
Figma plugin
Token Converter
Install with npm i @alea/ui, then press ⌘ K to search.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Size
size - Tone
tone - Truncate
truncate - Weight
weight
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent-strong…--alea-status-danger…--alea-status-success…--alea-status-warning…--alea-text…--alea-text-faint…--alea-text-muted…
Type
--alea-font-leading-normal…--alea-font-leading-relaxed…--alea-font-size-base…--alea-font-size-lg…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xl…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-regular…--alea-font-weight-semibold…
Component
--alea-clamp…
Props
Heading props
Un título con la tipografía de Alea: Crimson Pro light para títulos, Inter para la interfaz.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
family | "serif" | "sans" | 'serif' | serif (Crimson Pro, light) para títulos, sans (Inter, semibold) para títulos de interfaz. |
gradient | boolean | - | Rellena el texto con el degradado de acento. |
level | 2 | 3 | 4 | 5 | 6 | 1 | 2 | El nivel en el esquema (h1 a h6). Elígelo por la estructura de la página, no por el tamaño. |
size | "md" | "lg" | "xl" | "display" | "2xl" | "4xl" | "3xl" | - | Tamaño visual; por defecto según el nivel. display es el tamaño de hero. |
Text props
Texto de cuerpo con los tamaños y tonos de los tokens; recortado a una línea o a varias.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
as | ElementType | 'p' | El elemento a usar. Por defecto p. |
lineClamp | number | - | Recorta a esta cantidad de líneas con puntos suspensivos. |
size | "sm" | "md" | "lg" | "base" | "xl" | "xs" | 'base' | xs 12, sm 13, md 14, base 16 (por defecto), lg 18, xl 20 px. |
tone | "danger" | "accent" | "success" | "warning" | "default" | "muted" | "faint" | 'default' | default, muted, faint, accent, success, warning o danger. |
truncate | boolean | - | Recorta a una línea con puntos suspensivos. |
weight | "regular" | "medium" | "semibold" | - | regular, medium o semibold. |
Eyebrow props
La pequeña etiqueta en mayúsculas sobre el título de una sección.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Define un texto que etiqueta al elemento actual. @see aria-labelledby. (heredada) |
autoFocus | boolean | - | (heredada) |
className | string | - | (heredada) |
defaultValue | string | number | readonly string[] | - | (heredada) |
id | string | - | (heredada) |
inputMode | "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | - | Sugiere el tipo de datos que se pueden ingresar al editar el elemento o su contenido @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (heredada) |
onChange | ChangeEventHandler<HTMLElement, Element> | - | (heredada) |
onSubmit | SubmitEventHandler<HTMLElement> | - | (heredada) |
role | AriaRole | - | (heredada) |
style | CSSProperties | - | (heredada) |
Code props
Código en línea.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Define un texto que etiqueta al elemento actual. @see aria-labelledby. (heredada) |
autoFocus | boolean | - | (heredada) |
className | string | - | (heredada) |
defaultValue | string | number | readonly string[] | - | (heredada) |
id | string | - | (heredada) |
inputMode | "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | - | Sugiere el tipo de datos que se pueden ingresar al editar el elemento o su contenido @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (heredada) |
onChange | ChangeEventHandler<HTMLElement, Element> | - | (heredada) |
onSubmit | SubmitEventHandler<HTMLElement> | - | (heredada) |
role | AriaRole | - | (heredada) |
style | CSSProperties | - | (heredada) |
Kbd props
Una tecla o atajo, como ⌘K.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Define un texto que etiqueta al elemento actual. @see aria-labelledby. (heredada) |
autoFocus | boolean | - | (heredada) |
className | string | - | (heredada) |
defaultValue | string | number | readonly string[] | - | (heredada) |
id | string | - | (heredada) |
inputMode | "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | - | Sugiere el tipo de datos que se pueden ingresar al editar el elemento o su contenido @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (heredada) |
onChange | ChangeEventHandler<HTMLElement, Element> | - | (heredada) |
onSubmit | SubmitEventHandler<HTMLElement> | - | (heredada) |
role | AriaRole | - | (heredada) |
style | CSSProperties | - | (heredada) |
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.
Heading sizes (serif)
Oscuro
size="display" | Alea |
|---|---|
size="4xl" | Alea |
size="3xl" | Alea |
size="2xl" | Alea |
size="xl" | Alea |
size="lg" | Alea |
size="md" | Alea |
Claro
size="display" | Alea |
|---|---|
size="4xl" | Alea |
size="3xl" | Alea |
size="2xl" | Alea |
size="xl" | Alea |
size="lg" | Alea |
size="md" | Alea |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
Text sizes
Oscuro
size="xl" | Design systems |
|---|---|
size="lg" | Design systems |
size="base" | Design systems |
size="md" | Design systems |
size="sm" | Design systems |
size="xs" | Design systems |
Claro
size="xl" | Design systems |
|---|---|
size="lg" | Design systems |
size="base" | Design systems |
size="md" | Design systems |
size="sm" | Design systems |
size="xs" | Design systems |
Medido: alto · padding horizontal · radio de esquina · tamaño de texto, en px, de la grilla oscura.
Heading
- Variantes
familyserifsanssizemdlgxldisplay2xl4xl3xl- 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-heading.alea-gradient-text- Atributos data
data-family=serifdata-family=sansdata-size=displaydata-size=4xldata-size=3xldata-size=2xldata-size=xldata-size=lgdata-size=md
Text
- Variantes
sizesmmdlgbasexlxstonedangeraccentsuccesswarningdefaultmutedfaintweightregularmediumsemibold- 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-text- Atributos data
data-size=xsdata-size=smdata-size=mddata-size=basedata-size=lgdata-size=xldata-tone=muteddata-tone=faintdata-tone=accentdata-tone=successdata-tone=warningdata-tone=dangerdata-weight=regulardata-weight=mediumdata-weight=semibolddata-truncatedata-clamp
Eyebrow
- 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-eyebrow
Code
- 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-code
Kbd
- 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-kbd
Accesibilidad
- El nivel del título lo da la estructura y el tamaño el diseño: un h2 pequeño está bien.
- Los tonos de texto muted y faint pasan WCAG AA sobre las superficies por defecto en sus tamaños previstos; faint es solo para texto secundario.
Qué hacer y qué evitar
Hacer
- Un h1 por página.
- Usa el eyebrow encima de un título, no como título.
Evitar
- No te saltes niveles de título para conseguir un tamaño: usa size.
- No uses texto faint para nada que la gente deba leer.
En Figma
Estilos de texto: Display, 4XL a MD para títulos serif, tamaños Body y UI, Eyebrow y Code.