Pour Over
Design System
An unofficial design system built for Blue Bottle Coffee — creating clarity, reducing friction, and ensuring every digital experience feels as intentional as their coffee.
Built on precision and care since 2002
Blue Bottle started as a single cart at an Oakland farmers market. What made them different wasn't just the coffee — it was the care behind every step: the precision of the pour-over method, the obsession with freshness, the belief that a simple, crafted experience is worth slowing down for.
"Every step is intentional, delivering a simple, crafted experience grounded in quality and freshness."
So what happens when you go to their website?
Their current digital experience has lost that.
Across pages, there are inconsistent layouts, navigation patterns, and component styles. Individually they seem small, but together they make the experience feel less cohesive — and out of sync with everything Blue Bottle stands for.
Inconsistency
The same actions look and behave differently across the site. A button here says one thing, elsewhere something different. Users must constantly relearn patterns.
Found across site
6 Dropdown variants · 5 Carousel variants · 4 Card variants
Accessibility Failures
The site has critical WCAG 2.2 violations. For a brand built around care and intentionality, those gaps become even more noticeable.
- ✕Invalid ARIA labels on pagination (4.1.2 Name, Role, Value)
- ✕Video loop with no pause control (2.2.2 Pause, Stop, Hide)
- ✕Insufficient contrast on overlays — current 1.54:1, required 4.5:1
Decision Tax
Every time a designer or developer needs to build something, they face a choice with no clear answer — so they spend time deciding, make a guess, or create something new. That's how you end up with six dropdowns.
= Too many decisions, not enough building
Why all these issues?
There was no shared system guiding decisions. No single source of truth. No standards, no guardrails. Teams making their own calls, independently, over time.
Without standards, every decision starts from zero.
What happens if we don't fix this?
If left as is, the problem keeps building — slowing the team down, confusing users, and weakening the brand over time.
For the Team
- → More back-and-forth and rework
- → Decisions take longer
- → Harder to keep things consistent
For Customers
- → Things feel unpredictable
- → Less confidence in what to do next
- → More drop-offs along the way
For the Business
- → Accessibility issues increase risk
- → Brand experience weakens online
- → Missed opportunities to convert
Pour Over Design System
A unified system that creates clarity, reduces friction, and ensures every experience feels consistent and thoughtful.
Every element is intentional. We design with care, using restrained layouts, precise spacing, and minimal UI to focus on what truly matters. Components are reused with purpose, refined over time, and built as lasting patterns that scale without excess.
Clarity creates ease. We simplify structure, reduce cognitive load, and build clear hierarchy so every interaction feels intuitive and effortless. Typography, spacing, and layout work together to create structure and rhythm.
Welcoming and easy to trust. We use approachable language, honest imagery, and subtle interactions to create a sense of comfort and human connection. Every detail is designed to feel inviting.
Accessibility and inclusivity are fundamental, not additive. We design with empathy for a wide range of users, ensuring experiences are usable, clear, and equitable. From color contrast to interaction patterns, every decision aligns with WCAG 2.2 standards.
From deconstruction
to documentation
We followed a structured process — understanding the existing system before building a better one.
Deconstruction Audit
We began by mapping every component across the Blue Bottle site — cataloguing all variants of dropdowns, buttons, cards, carousels, and navigation patterns. This gave us a clear picture of the scale of inconsistency.
Token System & Foundations
We defined the foundation layer: a structured semantic token system with clear alias rules for color, spacing, and typography. Every decision about layout, hierarchy, and visual consistency anchors back to these tokens.
Atoms → Molecules → Patterns
Following an atomic design methodology, we built from the ground up: first the smallest elements (buttons, inputs, labels), then combined them into components (forms, cards, navigation), and finally assembled them into full page patterns.
Usability Testing
We ran usability tests asking participants to recreate sections of the Blue Bottle website using only our component library — with no additional instructions. This validated whether the system was intuitive enough to use without prior knowledge.
Documentation on Zeroheight
We built a centralized documentation hub on Zeroheight — serving as the single source of truth for the entire system. Every component has its own page with overview, usage guidelines, accessibility requirements, and Figma kit references.
From inconsistency
to clarity
Inconsistent components
4 different button styles for the same action
Standardized components
One clear button system, consistently applied
Accessibility built from the start
Accessibility in documentation
Accessibility built into components
Reduce the tax. Restore focus.
14 Components · 9 Patterns
Centralized, reusable. No redundant variants.
A system that scales
without complexity
Consistency builds trust
- → Recognizable across touchpoints
- → Predictable interactions
- → Accessible to all
- → Easy and intuitive to use
Systems enable scale
- → Consistent brand across touchpoints
- → Faster time to market
- → Higher conversion and retention
- → Scalable without added complexity
Clarity speeds teams
- → Less deciding, more building
- → Reusable by default
- → Faster iteration
- → Shared language, shared system
"Pour Over is more than a UI kit. It's a shared language — so every decision starts from the same foundation."