Prince Edward County
DaylightPicton
Southern Georgian Bay
DuskCollingwood
Seasonal & Spanish-inspired dining in Ontario
Digital brand system · Sept 2026
Daylight
252 Main St · since the beginning
Dusk
31 Huron St · the second roomOne landscape. Two moods.
The restaurant became the brand guide One landscape. Two moods.
Bocado had a wordmark, two typefaces, an orange and a brown.
No guideline. So I read the rooms.
Every colour beyond the heritage pair is sampled from the two dining rooms: the banquettes, the marble, the leather, the velvet. This board is that system, tightened for the portfolio.
5600K noon4500K3500K golden hour2700K lamplight1900K candle
PictonLate afternoon
BocadoClay, the constant
CollingwoodAfter sunset
A logo, a pair of colours, and three typefaces
No brand book came with the job. These are the pieces already in use on menus, signage and the old site. The system keeps all of them.
Wordmark on the house stone
Location lockups (existing)PictonCollingwood
PictonCollingwood
The b monogramThe foundation colour
Clay#BE5633
Foundation
Foundation
Walnut#734F36
Partner
Partner
Orange is the foundation colour. It is on the logo, the menus and the signage, so every page in both locations starts from it. Walnut is its partner.
Typefaces in the Brand Identity folder
AaPP Fraktion MonoHeadings, nav, descriptor line
AaPP MoriIn the folder, unused online
AaPP EikoOn the live site as body copy
KeptWordmark, monogram, Clay, Walnut, all three typefaces.
MissingA palette beyond two colours. Type roles. Any rule for a second location.
The questionHow does Collingwood belong to Bocado without being a copy of Picton?
Colours taken off the furniture
Blue, teal and green kept showing up in both interiors, so they joined the identity as accents that connect the site to the room. Orange stays the lead in both locations. Each swatch below is sampled from the restaurant photography.
Picton
Bright, worn-in, local
Collingwood
Low light, heavier materials
One shared core
The core never changes between locations. Each location adds its own room colours and decides how much of the page they cover. Widths show roughly how much of a screen each colour occupies.
Primary · OrangeClay ties both locations. Logo, buttons, headline accents, key panels.
Support · BrownWalnut text, timber grounds.
AccentBlue · green
Shared
Clay#BE5633
Primary
Primary
Walnut#734F36
Support
Support
Ivory#F4EFE6
Ground
Ground
Limestone#DFDACF
House stone
House stone
Ink#231A14
Picton
Ivory#F4EFE6
Ground
Ground
Clay#BE5633
Primary
Primary
Walnut#734F36
TealAccent
BlueAccent
OliveAccent
Collingwood
Ivory#F4EFE6
Ground
Ground
Clay#BE5633
Primary
Primary
Timber#3D291D
Support
Support
ForestAccent
TealAccent
One orange, tuned to its light
Clay #BE5633 is the brand colour in both places, on the same ivory ground. For small text and buttons it deepens to Clay Ink #A8472A, so it passes contrast.
Clay Ink on Ivory · 5.1:1
Timber on Ivory · 12.3:1
Why not black and gold
Collingwood is richer, but it sits on the same ivory as Picton and the orange is still the loudest thing on the page. Black and gold would make it any steakhouse. Walnut and clay keep it Bocado.
Accents stay small
Blue, teal and green come from the rooms, so they stay, but only in small moments: a tag, a dot, a detail in a photo. They never fill a background or a button.
Same family
The difference between locations comes from light, photography, texture and pace. Logo, grid, type, buttons, menus and booking stay identical.
Daylight
Picton
Warm · Familiar · Tactile · Grounded↓Local · Seasonal · Natural · Ontario↓
Collingwood
Intimate · Architectural · Rich · RefinedDusk
Picton
A really good restaurant that belongs exactly where it is.
Collingwood
Sunset turning into night. You slowly melt into the room.
Lever
Picton
Collingwood
Light
Hard afternoon sun, crisp shadows
Lamplight and candle, deep falloff
Ground
Ivory, clay, walnut type
Ivory, clay, timber type, forest and teal details
Photography
Overhead, abundant, hands and tables
Eye level, architectural, one subject
Pace
Tighter rhythm, more images per scroll
Slower, full-bleed, more space between
Motion
240ms, quick and plain
700ms fades, the page dims as you scroll
Two typefaces, two voices
This follows the type system I used on the live Bocado pages. Fraktion is the structure: everything you click, scan or order. Eiko is the voice: the sentences, the descriptions and the italic subheads. They alternate line by line, which gives the pages their menu-card rhythm.
Structure · Fraktion MonoFRAKTIONBold caps for headlines, nav, item names, prices, buttons and footer labels. Regular for dates and small data. Links are underlined.IBÉRICO CHORIZO / 10PP Fraktion Mono · Bold, Regular
Voice · Eiko ItalicEikoLight Italic caps for subheads, menu tabs and category names. The line that sits under a Fraktion headline.Menu · Dessert · CocktailPP Eiko · Light Italic
Voice · Eiko RomanEikoThin roman for body copy, dish descriptions in small caps, addresses, hours and disclaimers.Please note: some menu items are subject to change depending on ingredient availability.PP Eiko · Thin · PP Mori stays in the folder, unused
Headline
38 / 26px · 0 trackingBocado take out menusFraktion Bold, caps, Clay
38 / 26px · 0 trackingBocado take out menusFraktion Bold, caps, Clay
Subhead
22 / 18px · +15Take away menusEiko Light Italic, caps
22 / 18px · +15Take away menusEiko Light Italic, caps
Body
15px · 1.45Each week we will be offering a new pre set menu which will include tapas, a sharable large plate with a side, and dessert.Eiko Thin
15px · 1.45Each week we will be offering a new pre set menu which will include tapas, a sharable large plate with a side, and dessert.Eiko Thin
Nav + links
12px · underlinedTake outMenuReservationsGift cardFraktion Bold, caps
12px · underlinedTake outMenuReservationsGift cardFraktion Bold, caps
Menu tabs
19pxMenu · Dessert · Wine BTGEiko Light Italic, caps
19pxMenu · Dessert · Wine BTGEiko Light Italic, caps
Item + price
13px · +0.06emJamón Serrano / 14Fraktion Bold, caps
13px · +0.06emJamón Serrano / 14Fraktion Bold, caps
Description
12.5px36-month sliced jamón serrano.Eiko Thin, caps
12.5px36-month sliced jamón serrano.Eiko Thin, caps
Small print
13.5pxPlease note: some menu items are subject to change depending on ingredient availability.Eiko Thin
13.5pxPlease note: some menu items are subject to change depending on ingredient availability.Eiko Thin
Same kitchen
Both shoots already existed. My job was choosing and sequencing them so each site holds one light. Picton frames go to Picton, dusk frames go to Collingwood, and they never cross.
Daylight
Picton
Angle
Overhead or 45°. The table is the subject.
Light
Direct sun, hard shadows kept, not softened.
Crop
Abundant. Plates run off the edge, hands welcome.
Colour
True whites, blue and olive surfaces show through.
Dusk
Collingwood
Angle
Eye level. Doorways, arches, depth.
Light
Warm point sources, let the edges fall to black.
Crop
One subject, more air around it.
Colour
Amber highlights, timber shadows, a hint of green.
Kept out of bothKraft paperFake vintage grainWood-grain backgroundsBotanical line drawingsBlack & gold luxuryFarmhouse script
Identical components
Every piece below is the same component with a different token set. A developer builds it once. Hover the buttons to see states.
Picton
Daylight tokens
PictonCollingwood
● Picton-only module
DateFri, Oct 2
Time7:30 pm
Guests4
Address:252 Picton Main St |
Prince Edward County |
Ontario
Prince Edward County |
Ontario
Hours:Mon - Thu: 5 - 8:30
Fri: 5 - 9:30
Sat: 4:30 - 9:30
Sun: 4:30 - 8:30
Fri: 5 - 9:30
Sat: 4:30 - 9:30
Sun: 4:30 - 8:30
Phone:1 (613) 476-2208
Collingwood
Dusk tokens
PictonCollingwood
Same component, dusk tokens
DateSat, Oct 3
Time8:15 pm
Guests2
Address:31 Huron St |
Collingwood |
Ontario
Collingwood |
Ontario
Hours:Mon - Thu: 5 - 9
Fri: 5 - 10
Sat: 4:30 - 10
Sun: 4:30 - 9
Fri: 5 - 10
Sat: 4:30 - 10
Sun: 4:30 - 9
Phone:1 (705) 416-1361
One grid
The two sites are one build. Picton has services Collingwood doesn't, so those modules turn on for Picton only instead of leaving empty pages in Collingwood.
Desktop · 12 columns · 24px gutter · 64px margin
Picton
Seasonal, Spanish-inspired, County grown.
4
8
16
24
40
64
104
Spacing steps, px
Mobile · 4 columns · 16px gutter
Reserve lives in a fixed bottom bar on phones. Everything else scrolls.
| Module | Picton | Collingwood | Booking tool (from live site) |
|---|---|---|---|
| Menu + wine list | HTML menu, wine list PDF | ||
| Reservations | OpenTable widget | ||
| Events & private dining | Tripleseat inquiry, events package PDF | ||
| Take out | Tock ordering, Picton only | ||
| Weddings & catering | Off-site catering across the County | ||
| Gift cards | SilverPay, separate store per location | ||
| Location switch | Keeps you on the same page type when you switch |
The front door
A first pass at the bocadorestaurant.ca entry. The current page is stone, logo and floating food with the location links easy to miss. Here the two locations are the page, and the light tells you which is which before you read a word.
Prince Edward County
Daylight
Southern Georgian Bay
DuskSeasonal & Spanish-inspired dining in Ontario