ABOUT ME
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.
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.
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.​
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
1440px - Layout, Margins and Gutters
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
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
Accordions - Table
Buttons & Breadcrumbs
Bottom Navigation
Calendar
Form Fields
Map Markers, Controls and Hovers
Modals & Toasts
Navigation
Tags & Chips
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
Hope you liked the project. Hit me up to know more about the project