Lista de tokens de diseño
Tokens
Los tokens de diseño son la única fuente de información que utilizamos para nombrar y almacenar las decisiones de diseño, como el color, la tipografía, el espaciado, la altura de la línea y la opacidad. El Jutro Design System contiene más de 1000 decisiones sobre los elementos y la composición y disposición de la interfaz de usuario. Los tokens de diseño son la forma en que registramos estas decisiones.
Niveles de tokens de diseño
Hay tres niveles de tokens de diseño:
- Tokens globales: Representan las opciones a las que hacen referencia los tokens en otros niveles.**** Un ejemplo son los colores de marca.
- Tokens semánticos: Tienen un significado semántico.**** Por ejemplo, definen el color de los mensajes de error.
- Tokens de componentes: Son específicos de los componentes de Jutro Design System.**** Un ejemplo es un token que determina el color del borde para el estado activo de los botones secundarios.
Las siguientes tablas contienen una lista seleccionada de tokens de diseño estratégico. Esta lista se centra principalmente en el nivel semántico para ayudarle a comprender e implementar los temas de la manera más sencilla. Cada token de este subconjunto incluye su nombre y una descripción de uso para ayudarle a encontrar el token adecuado para su situación.
Color
Texto
| Token and description | Introduced |
|---|---|
jds.color.text.regularText color | 10.0 |
jds.color.text.subtleSubtle text color | 10.0 |
jds.color.text.inverseInverse text color | 10.0 |
jds.color.text.brandBrand color for text | 10.0 |
jds.color.text.brand-hoverBrand color for hover state of text | 10.0 |
jds.color.text.brand-activeBrand color for active state of text | 10.0 |
jds.color.text.brand-accent-1Brand accent 1 color for text | 10.0 |
jds.color.text.brand-accent-2Brand accent 2 color for text | 10.0 |
jds.color.text.errorError color for text | 10.0 |
jds.color.text.informationInformation color for text | 10.0 |
jds.color.text.successSuccess color for text | 10.0 |
jds.color.text.warningWarning color for text | 10.0 |
jds.color.text.requiredColor for indicating required action, an asterisk by default | 10.0 |
jds.color.text.link.defaultColor for link text | 10.0 |
jds.color.text.link.hoverColor for hover state of link text | 10.0 |
jds.color.text.link.activeColor for active state of link text | 10.0 |
jds.color.text.link.visitedColor for visited state of link text | 10.3 |
jds.color.text.link.visited-hoverColor for visited hover state of link text | 10.3 |
jds.color.text.link.visited-activeColor for visited active state of link text | 10.3 |
jds.color.text.link-default-inverseColor for inverse link text | 10.11 |
jds.color.text.link-inverse-hoverColor for hover state of inverse link text | 10.11 |
jds.color.text.link-inverse-activeColor for active state of inverse link text | 10.11 |
Ícono{#icon}
Fondo
| Token and description | Introduced |
|---|---|
jds.color.background.zebraBackground color for alternate base layer | 10.12 |
jds.color.background.blockquoteBackground color for blockquote | 10.11 |
jds.color.background.neutralNeutral background color | 10.0 |
jds.color.background.neutral-hoverNeutral background color hover state | 10.0 |
jds.color.background.neutral-activeNeutral background color active state | 10.0 |
jds.color.background.neutral-subtleLight neutral background color | 10.0 |
jds.color.background.neutral-subtle-hoverLight neutral background color hover state | 10.0 |
jds.color.background.neutral-subtle-activeLight neutral background color active state | 10.0 |
jds.color.background.neutral-inverseInverse neutral background color | 10.0 |
jds.color.background.pageBackground color for page | 10.0 |
jds.color.background.progressBackground color for progress status | 10.3 |
jds.color.background.trackBackground color for track element | 10.0 |
jds.color.background.brandBrand color for background | 10.0 |
jds.color.background.brand-hoverBrand color for hover state of background | 10.0 |
jds.color.background.brand-activeBrand color for active state of background | 10.0 |
jds.color.background.brand-subtleLight brand color for background | 10.0 |
jds.color.background.brand-subtle-hoverLight brand color for background hover | 10.0 |
jds.color.background.brand-subtle-activeLight brand color for background active | 10.0 |
jds.color.background.brand-accent-1Brand accent 1 color for background | 10.0 |
jds.color.background.brand-accent-1-hoverBrand accent 1 color for hover state of background | 10.0 |
jds.color.background.brand-accent-1-activeBrand accent 1 color for active state of background | 10.0 |
jds.color.background.brand-accent-1-subtleLight brand accent 1 color | 10.0 |
jds.color.background.brand-accent-1-subtle-hoverLight brand accent 1 color hover | 10.0 |
jds.color.background.brand-accent-1-subtle-activeLight brand accent 1 color active | 10.0 |
jds.color.background.brand-accent-2Brand accent 2 color for background | 10.0 |
jds.color.background.brand-accent-2-hoverBrand accent 2 color for hover state of background | 10.0 |
jds.color.background.brand-accent-2-activeBrand accent 2 color for active state of background | 10.0 |
jds.color.background.brand-accent-2-subtleLight brand accent 2 color for background | 10.0 |
jds.color.background.brand-accent-2-subtle-hoverLight brand accent 2 color for hover state of background | 10.0 |
jds.color.background.brand-accent-2-subtle-activeLight brand accent 2 color for active state of background | 10.0 |
jds.color.background.errorBackground color for error | 10.0 |
jds.color.background.informationBackground color for information | 10.0 |
jds.color.background.successBackground color for success | 10.0 |
jds.color.background.warningBackground color for warning | 10.0 |
jds.color.background.error-subtleLight background color for error | 10.0 |
jds.color.background.information-subtleLight background color for information | 10.0 |
jds.color.background.success-subtleLight background color for success | 10.0 |
jds.color.background.warning-subtleLight background color for warning | 10.0 |
jds.color.background.selectedBackground color indicating a selected state | 10.0 |
jds.color.background.selected-hoverBackground color indicating a selected hover state | 10.0 |
jds.color.background.selected-activeBackground color indicating a selected active state | 10.0 |
jds.color.background.selected-subtleLight color indicating a selected state | 10.0 |
jds.color.background.selected-subtle-hoverLight color indicating a selected hover state | 10.0 |
jds.color.background.selected-subtle-activeLight color indicating a selected active state | 10.0 |
jds.color.background.inputBackground color for inputs | 10.0 |
jds.color.background.input-hoverBackground color for hover state of inputs | 10.0 |
jds.color.background.input-activeBackground color for active state of inputs | 10.0 |
jds.color.background.input-read-onlyBackground color for read-only state of inputs | 10.0 |
Borde
| Token and description | Introduced |
|---|---|
jds.color.border.blockquoteBorder color for blockquote | 10.11 |
jds.color.border.regularDefault border color for UI elements - Formerly Border | 10.0 |
jds.color.border.inverseInverse border color for UI elements | 10.0 |
jds.color.border.separatorBorder color for separator | 10.0 |
jds.color.border.selectedBorder color indicating a selected state | 10.0 |
jds.color.border.selected-hoverBorder color indicating a selected hover state | 10.0 |
jds.color.border.selected-activeBorder color indicating a selected active state | 10.0 |
jds.color.border.inputBorder color for inputs | 10.11 |
jds.color.border.brandBrand color for border | 10.0 |
jds.color.border.brand-hoverBrand color for hover state of border | 10.0 |
jds.color.border.brand-activeBrand color for active state of border | 10.0 |
jds.color.border.brand-accent-1Brand accent 1 color for border | 10.0 |
jds.color.border.brand-accent-1-hoverBrand accent 1 color for hover state of border | 10.0 |
jds.color.border.brand-accent-1-activeBrand accent 1 color for active state of border | 10.0 |
jds.color.border.brand-accent-2Brand accent 2 color for border | 10.0 |
jds.color.border.brand-accent-2-hoverBrand accent 2 color for hover state of border | 10.0 |
jds.color.border.brand-accent-2-activeBrand accent 2 color for active state of border | 10.0 |
jds.color.border.focusBorder color used to indicate focus state | 10.0 |
jds.color.border.focus-inverseBorder inverse color used to indicate focus state over a dark background | 10.0 |
jds.color.border.errorBorder color for error | 10.0 |
jds.color.border.successBorder color for success | 10.0 |
jds.color.border.informationBorder color for information | 10.0 |
jds.color.border.warningBorder color for warning | 10.0 |
Interacción
| Token and description | Introduced |
|---|---|
jds.color.interaction-overlay.hoverOverlay to indicate hover state when a background color cannot change, such as images | 10.0 |
jds.color.interaction-overlay.activeOverlay to indicate active state when a background color cannot change, such as images | 10.0 |
Tipografía
Fuente
| Token and description | Introduced |
|---|---|
jds.font.hero.1Font properties for hero 1 text | 10.11 |
jds.font.hero.2Font properties for hero 2 text | 10.11 |
jds.font.hero.3Font properties for hero 3 text | 10.11 |
jds.font.displayFont properties for display text | 10.11 |
jds.font.heading.1Font properties for heading level 1 | 10.11 |
jds.font.heading.2Font properties for heading level 2 | 10.11 |
jds.font.heading.3Font properties for heading level 3 | 10.11 |
jds.font.heading.4Font properties for heading level 4 | 10.11 |
jds.font.heading.5Font properties for heading level 5 | 10.11 |
jds.font.heading.6Font properties for heading level 6 | 10.11 |
jds.font.body.largeFont properties for large body text | 10.11 |
jds.font.body.mediumFont properties for medium body text | 10.11 |
jds.font.body.smallFont properties for small body text | 10.11 |
jds.font.body.x-smallFont properties for extra-small body text | 10.11 |
jds.font.link.defaultFont properties for default link text | 10.11 |
jds.font.link.hoverFont properties for link text hover state | 10.11 |
jds.font.link.activeFont properties for link text active state | 10.11 |
jds.font.link.visitedFont properties for visited link text | 10.11 |
jds.font.eyebrow.1Font properties for eyebrow 1 text | 10.11 |
jds.font.eyebrow.2Font properties for eyebrow 2 text | 10.11 |
jds.font.eyebrow.3Font properties for eyebrow 3 text | 10.11 |
jds.font.label.largeFont properties for large label text | 10.11 |
jds.font.label.large-strongFont properties for large strong label text | 10.11 |
jds.font.label.large-strongerFont properties for large stronger label text | 10.11 |
jds.font.label.mediumFont properties for medium label text | 10.11 |
jds.font.label.medium-strongFont properties for medium strong label text | 10.11 |
jds.font.label.medium-strongerFont properties for medium stronger label text | 10.11 |
jds.font.label.smallFont properties for small label text | 10.11 |
jds.font.label.small-strongFont properties for small strong label text | 10.11 |
jds.font.label.small-strongerFont properties for small stronger label text | 10.11 |
jds.font.label.x-smallFont properties for extra-small label text | 10.11 |
jds.font.label.x-small-strongerFont properties for extra-small stronger label text | 10.11 |
jds.font.label.x-small-strongFont properties for extra-small strong label text | 10.11 |
jds.font.blockquote.largeFont properties for large blockquote text | 10.11 |
jds.font.blockquote.mediumFont properties for medium blockquote text | 10.11 |
jds.font.blockquote.smallFont properties for small blockquote text | 10.11 |
jds.font.blockquote.x-smallFont properties for extra-small blockquote text | 10.11 |
jds.font.figure-caption.largeFont properties for large figure caption text | 10.11 |
jds.font.figure-caption.mediumFont properties for medium figure caption text | 10.11 |
jds.font.figure-caption.smallFont properties for small figure caption text | 10.11 |
jds.font.figure-caption.x-smallFont properties for extra-small figure caption text | 10.11 |
jds.font.code.largeFont properties for large code text | 10.11 |
jds.font.code.mediumFont properties for medium code text | 10.11 |
jds.font.code.smallFont properties for small code text | 10.11 |
jds.font.code.x-smallFont properties for extra-small code text | 10.11 |
Familia tipográfica
| Token and description | Introduced |
|---|---|
jds.font-family.headingFont family for heading text | 10.11 |
jds.font-family.labelFont family for label text | 10.11 |
jds.font-family.bodyFont family for body text | 10.11 |
jds.font-family.monospaceFont family for monospace/code text | 10.11 |
jds.font-family.blockquoteFont family for blockquote | 10.11 |
jds.font-family.figure-captionFont family for figure caption | 10.11 |
Altura de línea
| Token and description | Introduced |
|---|---|
jds.line-height.headingLine height for heading text | 10.11 |
jds.line-height.labelLine height for label text | 10.11 |
jds.line-height.bodyLine height for body text | 10.11 |
jds.line-height.monospaceLine height for monospace/code text | 10.11 |
jds.line-height.blockquoteLine height for blockquote text | 10.11 |
jds.line-height.figure-captionLine height for figure caption text | 10.11 |
Elevación
Superficie
| Token and description | Introduced |
|---|---|
jds.elevation.surfacePrimary background for the UI | 10.0 |
jds.elevation.surface-hoverPrimary background hover state for the UI | 10.0 |
jds.elevation.surface-activePrimary background active state for the UI | 10.0 |
jds.elevation.surface-recessedSecondary background for the UI often used for grouping items | 10.0 |
jds.elevation.surface-raisedPrimary background for cards that can be moved | 10.0 |
jds.elevation.surface-raised-hoverPrimary background hover state for cards that can be moved | 10.0 |
jds.elevation.surface-raised-activePrimary background active state for cards that can be moved | 10.0 |
jds.elevation.surface-overlayBackground for elements positioned above the UI such as modals, dropdown menus, and dialogs, as well as the background for cards that are in a dragged state | 10.0 |
jds.elevation.surface-overlay-hoverBackground hover state for elements positioned above the UI such as modals, dropdown menus, and dialogs, as well as the background for cards that are in a dragged state | 10.0 |
jds.elevation.surface-overlay-activeBackground active state for elements positioned above the UI such as modals, dropdown menus, and dialogs, as well as the background for cards that are in a dragged state | 10.0 |
Sombra
| Token and description | Introduced |
|---|---|
jds.elevation.shadow.lowShadow for lowest level | 10.0 |
jds.elevation.shadow.raisedDefault shadow used for most components | 10.0 |
jds.elevation.shadow.overlayShadow for highest level | 10.0 |
jds.elevation.shadow.overflowShadow used when content scrolls underneath a surface | 10.0 |
jds.elevation.shadow.insetInset shadow | 10.0 |
jds.elevation.shadow.noneUsed to remove an existing shadow. | 10.11 |
jds.focus.shadow.regularShadow for focus state on standard elements | 10.10 |
jds.focus.shadow.inverseShadow for focus state on inverse elements | 10.10 |
jds.focus.shadow.errorShadow for focus state on elements with an error | 10.10 |
jds.focus.shadow.error-inverseShadow for focus state on inverse elements with an error | 10.10 |
jds.utility.color.shadow.focus.regularUtility color for regular focus shadow | 10.10 |
jds.utility.color.shadow.focus.inverseUtility color for inverse focus shadow | 10.10 |
jds.utility.color.shadow.focus.errorUtility color for error focus shadow | 10.10 |
jds.utility.color.shadow.focus.error-inverseUtility color for inverse error focus shadow | 10.10 |
Opacidad
| Token and description | Introduced |
|---|---|
jds.opacity.disabledOpacity for disabled state | 10.0 |
Espacios
Los tokens de diseño para el espaciado se nombran según el porcentaje de la unidad de cuadrícula base, que es de 8 píxeles de forma predeterminada. Por ejemplo, el token de diseño jds.space.x150 contendría el valor de 12 píxeles (1,50 multiplicado por la unidad de cuadrícula base de 8 píxeles).
| Token and description | Introduced |
|---|---|
jds.padding.blockquotePadding for blockquote | 10.11 |
jds.space.x0Space for resetting default spacing styles | 10.11 |
jds.space.x025Spacing used for small and compact elements of UI | 10.11 |
jds.space.x050Spacing used for small and compact elements of UI | 10.11 |
jds.space.x075Spacing used for small and compact elements of UI | 10.11 |
jds.space.x100Spacing used for small and compact elements of UI | 10.11 |
jds.space.x125Spacing used for small and compact elements of UI | 10.11 |
jds.space.x150Spacing used for larger and less dense elements of UI | 10.11 |
jds.space.x200Spacing used for larger and less dense elements of UI | 10.11 |
jds.space.x250Spacing used for larger and less dense elements of UI | 10.11 |
jds.space.x300Spacing used for larger and less dense elements of UI | 10.11 |
jds.space.x400Spacing used for the largest elements of UI and for layout elements | 10.11 |
jds.space.x450Spacing used for the largest elements of UI and for layout elements | 10.11 |
jds.space.x500Spacing used for the largest elements of UI and for layout elements | 10.11 |
jds.space.x600Spacing used for the largest elements of UI and for layout elements | 10.11 |
jds.space.x800Spacing used for the largest elements of UI and for layout elements | 10.11 |
jds.space.x1000Spacing used for the largest elements of UI and for layout elements | 10.11 |
jds.space.x1200Spacing used for the largest elements of UI and for layout elements | 10.11 |
jds.space.negative.x0125Use to negate parent whitespace or overlap small pieces of UI | 10.11 |
Tamaño
Los tokens de diseño para el tamaño se nombran según el porcentaje de la unidad de cuadrícula base, que es de 8 píxeles de forma predeterminada. Por ejemplo, el token de diseño jds.size.x025 contendría el valor de 2 píxeles (0,25 multiplicado por la unidad de cuadrícula base de 8 píxeles).
| Token and description | Introduced |
|---|---|
jds.size.input-heightDefault height for input components | 10.11 |
jds.size.x0Space for resetting default sizing styles | 10.11 |
jds.size.x0125Size used for small and compact elements of UI | 10.11 |
jds.size.x025Size used for small and compact elements of UI | 10.11 |
jds.size.x050Size used for small and compact elements of UI | 10.11 |
jds.size.x100Size used for small and compact elements of UI | 10.11 |
jds.size.x150Size used for small and compact elements of UI | 10.11 |
jds.size.x175Size used for small and compact elements of UI | 10.11 |
jds.size.x200Size used for small and compact elements of UI | 10.11 |
jds.size.x250Size used for small and compact elements of UI | 10.11 |
jds.size.x300Size used for small and compact elements of UI | 10.11 |
jds.size.x350Size used for small and compact elements of UI | 10.11 |
jds.size.x400Size used for small and compact elements of UI | 10.11 |
jds.size.x450Size used for small and compact elements of UI | 10.11 |
jds.size.x500Size used for larger elements of UI | 10.11 |
jds.size.x600Size used for larger elements of UI | 10.11 |
jds.size.x700Size used for larger elements of UI | 10.11 |
jds.size.x800Size used for larger elements of UI | 10.11 |
jds.size.x1000Size used for larger elements of UI | 10.11 |
Borde redondeado
| Token and description | Introduced |
|---|---|
jds.border-radius.blockquoteBorder radius for blockquote | 10.11 |
jds.border-radius.regularBorder radius used by default across the UI | 10.0 |
jds.border-radius.roundBorder radius for fully rounded | 10.0 |
Ancho del borde
| Token and description | Introduced |
|---|---|
jds.border-width.regularRegular border width | 10.0 |
jds.border-width.thickThick border width | 10.0 |
Otras propiedades de bloques de citas
| Token and description | Introduced |
|---|---|
jds.border.blockquote.topTop border for blockquote | 10.11 |
jds.border.blockquote.rightRight border for blockquote | 10.11 |
jds.border.blockquote.bottomBottom border for blockquote | 10.11 |
jds.border.blockquote.leftLeft border for blockquote | 10.11 |