Design System Style Guide

Typography MUI Variants

H1 (2rem)

Main Page level Heading

Header for top level of pages.

H2 (1.8rem)
Section Heading

For Header subtitles

H3 (1.6rem)
Subsection Heading

Used for subsection titles within a section

H4 (1.4rem)
Heading Level 4

For component headings and card titles

H5 (1.2rem)
Heading Level 5

For smaller component headings

H6 (1rem)
Heading Level 6

For minor headings and list group titles

Subtitle1 (1.2rem)
UI Component titles

Used for titles of cards and UI components

Subtitle2 (1.05rem)
Used for table headings

Used for table headings and less prominent subtitles

Subtitle3 (1.5rem)
Custom Subtitle Variant

Custom variant for larger subtitles

Body1 (1rem)

Default paragraph text

Standard body text for most content

Body2 (.8rem)

Smaller paragraph text

Used for secondary body text and descriptions

Caption (0.9rem)
Caption text

For image captions and supplementary text

Overline (0.9rem)
Overline text

For labels and eyebrows above headings

Label (1.8rem)
Custom label variant

Custom variant for prominent labels

SplashTitle (clamp(1rem, 6vw, 2.5rem))
Custom splash variant

Large uppercase titles for splash screens and hero sections

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

#ffffff

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

navSplash

main

#185A77

light

rgba(248, 244, 242, 0.5)

dark

#F8F4F2

contrastText

#07020D

text

primary

#07020D

secondary

#F6893D

tertiary

#F6B93D

disabled

#6c757d

hint

#C3581A

background

default

#f0f0f0

paper

#ffffff

helper

#fef5e7

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
Accordions

This is the content for the first accordion item. It expands and collapses when clicked.

This is the content for the second accordion item. Multiple items can be in a set, but typically only one expands at a time.

Accordion Item 3 (App Theme)

This accordion uses the app theme with navSplash.dark background and has the default border removed (similar to poseActivityDetail).

Feedback

Loading...

Snackbars
Layout
Stack
Item 1
Item 2
Item 3
Box
Container Box with custom styling
Divider
Avatar
A
App-Specific Button Styles
Help Drawer System

Reusable help pattern with HelpButton + HelpDrawer for contextual guidance.

Help Button

Green question mark icon that triggers help content

Click to open help drawer
Navigation Header Pattern

Standard layout with back button + help button

Page Title
Features
  • Auto-detects content type

    Markdown file path or plain text

  • Markdown rendering

    Supports headings, lists, bold, italic

  • Bottom drawer design

    Mobile-friendly, scrollable content

  • Accessible

    Keyboard navigation and focus management