-
Notifications
You must be signed in to change notification settings - Fork 0
Color Strategy
References Ticket #33. Use this page to flush out color categories.
The general idea is that colors for the library should be named with more robust and semantic names than something like 'red'.
In the Twitter Bootstrap library we see 2 type of color classes -- those that reference Actions (i.e. "warning", "highlight" etc.), then a set that are named (red, green, blue, etc.) that are referencing re-usable accent colors that don't necessarily have a pattern that is tied to an action -- they instead have a pattern that is tied to visual design.
We're thinking that in most websites, these non-action patterned visual treatments are most likely tied to some type of brand/marketing guideline.
One proposal is that we distinguish between the "action" context and "branding" context to tease out 2 common patterns we see when dealing with colors.
On the one hand we'll specify some common contexts where color is a signifier of state changes.
The other will be related to branding for a site.
One idea for the the brand patterns is to follow the hierarchy that is already established in graphic identity guidelines: such as "primary", "secondary", "tertiary" colors. If following this logic, the branding elements, instead of "blue" as a class, we can have class "primary-color" (in the case of UCLA, assigned a value of the ucla blue). Thus, the library is nicely abstracted: when dealing with another set of brand colors where say their primary color=green, can still work.
In theory, this can be an organizing principal -- in practice, we'd need to speak with some marketing/branding folks to see if this approach will fulfill their needs.
In our meeting, we've agreed to start building the Actions section and get feedback from some of the marketing folks to see what they think.