Select screen display size:
Mobile (350 px)
Tablet (766 px)
Desktop

Typography

Our font style helps to set the voice and tone of GL Homes to our users. It is an essential part of our visual identity, and symbolizes the simple, modern, and friendly characteristics that we design our platforms to have.

Font Family

Font Weights

Aa
Aa
Poppins
Regular,  SemiBold
400 .fw-normal
600 .fw-semibold

Application Examples

The quick brown fox jumps over the lazy dog Regular
The quick brown fox jumps over the lazy dog SemiBold

Heading Sizes

Title Font Size Weight

H1

 24px SemiBold

H2

 22px SemiBold

H3

 20px SemiBold

H4

 18px SemiBold
H5
 16px SemiBold
H6
 14px SemiBold

Heading Sizes

Title Font Size Weight
p - Body 14px Regular
TH - TABLE HEADER 14px SemiBold
TD - TABLE CELL 14px Regular
Tiny Font 12px Regular
Tiny Font 2 11px Regular

Text Transform

lowercased text Lowercase .text-lowercase
UPPERCASED TEXT Uppercase .text-uppercase
Capitalized Text Capitalize .text-capitalize
Ellipsi... Ellipsis .text-truncate

Paragraph

Left-Aligned — All main body text and written content
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus delectus, quidem culpa odio illo qui id laboriosam alias deserunt repudiandae rerum vitae dolore veniam quasi quod autem maxime, eius sunt!
Center-Aligned — Buttons, labels and specific column information
Lorem ipsum Dolor sit amet Consectetur adipiscing elit
Justified — External and formal applications
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus delectus, quidem culpa odio illo qui id laboriosam alias deserunt repudiandae rerum vitae dolore veniam quasi quod autem maxime, eius sunt!
Right-Aligned — Secondary information aligned with the right margin
Lorem ipsum Dolor sit amet Consectetur adipiscing elit
Link and Hover States
Link texts are always blue, and underlined when in hover state:
Standard Link Text
Hover Link Text
Clickable content is always displayed in blue, and then underlined when hovered over.

Download the UI Kit

The UI Kit contains all of the components and guidelines used in our system. It can be downloaded for Adobe XD.
Download UI Kit
If you have any questions, concerns, or suggestions, click on the “Talk to the UIUX Team” button on the navigation bar and send a message to our team.