Suchen Sie etwas Spezielles? Sagen Sie es uns, wir besorgen fast alles.
Vier Fächer: drei aktiv (Fach 2 im Leuchtfach-Zustand, Fach 4 im Zustand «vergriffen» — ohne Schwungkante). Fahren Sie mit der Maus über ein Fach.
Das eine helle Fach auf dunklem Grund. Was, wie viel, bis wann, wie bestellen — in einem Blick. Alle Zahlen tabellarisch.
Gültig bis Samstag, 20.09.2026 · Abholung ab 07:30
Ein quadratisches Fach mit 1px-Haarlinie und dem Logo-Pinselbogen als 3px-Schwungkante an der Unterkante. Ein Fach hält genau eine Sache und einen Preis. Vom Favicon über das Preisschild bis zum Instagram-Post dieselbe Geometrie.
Nie als Hintergrundmuster. Nie zwei Schwünge in einem Fach. Nie ein leeres Fach.
Moodboard: Tageslicht 07:15, unretuschiert, quadratische Fächer, dunkler Grund.
Gemessen aus dem Logo, nicht gewählt. Kontrastwerte aus der Messmatrix.
--brand-ink · #271d1cGrund der Seite. ink/surface 15.38--brand-primary-12 · #5f231bZweiter dunkler Grund, Leuchtfach. 11.28--brand-primary · #d42c1cKnopf, Schwungkante. on_primary 5.03--brand-surface · #fdf6f4Helle Sektionen + Text auf dunkel. 15.38--brand-surface-alt · #f6efeeZweite helle Fläche. ink 14.47--brand-primary-11 · #c71a0aRoter Text nur auf hell. 5.49--brand-primary-8 · #e28273Roter Text nur auf dunkel. 6.00--brand-gray-9 · #8e7e7bRahmen aller Harassen. 4.24 > 3:1--brand-gray-7 · #cbc0bfMeta auf dunkel. 9.25--brand-ink-soft · #625755Meta auf hell. 6.53--brand-border · #d5cccbRahmen auf hellem Grund--brand-secondary · #cf4943Nur Linie und Füllung, nie Schrift. surface 4.20 > 3:1--brand-secondary-ink · #b93331Schrift-Form auf hell. 5.49 — AA--brand-secondary-ink-dark · #df847bSchrift-Form auf ink. 6.04 — AADie Logofarbe wird nie überschrieben. Braucht ein Ton Kontrast als Schrift, tritt eine zweite Abstufung daneben — die Marke selbst bleibt exakt gemessen.
| Paar | Rolle | Kontrast |
|---|---|---|
| #ffffff auf #d42c1c | Fläche mit Schrift — Marke bleibt, Schrift ist Weiss | 5.03 · AA |
| #c71a0a auf #fdf6f4 | Marke als Schrift → zweite Abstufung primary-ink | 5.49 · AA |
| #b93331 auf #fdf6f4 | Sekundär als Schrift → zweite Abstufung secondary-ink | 5.49 · AA |
| #ffffff auf #b93331 | Schrifttragende Sekundärfläche secondary-solid | 5.86 · AA |
| #cf4943 als Schrift | Verboten in jeder Grösse — Kontrast wird nicht über Schriftgrad erkauft | 4.20 · kein AA |
| #ffffff auf #cf4943 | Verboten — #cf4943 trägt nie Text | 4.48 · kein AA |
display-hero · Young Serif 400 · 76 px · 1.02 · +0.01em · uppercase
display-1 · 52 px · 1.08 · +0.01em · uppercase
display-2 · 34 px · 1.15 · 0
display-3 · 24 px · 1.2 · 0
eyebrow · Source Sans 3 600 · 12 px · +0.10em · uppercase
lead · 20 px · 1.5
Unsere Metzgerei bietet Ihnen sämtliche Stücke vom Kalb, Rind, Lamm und Poulet. Auf Bestellung erhalten Sie auch frisches Kaninchen.
numeric · 16 px · 600 · tabular-nums — Preise, Zeiten, Telefon
| Montag – Freitag | 07:30 – 20:00 |
| Samstag | 07:30 – 20:00 |
| Sonntag | geschlossen |
| Telefon | 043 233 76 16 |
| Lammvoressen, 500 g | CHF 16.90 |
| Simit, Stück | CHF 1.80 |
Die Ziffern stehen exakt untereinander — die stille Signatur dieser Seite.
Rechtecke, nie Pillen. Kein Schatten, keine Skalierung — nur Farb- und Rahmenwechsel in 0.16 s.
Hover echt · Tab-Taste zeigt den Fokusring: 2 px in Signalrot, Offset 2 px, Radius 0.
Diese Telefonnummer können wir nicht lesen. Bitte mit Vorwahl, zum Beispiel 043 233 76 16.
«Das beste ist die Bäckerei — da gibt es die besten Simit und Pide sowie Börek. Kaufe hier seit 10 Jahren ein.»
— rana S., Google-Bewertung · 5 von 5
«Besonders schätze ich die grosse Auswahl an frischem Obst und Gemüse sowie die vielen Spezialitäten, die man in den grossen Supermärkten oft vergeblich sucht.»
— S*C W., Google-Bewertung · 5 von 5
| Token | px | Einsatz |
|---|---|---|
--space-1 | 8 | innerhalb enger Gruppe |
--space-2 | 12 | Headline → Lead |
--space-3 | 24 | Raster-Gutter, Fach → Fach |
--space-4 | 40 | Gruppen innerhalb Sektion |
--space-5 | 72 | Sektion → Sektion |
--space-6 | 112 | Atempause, max. 2× |
Verhältnis 8 : 24 : 72 = 1 : 3 : 9. 32 px existiert nicht.
| Stufe | Fläche | Schatten |
|---|---|---|
| 0 Grund | #271d1c | none |
| 1 Fach | #271d1c + 1 px #8e7e7b | none |
| 2 Leuchtfach | #5f231b | none |
| 3 Tafel | #fdf6f4 | none |
| A1 Overlay | Mobil-Leiste | 2 Layer |
| A2 Panel | Mobil-Nav | 2 Layer |
Kalb, Rind, Lamm, Poulet. Kaninchen auf Bestellung. Wurstwaren aus dem eigenen Haus, auch vakuumiert.
Brot, Börek, Simit, Süssgebäck. Lahmacun am Samstag ab 14:00 — Vorbestellung empfohlen.
Gemüse und Obst saisonal, Fisch, Milchprodukte, Gewürze und Konserven aus aller Welt.
| Nie | Warum |
|---|---|
| Text über einem Foto | Kippt das Raster in Stock-Collage. Schrift steht in der Leiste unter dem Bild. |
border-radius > 0 | Keine Pillen, keine gerundeten Karten. Die einzige Rundung ist die Schwungkante. |
box-shadow ausser A1/A2 | Ebenen entstehen durch Helligkeit, nicht durch Schatten. |
| Gradient, Icon-Grid, Karussell | Baukasten-Signale. Sortiment steht als Liste, Ware als Foto. |
#cf4943 als Schrift oder Textträger | 4.20 / 4.48 — kein AA. Als Schrift gilt #b93331 (5.49), als Textfläche #b93331 mit Weiss (5.86). |
Überschreiben von --brand-primary / --brand-secondary / --brand-surface | Verlässt die Marke. Kontrast kommt aus der -ink-Stufe daneben, nie aus einer geänderten Logofarbe. |
| Fremdfarben, Tailwind-Defaults | Jede Farbe kommt aus var(--brand-*). Kein Grün, kein Gold, kein Blau. |
| Weight 300 / 500 / 700, Kursive | Young Serif nur 400 aufrecht, Source Sans 3 nur 400/600. |
Zahlen ohne tabular-nums | Bricht die Signatur dieser Seite. |