The FlowUI color system allows you to easily adjust and add your own global colors for each of your site builds. Out of the box our system provides a leading color combination for modern web design, but easily change this to suit your own projects. We highly recommend that your use of these colors meet accessability standards as defined by Web Content Accessibility Guidelines (WCAG). You can find online checkers to review contrast ratios, or make use of Webflow in app accessability tool. By considering this you will be building a better product and a product which can be used more comfortably and by more individuals.
On this page you can mange and add your own colors into the system. By default we provide a set of colors built to provide a great foundation. You can simply click on the color area in your own style guide and adjust the color globally across your site.
The gray spectrum plays an important role in UI & UX design. Grey is the foundation for typography, dividers, fields, buttons and so much more. How you use gray plays an important part in the overall feel of your product and designs, and is often over looked by designers. By default we use a weighted system for Gray, which is unique to its category. This gives the additional control required to maintain contrast requirements in the spectrum.
The primary color is your "brand" color, and the color that will be used in most instances to call attention, and draw feeling and emotion from your users. Update the global swatch in webflow, and is used across all interactive elements such as buttons, links, inputs, etc.
Used in alert and unsuccesful situation.
Used in info and warning situation.
Used in positive and successful situation.
Adjust the colors to suit your own projects
Adjust the colors to suit your own projects
Build clean, scalable and consistent websites with FlowUI. The Webflow development system built for visual developers and designers.
