Version 0.2 - buttons & inputs
Primary buttons carry the most visual weight with dark backgrounds and uppercase labels, making them easier to identify at a glance. Secondary buttons retain the same shape with a clear outline and a lighter background fill. Visually tertiary buttons are much simpler than both primary and secondary buttons, which allows them to optimize visual hierarchy for all three types of buttons when they are placed next to each other.
If desired, you can include buttons in your buttons. In this kit, we have reserved icon locations for both primary and secondary buttons so you can have more flexibility and offer more visual cues.
Some of the most commonly used elements for forms on the web and digital products are included, from checkboxes to sliders, text input fields to date selectors.
Both checked and unchecked statuses for checkboxes and radio buttons are available. To indicate ranges, you can use the range sliders and easily adjust the minimum and maximum values. Text input fields and select components are created with reference to the size and look of buttons and other elements in order to foster an orderly visual rhythm. We have also created the “in-focus” and “filled” states for input fields. A partial outline is used to visually show that the action of filling something in is in progress, while a full outline indicates the completion of such action.
Stay tuned for updates and additional resources to come.