A diner decides in about half a second whether your restaurant feels right for their Tuesday. Half of that decision is color. The other half is the first sentence they read. We do them both in this lesson, in that order, on purpose.
What you'll be able to do by the end
- Pick a 3-color brand palette that passes WCAG AA contrast on phones.
- Dial in voice on three axes: formal↔casual, classic↔modern, terse↔warm.
- Pick a heading + body type pairing from 6 curated options.
Plain language version — the fast read
Pick three colors for your brand. Check they pass on a phone. Move three sliders to set your voice: formal or casual? Old or new? Short or warm? Pick one font pair from six options. Your site now looks like yours.
If you came here from Lesson 6a, your positioning informs the palette suggestions below — the cuisine-aware starting palettes lean warmer when you placed yourself toward casual, cooler when you placed yourself toward upscale. If you came from Lesson 6b, take a breath — this lesson is lighter than the one you just did.
Why color first
Color reaches the brain before words do. A diner glancing at your site on the train doesn't read your menu first — they form an impression of warmth, price, and tone from your background and your accent before any sentence registers. If your colors feel like an Italian fine-dining room when you serve fast Vietnamese takeout, the rest of your site has to fight for trust.
The good news: you don't need a designer to pick three colors well. You need three rules. Choose colors that match what a diner sees when they walk in. Make sure the text reads on the background. Don't pick more than three. The widget below enforces all three, and gives you a starting palette tuned to your cuisine.
Your palette
Take twenty seconds to glance at your preview on the right. The colors aren't a wash anymore — they're yours. Notice the cuisine-chip above your name and the "Reserve a table" button: both painted in your accent. If the contrast warning is yellow or red, change either your accent or your background until it's green. A site that fails contrast loses every diner who reads on a phone in bright sun, which is most of them.
If you're stuck: Pick the cuisine-aware suggestion above. It's been pre-checked for contrast, fits the visual conventions of restaurants in that cuisine, and is easy to refine in the next lesson once you start adding photos.
What "voice" actually means
Voice is not the words you write — that comes later. Voice is the register the words sit in. The same restaurant can describe itself as "a refined modern Italian dining experience" or "red sauce, hard chairs, mom's recipes" and they are not the same place. Pick voice now and the writing in every lesson after gets easier because you know what you're aiming for.
Read these two examples — both for the same imaginary Italian restaurant.
Formal · classic · terse
"A modern Italian table in Silver Spring. Pasta made each morning. Reservations recommended."
Casual · classic · warm
"Hand-rolled pasta, hard chairs, the same Sunday gravy my nonna made. Stop in. We'll find you a seat."
Both are good. Neither is "right." The first one belongs on a tablecloth restaurant; the second belongs on a counter spot with a single line cook. The trick is knowing which one is you.
Your one-sentence intro
You don't need to write your About page yet. You need one sentence — the way you'd describe your place to a regular who asked a first-timer "what kind of spot is this?" Write it now. It saves to your context and the next few lessons use it.
Look at the preview to the right. Your sentence now appears under your restaurant name — that's the promise line. Read it once. Does it agree with your colors? A warm, casual sentence in cold corporate colors feels like a lie. A formal, terse sentence in playful candy colors feels like a parody. If they fight, change the one that's easier to change. Color takes thirty seconds. The sentence takes a thought.
Dial in your voice
Now we make voice granular. Three sliders — formal ↔ casual, classic ↔ modern, terse ↔ warm — each with a sample sentence at the extreme. You're not picking words; you're picking the register the words sit in. Slide each one until the sample reads how a regular would describe your place to a stranger.
Read the three samples back. Together they describe the same restaurant in your register. Now read the one sentence you wrote above and check: does it sit at the same point on each slider? If "formal · classic · terse" feels right but you wrote a 22-word casual sentence, one of them is wrong. Usually the slider is right — the sentence is just a first draft.
Pick a font pair
Typography is the last brand-defining piece before we hand the operator over to the menu. You don't need to know type terminology — you need to recognize the kind of place each pair looks like. Six curated pairs cover the range of restaurants this bootcamp is for; each is a system-font stack in the picker so it works without a single network request, then the L14 generator emits the matching Google Fonts @import for the downloaded site.
Glance at the preview to the right again — your restaurant name now wears the heading face of your chosen pair. If a regular came to the door and the sign were rendered in this typography, would they assume they were in the right place? If the answer is "no, that looks like a different restaurant," try a different pair. You can change this any time before Lesson 14.
Your site stopped being a template.
You picked a three-color palette appropriate to your cuisine, contrast-checked for legibility on phones, and you wrote the one sentence that anchors how your restaurant sounds to a stranger. All saved in this browser.
From here on, every screen of the bootcamp — and the site you'll download in Lesson 14 — wears your colors and quotes your sentence.
Optional cross-link, when you're ready: the Muntin Brand Suite takes your three colors and proposes typography, mood-board imagery, and signage. Many operators skip it for now and revisit later.