Saltar al contenido
menumenu tanreiexpand_morecontrasttranslate
tanreiexpand_more
Primeros pasosWebReactSwiftUIJetpack ComposeFlutterReact NativePreajustesTu propio sistema de diseñoUsar Tanrei con agentes de IAMarcaTokens de diseñoSistemas de diseño y personalizaciónTheme StudioColorTipografíaIconosFormaElevaciónMovimientoEstados de interacciónComportamientoDiseño de páginaAccesibilidadTextosTokens de colorTokens de la escala tipográficaTokens de formaTokens de elevaciónTokens de movimientoTokens de estadoTokens de espacio y de medidaComponentesBotónBotón de acción principalBotón segmentadoGrupo de botonesBotón con menúBarra de herramientasBotón de copiarCasilla de verificaciónBotón de opciónInterruptorChipMenúControl deslizanteCampo de control deslizanteCalendarioDateTimePickerGrupo de camposGrupo de botones de opciónGrupo de casillas de verificaciónSelectCampo de selecciónBarra de menúsSubida de archivosSelector de archivos AvanzadoZona de soltar archivosEntrada de texto AvanzadoCampo de textoCampo de chipsCampoCuadro combinado AvanzadoCampo de cuadro combinadoEntrada numérica AvanzadoCampo numéricoEntrada de color AvanzadoCampo de colorEntrada de código de un solo uso AvanzadoCampo de código de un solo usoEntrada de texto incrustada AvanzadoCuadro de redacción de chatTarjetaDivisorCapa modal AvanzadoDiálogoListaFila de listaHoja inferiorHoja lateralCarruselBloque de códigoTablaPopoverPasosAcordeónLista de descripcionesFiguraEstructura de la aplicaciónCabecera de páginaVista de árbolLínea de tiempoVista previa de imágenesTirador de tamañoMarco redimensionableÁrea de desplazamientoInsigniaIndicador de progresoMedidorContador animadoIndicador de cargaSnackbarTooltipAtajo de tecladoTagCódigo en líneaCalloutAvatarEstado vacíoGrupo de tagsEsqueletoElemento de archivoMuestraTexto en marquesinaPestañasVista de pestañasBarra de la aplicaciónBarra de navegaciónPanel de navegaciónBúsquedaEnlacePaginaciónEnlaces anterior y siguienteIndicador de pasosRuta de navegaciónTabla de contenidoTarjeta de enlaceMenú FABEstadoCómo se construye TanreiCómo contribuirLicencia y atribución
InicioReferencia de tokensTokens de la escala tipográfica

Tokens de la escala tipográfica

Todos los estilos de texto por nivel, con una muestra en vivo, sus métricas resueltas y el peso que toman con énfasis.

content_copyVer en Markdown

Las muestras se componen con las propiedades personalizadas de CSS generadas, así que lo que ves es lo que distribuye @tanrei/web. Cada rol expone sus partes como propiedades separadas: -font-family, -font-size, -line-height, -font-weight, -letter-spacing y -font-weight-emphasized, además de una forma abreviada -font. Para las pautas de uso (qué rol es un h2 o un p, y por qué el énfasis es un peso y no un rol), lee Tipografía.

Los dieciséis roles

body 14px / 22px · 400 (con énfasis 500) · 0

Limpio y bien formado 端麗

body-large 16px / 26px · 400 (con énfasis 500) · 0

Limpio y bien formado 端麗

body-small 13px / 20px · 400 (con énfasis 500) · +0.005em

Limpio y bien formado 端麗

caption 11px / 16px · 500 (con énfasis 600) · +0.02em

Limpio y bien formado 端麗

code 13px / 20px · 400 (con énfasis 500) · 0

const tanrei = 端麗;

code-small 12px / 16px · 400 (con énfasis 500) · 0

const tanrei = 端麗;

display 48px / 52px · 450 (con énfasis 550) · -0.04em

Limpio y bien formado 端麗

eyebrow 12px / 16px · 500 (con énfasis 600) · +0.08em

Design tokens

heading-1 32px / 40px · 500 (con énfasis 600) · -0.03em

Limpio y bien formado 端麗

heading-2 24px / 32px · 500 (con énfasis 600) · -0.025em

Limpio y bien formado 端麗

heading-3 20px / 28px · 500 (con énfasis 600) · -0.02em

Limpio y bien formado 端麗

heading-4 18px / 26px · 500 (con énfasis 600) · -0.015em

Limpio y bien formado 端麗

heading-5 16px / 24px · 500 (con énfasis 600) · -0.01em

Limpio y bien formado 端麗

heading-6 14px / 20px · 500 (con énfasis 600) · 0

Limpio y bien formado 端麗

label 14px / 20px · 500 (con énfasis 600) · 0

Limpio y bien formado 端麗

label-small 12px / 16px · 500 (con énfasis 600) · +0.01em

Limpio y bien formado 端麗

Token Familia Tamaño Interlineado Peso Peso con énfasis Espaciado entre letras
--tanrei-sys-typescale-body Inter 14px 1.5714 400 500 0px
--tanrei-sys-typescale-body-large Inter 16px 1.625 400 500 0px
--tanrei-sys-typescale-body-small Inter 13px 1.5385 400 500 0.065px
--tanrei-sys-typescale-caption Inter 11px 1.4545 500 600 0.22px
--tanrei-sys-typescale-code Roboto Mono 13px 1.5385 400 500 0px
--tanrei-sys-typescale-code-small Roboto Mono 12px 1.3333 400 500 0px
--tanrei-sys-typescale-display Inter 48px 1.0833 450 550 -1.92px
--tanrei-sys-typescale-eyebrow Inter 12px 1.3333 500 600 0.96px
--tanrei-sys-typescale-heading-1 Inter 32px 1.25 500 600 -0.96px
--tanrei-sys-typescale-heading-2 Inter 24px 1.3333 500 600 -0.6px
--tanrei-sys-typescale-heading-3 Inter 20px 1.4 500 600 -0.4px
--tanrei-sys-typescale-heading-4 Inter 18px 1.4444 500 600 -0.27px
--tanrei-sys-typescale-heading-5 Inter 16px 1.5 500 600 -0.16px
--tanrei-sys-typescale-heading-6 Inter 14px 1.4286 500 600 0px
--tanrei-sys-typescale-label Inter 14px 1.4286 500 600 0px
--tanrei-sys-typescale-label-small Inter 12px 1.3333 500 600 0.12px

Generado a partir de design/tokens/tanrei.light.tokens.json, tokens/sys/typescale.tokens.json

Pasos de énfasis

El texto con énfasis es el rol con su peso más el paso de su familia. La familia de un rol es el primer segmento de su nombre; caption, code, code-small y eyebrow toman el paso de las etiquetas. Los cuatro pasos, por sistema incluido:

Sistema de diseño emphasis.display emphasis.heading emphasis.body emphasis.label
tanrei 100 100 100 100
cupertino 100 200 200 200
m3-expressive-like 100 100 100 200
m3-like 100 100 100 200

Generado a partir de tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json

Código fuente e incidencias en GitHub