Skip to main content

Typography

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Headings

h1. Heading

font-size: 46px / line-height: 68px / font-weight: 500

h2. Heading

font-size: 38px / line-height: 56px / font-weight: 500

h3. Heading

font-size: 28px / line-height: 42px / font-weight: 500

h4. Heading

font-size: 24px / line-height: 38px / font-weight: 500

h5. Heading

font-size: 18px / line-height: 28px / font-weight: 500

h6. Heading

font-size: 15px / line-height: 22px / font-weight: 500

Body

body1. Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

font-size: 15px / line-height: 22px / font-weight: 400

body2. Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

font-size: 13px / line-height: 20px / font-weight: 400

Subtitle
subtitle1. Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

font-size: 15px / line-height: 22px / font-weight: 400

subtitle2. Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

font-size: 13px / line-height: 20px / font-weight: 400

Extra
button. Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

font-size: 15px / line-height: 22px / font-weight: 500 / text-transform: none

caption. Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

font-size: 13px / line-height: 18px / font-weight: 400 / letter-spacing: 0.4px

overline. Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

font-size: 12px / line-height: 14px / font-weight: 400 / text-transform: uppercase / letter-spacing: 0.8px

Color

Primary - Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

Secondary - Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

Error - Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

Warning - Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

Info - Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.

Success - Cupcake ipsum dolor sit amet chocolate bar pastry sesame snaps.