Liste de jetons de conception
Jetons
Les jetons de conception sont la source unique de vérité que nous utilisons pour nommer et stocker les décisions de conception, telles que la couleur, la typographie, l'espacement, la hauteur des lignes et l'opacité. Jutro Design System contient plus de 1 000 décisions concernant les éléments et la mise en page de l'interface utilisateur. Les jetons de conception sont notre façon de suivre ces décisions.
Niveaux de jetons de conception
Il existe trois niveaux de jetons de conception :
- Jetons globaux : ils représentent les options auxquelles les jetons des autres niveaux font référence. Les couleurs de la marque en sont un exemple.
- Jetons sémantiques : ils ont une signification sémantique. Par exemple, ils définissent la couleur des messages d'erreur.
- Jetons de composant : ils sont propres aux composants de Jutro Design System. Un jeton qui détermine la couleur de la bordure pour l'état actif des boutons secondaires en est un exemple.
Les tableaux suivants contiennent une liste organisée de jetons de conception stratégique. Cette liste se concentre principalement sur le niveau sémantique pour vous aider à comprendre et à implémenter les thèmes de la manière la plus simple possible. Chaque jeton de ce sous-ensemble comprend son nom et une description de son utilisation pour vous aider à trouver le jeton adapté à votre situation.
Couleur
Texte
| 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 |
Icône
| Token and description | Introduced |
|---|---|
jds.color.icon.regularRegular icon color matching regular text color | 10.0 |
jds.color.icon.subtleSubtle color for icons | 10.0 |
jds.color.icon.inverseInverse icon color | 10.0 |
jds.color.icon.errorError color for icon | 10.0 |
jds.color.icon.informationInformation color for icon | 10.0 |
jds.color.icon.successSuccess color for icon | 10.0 |
jds.color.icon.warningWarning color for icon | 10.0 |
jds.color.icon.brandBrand action color of icon | 10.0 |
jds.color.icon.brand-hoverBrand action color for hover state of icon | 10.0 |
jds.color.icon.brand-activeBrand action color for active state of icon | 10.0 |
jds.color.icon.brand-accent-1Brand accent 1 color for icon | 10.0 |
jds.color.icon.brand-accent-2Brand accent 2 color for icon | 10.0 |
jds.color.icon.link-defaultColor for link icons | 10.11 |
jds.color.icon.link-hoverColor for hover state of link icons | 10.11 |
jds.color.icon.link-activeColor for active state of link icons | 10.11 |
jds.color.icon.link-default-inverseColor for inverse link icons | 10.11 |
jds.color.icon.link-default-inverse-hoverColor for hover state of inverse link icons | 10.11 |
jds.color.icon.link-default-inverse-activeColor for active state of inverse link icons | 10.11 |
Arrière-plan
| 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 |
Bordure
| 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 |
Interaction
| 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 |
Typographie
Police
| 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 |
Famille de polices
| 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 |
Hauteur de ligne
| 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 |
Élévation
Surface
| 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 |
Ombre
| 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 |
Opacité
| Token and description | Introduced |
|---|---|
jds.opacity.disabledOpacity for disabled state | 10.0 |
Espace
Les jetons de conception pour l’espace sont nommés en fonction du pourcentage de l’unité de la grille de base, qui est de 8 pixels par défaut. Par exemple, le jeton de conception jds.space.x150 contiendrait la valeur de 12 pixels (1,50 multiplié par l’unité de la grille de base de 8 pixels).
| 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 |
Taille
Les jetons de conception pour la taille sont nommés en fonction du pourcentage de l’unité de la grille de base, qui est de 8 pixels par défaut. Par exemple, le jeton de conception jds.size.x025 contiendrait la valeur de 2 pixels (0,25 multiplié par l’unité de la grille de base de 8 pixels).
| 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 |
Rayon de bordure
| 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 |
Largeur de bordure
| Token and description | Introduced |
|---|---|
jds.border-width.regularRegular border width | 10.0 |
jds.border-width.thickThick border width | 10.0 |
Autres propriétés des citations
| 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 |