Dialog
HoverCard
Tooltip
AlertDialog
Popover
DropdownMenu
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
ContextMenu
Select
Trigger variants:
Content variants:
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
Switch
Alignment
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors
Regulars
Brights
Metals
Gray
Slider
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors
Regulars
Brights
Metals
Gray
Progress
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors
Regulars
Brights
Metals
Gray
Spinner
Lorem ipsum, dolor sit amet adipisicing elit. Eum veritatis, cupiditate inventore recusandae sapiente corporis non similique facere esse praesentium? Dolorum pariatur omnis doloremque unde nam rem ipsa velit vitae.
Checkbox
Alignment
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
CheckboxGroup
Alignment
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
CheckboxCards
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
Radio
Alignment
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
RadioGroup
Alignment
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
RadioCards
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
Button
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
IconButton
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
TextField
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
TextArea
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
Badge
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
Avatar
radius can be set per instance:
See specific radius examples
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
Card
Contacts
Here are all your contacts:
Contacts
Here are all your contacts:
Table
size 1
size 2
size 3
Typography
The CSS rule -webkit-font-smoothing: antialiased; has been applied to all fonts.google.com pages where fonts are rendered. This results in browsers using the greyscale antialiasing method rather than default subpixel rendering of fonts. Press ⌘ Q to quit. I believe this was probably introduced to get around inconsistencies in rendering between browsers
, particular between Chrome and Safari on MacOS.
The principles of the Typographic Craft are difficult to master
The goal of typography is to relate font size, line height, and line width
The goal of typography is to relate font size, line height, and line width in a proportional way
The goal of typography is to relate font size, line height, and line width in a proportional way
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 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.
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.
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.
Quick Look
Extensions from added software
Quick Look
Extensions from added software
Quick Look
Extensions from added software
Quick Look
Extensions from added software
Quick Look
Extensions from added software for something to do with Apple Finder.
Quick Look
Extensions from added software for something to do with Apple Finder.
Quick Look
Extensions from added software for something to do with Apple Finder.
Quick Look
Extensions from added software for something to do with Apple Finder.
Verification needed
Verification needed
Verification needed
Verification needed
The CSS rule-webkit-font-smoothing: antialiased;has been applied to all fonts.google.com pages where fonts are rendered. This results in browsers using the greyscale antialiasing method rather than default subpixel rendering of fonts. Press ⌘ Q to quit.I believe this was probably introduced to get around inconsistencies in rendering between browsers, particular between Chrome and Safari on MacOS.
Text
This is some red text in high-contrast and this word should be blue.
This is some red text and this word should be in high-contrast.
Code
The CSS rule antialiased has been applied to all fonts.google.com pages where fonts are rendered. This results in browsers using the greyscale antialiasing method rather than default subpixel rendering of fonts. Press ⌘ Q to quit. I believe this was probably introduced to get around inconsistencies in rendering between browsers
, particular between Chrome and Safari on MacOS.
The CSS rule antialiased has been applied to all fonts.google.com pages where fonts are rendered. This results in browsers using the greyscale antialiasing method rather than default subpixel rendering of fonts. Press ⌘ Q to quit. I believe this was probably introduced to get around inconsistencies in rendering between browsers
, particular between Chrome and Safari on MacOS.
The CSS rule antialiased has been applied to all fonts.google.com pages where fonts are rendered. This results in browsers using the greyscale antialiasing method rather than default subpixel rendering of fonts. Press ⌘ Q to quit. I believe this was probably introduced to get around inconsistencies in rendering between browsers
, particular between Chrome and Safari on MacOS.
The CSS rule antialiased has been applied to all fonts.google.com pages where fonts are rendered. This results in browsers using the greyscale antialiasing method rather than default subpixel rendering of fonts. Press ⌘ Q to quit. I believe this was probably introduced to get around inconsistencies in rendering between browsers
, particular between Chrome and Safari on MacOS.
The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.
The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.
The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.
The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.
The quick brown fox jumpedThe quick brown fox jumped over the lazy dogThe quick brown fox jumped over the lazy dogThe quick brown fox jumped over the lazy dogThe quick brown fox jumped over the lazy dogThe quick brown fox jumped over the lazy dogThe quick brown fox jumped over the lazy dogThe quick brown fox jumped over the lazy dogThe quick brown fox jumped over the lazy dogcolor can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
Heading
The quick brown fox jumped
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
The quick brown fox jumped over the lazy dog
Principles of the Typographic Craft
Principles of the Typographic Craft
Principles of the Typographic Craft
Principles of the Typographic Craft
Principles of the Typographic Craft
Principles of the Typographic Craft
Principles of the Typographic Craft
Principles of the Typographic Craft
Principles of the Typographic Craft
Red
Red
Yellow
Yellow
Green
Green
Gray
Gray
This is some red text in high-contrast and this word should be blue.
This is some red text and this word should be in high-contrast.
Link
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise organizations looking to adopt new SaaS applications. SSO enables authentication via an organization's Identity Provider (IdP), such as Google Workspace or Okta, as opposed to users or IT admins managing hundreds, if not thousands, of usernames and passwords. Facilitate greater security, easier account management, and accelerated application onboarding and adoption by adding SSO to your app.
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise organizations looking to adopt new SaaS applications. SSO enables authentication via an organization's Identity Provider (IdP), such as Google Workspace or Okta, as opposed to users or IT admins managing hundreds, if not thousands, of usernames and passwords. Facilitate greater security, easier account management, and accelerated application onboarding and adoption by adding SSO to your app.
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise organizations looking to adopt new SaaS applications. SSO enables authentication via an organization's Identity Provider (IdP), such as Google Workspace or Okta, as opposed to users or IT admins managing hundreds, if not thousands, of usernames and passwords. Facilitate greater security, easier account management, and accelerated application onboarding and adoption by adding SSO to your app.
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise organizations looking to adopt new SaaS applications. SSO enables authentication via an organization's Identity Provider (IdP), such as Google Workspace or Okta, as opposed to users or IT admins managing hundreds, if not thousands, of usernames and passwords. Facilitate greater security, easier account management, and accelerated application onboarding and adoption by adding SSO to your app.
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise organizations looking to adopt new SaaS applications. SSO enables authentication via an organization's Identity Provider (IdP), such as Google Workspace or Okta, as opposed to users or IT admins managing hundreds, if not thousands, of usernames and passwords. Facilitate greater security, easier account management, and accelerated application onboarding and adoption by adding SSO to your app.
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise organizations looking to adopt new SaaS applications. SSO enables authentication via an organization's Identity Provider (IdP), such as Google Workspace or Okta, as opposed to users or IT admins managing hundreds, if not thousands, of usernames and passwords. Facilitate greater security, easier account management, and accelerated application onboarding and adoption by adding SSO to your app.
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise organizations looking to adopt new SaaS applications. SSO enables authentication via an organization's Identity Provider (IdP), such as Google Workspace or Okta, as opposed to users or IT admins managing hundreds, if not thousands, of usernames and passwords. Facilitate greater security, easier account management, and accelerated application onboarding and adoption by adding SSO to your app.
Single Sign-On (SSO) is the most frequently asked for requirement by enterprise organizations looking to adopt new SaaS applications. SSO enables authentication via an organization's Identity Provider (IdP), such as Google Workspace or Okta, as opposed to users or IT admins managing hundreds, if not thousands, of usernames and passwords. Facilitate greater security, easier account management, and accelerated application onboarding and adoption by adding SSO to your app.
Blockquote
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 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 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?
Callout
color can be set per instance:
See colors & variants combinations
Regulars
Brights
Metals
Gray
See layout & size combinations
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
There was an error in your configuration.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
There was an error in your configuration.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
There was an error in your configuration.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
There was an error in your configuration.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
There was an error in your configuration.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
There was an error in your configuration.
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
Kbd
Tab Nav
color can be set per instance:
See color combinations
Tabs
color can be set per instance:
See color combinations
See wrap & justify options
AspectRatio
1x2
1x1
16x9
2x1
ScrollArea
radius can be set per instance:
See specific radius examples
Playground
In this section, I am just throwing together some of the components to get a sense of how harmonious they are.
Nested appearances test
Global appearance
Feedback
Always dark
Feedback
Always light
Feedback
Always dark
Feedback
Nested colors test
Global color
Feedback
Always mint
Feedback
Always amber
Feedback
Always tomato
Feedback
Mixed nested themes test
Global theme
Feedback
Dark, Mint, no radius, 90%
Feedback
Light, Amber, full radius, 110%
Feedback
Dark, Tomato, large radius, 100%
Feedback
Shadow tokens
Grid
Separator
Cursors
Skeleton
console.log()⌘ QThis is a linkPrinciples of the Typographic Craft
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?
We have detected multiple issues in your application configuration file. Please read our Configuration Guide for more details.
Principles of the Typographic Craft
DataList
- Name
- Susan Kare
- susan.kare@apple.com
- Status
- Bio
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisl et libero ultricies viverra quis vitae quam. Proin a feugiat metus.
- Organization
- WorkOS
color can be set per DataListLabel instance:
See color combinations
width can be set per DataListLabel instance:
See width examples
Segmented Control
radius can be set per instance:
See specific radius examples
Container
size can be set on nested Container instances: