case study

Kindred Coffee

Identity Design
Creating a holistic identity design system for a conceptual local, woman-owned coffee shop
Photo by Delightin Dee/Unsplash
Karla Winters
Branding Standards
Style Guide
Photo Editing

Project Overview

Karla Winters, a local business owner, was opening a coffee shop in a popular neighborhood. Situated amongst other local shops, restaurants and small businesses, Karla wanted her coffee shop to be a community space committed to high-quality coffee and teas, and light fare. When customers arrived at her coffee shop, in-person and online, she wanted them to feel connected the space and the people there. 

The Challenge

Karla needed a holistic identity design that included an original logo, icon family, typescale, color palette, imagery, social media post and visual style guide for the opening of her coffee shop in three months. 


To ensure her coffee shop resonated with the community and matched Karla’s vision for her business, the identity design needed to: 

  • Clarify the mission and values of the coffee shop.
  • Name the coffee shop.
  • Develop a brand identity that consistently conveyed the coffee shop’s personality and values across all digital and printed materials.
Five-page desktop website mockups showing brand identity elements including coffee shop photographs, color palette, typography, logo, iconography, Facebook header and text


With three months to go before the grand opening of Karla’s new coffee shop, I had a tight deadline to define and design her brand. We discussed what coffee means to her, what her brand has to offer and the target audience.

Hand-written diagram with "coffee" at the center and arrows pointing to bulleted, categories.
Brainstorming about why people drink coffee, what types of coffee there are and where/how people get their coffee.

I researched local and national competition to understand how they crafted their brand’s mission, story and style guide to understand methods of clearly articulating brand identity.

Brand Identity

Brand Personality & Name

Throughout the discovery process, several words were repeated –nourished, energized, connected, wholesome and friendly. I researched synonyms looking for a standout, common word in this group. “Kindred” surfaced and, ultimately, was selected as the coffee shop name. Kindred reflected the mission Karla identified for the coffee shop: a place where customers were nourished by high-quality drinks and food, energized for what lies ahead and connected to the community. 

Color & Typography

With a name and core values identified, I began selecting colors and typography that visually reflect them. I tested my color palette using several WCAG accessibility tools, including Adobe Color and UX Lift’s Accessible Color Palette Builder, pictured here: 

Side-by-side screenshots of a color palette graph with combinations of accessible  background and typography colors.
My initial color palette, left, didn’t have the warmth and sincerity the brand needed to evoke. Also, the accent colors needed to meet the WCAG AAA contrast standards. The final color palette, right, resolved those issues. 
  • Main brand color: Medium-dark green to evoke wholesomeness and nourishment.
  • Secondary brand colors: White, purple and black to reflect the depth and sincerity of the brand.
  • Accent colors: orange and yellow to convey the brand’s warmth
Grid of computer-generated images comprised of geometric shapes of various colors.
Some color experiments using the generative art site Tabbied, which I incorporated into the visual style guide. 

I sought typefaces that communicated the brand’s warmth, wholesomeness and connection. Alegreya balanced approachability with traditionality. Deciding to remain in the same font family, I chose Alegreya Sans as a complement to the header text. The wordmark typeface changed mid-design, which will be discussed below. 

Screenshot of the typescale on purple background at left and sample text on green background at right.
An example of the H1, H2 and H2 accent fonts with brand colors.

Logo Design

Using the words Karla and I brainstormed for the brand, I developed the logo concept –two interlocking coffee mugs – to represent Kindred’s core value of connection. 

Hand-drawn sketch of overlapping coffee mugs.
An initial sketch of the logo. 

The first versions of the logo incorporated generative art into the wordmark. However, I received feedback that the colors and shapes might become muddy in smaller versions of the logo, so I changed the design. Also, I decided that the original typeface I chose didn’t match the style of the mugs. The typeface had too many sharp lines to match the very round construction of the interlocking mugs. The friendly and whimsical “Oi” typeface better matched the style of the mugs and created a warm personality for the brand.

Screenshot of multiple variations of the Kindred logo featuring overlapping coffee mugs and the wordmark.
Some of the logo designs and variations I created in Adobe Illustrator.

After viewing the logo in product mock-ups and social media headers, I added a white border and steam to create a cohesive and polished look, which was lacking in earlier versions. Further feedback helped me narrow down the number of logo variations to a white logo and wordmark with either a green, purple or black background to create high contrast and visibility. 

Screenshot of three logo variations in green, purple and black.
The final duotone logo variations. The style guide outlined the correct usage of the variations.


With a tight deadline for developing a complete identity design, and ensuring enough time to build and print all branded materials for the opening, Karla and I decided not to create original icons for the initial launch. Instead, I sourced icons that complemented the logo and brand typefaces.  

Imagery & Social Media

Imagery is one of the most impactful elements of a brand, especially on social media. Utilizing my skills as a photo editor, I sourced photos that evoked the brand’s core values of connection, nourishment, energy and sincerity. 

A grid of photographs of coffee shop interiors, baristas and patrons.
Images selected to represent Kindred’s brand.
  • Established guidelines for standard photo proportion to maintain integrity of images and a consistent look and feel. 
  • Created Facebook mock-up in Photoshop to demonstrate how photos and logo should work together
  • Demonstrated how to group images to create visual variety and balance throughout web, print and social media layouts.  
Mockup of a Facebook page with coffee shop images and logo.
Varying image content and perspective created depth and dimension as you scroll down the page.


To complete the identity design system I planned a website version of the visual style guide. The guide needed to communicate the best practices for deploying the brand, including mission and values, color palette, typography, logo, iconography, imagery and social media posts. I researched other similar design projects to gain insight into possible solutions for layout and unique color palette designs.

Three hand-drawn sketches of website wireframes.
Sketches of layout options.
Digital low fidelity wireframes of desktop website layout.
Digital wireframes.

The final design of the visual style guide was created as a website, as opposed to a PDF, so that it could be easily expanded and updated as the brand grows, including a website. Features like buttons and a full icon family, which were outside the scope and timeline of the original project, could be added down the road.  

Box layout

I chose to use a box layout to organize and connect sections of content. Both the typography and iconography sections used side-by-side boxes to break up information into smaller, digestible bits while uniting the content. 

Screenshots of website design with blocks of color, type and icons.
An initial version of the iconography section didn’t provide enough context for the icons, top, and was redesigned to clearly communicate what each icon was for, bottom. 

Color palette design

The color palette was designed to contain both color value information and sample type to indicate which color combinations were accessible and on-brand. Additionally, the size of the color swatch distinguished the primary, secondary and accent colors. While my initial sketches and wireframes envisioned the text below the color swatch, there was a lot of dead white space. By eliminating the white space and including all the information on the color swatch, I was able to create a compact and easily interpreted palette. Supplemental text clarified usage. 

Screenshot of color palette with type over blocks of color.
The color palette includes HEX, RGB and CMYK color codes, and accessible color combinations.

Background texture

I infused some texture throughout the design using the generative art I scratched from the logo. It added some depth in areas with small blocks of text that felt flat. 

Screenshot showing geometric shapes layered behind type.
I blended one of the generative art pieces at low opacity with the background color to created texture, depth, and separation.

Logo section

I attempted to visually represent all uses of the logo variations in the hi-fi mockup, but it was cluttered and unbalanced. The logo itself in that iteration of the design had multiple different styles and combinations, adding to the struggle of how to communicate its usage. Once the logo had been refined (see brand identity section), I simplified the design. Maintaining a fixed-width on all three variations created balance, and written instructions on usage minimized clutter.

creenshot of before and after examples of the logo section of the website.
The final design of the logo section, right, used uniform width to create balance and consistency.


Building the identity design was a scaffolding process that required time management and effective communication between myself and Karla. Throughout the design process, it was important to assess whether each element individually and holistically reflected the core values Karla discussed during the discovery process. Iteration and feedback were essential to honing the brand’s look and feel. 

Some takeaways: 

  • I spent a lot of time iterating the logo design before testing  it out in mockups, both design layouts and social media headers. Testing it early and often would have given me valuable information about how it worked when placed in context. 

With the completion of the visual style guide and delivery of final exported assets, I provided Karla an entire identity design that ensured her brand was presented uniformly and effectively across all digital and printed materials. Having strong, distinctive branding elevated her presence in the neighborhood and established the feel of the coffee shop at a glance. As Karla moved forward with launching her coffee shop and growing her business, the detailed guidelines and designs I created gave Karla clear specifications to build out her branded materials.

More Case Studies

view raw