The design system currently does not support mobile devices or smaller screen sizes. It is designed and optimized exclusively for desktop use, requiring a minimum screen resolution of 1280 pixels or higher for proper functionality and display. Users accessing the application on devices with lower resolutions or on mobile screens may experience limited or no functionality.

Typography

Typography refers to the art and technique of arranging text to make written language readable, legible, and visually appealing. It involves the careful selection and application of various elements like font families, sizes, spacing, and weights to enhance design and communication.

Font Family: Outfit

"Outfit" is a modern sans-serif font family designed for clean and minimalistic text styling. It provides a versatile range of weights and styles, making it suitable for various design contexts such as:

  • Headings: Bold, semi-bold and medium styles for prominence.
  • Body Text: Regular weights for readability.
  • UI Design: Compact and clean look for digital interfaces.

Display 1

It typically refers to a specific typographic style used in design systems or style guides. It defines a text style intended for prominent display elements, such as large headers or titles,

Example
Display 1
Font size : 26px
Font weight : 500 (bold)
Line Height : 34px
Display 1
Font size : 26px
Font weight : 600 (bold)
Line Height : 34px
Display 1
Font size : 26px
Font weight : 500 (bold)
Line Height : 34px

Display 2

It typically refers to a specific typographic style used in design systems or style guides. It defines a text style intended for prominent display elements, such as large headers or titles,

Example
Display 2
Font size : 24px
Font weight : 700 (bold)
Line Height : 34px
Display 2
Font size : 24px
Font weight : 600 (semibold)
Line Height : 34px
Display 2
Font size : 24px
Font bold : 700 (medium)
Line Height : 34px

Display 3

It typically refers to a specific typographic style used in design systems or style guides. It defines a text style intended for prominent display elements, such as large headers or titles,

Example
Display 3
Font size : 22px
Font weight : 700 (bold)
Line Height : 34px
Display 2
Font size : 22px
Font weight : 600 (semibold)
Line Height : 34px
Display 2
Font size : 22px
Font bold : 700 (medium)
Line Height : 34px

Heading 1

It typically refers to a specific typographic style used in design systems or style guides. It defines a text style intended for prominent display elements, such as large headers or titles,

Example
Heading 1
Font size : 20px
Font weight : 700 (bold)
Line Height : 34px
Heading 1
Font size : 20px
Font weight : 600 (semibold)
Line Height : 34px
Heading 1
Font size : 20px
Font bold : 700 (medium)
Line Height : 34px

Heading 2

It typically refers to a specific typographic style used in design systems or style guides. It defines a text style intended for prominent display elements, such as large headers or titles,

Example
Heading 2
Font size : 18px
Font weight : 700 (bold)
Line Height : 25px
Heading 2
Font size : 18px
Font weight : 600 (semibold)
Line Height : 25px
Heading 2
Font size : 18px
Font bold : 700 (medium)
Line Height : 25px

Content Values

It typically refers to a specific typographic style used in design systems or style guides. It defines a text style intended for prominent display elements, such as large headers or titles,

Example
Content
Font size : 16px
Font weight : 500 (medium)
Line Height : 24px
Content
Font size : 16px
Font weight : 400 (regular)
Line Height : 24px

Sub text

It typically refers to a specific typographic style used in design systems or style guides. It defines a text style intended for prominent display elements, such as large headers or titles,

Example
Sub text
Font size : 14px
Font weight : 500 (medium)
Line Height : 21px
Sub text
Font size : 14px
Font weight : 400 (regular)
Line Height : 21px

Help text

It typically refers to a specific typographic style used in design systems or style guides. It defines a text style intended for prominent display elements, such as large headers or titles,

Example
Help Text
Font size : 13px
Font weight : 500 (medium)
Line Height : 20px
Help Text
Font size : 13px
Font weight : 400 (regular)
Line Height : 20px

Information Text

It typically refers to a specific typographic style used in design systems or style guides. It defines a text style intended for prominent display elements, such as large headers or titles,

Example
Information text
Font size : 12px
Font weight : 500 (medium)
Line Height : 18px
Information text
Font size : 12px
Font weight : 400 (regular)
Line Height : 18px
2024 TaxBandits.com, Span Enterprises LLC. All rights Reserved.