How the mark, the sage palette, the type and the annotation culture fit together — so every screen, deck and print piece reads as one voice.
Beautiful websites for restaurants51.5072°N · 0.1276°WVersion 1.0 — 2026
ContentsIndex
What's inside.
01Brand essence03
02The logo & wordmark04
03Construction & clear space05
04Logo misuse06
05Colour — the sage system07
06Colour — neutrals & usage08
07Typography09
08Type scale & hierarchy10
09Grid, spacing & radius11
10The annotation culture12
11Components13
12Imagery & photography14
13Voice & tone15
14Applications16
01 — Brand essenceNo. i
Positioning
The website builder made for independent restaurants.
Beautiful websites for restaurants — live in an afternoon, commission-free, and unmistakably theirs. Everything here exists to protect that promise: a system warm enough to feel like hospitality, precise enough to feel like a tool.
The promise
“Get online this afternoon. 0% commission. Free until you publish.”
The feeling
Like good front-of-house — warm, clear, and never overselling.
PersonalityWarmPreciseHonestEditorialUnfussy
02 — The logoNo. ii
The logo
A wordmark, drawn to keep.
The logo is a custom wordmark — Table in Albert Sans Black, Spark in a bespoke italic serif that harmonises with Georgia. It ships as vector outlines, so the mark is TableSpark's own artwork — tied to no font licence. It pairs with the four-point spark, the companion symbol.
Primary logo · full colour
“Table”
Albert Sans · Black
“Spark”
Bespoke italic serif
Format
Vector outlines
One-colour · single ink
The whole mark in a single ink — for stamps, single-colour print, embroidery, engraving and faxable documents.
Reversed — full colour
Reversed — one colour
Symbol · favicon
Lockup. Symbol + wordmark, left-aligned, with the spark ≈ the cap-height of “Table”. Use the wordmark alone in body contexts; the symbol alone only at favicon sizes.
03 — Construction & clear spaceNo. iii
Give the mark room. Keep it whole.
Clear space= 1×
X
Keep clear space of at least 1× the mark's height on all sides. Nothing — type, image edge or fold — enters it.
Minimum size
Mark 16px / 6mm
Lockup 96px / 24mm wide
Placement
The mark sits top-left in navigation and bottom-left in documents. On photography, place it only over a scrim or a calm area — never over busy detail.
04 — Logo misuseNo. iv
Six ways to get it wrong.
The mark is fixed. Don't redraw, recolour, distort or decorate it.
✕
Don't stretch or squash
✕
Don't recolour off-palette
✕
Don't rotate
✕
Don't add shadows or effects
✕
Don't place on busy photo
✕
Don't outline the fill
05 — Colour · the sage systemNo. v
Sage leads. Lime is a spark.
One green family across five weights, plus a single vivid accent used sparingly — for dots, live states and one call-to-action per view.
Deep Sage
Emphasis · serif accents
HEX 3F5334 RGB 63 · 83 · 52
Primary
Sage
The brand green
HEX 566F46 RGB 86 · 111 · 70
Soft Sage
Charts · secondary fills
HEX 7E9A6C RGB 126 · 154 · 108
Pale Sage
On-ink accents
HEX AEC4A0 · RGB 174 196 160
Accent
Vivid Lime
Sparingly — CTA, live dot
HEX 71B357 · RGB 113 179 87
Sage Tint
Key glyphs · chips
HEX EEF2E8 · RGB 238 242 232
Rule. Vivid Lime never becomes a background wash. It marks one thing at a time — the primary action, a live pulse, a highlight.
06 — Colour · neutrals & usageNo. vi
Warm paper, warm ink.
Paper
#FAFAFA
Paper Warm
#F5F5F5
Bone
#FFFFFF
Line
#D9D9D9
Ink
#262626
Ink Mute
#595959
Ink Faint
#8C8C8C
Band
#1C1C1A
Usage ratio
~64% Paper & neutrals~22% Ink text & bands~11% Sage~3% Vivid accent
07 — TypographyNo. vii
Two voices, clearly divided.
Primary typeface
Albert Sans
Google Fonts Weights 400 – 900
Aa Bb Cc 0123
RegularMediumSemiboldBoldExtraboldBlack
A humanist grotesque with a warm, slightly narrow lower-case. Carries everything — display, UI and body. Set tight at large sizes (−0.02 to −0.035em); let it breathe at text sizes.
Editorial accent
Georgia Italic
System serif Emphasis only
unmistakably yours
The voice of emphasis — one or two words per headline, always in Deep Sage. Never set body copy, UI or long passages in the serif.
Web — <link> in <head> https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,400..900&display=swap
Sans stack 'Albert Sans', 'PingFang SC', system-ui, sans-serif
Serif stack Georgia, 'Times New Roman', serif
08 — Type scale & hierarchyNo. viii
One ladder, top to bottom.
Display 96–118 / 850
Beautiful websites
Heading 1 64–82 / 800
One flat price
Heading 2 34–48 / 800
Everything, on every plan
Lead 18–24 / 500
The full toolkit, on the table.
Body 15–17 / 400
Change a price once and it updates across every page instantly — editing is unlimited on every plan.
Eyebrow 11 / 700 · .18em
The builder / 01
Annotation 9–10 / .18em
Fig. 01 — three plans
09 — Grid, spacing & radiusNo. ix
Built on an 8-point rhythm.
12-column grid
Max container 1200px · 40px margins · 16–24px gutters. Collapses to a single column below 900px.
Radius — 8px
6px inner · 8px cards & buttons · 999px pills & the nav. Rectangular first — softened, not rounded.
Spacing scale
4
8
12
16
24
32
48
64
10 — The annotation cultureNo. x
Label it like a working drawing.
The signature layer. Quiet, tracked, faint-grey marks that frame content without shouting over it. Use them to add rhythm and a sense of craft — never as decoration for its own sake.
Corner brackets
L-shaped marks at frame corners. Crop marks for the page.
01 — Section●LabelNo. i
Section rule / masthead
Rule + label + green dot + roman numeral.
Fig. 01 — three plans · 51.5072°N
Fig. numbers & coordinates
Tiny captions that number figures and locate the brand in London.
A menu that stays in sync
Circled word
A hand-drawn ellipse around one key noun.
one price that doesn't move
Scribble underline
A wavy vivid rule under a phrase.
Hero block
Selection box
Editor handles — the builder made visible.
11 — ComponentsNo. xi
The working parts.
Buttons — 8px radius
Start building free ↗Sign inPublish now
Primary — inkGhost — lineAccent — lime, one per view
Card
◻
The full builder
1.5px line · 8px radius · soft long shadow.
Chips & pills
Live menu0% commission
Open now
Table — masthead header, sage checks
Feature
Starter
Growth
Full
On-site reservations
—
✓
✓
12 — Imagery & photographyNo. xii
Warm rooms, real light.
Natural-light restaurant photography — food, room, hands, people mid-service. On a dark base (#23201B) with a gradient scrim so type stays legible.
Placeholder convention
IMG · DINING ROOM · 16:9
Scrim keeps type legible
✓ Do
Natural light · candid service · texture & food close-ups · space to breathe.
✕ Don't
Cold blue tones · heavy filters · stocky posed smiles · clip-art plates.
Placeholder. Where a photo will go, use the #23201B block with a diagonal stripe and a tracked label naming the shot — so a template always reads as intentional.
13 — Voice & toneNo. xiii
Say it plainly.
Honest, warm and specific. Short sentences. Real numbers over adjectives. We never oversell — the value speaks for itself.
✓ We say
“Free until you publish.”
“0% booking commission, always.”
“Get online this afternoon.”
✕ We don't
“Sign up for our AMAZING free trial today!!!”
“Revolutionary, game-changing platform.”
“Leverage synergies to maximise ROI.”
Tone dialsWarm, not chummyPrecise, not coldConfident, not loud
14 — ApplicationsNo. xiv
The system, out in the world.
Priya Nair
Founder · priya@tablespark.uk
Business card — front
51.5072°N · 0.1276°W
Business card — back
Get online this afternoon.
Social — 1:1
BuilderTemplatesPricingStart free
Website — pill nav & favicon ✦
ColophonFin
Beautiful websites for restaurants.
This document defines the TableSpark visual identity — mark, colour, type, grid and the annotation culture. Keep the system tight and it will keep the brand recognisable at any size, in any medium.
Reversed — full colour
Reversed — one colour