Coffee, crafted
into a system.
The foundation layer for the quotes digital ecosystem — the brand thinking, colour, type, grid, motion and the coffee-bean language that every screen is built from. Warm, calm, editorial, and unmistakably ours.
Brand
Not simply selling coffee — designing an environment for coffee, conversation and moments worth remembering.
“Great coffee creates moments worth remembering.”
Quotes is a premium contemporary coffee brand built around coffee, conversation and human connection. Coffee here is a pause, a ritual, a thought, a meeting — a moment worth sharing. The name quietly connects to thoughts and stories; the connection stays understated, never a literal quotation-mark gimmick. Premium, but never intimidating. Sophisticated, but still human.
Warm
Inviting, comfortable and human. Never sterile or corporate.
Authentic
Natural materials, genuine photography, honest messaging. No artificial luxury.
Crafted
Spacing, type, packaging and interaction all feel deliberate.
Calm
Never visually noisy. Whitespace is used generously.
Premium
Refined type, strong composition, restraint. Never excess decoration.
Conversational
Encourages people to stay, talk, work and share time together.
Logo system
A bold lowercase wordmark with the handcrafted bean as its heart. Supplied artwork is canonical — never redrawn or re-proportioned.
Primary · creamInverse · espressoKeep clear space equal to the height of the bean on all sides. Never crowd the mark with text, imagery, buttons or the browser edge.
Wordmark · 96px / 30mmBelow wordmark minimum, switch to the standalone bean mark. The implementation enforces this at build time.
Colour
A coffee-inspired palette. Cream is the canvas, espresso the ink, latte the single rationed accent.
Espresso 50 → 900
Mocha 50 → 900
Latte 50 → 900
Semantic · muted to harmonise
Typography
An editorial serif for voice, Inter for everything functional. Spacious, never compressed.
Young Serif — the closest hostable match to Recoleta Bold. Soft, rounded, warm, nostalgic.
Inter — body, navigation, labels, forms, pricing. Three weights: 400 / 500 / 600.
IBM Plex Mono — token names, tabular prices, code and metadata.
| Role | Sample | Family / weight | Desktop → mobile | Leading · tracking |
|---|---|---|---|---|
| Display XL | Coffee, talk | Serif · 400 | 72 → 44 | 1.0 · -.03em |
| Display L | Worth slowing | Serif · 400 | 57 → 38 | 1.05 · -.03em |
| Display M | Best enjoyed | Serif · 400 | 45 → 32 | 1.08 · -.02em |
| H1 | Our origins | Serif · 400 | 36 → 28 | 1.1 · -.02em |
| H2 | Featured coffee | Serif · 400 | 28 → 24 | 1.15 · -.02em |
| H3 | Ethiopia Yirgacheffe | Sans · 600 | 22 → 20 | 1.25 · -.01em |
| H4 | Tasting notes | Sans · 600 | 18 → 17 | 1.3 · 0 |
| H5 | Grind selection | Sans · 600 | 16 → 15 | 1.35 · 0 |
| Body L | Thoughtfully sourced, carefully made. | Sans · 400 | 18 → 17 | 1.6 · 0 |
| Body | Best enjoyed together. | Sans · 400 | 16 → 15 | 1.6 · 0 |
| Body S | Washed · Light roast | Sans · 400 | 14 → 13 | 1.5 · .01em |
| Label | ADD TO BAG | Sans · 500 | 13 → 12 | 1.2 · .02em |
| Caption | 250g · whole bean | Sans · 400 | 12 → 11 | 1.5 · .01em |
| Overline | SINGLE ORIGIN | Mono · 500 | 12 → 11 | 1.2 · .16em |
Grid, spacing & form
Generous margins, editorial columns, an 8-point rhythm and small, considered radii.
Iconography
Thin-to-medium monoline, subtly rounded, warm — never overly technical.
- coffee
- bean
- cup
- location
- bag
- account
- loyalty
- menu
- search
- delivery
- pickup
- calendar
- arrow
- heart
- bookmark
The bean language
One proprietary mark, many quiet roles — never a sticker beside every heading.
- Single origin, washed
- Roasted in small batches
- Ground to order
Three more cups to a free coffee.
Texture & pattern
Tactile, handmade, subtle — carrying the etched quality of the mark. Never at the cost of readability.
a pause · a ritual
a conversation · a thought
a moment worth sharing
Photography direction
Warm, natural, cinematic, intimate. Golden light, shallow focus, real moments — never bright corporate stock.
Honey crema from a matte portafilter, steam, golden window light, very shallow focus.
Two hands around ceramic cups on worn wood — a candid, unhurried conversation.
Roasted beans spilling from kraft paper on stone, tactile, directional side light.
These plates are the shipped treatment, not placeholders: the product surfaces render imagery through the same tonal-plate component, so art direction stays consistent until commissioned photography replaces it.
Motion
Soft, calm, 150–400ms. Gentle scale and tonal shifts, a little arrow travel — never showy.
Every transition in the product uses these three durations on the one easing curve. All of it is suppressed under prefers-reduced-motion.
Accessibility
Premium never reduces usability. WCAG AA contrast, visible focus, generous tap targets.
- Espresso / CreamBody & headings · 11.8:1AAA
- Mocha / CreamSecondary text · 8.9:1AAA
- Cream / EspressoDark sections · 11.8:1AAA
- Latte / EspressoAccents & UI · 5.1:1AA
- Muted / CreamCaptions · 4.6:1AA
- Latte / CreamDecorative only — not for textDecor
Focus rings use a 3px Latte outline with 2px offset. Interactive targets are a minimum of 44×44px. Tab to the button to see the ring.
Design tokens
The single source the whole ecosystem consumes. Structured, semantic, named by purpose.
| Token | Value | Applied to |
|---|---|---|
| color.brand.espresso | #2F2322 | Ink · nav · primary button |
| color.brand.mocha | #4A3836 | Elevated dark · hover |
| color.brand.latte | #CBB792 | Accent · bean · active |
| color.surface.primary | #F5F1E9 | Page canvas |
| color.surface.raised | #FCFAF5 | Cards on cream |
| color.text.primary | #2F2322 | Body & headings |
| color.text.muted | #7C6E62 | Captions · meta |
| color.text.inverse | #F5F1E9 | Text on dark |
| color.border.subtle | #E7DFCE | Hairlines · dividers |
| color.action.primary | #2F2322 | Primary CTA fill |
| type.display.xl | Young Serif · 72/44px | Hero statements |
| type.heading.h2 | Young Serif · 28px | Section titles |
| type.body.default | Inter · 16px / 1.6 | Paragraph copy |
| type.label | Inter 500 · 13px · .02em | Buttons · labels |
| space.1 → space.10 | 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 | Layout rhythm |
| radius.sm / md / lg | 6 · 10 · 16px | Controls · cards · imagery |
| motion.fast / std / slow | 150 · 260 · 400ms | Interaction timing |
In code these live in a single Tailwind @theme block in src/app/globals.css. The 10-step tonal scales are generated with color-mix() from the five verbatim brand hexes, so no value in the system is invented.