top of page

POLARIS
DESIGN SYSTEM

What is Polaris?

Polaris is a digital platform to manage and monitor the NEOM construction works and compliances created during that process.

Polaris means - POLESTAR or NORTH STAR, the brightest star in the north pole helps the travellers to guide them during the night time.

Our Polaris acts as a guiding platform to facilitate the construction works, hence justifies its meaning.

The Polaris design system is built to maintain the constant visual language through the course of the product design and development of the

NEOM - Polaris Application.

Theming

The Polaris Design System follows dark, modern and sci-fi theme.

The design system imbibes the base, a little inspiring from the IBM's Carbon Design System and built over that foundation.

 

The tone of the visual language is set to be bold and yet simple looking elements for the better readability and keeping development in mind.

polaris design system mockup.png

Colors

The color system is personalised for the specific project. The color palette is chosen for the dark theme design. The Primary, Secondary and Semantic colors were defined and assigned based on the specific role. These were tokenised for the efficient usage in the design.

color.png

Typography

The font system is one of the most foundational parts of any interface design. Text is a major channel for users to understand application content and complete their work, and a well-designed font system will greatly enhance the user's reading experience and work efficiency.

 

We defined the font system for the visual system and tokenised based on the font, line height, size, tracking and weight.

Typography.png

Layout

The 12 column layout is followed with flexible grid system

based on the content and screen responsiveness.

The screens are designed for 1920x1080px with one breakpoint at 1440x900px
 

1920px - Layout, Margins and Gutters

1920_1.png

1440px - Layout, Margins and Gutters

1440_1.png

Iconography

Icons are an essential element of any interface, packing an informative punch into a small form factor. They’re designed to be simple, modern, friendly, and sometimes quirky. To ensure consistency and readability, their limited size means that each icon must strictly adhere to guidance while still expressing essential characteristics

The icon grid establishes clear rules for the consistent, but flexible,

positioning of graphic elements. 

Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain consistent visual proportions across system icons.

The icons are designed for the following grid sizes

12*12 px; 20*20 px; 16*16 px; 24*24 px; 32*32 px; 48*48 px; 56*56 px

Grid and Design

a.png
b.png
c.png

The above grid is used in designing the icons with 2px or 3px padding based on the icon. The icons follows outline style with 1.5px stroke width. This weightage scales proportionately with the increase in the icon size.

Some of the designed icons

16x16px

20x20px

24x24px

32x32px

48x48px

56x56px

Components Library

Components are the one of Key Elementary Unit of Design System.

Their systematic reuse helps to create visual and

functional consistency across products. 

Key Aspects

The components for the Polaris interface covers the following key aspects

Display

Cards, Lists, etc

Navigation

Tabs, Drawers, etc

Actions

Buttons, Floats, etc

Input

Text Fields, Chips, etc

Communication

Banners, Dialogs, etc

Here are some of the components created for the component library

Accordions

Accordion Tab Instance Table.png
Category=Pre-mobilisation.png

Accordions - Table

Table Accordion.png

Buttons & Breadcrumbs

Button.png
Breadcrumb.png

Bottom Navigation

_Botttom Navigation.png

Calendar

Date_picker.png

Form Fields

Form Fields.png

Map Markers, Controls and Hovers

_Map Marker Item.png
Group 48550.png
Map Marker 00.png

Modals & Toasts

Style_02.png
Style_01.png
Toast_message.png

Navigation

navigation_floater.png
Navigation_table_header.png
Style_02.png

Tags & Chips

Tags.png

The above are some of the components in the library. The screens are made using them by the team to achieve the design consistency.

Final Screens

01
01
03

Hope you liked the project. Hit me up to know more about the project

Thank You

bottom of page