TRUE FORM. started as a school brief to design a static website for a coffee subscription service. Three pages, a logo, navigation. The content was provided, but the visual direction was entirely mine.
The original was built in HTML/CSS and I didn't take it seriously. No references, no typographic intent, no considered colour palette. It was technically functional and visually forgettable.
The original was built in HTML/CSS and I didn't take it seriously. No references, no typographic intent, no considered colour palette. It was technically functional and visually forgettable.
Coming back to it, I rebuilt it in Figma with a clear perspective this time: specialty filter coffee. I chose this because I genuinely believe it is the truest expression of what coffee can be. Every variable controlled, every step intentional, from source to cup. That conviction became the brand. TRUE FORM. is about coffee handled with precision at every stage, becoming exactly what it should be.
That idea drove every visual decision. Cherry red connects back to the coffee fruit before it becomes a bean. As most coffee websites default to white or cream, the dark background was a deliberate departure from convention. A dark editorial palette felt more distinctive and easier on the eyes. Wide margins, deliberate rhythm, layouts that let the content breathe.
That idea drove every visual decision. Cherry red connects back to the coffee fruit before it becomes a bean. As most coffee websites default to white or cream, the dark background was a deliberate departure from convention. A dark editorial palette felt more distinctive and easier on the eyes. Wide margins, deliberate rhythm, layouts that let the content breathe.
Main/Home Page
The home page opens with a full-bleed hero, followed by a brand philosophy section, a product showcase of single origin beans, and a subscription call to action.
About Page
The about page traces the coffee journey from origin to roastery through alternating image and text pairings across three stages: growth, harvest, and processing.
Contact Page
The contact page pairs a short brand message with a structured contact form, keeping the layout clean and the interaction direct.
Looking back, I would have spent more time researching the specialty coffee world before touching Figma. I came in with a general appreciation for filter coffee, but it was only after finishing the project that I really fell into it. Researching pour-over brewing, picking up my own setup, understanding the culture around it. That knowledge would have made the brand feel more grounded and specific, rather than a well-designed approximation of a world I hadn't fully explored yet.
