Mehr Umsatz für Restaurants — mit einem einfachen Scan.
The complete reference for our brand — story, logo, color, type, voice, layout, components and tokens.
This document is the single source of truth for the TischTap brand. It compiles every rule, asset and example needed to build on brand — whether you are designing a sales page, a guest-facing menu, a social post or a printed table card.
Where a rule references a token, it maps directly to colors-and-type.css. Logo files live in /assets/logo/. When in doubt, default to restraint: one accent, white space, and a confident, plainspoken voice.
The Brand
TischTap sells elegant tabletop QR & NFC card stands for restaurants, cafés and bars. A guest taps or scans the card on their table and instantly lands on a digital menu, the Wi-Fi page, or a Google / Instagram review — no app, no friction.
The promise is revenue, not technology: faster orders, more reviews, a professional digital presence with zero effort for the owner. Every brand decision serves that plainspoken, benefit-first pitch.
What we offer
- Physical QR / NFC table cards — elegant stands for every table. Basic (15 €/table) and Smart (25 €/table) tiers, plus a one-time Setup & Branding fee (150 €).
- Digital surfaces the cards link to — a multilingual digital menu, Wi-Fi landing page, and review aggregation (Google · Facebook · Instagram), all carrying the restaurant's own branding.
- Website service — mobile-first restaurant websites in three annual packages: Starter (800 €), Growth (1.600 €, "Am beliebtesten"), Pro (2.500 €).
Audience & market
We speak directly to the restaurant owner — busy, practical, sceptical of gimmicks. The brand operates in Germany (Koblenz region in sample menus). Real clients include Abla's Frühstück, Gusto by Giovanni, Il Forno, River Lounge and Urfa Grill 63.
The pitch, in one line
Positionierung
"Mehr Umsatz für Restaurants — mit einem einfachen Scan."
Moderner · Hygienischer · Schneller · Profitabler. We sell the upgrade with an adjective ladder, and reassure explicitly: "Keine verpflichtende monatliche Laufzeit."
Personality & Principles
Confident, warm and unmistakably restrained. The brand earns trust by looking clean and saying things plainly — never loud, never cluttered.
Brand personality
Design principles
1 · One accent does the work
Brick red on white. No second hue, no gradients on brand surfaces. Restraint is the look.
2 · White is the field
Red is the ink, not the background. Generous white margins everywhere except the cover.
3 · Weight, not decoration
One type family. Heavy headers over regular body carry hierarchy — no ornament needed.
4 · Sell outcomes
Every message leads with the benefit to the owner — more revenue, more reviews, less effort.
Logo — Anatomy
The logo is the product itself: the folded tabletop stand, seen in perspective. Its leaning face carries the tap-dot above three menu lines; a rear easel leg gives it depth. One color, pure geometry, infinitely scalable.
The stand
The folded card stand in perspective — tangible, friendly, the product made into a mark. Corners are gently rounded; the rear leg branches cleanly off the face.
The tap-dot
The circle on the face is the tap moment — the same dot that carries the brand in the wordmark "Tap".
The menu lines
Three lines stand for the menu, the Wi-Fi and the review — everything a single scan unlocks.
The mark is built on a 100×100 grid. The wordmark is set in Poppins Bold, camel-case, two-tone: Tisch in ink, Tap in red.
Logo — Lockups & Variants
One family, every size — from app icon to letterhead. Use the horizontal lockup wherever it fits; reach for the others only when the context demands.
Primary — horizontal lockup. The default. Preferred in headers, documents, signage.
Stacked lockup — narrow / vertical contexts.
Mark alone — when the brand is already established.
App icons — circle (avatar) & tile (app).
Reversed on red — white face, red detail, deep-brick rear leg.
Single-color / ink — engraving, fax, stamp, one-color print.
Logo — Clear Space & Sizing
Give the logo room and never let it shrink past legibility. Clear space and minimum sizes are non-negotiable.
Clear space
Keep clear space on all sides ≥ the height of the tap-dot. Nothing — type, image edge, or other logo — intrudes into this zone.
Minimum size
Below ~40 px the menu lines close up — switch to the circle icon or the simplified favicon mark for very small applications.
Logo — Color & Misuse
Three approved color treatments. Everything else is a misuse — the mark is geometry, not a canvas.
Red on light — the default.
Reversed on red.
Ink — single-color / mono.
Don't
Also avoid: placing the red mark on a busy photo or a low-contrast field, re-typesetting the wordmark in another font, adding a tagline inside the clear-space zone, or outlining the mark. When a background is unavoidable, use the reversed-on-red lockup or place the logo inside the circle icon.
Color
A genuine single-accent system. Brick red #AB1E03 does everything — headers, rules, chips, the motif. White is the field; a warm near-black handles long-form body. No gradients, no second hue.
Primary & red family
Neutrals (warm-leaning)
Usage proportion
Red is an accent, not a flood. Reserve full-bleed red for the cover and the reversed lockup. On content surfaces, white dominates and red punctuates.
Contrast & accessibility
| Pairing | Ratio | Normal text | Large / UI |
|---|---|---|---|
| Brick red on white | 7.2 : 1 | ✓ AAA | ✓ AAA |
| White on brick red | 7.2 : 1 | ✓ AAA | ✓ AAA |
| Ink on white | 13.8 : 1 | ✓ AAA | ✓ AAA |
| Deep brick on white | 9.6 : 1 | ✓ AAA | ✓ AAA |
| Ink 3 on white | 2.9 : 1 | — decorative only | ✓ AA (UI) |
Brick red clears AAA for body text on white — use it freely. Keep Ink 3 for placeholders and hairlines, never for reading copy.
Typography
One family — Poppins. Heavy weights for headers, regular for body. The weight contrast carries the brand's friendly-geometric character; no serifs, no second face.
The weights
Body, captions
Leads, emphasis
Sub-heads, chips
Headers, wordmark
Heroes (sparing)
Type scale
Usage & pairing
Do
- Pair one heavy header with regular body — let weight build hierarchy.
- Set heroes tight (-0.01em); keep body at line-height ~1.55.
- Color headers red, body ink. Reserve red body for pricing pages.
Don't
- Introduce a second typeface or a serif.
- Stack three+ weights in one block.
- Letter-space body text (only the eyebrow is tracked).
- Set long passages in all-caps or in red.
Casing rules
Eyebrow — ALL CAPS, letter-spaced 0.14em (TISCHTAP). Headers & chips — Title case with German noun capitalization ("Was ist enthalten", "Digitales Menü"). Pricing rows — ALL CAPS (STARTER, GROWTH, PRO). Body — sentence case. Never the informal address; always formal "Sie / Ihr".
⚠ Poppins is a stand-in for the deck's licensed face — swap the @font-face in /fonts/ when the real files arrive.
Iconography
Few icons, all simple line glyphs in the red accent — thin-stroke, rounded, friendly-geometric. Restraint over a sprawling icon set.
Check-in-circle — the workhorse; marks every included feature.
Right arrow — cause→effect in copy, and before section headers.
Round bullet — benefit / spec lists, usually red.
Tap-target — the identity motif (see §15).
There is no emoji and no decorative illustration anywhere. For UI surfaces that need more icons (nav, social, menu rows), use Lucide via CDN — a thin, rounded, open-stroke set that matches the character. Render in red or ink, stroke ~1.75–2. ⚠ Lucide is a stand-in; the brand ships no icon library of its own.
Voice & Tone
German, professional, benefit-first. We speak to the restaurant owner with respect — formal "Sie / Ihr" — and sell outcomes, not features.
In practice
„Mehr Google-Bewertungen pro Woche — ohne Aufwand für Ihr Team."
„Hol dir jetzt mega viele Reviews!! 🚀🔥"
„Keine verpflichtende monatliche Laufzeit."
„Our synergistic platform leverages QR technology."
Copy patterns
- Benefit bullets are short noun-phrases: "Schnellere Bestellungen", "Mehr Bewertungen pro Woche".
- Adjective ladders sell the upgrade: Moderner · Hygienischer · Schneller · Profitabler.
- Each tier closes with a bold red Positionierung: line stating who it's for.
- Code-switch freely on industry terms — Tap & Scan, Landing Page, Onboarding, Add-ons — don't over-translate.
Numbers & punctuation: Euro amounts are number + thin space + € (150 €, 1.600 € / 1 Jahre); German period thousands-separator. Arrows → connect cause and effect inline.
Layout & Composition
The brand is print-led and framed. Every content page carries a thin red rule top and bottom, a right-aligned eyebrow, and generous white margins.
The framed page
Red rule top & bottom · eyebrow top-right · the title sits in the white field between.
Principles
- White is the canvas — let it breathe. Margins are generous.
- Align to a clear left edge; ragged-right body.
- Red hairlines divide pricing sections; neutral hairlines elsewhere.
- The cover is the one exception: full-bleed red with the white wordmark bottom-left.
Components
Flat, print-derived building blocks. Subtle elevation is allowed on screen, but the instinct stays flat.
Chips & labels
Solid red chips (8px radius, white bold) for feature labels; outlined red rows are the quieter companion.
Buttons
Primary — solid red, white text, 8px radius; hover → deep brick, press → darken + scale(0.98). Secondary — white fill, red border; hover → red-tint wash. Badge — full pill, reserved for "Am beliebtesten".
Cards & lists
Beispiel
Outlined callout card — white fill, 1.5px red border, 16px radius, red bold title. Used for "Beispiel", "Unsere Arbeit", "Warum dieser Preis?".
- Mehr Google-Bewertungen pro Woche
- Schnellere Bestellungen
- Professioneller Auftritt ohne Aufwand
Pricing feature lists use the check-in-circle glyph. Corner radii: chips 8px · image frames 14px · cards 16px · pills 999px.
Imagery
Warm, ambient restaurant scenes inside rounded-rectangle frames. Where real imagery isn't placed, a flat warm-grey rounded rectangle stands in.
Image frame — 14px radius, no border.
Placeholder — flat warm grey #E2DEDA.
Over photo — white-at-92% label only where legibility demands.
Vibe: warm, low-light restaurant glow — food on tables, families dining, the product stand in situ. No textures, no photographic full-bleed backgrounds, no heavy filters.
Motion
Calm and print-derived. Motion is restrained — short fades and slides, ease-out. No bounces, no flashy parallax.
Duration
150–220ms for most transitions. Quick, never sluggish.
Easing
ease-out — settle, don't bounce.
States
Hover = quick color shift. Press = small scale(0.98). Focus = 2px red ring at 40%.
Motif
Beyond the logo, one device signals the brand: the tap-target — a red ring with a solid center dot, sometimes drawn as a concentric ripple. Read it as a scan/tap signal. For accents only — never as the logo.
Ring + dot · concentric ripple · lone dot. Recreated geometrically (CSS / SVG circles) — never a detailed illustration.
Design Tokens
Everything above maps to CSS custom properties in colors-and-type.css. Build against the tokens, not the raw values.
Radii
| Token | Value | Use | Preview |
|---|---|---|---|
--tt-r-chip | 8px | Capsule feature labels | |
--tt-r-img | 14px | Image frames | |
--tt-r-card | 16px | Outlined callout cards | |
--tt-r-pill | 999px | "Am beliebtesten", dots |
Spacing (4px base)
| Token | Value | |
|---|---|---|
--tt-s1 … s4 | 4 · 8 · 12 · 16px | |
--tt-s5 … s8 | 24 · 32 · 48 · 64px |
Borders & shadows
| Token | Value | Use |
|---|---|---|
--tt-border | 1px solid #E4E0DC | Neutral hairline |
--tt-border-red | 1.5px solid #AB1E03 | Callout cards |
--tt-rule | 2px solid #AB1E03 | Top/bottom page rule |
--tt-shadow-sm | 0 1px 2px rgba(42,39,36,.06) | Subtle lift |
--tt-shadow-md | 0 6px 20px rgba(42,39,36,.10) | Card elevation (sparing) |