/ PARTNER
Architektur für Gewerbe und Industrie. Rationalität, Materialehrlichkeit und präzise Funktion als gestalterisches Prinzip.
Swiss Grid steht für Klarheit durch Reduktion. Kein Ornament — Raum, Linie und Typografie tragen die gesamte Kommunikation. Dieses Design signalisiert: hier wird gemessen, nicht geraten. Jedes Detail hat eine Funktion.
Passt zu
- Architekturbüros & Ingenieurbüros
- Kanzleien & Unternehmensberatung
- Medizin & Klinik
- Industrieunternehmen
- Wissenschaft & Forschung
Das ist es nicht
- Warm oder einladend
- Verspielt oder bunt
- Lifestyle-orientiert
- Emotional aufgeladen
Tinte (#111110) als Primärtone ersetzt das übliche Reinweiß-auf-Hellgrau-Muster — es kommuniziert Tiefe und Dauerhaftigkeit statt Leichtigkeit. Rot (#c41230) ist kein dekorativer Akzent, sondern der einzige Farb-Marker im System: er zeigt, was zählt — Kennzahlen, aktive Links, Hover-States. Greige (#f7f7f4) als Hintergrund ist neutral ohne leer zu wirken — die gleiche Zurückhaltung wie rohes Beton oder sandgestrahlter Stahl. Das Drei-Farben-System ist maximal, nicht minimal: weniger würde funktionieren, mehr würde stören.
| Kombination | Verhältnis | Status | Verwendung |
|---|---|---|---|
| Tinte auf Hintergrund | 17.8 : 1 | AA ✓ | Body-Text, alle Überschriften, Listeneinträge |
| Weiß auf Rot | 5.9 : 1 | AA ✓ | Primär-Button-Label "Anfrage stellen →" |
| Rot auf Hintergrund | 5.5 : 1 | AA ✓ | Akzent-Nummern, Section-Labels, Service-Hover-Reveal |
| Grau auf Hintergrund | 5.0 : 1 | AA ✓ | Beschreibungstext, Metadaten (Minimum knapp bestanden) |
| Grade | clamp()-Wert | Familie / Gewicht | Tracking | Use-Case |
|---|---|---|---|---|
| Display | clamp(60px, 9vw, 148px) | Inter, 900 | −0.04em | Cover-Headline, maximal breit ausgespielt |
| H1 | clamp(28px, 3.5vw, 44px) | Inter, 700 | −0.02em | Sektions-Haupttitel |
| H2 | clamp(17px, 2vw, 22px) | Inter, 600 | 0em | Unterabschnitte, Service-Listenköpfe |
| Body | clamp(13px, 1.4vw, 15px) | Inter, 400 | 0em | Fließtext, Projektbeschreibungen (lh 1.7) |
| Label | 10px (fix) | Inter, 500 | +0.10em | Tags, Metadaten, Nav-Links |
Brandt & Partner plant und baut Gewerbeimmobilien in Hamburg. Entwurf, Genehmigung und Bauleitung aus einer Hand — das ist nicht Selbstverständlichkeit, sondern Entscheidung.
18 Zeilen auf 600px Breite entsprechen ca. 60 Zeichen pro Zeile — dem international empfohlenen Optimum für Lesbarkeit. Inter 400 / 14px / lh 1.7 auf #f7f7f4 erfüllt diesen Standard.
Realisierte Projekte in Hamburg und Norddeutschland
Seit 2001 — kein Auftrag ausgelagert. Planung, Genehmigung und Bauleitung immer inhouse. Das ist nicht Selbstverständlichkeit, das ist Entscheidung.
Für Brandt & Partner empfehlen wir einen halbtägigen Foto-Termin mit Jasper Korth Studio: Fokus Außenaufnahmen 2–3 fertige Projekte, 1 Büro-Reportage (Team bei Arbeit, Modell/Grundriss), Detailserie Materialien. Lieferumfang: 30–40 final retuschierte Aufnahmen (Web + Print), Nutzungsrecht unbegrenzt.
- Gebäude von vorne oder diagonal — klare Geometrie
- Materialehrlichkeit: Beton, Stahl, Glas ohne Filter
- Menschen bei echter Arbeit: Hände, Pläne, Modelle
- Tageslicht oder diffuses Licht — kein dramatisches Gegenlicht
- Perspektiven die Maßstab kommunizieren
- Fertige Gebäude in realer Nutzung
- Kein Golden Hour Dramatik — zu emotional für Industriebau
- Keine Renderings statt echten Fotos
- Kein Handschlag vor Gebäude — jedes Büro macht das
- Kein Fischauge — verzerrt Geometrie und lügt über Proportionen
- Keine leeren Besprechungsräume mit Laptops
- Kein aufgehelltes oder weichgezeichnetes Betongrau
| Element | Kategorie | Dauer / Timing | Zweck & Begründung |
|---|---|---|---|
| Service-Hover Rot-Reveal | Productive | 250ms · ease | Zeigt Klickbarkeit an — Rot als Aktion-Signal ist gelernt |
| Button-Fill Hover | Productive | 200ms · ease-out | Primäre CTA wird klar signalisiert, kein Zweifel |
| Pfeil-Bewegung Hover | Productive | 250ms · ease | Richtungs-Signal — diagonal oben-rechts = extern/weiter |
| Sidebar Nav Active-State | Productive | instant on scroll | Orientierung im Dokument — zeigt aktuelle Position |
| Farbswatch Hover | Productive | 300ms · ease | Mehr Farb-Detail bei Interaktion — natürliche Erkundung |
| Scroll Fade-In Sektionen | Expressive | 500ms · ease, 14px Y | Seitenwechsel-Rhythmus — Sektion für Sektion, wie Blättern in einem Projektbuch |
| Zahlen-Counter (23 / 180 / 12) | Expressive | 1100ms · ratchet | Macht Erfahrung spürbar — 23 Jahre zählen sich auf, nicht einfach da |
prefers-reduced-motion: alle Expressive Animations deaktiviert. Productive Animations auf opacity-only reduziert.