'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Typography
Material's type system: five roles × three sizes, with emphasized pairs derived from baseline. Grab the right token in Use the system, or reshape the scale in Customize.
et— Etesie extension Material defines the roles and the token names, and specifies fixed values for each style. The
modular scale that fills them here — base × ratiostep with a text ratio
and a display ratio — is Etesie's: it is how one base size and two ratios produce a whole set, which
Material does not define.
Reserved for the most expressive moments — marketing headlines, hero sections, splash screens. Use sparingly; one Display per screen, at most.
The primary structural anchor inside a page. Use for the main heading of a screen, a settings panel, or a major content section.
Smaller structural anchors that frame a unit of content — card titles, modal headers, list item titles, table titles.
Default running text. Paragraphs, descriptions, prose, multi-line copy. Tuned for legibility at conversational sizes.
Compact secondary text that supports controls — form labels, table headers, captions, navigation items, status text and metadata.
Reserved for the most expressive moments — marketing headlines, hero sections, splash screens. Use sparingly; one Display per screen, at most.
The primary structural anchor inside a page. Use for the main heading of a screen, a settings panel, or a major content section.
Smaller structural anchors that frame a unit of content — card titles, modal headers, list item titles, table titles.
Default running text. Paragraphs, descriptions, prose, multi-line copy. Tuned for legibility at conversational sizes.
Compact secondary text that supports controls — form labels, table headers, captions, navigation items, status text and metadata.