Argon Design System
Argon design system is designed for the best sailing experience on the water. It used across multiple brands and is a foundation for various sailing and fishing products.
Typography
The typography uses Noto Sans Display, that is part of the larger Noto font family developed by Google. The font family is characterised by its clean and modern design, with a focus on consistent stroke widths and proportions that make it easy to read even in challenging contexts. There are some features that we appreciate and work well for our audience:
The generous X-height gives good aid in readability and accessibility — these are crucial for sailors, whose light conditions can be compromised.
The wide range of font weights of the Inter family has allowed us to be expressive when designing for the displays and headlines, while maintaining consistencies with fonts used in actions and running texts.
Like many other geometric typefaces that inspired it, Noto Sans speaks reliability as well as a sense of friendliness. The latter is a quality we seek particularly — we hope the UI would appear friendly at the first glance and therefore encourage UI interactions.
The generous X-height gives good aid in readability and accessibility — these are crucial for sailors, whose light conditions can be compromised.
The wide range of font weights of the Inter family has allowed us to be expressive when designing for the displays and headlines, while maintaining consistencies with fonts used in actions and running texts.
Like many other geometric typefaces that inspired it, Noto Sans speaks reliability as well as a sense of friendliness. The latter is a quality we seek particularly — we hope the UI would appear friendly at the first glance and therefore encourage UI interactions.
Colours
The UI is constructed on layers of elevation and surfaces. The base surface is the furthest away and used for things such as the background of menus. The principle is the closest and used for primary pressable buttons. Each surface can reference its own key. UI layers can be pressed, selected, disabled etc and the layer’s colour updates to reflect the current state. We see a chip for each of the 6 states. Each chip references a key-colour variant name and specifies whether to use on or on.inverted chips.
This colour system can be replicated in different themes to accommodate different lightning conditions. Light - for bright sunlight, dark - for cloudy conditions or brand requirements and night - vision safe mode for sailing in the dark.
This colour system can be replicated in different themes to accommodate different lightning conditions. Light - for bright sunlight, dark - for cloudy conditions or brand requirements and night - vision safe mode for sailing in the dark.
Iconography
Argon's iconography library primarily represent real word things, but can be abstract shapes.
These icons are composed of primitive geometric shapes but are simple, recognisable from a distance and while in motion, and must be able to withstand low resolution and reproduction.
The stroke elements should 2 dp width but it can compromise 1.5 dp stroke in cases like curved lines or small details when needed.
All icons are strictly consistent in terms of detail, optical weight, stroke weight, position, component forms and perspective.
These icons are composed of primitive geometric shapes but are simple, recognisable from a distance and while in motion, and must be able to withstand low resolution and reproduction.
The stroke elements should 2 dp width but it can compromise 1.5 dp stroke in cases like curved lines or small details when needed.
All icons are strictly consistent in terms of detail, optical weight, stroke weight, position, component forms and perspective.
© 2024 eglelau