Alert Dialog

Aspect Ratio

2:3

A photo of a blue sky opening up from within a red canyon.

1:1

A photo of a blue sky opening up from within a red canyon.

16:9

A photo of a blue sky opening up from within a red canyon.

Avatar

AccentGray
Solid
Soft

Badge

AccentGray
Solid
NewNew
NewNew
Soft
NewNew
NewNew
Surface
NewNew
NewNew
Outline
NewNew
NewNew

Blockquote

Accent
Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.
Gray
Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.

Button

AccentGrayDisabled
Classic
Solid
Soft
Surface
Outline
Ghost

Callout

AccentGray
Soft

Please upgrade to the new version.

Please upgrade to the new version.

Please upgrade to the new version.

Please upgrade to the new version.

Surface

Please upgrade to the new version.

Please upgrade to the new version.

Please upgrade to the new version.

Please upgrade to the new version.

Outline

Please upgrade to the new version.

Please upgrade to the new version.

Please upgrade to the new version.

Please upgrade to the new version.

Card

Sign up

Forgot password?
SurfaceClassicGhost
Size 1
Size 2
Size 3

Checkbox

AccentGrayDisabled
Classic
Surface
Soft

Code

AccentGray
Solid
console.log()
console.log()
console.log()
console.log()
Soft
console.log()
console.log()
console.log()
console.log()
Outline
console.log()
console.log()
console.log()
console.log()
Ghost
console.log()
console.log()
console.log()
console.log()

Context Menu

AccentGray
Solid
Right-click here
Right-click here
Right-click here
Right-click here
Soft
Right-click here
Right-click here
Right-click here
Right-click here

Dialog

Dropdown Menu

AccentGray
Solid
Soft

Em

Versions of the Lorem ipsum text have been used in typesetting at least since the 1960s, when it was popularized by advertisements for Letraset transfer sheets. It is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin.

Heading

The principles of the typographic craft are difficult to master

The principles of the typographic craft are difficult to master

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

The principles of the typographic craft are difficult to master

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

The principles of the typographic craft are difficult to master

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

The principles of the typographic craft are difficult to master

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

Hover Card

Technology revolutionized typography in the latter twentieth century.Technology revolutionized typography in the latter twentieth century.Technology revolutionized typography in the latter twentieth century.

Icon Button

AccentGrayDisabled
Classic
Solid
Soft
Surface
Outline
Ghost

Inset

Bold typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Bold typography
Bold typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Bold typography

Kbd

Press ⌘ C to show/hide the Theme Panel, or press ⌘ D to toggle dark mode.

Press ⌘ C to show/hide the Theme Panel, or press ⌘ D to toggle dark mode.

Press ⌘ C to show/hide the Theme Panel, or press ⌘ D to toggle dark mode.

Press ⌘ C to show/hide the Theme Panel, or press ⌘ D to toggle dark mode.

Link

Accent

Susan Kare is an American artist and graphic designer, who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Susan Kare is an American artist and graphic designer, who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Susan Kare is an American artist and graphic designer, who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Gray

Susan Kare is an American artist and graphic designer, who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Susan Kare is an American artist and graphic designer, who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Susan Kare is an American artist and graphic designer, who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Popover

Quote

A man who would letterspace lower case would steal sheep, Frederic Goudy liked to say. The reason for not letterspacing lower case is that it hampers legibility. But there are some lowercase alphabets to which this principle doesn’t apply. Moderate letterspacing can make a face such as lowercase Univers bold condensed more legible rather than less

Radio Group

AccentGrayDisabled
Classic
Surface
Soft

Scroll Area

Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense “legible” and “readable” are often used synonymously, typographically they are separate but related concepts.

Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as “the quality of being decipherable and recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult to distinguish at small sizes, this is a problem of legibility.

Typographers are concerned with legibility insofar as it is their job to select the correct font to use. Brush Script is an example of a font containing many characters that might be difficult to distinguish. The selection of cases influences the legibility of typography because using only uppercase letters (all-caps) reduces legibility.

Select

AccentGrayPlaceholder
Classic
Surface
Soft
Ghost

Separator

Tools for building high-quality, accessible UI.
ThemesPrimitivesIconsColors

Slider

AccentGrayDisabled
Classic
Surface
Soft

Switch

AccentGrayDisabled
Classic
Surface
Soft

Table

Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
SurfaceGhost
Size 1
Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
Size 2
Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
Size 3
Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper
Full nameEmailGroup
Danilo Sousadanilo@example.comDeveloper
Zahra Ambessazahra@example.comAdmin
Jasper Erikssonjasper@example.comDeveloper

Tabs

Text

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

Quick Look
Extensions from the installed software may add new features to this app.
Quick Look
Extensions from the installed software may add new features to this app.
Quick Look
Extensions from the installed software may add new features to this app.
Quick Look
Extensions from the installed software may add new features to this app.
Quick Look
Extensions from the installed software may add new features to this app.
Quick Look
Extensions from the installed software may add new features to this app.
Quick Look
Extensions from the installed software may add new features to this app.
Quick Look
Extensions from the installed software may add new features to this app.
Opens in a new window
Opens in a new window
Opens in a new window
Opens in a new window

Text Area

AccentGrayDisabledRead-only
Classic
Surface
Soft

Text Field

AccentGrayDisabledRead-only
Classic
Surface
Soft

Tooltip

Hover here