Vuestic 2.0 Redesign Notes

Last update: January 8, 2019.

What Is This Page?

The purpose of this document is to pay attention to specific details to be sure they won't be lost when implementing. It's a complimentary guide for Zeplin source files.

Completed Changes


Colors Main colors are applied to texts, labels, secondary buttons, graphs, icons. The default 'black' text color is #34495E, but not #000.

Light colors Light colors can't be calculated using lighten function, as they all have different shifts in hue and saturation. So it makes sense to set them apart from main 6 colors.
They are used as background colors for notifications, table cells, text buttons. Dividers are light grey.

Pale color There is an extra Pale color that is a default color for even rows in tables.

Main gradients Buttons have 6 gradients based on main colors.

Color modulation On hover we apply lighten 15%, on pressed — darken 15% for every element(solid color or gradient). The only differene is text buttons.

Text buttons styles Text buttons have one of the light colors on hover, and 15% of the main color extra as an overlay for pressed state.

Return to top


The amount of text font styles was drastically reduced, font weights were limited to 400 regular and 700 bold.

Heading margins

Return to top


Button label vertical alignment Labels in large and default buttons are shifted torwards top. Small button labels are vertically centered. The only difference — small secondary button.

Button icon alignment Right icon's (dropdown arrow) padding differs from the left side icon's one.

Button group alignment Far left and right paddings are larger than the others.

Text buttons Text button hover style differs from links behavior. Pressed button background will add extra 15% of the original color to its current background color value (e.g. 15% opacity Green overlay to a Light Green background for a Green text button).

Return to top


Input paddings Placeholder position is slightly shifted torwards top border and is not vertically centered.

Input label We should consider an alernative filled input layout — without a label and a value not changing its position (ex placeholder). It should be a default layout for Search.

Input label style Input labels share the same style as widget titles, table headings, sections titles and labels.

Return to top

Checkboxes, Radio Buttons

Basic checkboxes and radio buttons Checkboxes have rounded corners.

Checkbox label There are 2 options for inline selects: with and without a label.

Inline select alignment We should keep that in mind when building actions & settings blocks like the ones for tables.

Return to top


Tabs Tabs are used to split large chunks of data/content into several simple screens. It works perfectly for forms. Tabs are centered with 40px margins between them. It's a bold text style with main black color for active and hover state, grey for inactive.

Return to top


Full width form There are 3 main layouts for forms. The first on is the full width layout. Inputs take the entire space except for 24px margins on the sides.

Centered form For fewer inputs and large modal/widgets, we can offer a centered layout. In this case we can setup a min-width around 400px and center the form horizontally.

Two columns form For larger amount of inputs we can offer a 2 columns form layout.

Form groups Form groups is the other way to organize form elements.

Complex form Complex form may combine several solutions.

Return to top

Cards & Widgets

Cards & widgets have much in common so we'll treat everything as cards. Though widgets are more about page structure, and cards are about content presentation.

Card with actions Cards share the same paddings and header structure.

Card with actions A card might have a header which might contain an action/actions in the upper right corner as icon/text button/button mini. Header height is 48px.

Colorful card headers Cards might have different header styles. The default one is a blue label without any decorations. Offering several alternative solutions might be a useful feature. Green style has a blue label.

Return to top


Modal with centered actions Modals have rounded corners and 60% black overlay as a background. We can offer several options for actions. Centered actions with a primary choice as a primary button and a secondary choice as a text button for Yes/No dialogs.

Modal with actions on the sides The other layout is with actions aligned to the different sides of the form. This works well for Next/Previous forms and any kind of wizards.

Modal with close icon Modals might have an action as a button/icon in the upper right corner. Anyways the modal should be closed by clicking anywhere outside it.

Return to top


Custom icons There are few custom icons that are widely used through the theme. Vuestic 2.0 will be based on Material Outlined icons to offer a wide range of customization to users.

Return to top


Table labels Table might have 2 types of labels: colorful circles on text labels. Rows/cells might have colorful backgrounds.

Table actions Inline actions might be links or buttons. They might be display permanently or shown on mouse over event.

Table headings Table headings share the same style as input labels, card titles, etc. They are green if the column is sortable, in other case the label has a default black color.

Table pagination We can offer different types of navigation: pagination / with controls / with current page input, infinite loader, button 'Show more'.

Chane column width Here is the way we can offer users to change column width manually by draggin the pins.

Empty table Let's take care of situation, if there is no data to display. The message will be vertically centered inside the table, bottom margin not ignored.

Return to top


Notifications Notifications and buttons have different shadows. Notifications have lighter variation of main colors for backgrounds. Labels for notifications are the same as used in tables.

Return to top


Toasts Toasts remind of notifications as they share a lot of common styles. Color schemes stand for combination of background (light color) and icon styles (main color).

Return to top


Tooltips Tooltips have a lot of in common with toasts and notifications. The only difference is the place they appear and the width of the element.

Return to top

Tree View

Tree View Tree view style has minor visual changes. Expand and collapse icons are 24px height and cover the entire block. That way they remain sharper than in 1.0 version. Updated dotted style and blue color for category icons.

Return to top

Date Pickers

Date Pickers Date pickers extend the default input style and have a calendar material icon on the right. All colors were updated correspondingly. We might offer different date output formats, e.g. 'Oct 9, 2018', '10/09/2018'.

Return to top

Date Pickers

Color Pickers Color pickers have the only change in predefined colors and its input style was updated correspondingly.

Return to top


Accordeon There are 2 types of accordeons: with and without a background. Up and down arrows are exactly the same icons that were used in selects.

Return to top


Timeline Timeline includes labels, cards and texts. All standart colors used.

Return to top

File Uploaders

File Uploaders List preview reffers to a card style.

File Uploaders Basic uploaders include 'Delete' option as a text button but not a text link.

Return to top


Tags We can treat tags as secondary mini buttons.

Return to top

Progress Bars

Progress Bars We'll focus on main progress bars. Buffer zone with a lighter background is set to 100% by default. But this can be changed and buffer can be dynamic. Labels have the same style as inputs, card titles, etc.

Return to top

Sliders & Ranges

Sliders & Ranges Sliders and ranges have the same style, so all the notes about sliders will be relevant to range pickers.

Sliders, Vertical Margins There are 2 types of label bottom marings: 2 px and 8 px. The smaller margins are used for sliders/ranges with value labels. In all other cases (inputs, icons, no value labels) 8 px margins should be used.

Sliders, Horizontal Margins All horizontal margins are 8 px wide: including the ones for labels, icons, value inputs, etc. Please note that left icons don't have left margins, right icons don't have right margins.

Inline Sliders There is a small difference between inline layouts with left and right labels. Label on the left has an 8 px margin on the left to match the vertical line for all inputs. But you don't add that margin on the right for right labels.

Return to top


Ratings Ratings look like a set of icons that don't have any marings in between. Default size is 16 by 16, larger is 24 by 25, mini is 12 by 12. But we can also let define the size of the ratings control manually.

Return to top