Quotecard
Quotecard is a brand and product direction centered on sharing quotes from books, podcasts, songs, videos, and other media. A visual design that carries through branding, illustration, app UI, and a web landing page—tying together expressive content with an approachable interface.
Branding
The logo combines a stylized “Q” with subtle references to quotation marks and speech bubbles, signaling conversation and ideas. The color system grew from a cool, versatile palette—dark blues for primary text, vibrant blues for actions, and soft, cool neutrals for cards and backgrounds—chosen to complement a wide variety of content imagery/color without clashing.
Illustration
Illustrations were crafted to feel both tactile and airy, drawing on visual cues from paper, glass, and ink. Using visual metaphors, evoking tactility while staying harmonious with the broader design language. The goal of each illustration was to highlight a key feature in a way that’s visually engaging yet cohesive with the content.
UI
A challenge for the UI design was to make the text heavy, quote‑driven content feel distinct, clear and scannable. Each post visually separates the quote, source details, and user information. The goal for the landing page was to guide visitors through the product and its features at a glance, making it engaging and approachable.
Attribution
Typefaces:
Image: Unspash
Icons: Heroicons