Design System Style Guide

Typography

H1 - Main Heading (3rem)

H2 - Section Heading (2rem)

H3 - Subsection Heading (1.8rem)

H4 - Heading (1.6rem)

H5 - Heading (1.4rem)
H6 - Heading (1.2rem)
Subtitle 1 (1.2rem)
Subtitle 2 (1.05rem)

Body 1 - Default paragraph text (1rem)

Body 2 - Smaller paragraph text (.8rem)

Caption text (0.9rem)OVERLINE TEXT (0.9rem)Label Text (Custom variant)Splash Title (Custom variant)

Theme Configuration

Breakpoints

xs: 0px

sm: 384px

md: 768px

lg: 1024px

xl: 1920px

Spacing Scale

0: 4px

Font Family

Lato,sans-serif

Color Palette

primary

main

#F6893D

light

#FFBA6F

dark

#C3581A

contrastText

#000000

secondary

main

#F6B93D

light

#FFD970

dark

#C38B1A

contrastText

#07020D

error

main

#D32F2F

light

#E57373

dark

#9A0007

contrastText

#d32f2f

warning

main

#FFA726

light

#FFD95B

dark

#C77800

contrastText

#000000

info

main

#1976D2

light

#63A4FF

dark

#004BA0

contrastText

#FFFFFF

success

main

#2E7D32

light

#60AD5E

dark

#005005

contrastText

#FFFFFF

MUI Components (Primary Theme Style)

Buttons

Form Controls

Helper text

Helper text for form group

Cards

Card TitleCard Subtitle

This is card content with some example text.

Expandable Card

Click expand to see more content.

Navigation

Tabs
App Bar
App Title
Lists
  • Home
  • Profile
  • Settings
  • About

Feedback

Loading...

Layout

Dividers
Avatar
A
B
C

App-Specific Button Styles