Studios XeniaBrasaluna
Specialty coffee
A crescent moon that is also a coffee bean. A night-time mark for a small-batch roaster.
Typefaces: Quicksand · Nunito
The brief
A small-batch roaster lives on customers who come back every month. So the website pushes the subscription rather than one-off purchases: pick the roast, get it without reordering and pause when needed.
The brand in use
Project sheet
| Industry | Specialty coffee · Food and drink |
|---|---|
| Promise | Choose your roast and get it without reordering. |
| Highlights | Weekly roast · Three profiles · Pause anytime |
| Call to action | «Build my subscription» |
| Website | Landing page with the headline «Freshly roasted coffee, at your door every month» |
| Services shown | Brand identity · Web design · Social media and content · Automation · Apps and software |
| Measured contrast | Text 13.2:1 · button 4.7:1 (the WCAG minimum is 4.5:1) |
Website · Landing page
Freshly roasted coffee, at your door every month
The demo is a real, hand-written page published on this very site. Open it, inspect it and see how it behaves on your phone.
- 5,1 KB HTML and CSS
- 0 JavaScript libraries
- 5 sections
How it is built
Semantic HTML and CSS with brand variables. Changing the palette means changing four lines:
:root{
--fondo:#efe6d8;
--tinta:#2b1d16;
--acento:#d06f5b;
--tinta-boton:#2b1d16;
--oscuro:#2b1d16;
--sobre-foto:#ffffff;
--titulo:'Quicksand',Georgia,serif;
--letra:'Nunito',system-ui,sans-serif;
--radio:10px;
}The main button sends the customer to one next step:
App or software
App with a roast calendar and subscription control.
One screen for the customer and another for the team running the service, sharing the same brand system.
Automation
What happens when a customer arrives
- A customer subscribes or renews
- Payment is taken and the month's order is created
- A shipping or access notice is sent
- Before it expires, a renewal message goes out
Tell us what you sell and where it gets stuck.
We'll reply with what we'd do, what it costs and how long it takes.