Brand guide
Christoph and Steffi's Food and Travel
A family recipe book that grew a travel habit. Everything below is rendered from the live components, so if this page looks wrong, the site is wrong.
The mark
An ampersand in a stamp. The site is called Food and Travel, and the interesting word is the one in the middle, so the mark is that word. The ring reads as a passport stamp or a plate rim depending on which half of the site you are on. No cutlery, no aeroplanes, no committee.
Rules
- Clear space is half the mark's width on every side. Nothing sits inside it.
- It degrades itself. Ask for a seal at 40px and you get a badge; ask at 20px and you get a glyph. Do not force a variant below its size.
- Three tones only: paprika on paper, ink on paper, paper on ink. Never paprika on ink, which vibrates.
- Do not rotate it, outline it, add a gradient, put it on a photo without a solid field behind it, or stretch it. It is a circle. Keep it a circle.
- The pug is not the logo. They can appear together but the mark is the mark.
Depth
The mark is letterpressed, not embossed. It reads as pressed into the paper: a pale catch on the top-left lip of the impression, a warm shadow pooling in the bottom right, both very small. That is the only dimensional effect on the site. No gradients, no glass, no glow.
Colour
Warm paper, ink, one paprika accent. The food carries the colour, so the interface stays quiet. If a screen has more than one accent element competing, one of them is wrong.
--paper #fbf7f0 Page background. Warm, not white.
--paper-2 #f4ede1 Panels, cards, the masthead band.
--card #ffffff Where something must sit above the paper.
--ink #221f1a Body text. Near-black, never pure black.
--ink-2 #4a443b Secondary text, lede paragraphs.
--muted #857b6d Captions, metadata, labels.
--line #e3d9c9 Rules, borders, dividers.
--accent #b3452f Paprika. Links, the mark, one thing per screen.
--accent-soft #f6e3dd Accent backgrounds, never text.
--herb #4a6741 Success, diet chips, confirmations.
--herb-soft #e6ede2 Chip backgrounds.
--gold #c58a2e Ratings only. Nothing else.
Surfaces
Three grounds, and a page should sit on no more than two of them. Paper is the default and the one the recipes live on. The counter and the sage are for the top and the bottom of a page, or for a band that needs to be a different room from the one above it. Using all three in one screen is how a cookbook starts looking like a brochure.
Butcher block, seen from one end and tilted about thirty degrees. It is the masthead, and it is what the site stands on. Type sitting on it gets a single pixel of light underneath so it reads as being on the wood rather than printed into it.
The same block cut from a different timber. This is the travel half of the site: when
the subject changes, the counter changes with it, and nothing else about the masthead
moves. Set it with surface="sage" on the page.
Christoph's kitchen is sage, and the palette carried a herb green from the start that nothing used. It is a ground, not an accent: paprika stays the only colour that raises its voice, and this is what it gets to raise it against.
The same green with the values swapped, for a band that has to carry paper-coloured type. The mark goes on this in reverse.
Type
Fraunces for anything that carries a voice, Inter for anything that carries information. Fraunces is a variable serif with a wonk axis, which is why the headings have character without a display face fighting the body text.
Schwäbischer Kartoffelsalat
Everything we have learned to cook
The onions matter as much as the cheese, so do not rush them. Fresh packaged Spätzle from the refrigerated section is the best shortcut, and it usually needs about two minutes.
Sunday, one o'clock.
Knödel
The house pug. Pixel sprites, two sheets totalling under 4 KB, five states. He is the
mascot, not the logo: the mark stays formal so he can be silly. Sizes snap to whole
multiples of 32 so the pixels stay square, and every state holds still under
prefers-reduced-motion.
- He turns up where he should not be: over an image edge, in the footer asleep, among the crumbs at the end of the hero.
- He is never explained. No caption tells you he ate the food.
- Decorative by default, so he is
aria-hiddenunless he carries meaning.
Voice
Yes
- "The onions matter as much as the cheese, so do not rush them."
- "This is not a keto recipe. It is barely a vegetable."
- "Everyone in Swabia has an opinion about this and most of them are wrong."
- "Stop adding flour. Adding flour is what turns these into erasers."
No
- Exclamation marks used as personality.
- "Trust me on this one!" "Your taste buds will thank you."
- Puns, emoji, brand-account voice.
- Em dashes and en dashes. Ever. Comma, colon, or a new sentence.
The test: would Christoph say this out loud to a friend standing in his kitchen? If it reads as performed, cut it. Humour comes from telling the truth about cooking, not from jokes. Where there is nothing funny to say, say nothing.
Two taglines, one per half. Food is my love language. for the recipes. I travel with my stomach, and it leads the way. for the travel.