Brand-System · Holzwerk Ammann · Winterthur
Die Seite ist selbst ein Aufmass: jede Behauptung trägt eine Zahl, und die Zahl steht gross. Dieses Blatt zeigt das System dahinter — Farbe, Schrift, Motiv, Komponenten.
Das Logo ist ein einziges Zeichen: ein fettes Z aus zwei waagrechten Balken und einer tragenden Diagonalen. Radius 0 an jeder Ecke, alle Enden stumpf abgeschnitten, ein einziger Buntton, flächig, ohne Verlauf und ohne Kontur.
Daraus folgt das ganze System: Radius 0 überall, genau eine Buntfarbe, Haarlinie statt Karte, kein Schatten ausser zwei Ausnahmen. Das Z steht klein und allein — im Kopf und im Fuss, je 27 px hoch, nie als Wasserzeichen, nie vergrössert im Hintergrund.
brand/logo.png — gemessener Primärton #ec6424
Alle Werte sind deterministisch aus dem Logo gemessen. Es existiert kein selbst gemischter Hex — Abstufungen kommen aus den 12er-Skalen.
Werkbank — Grundfläche
Trägt die ganze Seite, ≈ 64 % der Fläche.
Hobelbank — zweite Fläche
Nur Preis-Band und Anfrage-Band. Genau zwei Vorkommen.
Tinte — Schrift
Alle Überschriften, alle Zahlen, Fliesstext. Als Fläche genau einmal.
Tinte leicht — Meta
Legenden, Öffnungszeiten, Fussnoten. Nie mehr als drei Zeilen.
Masslinie — Linie
Die eigentliche Grafik der Seite. Niemals Text, niemals Fläche.
Sandlinie — zweite Linie
Masskette unter Preiszahlen. Löst den Sand-Wunsch aus dem Dossier ab. Nie Text.
Akzent — Signal
Genau zwei Vorkommen: der eine Knopf, der Nav-Unterstrich. Unter 1 % Fläche. Nie Textfarbe.
Akzent Text
Die einzige erlaubte Orange-Textfarbe. Fokusrand, Link-Hover.
Aktiv-Braun
Nur der gedrückte Zustand. Löst den Wunsch-Dunkelbraun aus dem Dossier ein.
Primär-Skala 1 – 12 (gemessen, nie gemischt)
Im Build verwendet: 9 (#ec6424) · 10 (#de570f) · 11 (#c34400) · 12 (#562e1e). Die übrigen sind Reserve für Print.
Grau-Skala 1 – 12
Gesperrte Kombinationen
| Kombination | Ratio | Warum gesperrt |
|---|---|---|
| #ec6424 als Textfarbe auf #fdf6f3 | 3.06:1 | gemessen aa:false — Ersatz: #c34400 |
| #ffffff auf #ec6424 unter 19 px | 3.27:1 | nur aa_large — Knopflabel läuft auf 20 px / 600 |
| #ce6225 als Fläche | 3.64:1 | zweiter, nicht unterscheidbarer Orangeton — eine Buntfarbe im System |
| #d4cdca oder #b9ada8 als Text | 1.47:1 / 2.05:1 | reine Linienfarben |
| #81746f als Text | 4.22:1 | unter AA — Ersatz: #615753 |
Spectral 300 trägt die Zahlen, Work Sans hält den Text sachlich. Skalen-Sprungweite 68 → 48 → 36 → 26 → 20 → 13 — jede Stufe mindestens Faktor 1.3.
Nicht gewählt: Gelasio (Georgia-metrisch, liest bei 68 px als Systemschrift) und Bitter (Slab — verdoppelt die Balkenform des Logos und nimmt dem Zeichen seine Alleinstellung).
display-hero · Spectral 300 · 68 / 48 / 34 px · ZH 1.0 · -0.015em
Nur aus Massivholz.
display-1 · Spectral 300 · 48 / 40 / 30 px · ZH 1.06
Drei Generationen am selben Ort
display-2 · Spectral 300 · 36 / 30 / 26 px · ZH 1.12
Küchen nach Mass
zahl-gross · Spectral 300 · 56 / 44 / 34 px · tnum
display-3 · Spectral 400 · 26 / 24 / 22 px
Bibliothekswand über zwei Stockwerke
lead · Work Sans 400 · 26 / 22 / 19 px · ZH 1.25
Wir bauen nur nach Mass und nur aus Massivholz — kein Furnier, keine Spanplatte.
body · Work Sans 400 · 20 / 18 / 17 px · ZH 1.55
Grossvater hat 1961 in einer Remise angefangen, der Vater hat die Werkstatt an die Zürcherstrasse gebracht, Reto Ammann hat 2014 übernommen. Die Bandsäge von 1968 läuft noch. Jede Offerte entsteht nach Aufmass vor Ort.
eyebrow / nav · Work Sans 500 VERSAL · 13 px · +0.13em
bildlegende / fussnote · Work Sans 400 · 14 / 13 px · ink-soft
Küche in geölter Eiche mit Naturkante · Winterthur · 2023
Ab 28'000 heisst: Massivholz-Korpus, eigene Trocknung, Lieferung und Montage — ohne Geräte.
Jeder Auftrag beginnt mit einem Aufmass vor Ort: eine Handskizze, darin eine Masslinie — ein Haarstrich, an beiden Enden ein Quer-Tick, und das Mass sitzt in einer Lücke mitten in der Linie. Genau diese Zeichnung ist das grafische Grundelement der Marke.
Sie hält Web, Print und Social zusammen: Sektionsübergang, Leistungszeile, Preiszahl, Formularfeld, Briefkopf, Social-Post. Verboten: diagonal, gebogen, in Orange, als Rahmen um eine Box, und mehr als drei waagrechte pro Bildschirmhöhe.
Volle Masskette — Sektionsübergang
Halbe Masskette — Belegzeile
Preis-Masskette — Linie so breit wie die Zahl
Ab 3'400 heisst: Massivholzplatte nach Mass, geölt, inkl. Untergestell.
Es gibt auf der Startseite genau einen gefüllten Knopf. Sein Label läuft auf 20 px / 600, weil Weiss auf #ec6424 mit 3.27:1 nur AA-large erfüllt.
| Zustand | knopf-primaer | knopf-sekundaer | knopf-geist |
|---|---|---|---|
| default | #ec6424 / #ffffff | transparent, 1 px #261e1b | #261e1b, Unterstrich #d4cdca |
| hover | #de570f, 160 ms | Fond #261e1b, Schrift #fdf6f3 (15.31:1) | #c34400 (4.74:1) |
| active | #562e1e, scale(.985), 120 ms | #562e1e, scale(.985) | #562e1e |
| focus-visible | outline: 2 px solid #c34400, offset 2 px — auf jedem fokussierbaren Element identisch | ||
| disabled | #e2dddb / #8c7e79 | Rand #dbd5d3, Schrift #8c7e79 | — |
Fünf grosse anklickbare Zeilen, 36 px, Polster 16/12, Hover invertiert auf #261e1b. Kein Icon-Gitter, keine Karten.
Kein Fond, kein Rand rundum, kein Schatten, kein Radius. Nur eine obere Haarlinie mit 8-px-Tick. Das linke Blatt ist verlinkt — Hover dunkelt Linie und Tick.
Referenz · 2023
Küche in geölter Eiche mit Naturkante
Winterthur · Massivholz-Korpus, eigene Trocknung, Montage
ab 28'000
Referenz · 2021
Bibliothekswand über zwei Stockwerke
Zürcher Oberland · Eiche massiv, vor Ort eingepasst
nach Aufmass
Werkstatt · seit 1961
Eigene Trocknung im Haus
Kein Furnier, keine Spanplatte — auch nicht innen, wo es niemand sieht.
3 Generationen
Ebene 0 «Werkbank»
box-shadow: none — der Normalfall für alles.
Ebene 1 «Aufgelegt»
0 1px 2px rgb(38 30 27 / .06), 0 8px 24px rgb(38 30 27 / .08) — nur mobile Sticky-Leiste.
Ebene 2 «Vorgeklappt»
Drei weiche Layer — nur das mobile Navigationspanel. Nie reines Schwarz.
Feld-Token
Höhe 48 px · Radius 0 · Rand 1 px #d4cdca · Text 17 px (verhindert iOS-Zoom) · Platzhalter #615753 (6.56:1) · Fokus 1 px #c34400 plus 2-px-Ring · Fehler 1 px #b44b00 mit Fehlertext in #b44b00 (4.98:1).
Abstände
Feld → Feld in derselben Gruppe 12 px · Gruppe → Gruppe 24 px · Formular → Knopf 40 px · Knopf → Zusage 12 px. Bandpolster 112 px (Kapitel-Atempause).
«Wir bauen nur nach Mass und nur aus Massivholz. Kein Furnier, keine Spanplatte, auch nicht innen, wo es niemand sieht.»
Reto Ammann · Werkstatt seit 1961
moodboard.png — weiches indirektes Nordlicht, warmer heller Bildgrund, Holz von #e0865a bis #562e1e, Tiefen bei #261e1b statt Schwarz.
Bildrezept
Subjekt: geölte Eichenküche, Bibliothekswand, Meterstab am Werkstück, Hirnholz-Makro, Trocknungslager, Massivholztisch — menschenleer oder nur Hände.
Licht: weiches indirektes Nordlicht, 45° von der Seite, ein einziges Lichtregister, kein Blitz, keine goldene Stunde.
Komposition: Augenhöhe, 35 mm für Räume, 50–85 mm für Details, waagrechte Kanten, ruhige Leerfläche im unteren Drittel.
Stimmung: nüchtern, ruhig, wertig.
Nie im Bild: Text, Zahlen, Logo, posierende Menschen, Stock-Anmutung, Requisiten, Furnier, Hochglanzfronten, Vignette, Lens-Flares.