CAFE SOHO CO. · LONDONWEBSITE UI DESIGN · SOCIAL MEDIA KIT · COLOR PALETTE
HOMEPAGE · DESKTOPcafesoho.co
01 / ProjectThe brief and the package
A welcoming cafe, online.
Cafe Soho Co. is a charming cafe in the heart of London, known for its welcoming atmosphere.
They take pride in being a haven of quality. Every cup of coffee and every bite is carefully prepared to create delightful moments for their guests.
Wanting to strengthen their online presence and build a more meaningful connection with their followers, Cafe Soho Co. reached out to me to draw on my experience in interface design and social media. I offered them a three-part package.
Website
Interface design
A site redesigned from hero to footer: about us, coffee and dessert menus, promotions and a newsletter sign-up.
02 / Color and typeBrand color palette and typography design
From milk to espresso.
I built the palette from the layers of a cup: four tones from the foam down to the roasted bean. The two light colors carry the backgrounds and frame the photos; the two dark ones carry the text, the menu and the footer.
HEX #CFBAA5LatteThe homepage's left panel, menu strips, light backgrounds.
HEX #AB8D71MochaHero background, menu cards and social icons.
HEX #221816EspressoNavigation, the dark square on product cards, text.
HEX #150D09RoastedThe footer and the deepest shadows.
Warm accents in the social kitKraft orangeCaramelCherry brown
Primary typefaceCafe Soho Co.
Myriad Pro Regular
Logotype, headings and product names.
Secondary typefaceLatte · Mocha · Frappe
Myriad Arabic Regular
Menu strips and navigation.
Supporting typefaceStep into the world of Cafe Soho Co., where every cup is a sip of happiness.
Myriad Regular
Body copy and descriptions.
The samples on this page are set in the open web font closest to the Myriad family. The handwritten “Soho” seen in the posts and on the site is the brand's signature accent.
03 / Social media kitSquare post system
Every post an order.
I built the kit to read like the cafe's display counter: first the product, then its name, then its price. The kraft paper texture and the rounded photo card repeat in every post, so the feed reads like a single menu.
Background
Kraft paper texture: orange, caramel, cherry and espresso.
Photo card
A vertical card with rounded corners; the product is always the hero.
Product block
A bold product name, a thin rule and the “Soho Special Recipe” signature.
Price tag
A punched price card borrowed from the cafe's own tags, with the Cafe Soho Co. signature below.
SohoCoverMacchiatoProduct cardMacaronProduct and contactFriday OfferPromotion
04 / FeedThe kit on the Instagram profile
Fifteen squares, one menu.
I sequenced the posts with an eye on how they would sit side by side in the profile grid. Light and dark squares alternate like a checkerboard, and atmosphere posts slip in between the product cards.
PromotionsFriday Offer and a members-only frappe promotion; date and conditions in the same box.
AtmosphereWake up with Soho, Good Morning, To Have a Great Day: a handwritten invitation.
CS@cafesohoco
05 / Web interfaceThe homepage, top to bottom
From the door to the menu.
I sequenced the homepage like a visit to the cafe: welcome, story, coffees, desserts, menu, community. Latte and espresso half-screens swap places down the page, and the product grid reads like a menu board.
cafesoho.co
Scroll inside the window to browse the page from top to bottom.
The latte and espresso panels swap places from section to section, giving the page its rhythm.
Product grid
Like a menu board
Vertical product name, large price and promotion note sit in the same spot on every card.
Community
More than a cafe
The newsletter and membership call link up with the members-only promotions in the social kit.
Soho
Cafe Soho Co. / Case study
One palette, one feed, one site.
The website, the social media and the palette all speak for the same cafe; whichever door a guest walks through, they find the same cup.
What I did
Web
2024
Cafe Soho Co.
Disciplines
UI Design for the Website
Social Media Kit Design
Colour Palette Design
A sample study for a London cafe: website UI design, social media kit and colour palette.
I studied this project as a sample study for cafes: Cafe Soho Co is a charming cafe nestled in the heart of London, renowned for its welcoming ambiance and delectable offerings. They pride themselves on being a sanctuary of quality, where every cup of coffee and every bite of food is infused with happiness and hope, creating delightful moments for their customers.
Seeking to enhance their online presence and engage with their audience in a more meaningful way, Cafe Soho Co approached me for my expertise in UI design and social media management. I provided them with a complete package, including a redesigned website, captivating social media posts, and a cohesive color palette and style that perfectly encapsulated the brand's identity.
