Visit the full site: http://theorchard.com/
The Orchard has it's roots in startup culture, so the design focus had always been on agility and features, at the expense of a heavy load of technical and design debt. I worked towards creating a design system that could extend through both the marketing collateral and the user interface. The question was, could we do this without becoming drab and predictable?
The key concept that helped us tackle this paradox is flexibility – by designing everything to change, and only making strict rules about important things, we made a framework that doesn’t stifle creative approaches. These modular sets of rules can be updated individually, slowly over time, to keep up with The Orchard’s evolving brand.
Our designers had a handful of colors that they would commonly use in designs: orange, sky blue, green, tan, navy, etc. The problem was our ‘navy’ would end up being a slightly different color depending on the project, designer, monitor calibration and time of day. It’s not a problem in stand-alone designs, but most designs don’t live in a vacuum.
I came up with the concept of ‘palette ranges’ to maximize the flexibility our designers have to make palettes. The addition of a perceptual luminosity system makes it convenient to switch from one range to another: "green-60" is the same perceptual brightness as "blue-60". Using the '.ase' swatch files in illustrator and photoshop, is in many ways easier to use than coming up with palettes from scratch.
I also rolled this up into a SASS function for the website, so the colors can be used like:
orch-color(green[color range], 75%[saturation], 60%[lightness], 50%[opacity])
This is an example of an Orchard sub-brand that I designed.The idea is that it should stand on it's own and have it's own internal logic, while still being consistant with the rest of the Orchard's branding.