Design System

Polar Fox Design

Design System

AVANT-GARDE VEGAN UI Kit

Basic principles

The basic principles of the AVANT - GARDE VEGAN design system are:

Minimalism in detail
Ease of interaction
Familiar patterns
Aesthetic design

Style

The AVANT-GARDE VEGAN style is characterized by:

The style of text fields (line, contour, fill)
Button style (fill, outline, transparency)
Icon style (minimalistic, contoured, with a contour thickness of 1 px)
Anton font, Orator Std, and SF Pro Display and a typographic system close to ISO standards
Minimalistic color scheme: black, white, gray, and one accidental (corporate) color to emphasize the brand identity or a special style of the application. At the same time, I use the color palette of system colors by Apple guidelines.

Animation

Animation Settings:

Slide-In / Slide Out:
Ease out
200ms

Instant

Overlay:
Open/Close
200ms

Mouse:
Enter
20ms

*The animation for every interaction can be seen in the app project AVANT-GARDE VEGAN in Prototype.

For the applications, it is necessary to use a Basic grid with an 8px micromodule.

The margins at the edges of the content are 16px. The minimum indentation is 8 px.

If columns are used, then this is a 2x-, 4x-column grid, or a standard iOS in 3 columns.

Grid

Grid system: