Liste der Design-Token
Token
Design-Token sind die Single Source of Truth, die zum Benennen und Speichern von Designentscheidungen wie Farbe, Typografie, Abstände, Zeilenhöhe und Opazität verwendet wird. Jutro Design System enthält mehr als 1.000 Entscheidungen zu Benutzeroberflächenelementen und Layout. Mithilfe von Design-Token können diese Entscheidungen nachverfolgt werden.
Ebenen von Design-Token
Drei Ebenen von Design-Token sind verfügbar:
- Globale Token: Stellen die Optionen dar, auf die Token in anderen Ebenen verweisen. Ein Beispiel sind Markenfarben.
- Semantische Token: Haben eine semantische Bedeutung. Sie definieren beispielsweise die Farbe von Fehlermeldungen.
- Komponenten-Token: Sind spezifisch für die Komponenten in Jutro Design System. Ein Beispiel ist ein Token, mit dem die Rahmenfarbe für den aktiven Zustand von sekundären Schaltflächen festgelegt wird.
Die folgenden Tabellen enthalten eine kuratierte Liste der strategischen Design-Token. Diese Liste konzentriert sich hauptsächlich auf die semantische Ebene, damit Sie Themes auf einfachste Weise verstehen und implementieren können. Für alle Token in dieser Untergruppe sind Name und Verwendungsbeschreibung angegeben, damit Sie das für den jeweiligen Fall geeignete Token finden können.
Farbe
Text
| 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 |
Symbol
| 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 |
Hintergrund
| 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 |
Rahmen
| 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 |
Interaktion
| 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 |
Typografie
Schriftart
| 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 |
Schriftfamilie
| 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 |
Zeilenhöhe
| 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 |
Erhöhung
Oberfläche
| 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 |
Schatten
| 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 |
Opazität
| Token and description | Introduced |
|---|---|
jds.opacity.disabledOpacity for disabled state | 10.0 |
Fläche
Design-Token für Abstände werden nach dem Prozentsatz der Basisrastereinheit benannt, der standardmäßig 8 Pixel beträgt. Das Design-Token jds.space.x150 enthält beispielsweise den Wert 12 Pixel (1,50 multipliziert mit der Basisrastereinheit von 8 Pixeln).
| 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 |
Größe
Design-Token für die Größe werden nach dem Prozentsatz der Basisrastereinheit benannt, der standardmäßig 8 Pixel beträgt. Das Design-Token jds.size.x025 enthält beispielsweise den Wert 2 Pixel (0,25 multipliziert mit der Basisrastereinheit von 8 Pixeln).
| 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 |
Rahmenradius
| 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 |
Rahmenbreite
| Token and description | Introduced |
|---|---|
jds.border-width.regularRegular border width | 10.0 |
jds.border-width.thickThick border width | 10.0 |
Andere Blockquote-Eigenschaften
| 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 |