Brand system
Saffron & Co
The identity behind the café: one mark, ten colours, four typefaces and the rules that keep them working together. This is the whole system, in the form a client would receive it.
Saffron & Co is not a real business. It is a fictional Fitzroy café, invented and built by Pixel Pundit to show what the studio produces. No customer has ever eaten here.
The mark
Saffron is the stigma of the crocus flower, and it grows as exactly three deep-red threads above a yellow style. The mark is that, drawn plainly — the spice itself rather than a monogram or a coffee cup.
Primary
Mono, light ground
Mono, reversed
24px / 16px
Do
- Give it clear space of at least one thread-height on every side.
- Use the mono version wherever colour would fight the background.
- Keep it above 16px. Below that the threads merge.
Don't
- Recolour the threads. Chilli above, turmeric below, always.
- Stretch, rotate, outline or add a drop shadow.
- Set it in a circle or a badge. It has its own silhouette.
Palette
Built from what the kitchen actually smells like. Dark grounds so the food photography carries, warm neutrals for reading, and three spices used sparingly.
Deep
#0C0A08
--color-bg-deep
Page ground. The dark the whole brand sits on.
Rich
#1A1510
--color-bg-rich
Cards and raised surfaces.
Warm
#241E16
--color-bg-warm
Hover states, inset panels.
Cream
#F5EDE0
--color-text-cream
Body copy and headings.
Spice
#C4A882
--color-text-spice
Secondary copy, captions.
Muted
#968A78
--color-text-muted
Fine print. Lightened from #7A6E60, which failed AA.
Turmeric
#E8A838
--color-accent-turmeric
Primary accent. Prices, links, the stem of the mark.
Chilli
#EA6440
--color-accent-chilli
Labels and heat. The threads of the mark.
Sage
#7B8F6A
--color-accent-sage
Rare third accent. Vegetarian markers, success.
Border
#2E2820
--color-border
Hairlines and dividers.
Every combination used for text on this site clears WCAG AA at 4.5:1. Two of these were lightened during the build for exactly that reason, and the original values are noted against them.
Type
Four faces, each with one job. The discipline is in what each one is not allowed to do.
Playfair Display
Headlines
Where chai meets Melbourne
High contrast and a little theatrical. Used large, never below 20px, never for body.
DM Sans
Body
Slow-cooked dal, a proper filter coffee, and a bar that stays open after the kitchen shuts.
Does the reading. Everything a customer has to actually get through is set in this.
Space Mono
Labels & prices
OPENING HOURS · $18.50 · TABLE 4
Uppercase, letterspaced, small. Tabular figures keep menu prices in a column.
Oi
Accent only
Saffron
One word at a time, once per page at most. It stops being special the second it repeats.
Voice
Warm, specific, unpretentious. Names the dish and the person who makes it. Never “culinary journey”, never “elevated”, and never “fusion” as a compliment.
“The dal takes six hours. We start it before we open and it's ready when you are.”