Select screen display size:

Design

The GL Homes Design System was created to be used throughout all of our active platforms, creating a continuous and coherent usability experience throughout the company’s digital products.

This system was designed and tailored specifically for our users. Our components have been thoroughly validated through various phases of user testing and further refinements to achieve the highest usability standard.

Learn more about our Design System User Tests here

Colors

Our colors are the basis of our visual identity. They represent GL Homes in a direct and adaptable manner through instant brand recognition.

See Colors

Poppins

Typography

The ‘Poppins’ typeface used in our system informs the viewer about the modern, simple, and approachable characteristic that we want to communicate.

See Typography
Logo

Brand

A brand is the sum of all its visual components placed into a well-defined design structure. On this website, you will find the best practices for the GL Homes Design System Brand.

nav-details

Components

Our components are designed to provide the most efficient user experience on GL Homes’ platforms as they are constantly improved on and updated based on their performance. These tools help users to better navigate any given application and extract the information they need.

See Components
nav-details

Page Layouts

If you are looking for an easy and effective way to create an application, add your content to one of our page layouts and rest assured that your users will be able to navigate them with ease. Just follow the Page Layouts guidelines and you will have a GL Homes page in no time.

Download the UI Kit (XD)

The UI Kit contains all of the components and guidelines used in our system. It can be downloaded for Adobe XD.

Need a new item?

The UIUX Team will be happy to design a new component to help your project and continue to expand our system.

Development

This section is designed specifically for GL Homes developers and their needs. Here you will find all tools and guidelines that are needed to code our system in an easy and effective manner.

nav-details

Getting Started

Refer to our "Getting Started" page to walk you through the basic setup for using our Design System. If you need further assistance with this please contact the UIUX Team.

Getting Started
nav-details

Git Repository

Download a copy of our Design System working files here and get started on your project. Depending on the application you are building you'll either want to download the Bootstrap 5 Css files or the Outsystems Css project files. With help deciding which file package is right for you please contact the UIUX Team.

Web Accessibility

Adopting a user-centric mindset and complying with various web accessibility requirements is not only crucial but also practical.

Allowing our users the ability to interact with our site regardless of physical ability allows us to reach a wider audience and thoughtfully provide them with the tools they need to be successful.

nav-details

ADA Compliance

GL Homes is working continuously to ensure that all of our platforms are inclusive and compliant to ADA rules. Make sure your system is up to code.

Learn more about ADA Compliance
nav-details

ADA Compliance

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed eveniet nisi maxime voluptatum commodi minus nostrum molestiae itaque dicta esse accusantium repellat omnis ...

Learn more