Skip to content
On this page

Font

Font family

List of design token names, values and metadata for font-family
NameValue
font-family-basesans-serif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-family.sans.10

Reference Vector's default fallback sans instead of the deprecated value `font-family-sans` in WikimediaUI Base.

font-family-sans deprecated 'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-family.sans.50

Deprecated: Use `font-family-sans--fallback` instead. See T247166. (use `font-family-sans-50` instead)

font-family-system-sans-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Inter', 'Helvetica', 'Arial', sans-serif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-family.sans.100

font-family-sans--fallbacksans-serif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-family.sans.10

font-family-serif'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-family.serif.100

font-family-serif--fallbackserif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-family.serif.10

font-family-monospace'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-family.monospace.100

font-family-monospace--fallbackmonospace, monospace

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-family.monospace.10

font-family-heading-main'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-components.json

Refers to font-family.serif.100

Legacy value from WikimediaUI Base. Use for first heading special treatment.

Font size

List of design token names, values and metadata for font-size
NameValue
font-size-base16px

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in

font-size-x-small0.75em

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-size.75

Refers to unit.system

`x` stands for extra. In this case extra small.

font-size-small0.875em

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-size.90

Refers to unit.system

font-size-medium1em

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-size.100

Refers to unit.system

font-size-large1.125em

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-size.110

Refers to unit.system

font-size-x-large1.25em

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-size.125

Refers to unit.system

font-size-xx-large1.5em

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-size.150

Refers to unit.system

font-size-xxx-large1.75em

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-size.175

Refers to unit.system

Font weight

List of design token names, values and metadata for font-weight
NameValue
font-weight-hairline100

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-weight.25

font-weight-light300

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-weight.75

font-weight-normal400

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-weight.100

font-weight-semi-bold600

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-weight.150

font-weight-bold700

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to font-weight.175

Line height

List of design token names, values and metadata for line-height
NameValue
line-height-xxx-small1.25

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to line-height.60

`x` stands for extra. In this case extra-extra-extra small.

line-height-xx-small1.375

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to line-height.70

line-height-x-small deprecated 1.4285714

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to line-height.80

Deprecated: Legacy line-height. Use `line-height-small` instead. (use `line-height-80` instead)

line-height-small1.5714285

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to line-height.90

line-height-medium1.6

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to line-height.100

Text decoration

List of design token names, values and metadata for text-decoration
NameValue
text-decoration-nonenone

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to text-decoration.0

text-decoration-line-throughline-through

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to text-decoration.150

text-decoration-underlineunderline

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to text-decoration.200

Text overflow

List of design token names, values and metadata for text-overflow
NameValue
text-overflow-clipclip

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to text-overflow.100

text-overflow-ellipsisellipsis

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/codex-base.json

Refers to text-overflow.200

Deprecated token aliases

WARNING

The tokens below are not available in Codex. There are only available as deprecated aliases in WikimediaUI Base.

List of design token names, values and metadata for line-height
NameValue
line-height-base deprecated 1.6

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to line-height.medium

Deprecated: Use `line-height-medium` instead.

line-height-heading deprecated 1.375

The quick brown fox
jumps over the lazy dog. Sometimes twice, sometimes three times.

Defined in src/deprecated-aliases-wikimedia-ui-base.json

Refers to line-height.xx-small

Deprecated: Use `line-height-xx-small` instead.