Color System
--
Color carries a symbolic meaning. For example, in some Asian countries, writing person’s name in red color could mean bad luck (or worse). Sometimes color can be associated with certain actions (green or red light). In apps with user-generated contents (andCards, Twitter, Facebook, Instagram, etc.) color should be wisely applied to UI elements, to prevent user distractions. Binary Design System builds upon recent color trends (bold and bright color palette, reduction of UI color mix to put focus on content) and adds new development—color harmony generator for interactive colors.
Color Palette
Binary Design color palette learns from elementary color percepts of human vision — the psychological primaries (blue, red, green, yellow), with addition of contrasting neutral colors (slate, gray, sand).
Combination of bright and muted colors allows to build interfaces that don’t hurt users’ eyes, but are still capable of drawing attention.
The color Sand is crafted to fill background, reduce the blue light to be easy on eyes, and at the same time allow for white elements of app stand out.
Each color has a corresponding HSL value: hue, saturation and luminosity. The number following color name signifies luminosity, a basic modifier for the palette:
Bright colors may be disorienting for users, distracting from app content. It is important not to overuse colors and apply them consistently throughout the app. A general rule is to avoid using color if the goal can be achieved by other means, or if the UI element is less significant.
All colors are available to import from open-source library:
Color Harmony Generator
Color customization by users is an important aspect of Binary Design. App content, or certain elements can be customized with color harmony generator. It provides several color schemes, automatically generated based on user’s key color selection—a simple and intuitive method.
Color harmony generator’s matching color schemes can be used anywhere in the app: from themes to modification of user-generated content. Note in animation above the colors always stay contrast and harmonious.
Read next:
