IntegrityIDS
Design
Create intuitive and beautiful products with IntegrityUI
This section describes the environment and layout, its possible interactions, and the unified expression of qualities like color, typefaces, illustrations used and more.
Design
Logo
Our logo represent the brand which promote a feeling of building something with class, ethical and dynamic.
Logo Default
Logo Main
Logo Dark
Logo Light
Icon Logo
Icon Logo Default
Icon Logo Main
Icon Logo Dark
Icon Logo Light
Design
Colors
Our color system builds on the recognition of the IntegrityNet brand colors to make the user interface more usable.
Primary Colors
A primary color is the color displayed most frequently across your web page and components.
Neutral Colors
This pallete provides a comprehensive range of different shades of neutral colors and can be utilised in many different ways depending on requirements.
Dark
Grey
Light
Neutral colors are often used for backgrounds and consists of black, grey, light shades.
Semantic Colors
These are further colours that can represent certain status of a component or layout, they can stand for an error or invalid, warning, information and even success states.
Design
Typography
IntegrityUI provides a constrained, purposeful set of typographic styles. These styles map to functional roles so you know when to use what.
Typeface:
Maison Neue
Maison Neue is a grotesque sans-serif typeface designed by Timo Gaessner and released through Milieu Grotesque in 2012. It's a complete reworking of the original Maison, with updates made to take advantage of new display and reproduction technologies.
Design
Iconography
Icons in the IntegrityUI act as visual aids to help users understand better and complete tasks. They’re simple, informative, and build on the visual language of the design system.
And icons can be divided into multiple groups for different purposes:
Product Icons
Product icons are the visual expression of a brand’s products, services, and tools.
Often used icon resources:
- icons8 (https://icons8.com/icons)
System Icons
Their purpose is to represent certain actions on the website or platform
Often used icons library:
- Material Icons (https://materialdesignicons.com/)
- Line Awesome (https://icons8.com/line-awesome)
Animated Icons
To be updated.
Design
Illustrations
IntegrityUI uses illustrations to help users quickly and clearly understand how things work across every experience on the platform.
Often used open-sourced illustrations library:
- unDraw (https://undraw.co/)
- manypixels (https://www.manypixels.co/gallery)
- Shape.so (https://shape.so/app/illustrations/)
Design
Photography
Photographs should be used relevantly to the topic the platform are describing and should convey a certain mood for its users.
Imagery for backgrounds and even for thumbnails and alike must have consistency to serve its purpose.