HarazBrand guidelinesv1.3
Ordering ahead for a specialty coffee house
- Version
- 1.3 · Apr 2026
- Discipline
- Digital strategy
- Sector
- Hospitality
- Prepared by
- Berke Tok
Foundations
A pick-up and loyalty app for a coffee house serving single-origin Yemeni coffee: order before you arrive, collect beans per visit, and know which farm this week's espresso came from.
1.1Purpose
A coffee bean drawn from one ellipse and one seam, named after the Yemeni terraces the beans come from. Warm, round, made to sit on a cup sleeve.
1.2Audience
Who it is for
Regulars who order ahead on the way in, and first-timers deciding between a cortado and a flat white.
Positioning
For people who know their order. Unlike chain apps built around points, Haraz is built around the walk from the car to the counter.
1.3Principles
- P1
A short menu, properly told
Each drink names its origin and preparation, so the menu teaches as much as it sells.
- P2
Order, then walk in
Live order status ends at the counter with the barista's name, which keeps the room personal even when the order was not.
- P3
Loyalty in beans
A stamp card made of the brand mark, scannable at the counter and stored in the wallet.
Voice
How Haraz sounds in product, support and marketing. One voice; the tone moves with the moment, not the channel.
2.1Traits
Warm
We talk like the barista who remembers you, not like a loyalty programme.
Specific
Origins, processes and roast dates are named. “Single origin” on its own says nothing.
Unhurried
Short sentences, but never rushed. No “Hurry!” and no countdowns on offers.
2.2Say this, not that
- Say
Your cortado is on the counter, Sara.
NotOrder #4821 is ready for collection.
- Say
Haraz Terraces, washed. Apricot and black tea.
NotOur premium signature blend.
- Say
Two more cups and the next one is on us.
NotEarn 50 points with every purchase!
2.3House style
- 01Prices as AED 21
- 02Drink names in sentence case
- 03Origins with region and process
Logo
One mark, one wordmark, one horizontal lockup. The mark is drawn on a 48-unit grid and is never redrawn, only scaled.
3.1Lockups
3.2Construction
Construction circles and the 4-unit grid the mark is drawn on.
- Grid
- 48 units, 4-unit subdivisions
- Construction
- 1 circle, radii 20
- Lockup
- Mark 132 : word 340 units wide
- Gap
- 48 units between mark and word
3.3Clear space and size
Shown at true size. Below these the mark fills in and the word loses its counters.
3.4Misuse
Do not stretch or squash
Do not rotate
Do not recolour
Do not outline
Do not add effects
Do not set on low contrast
Colour
Four colours with fixed roles. Values are the source of truth for screen; print is proofed against the CMYK starting points below.
4.1Palette
- PrimaryTerracotta
- HEX
- #B5522B
- RGB
- 181 82 43
- HSL
- 17 62% 44%
- OKLCH
- 55.7% 0.139 41
- CMYK
- 0 55 76 29
- On it
- Cream
- GroundEspresso
- HEX
- #2A1810
- RGB
- 42 24 16
- HSL
- 18 45% 11%
- OKLCH
- 23.1% 0.033 45
- CMYK
- 0 43 62 84
- On it
- Cream
- TintLatte
- HEX
- #EBD9C3
- RGB
- 235 217 195
- HSL
- 33 50% 84%
- OKLCH
- 89.4% 0.036 73
- CMYK
- 0 8 17 8
- On it
- Espresso
- PaperCream
- HEX
- #F7F0E6
- RGB
- 247 240 230
- HSL
- 35 52% 94%
- OKLCH
- 95.8% 0.015 77
- CMYK
- 0 3 7 3
- On it
- Espresso
4.2Proportion
Share of a typical surface. Primary is an accent even where it leads.
4.3Tonal scale
Derived from Terracotta in linear light, for charts, states and illustration. Never for the mark.
- 50F7F1F0
- 100F1E6E4
- 200E4CDC9
- 300D6B0AA
- 400C68C7F
- 500B5522B
- 600A64A27
- 700944221
- 80080381B
- 900662B14
4.4Contrast
WCAG 2.2 ratios. AA needs 4.5:1 for text, 3:1 for large text and icons.
- Aa15.01:1AAA
- Aa12.33:1AAA
- Aa3.40:1AA Large
- Aa1.22:1Fail
- Aa4.41:1AA Large
- Aa15.01:1AAA
- Aa4.41:1AA Large
- Aa3.62:1AA Large
- Aa3.40:1AA Large
Typography
Fraunces for everything, from display to captions. One family keeps the product and the marketing in the same voice.
5.1Typeface
Fraunces
Semibold 560 · Regular 400
5.2Scale
Base 16 px, ratio 1.25. Line height tightens as size grows.
- Display49 / 1.08 / -3%Ordering ahead for a specialty coffee house
- Heading 139 / 1.2 / -1.5%Ordering ahead for a specialty coffee house
- Heading 231 / 1.2 / -1.5%Ordering ahead for a specialty coffee house
- Heading 325 / 1.2 / -1.5%Ordering ahead for a specialty coffee house
- Lead20 / 1.5 / 0%Ordering ahead for a specialty coffee house
- Body16 / 1.5 / 0%A pick-up and loyalty app for a coffee house serving single-origin Yemeni coffee: order before you arrive, collect beans per visit, and know which farm this week's espresso came from.
- Caption13 / 1.5 / 0%A pick-up and loyalty app for a coffee house serving single-origin Yemeni coffee: order before you arrive, collect beans per visit, and know which farm this week's espresso came from.
5.3Setting
Sentence case
Headings, buttons and labels. Title case only for product names.
Tabular figures
Every amount, time and count, so columns line up and values do not jump.
60–75 characters
Running text measure. Short labels may run to the edge of their container.
Layout
Two grids and one spacing scale cover every screen. Print uses the same 12 columns on the A-series.
6.1Grid
6.2Spacing
A 4 px base. Components step on 4 and 8; sections on 48 and up.
- space-14 px
- space-28 px
- space-312 px
- space-416 px
- space-524 px
- space-632 px
- space-748 px
- space-864 px
- space-996 px
Interface
The identity carried into the product: tokens first, then the handful of components every screen is made from.
7.1Tokens
- radius.sm
- 8 px
- radius.md
- 16 px
- radius.lg
- 24 px
- focus
- 2 px #B5522B · 2 px offset
- elevation.1
- 0 1 2 / 8%
- elevation.2
- 0 12 32 / 14%
- motion.fast
- 160 ms · ease-out
- motion.base
- 240 ms · ease-out
- hit target
- 44 × 44 px
7.2Components
Live components, set in the brand typeface with the tokens above.
7.3In product
Applications
Where the rules meet the world. When something here is not covered, follow the checklist and keep the lockup clear.
8.1In context
8.2Checklist
Before anything ships.
- The lockup is at least 18 px tall on screen and 8 mm in print.
- Clear space around the lockup is at least half the mark’s height on every side.
- Body text is Espresso on Cream: 15.0:1, AAA.
- Terracotta is not used for body text on Cream (4.4:1); keep it for fills, marks and large type.
- Headings use Fraunces; amounts use tabular figures.
- Copy follows the house style in 2.3, starting with “Prices as AED 21”.