Tischino · Marke & Gestaltung

Design-System

Alles, was Tischino aussehen lässt wie Tischino: Logo, Farben, Schrift, Formen, Komponenten und Bewegung. Für Website, Apps, Print und Kundenseiten.

Prinzipien

Sticker auf Pastellpapier

Flächen sind ruhig und hell, darauf kleben laute, farbige Sticker. Keine Fotos nötig, keine Verläufe.

Eine Kontur für alles

Jedes Element bekommt 1,5 px Schwarz. Die Kontur hält das bunte System zusammen.

Laut, aber lesbar

Die Display-Schrift darf riesig sein. Fließtext bleibt ruhig, groß genug und gut lesbar.

Bewegung mit Absicht

Animation erklärt oder belohnt. Wer „Bewegung reduzieren“ einstellt, bekommt eine ruhige Seite.

Logo

Die Bildmarke zeigt eine Servierglocke, deren Deckel sich gerade hebt, mit drei Funken: der Moment „Tischino, deck dich“. In der Wortmarke sind die i-Punkte die roten Knäufe der Glocke.

Schutzzone

Rund um das Logo bleibt mindestens die Höhe eines i-Punkts mal zwei frei. Keine Sticker im Logo.

Mindestgröße

Bildmarke ab 24 px, komplettes Logo ab 120 px Breite. Darunter nur die Bildmarke verwenden.

Nicht erlaubt

Logo verzerren, drehen, Farben tauschen, Kontur entfernen, Schatten oder Verläufe ergänzen.

Bildmarke als SVG

Farben

Zehn Farben, alle als CSS-Token. Klick auf eine Farbe kopiert den Hex-Wert.

Typografie

Bowlby One für alles Laute, Figtree für alles Lesbare. Beide liegen lokal im Projekt.

Display XLBowlby One · clamp(64–250px) · Zeilenhöhe 0,8

0 % Provision.

DisplayBowlby One · clamp(48–150px) · Zeilenhöhe 0,8

Faire Preise.

ÜberschriftBowlby One · 26–44px · Zeilenhöhe 0,85

Stammgäste-Programm

LeadFigtree 700 · 18–24px · Zeilenhöhe 1,25

Deine Stammgäste bestellen direkt bei dir.

FließtextFigtree 500 · 16px · Zeilenhöhe 1,45

Liefergebiete per Postleitzahl oder Radius, eigene Lieferkosten, Wunschzeit.

LabelFigtree 700 · 12px · Versalien · +0,032em

Alles in einem System

Formen & Abstände

20 pxKarten, Felder

40 pxGroße Karten, Mockups

PillButtons, Chips, Nav

1,5 pxKontur, immer Schwarz

Abstände folgen einem 4-px-Raster. Seitenrand clamp(16–48 px), Abschnitte clamp(64–140 px) oben und unten. Harte Versatzschatten (10 px 10 px 0 Schwarz) nur für herausgehobene Objekte wie Formular und Mockups.

Komponenten

ButtonsDemo buchen Ersparnis berechnen

ChipsNeuIn der KücheUnterwegsBestätigt

LabelRestaurant-Software · an averlabs company

Karte

Stammgäste

Digitale Stempelkarte und Geburtstagsgutschein.

Feld

Restaurant

Sticker & Icons

Alle Grafiken liegen als SVG-Symbole in StickerDefs.tsx und werden mit <Icon id="…" /> eingesetzt.

logo

st-coin

st-pizza

st-check

st-bell

st-noodle

ic-web

ic-ride

ic-cal

ic-heart

ic-qr

ic-pay

ic-gift

ic-star

ic-printer

Bewegung

Einfederncubic-bezier(.34, 1.56, .64, 1)

Buchstaben, Sticker, Karten. Leichtes Überschwingen wie ein aufgeklebter Sticker.

Gleitencubic-bezier(.65, 0, .25, 1)

Schubladen, Scrollen in den Mockups, Seitenwechsel.

Wischercubic-bezier(.76, 0, .2, 1) · 1,05 s

Kreis-Wischer zwischen Website-Stilen.

Schwebenease-in-out · 5–7 s · endlos

Sticker und Handy-Mockup, ruhig im Hintergrund.

Sprache

So klingen wir

Wir duzen. Kurze, klare Sätze aus Sicht des Gastronomen. Konkrete Zahlen statt Superlative. „0 % Provision“, nicht „unschlagbar günstig“.

Beispiele

✓ „Deine Stammgäste bestellen direkt bei dir.“
✓ „Live in 7 Tagen.“
✗ „Revolutionäre All-in-One-Lösung“
✗ „Jetzt durchstarten!“

Website-Stile für Restaurants

Die fünf Looks aus der Live-Vorschau. Jeder Stil wird pro Restaurant mit Logo, Farben und Fotos angepasst.

ClassicoKlar, kirschrot, elegantLive-Demo: Bestellung aufgeben

BottegaHandgemacht, Collage, SerifenLive-Demo: Tisch reservieren

VivaceLaut, knallig, Street-FoodLive-Demo: Ganze Karte öffnen

NotteDunkel, edel, GoldLive-Demo: Gutschein verschenken

MattinaHell, weich, Café-GefühlLive-Demo: Abholung vorbestellen