Components-driven system

This Application design powered by the classic 3-columns Layout and set as ready for customization. Left & right columns Constraints set to Scale but it’s simple to snap it to the left and right. You’re free to move as well, swap, resize and set new colors for every UI items; which are:

Application bar

Consists of a flexible Logo (edit the letter, swap the font from Google.fonts if necessary), Square buttons with captions, Segmented Controls, Buttons & Userpic.

Expandable navigation tree

Displays up to the 4th level of Depth. Expandable and highlighted by grayscale gradation to deliver ultimate UXability.

Compact Tabs

Available in two variations: Labeled and Iconic. Refers to a single Master-Component.

Progress Cards

A sample of Card layout supported by Letter-only Logo, List item, Progress bar and Social row of involved people.

Status Cards

Another sample with cards for visualizing Active or Warning statements according to the Context.

Text-edit Cards

Served in two Color variants, contains Confirmation, Text block, Icons Toolbar at the bottom.

Search Panel

A card-based Layout to display expandable Recent Searches as the additional functionality.

Compact Inputs

Compactly fitted into the Grid for better performance at the Desktop resolutions.

Chips-driven Panel

A next-level Component for Filtering the data within colored selectable Chips by clicking on a Dropdown icon or Plus Icon.

Segmented Controls

Classic widget for Sorting the Data. Supported within 3, 4 or 5 icons in a row.

Selectable List

Simple but frequent to use UI Item with onHover style integrated. If you wish to reuse this style anywhere else in a project, simply Detach the Instance and declare as your Custom component.