Fuchsbau Gestaltungskatalog

Kanzlei klassisch — Autorität oben, moderner Fließtext; gemäßigte x-Höhen

Kanzlei zeitgenössisch — beide kantig-redaktionell, klarer Klassenkontrast

Salon, Praxis, Wellness — beide weich und rund

Agentur, Produktseite — eigenwillige Grotesk oben, ruhige Serif unten

Dachdecker, Bau — Plakat-Kondens trifft Werkschrift

Technik, Industrie — Ingenieurs-Ton; Plex liefert Mono/Serif mit

Verein, Sport — Kondens-Headline, Slab-Fließtext

Beratung, Coaching — ein Haus, gleiche Proportionen

SaaS-Produkt — Superfamilie Display/Text

Kreativ, Kinder, Gastro — Handschrift nur eine Zeile

Entwicklerprodukt — Mono als Zweitstimme

Psychologische Beratung, Mode — elegant, dünne Striche

Café, Buchhandel, Kultur — warme Schwere oben, klare Sans unten

Verein traditionell, Schützen, Karneval — geometrisch-kräftig gegen klassizistisch

Detektei, Archiv, Ausstellung — Schreibmaschine durchgehalten

Kunstraum, Festival — breite Fette gegen neutrale Grotesk

Umweltverein, Kampagne — die Schrift schmilzt mit der Achse — Botschaft im Schnitt

Redaktion, Lokalnachrichten — Slab-Headline, Allzweck-Text

Einzelberater, Kleinsthandwerk — eine Bildschirmhöhe

Handwerk, Praxis, Salon

Kanzlei mit Inhalten, Verein mit Nachrichten (Monocle-Prinzip)

Fuchsbau-Produktseiten (Linear-Prinzip, ohne Glow)

Shop, Kurs-/Angebotsseiten (IKEA-Prinzip)

Verein, gemeinnützig, Kultur (Patagonia-Prinzip)

Funnels, Kampagnen — ein Ziel, kein Menü

Satzung, Preisliste, lange Erklärseiten

nur mit echtem Kundenfoto; nie Stock

nur Schrift, sehr groß; braucht Display-Schrift und einen echten Satz

Text links, Bild rechts; Bild darf anschneiden — der Standardfall

Produkt/Objekt freigestellt auf Fläche; Produktseiten, Handwerk mit Objekt

Fläche mit Papier/Korn, Schrift darauf — ersetzt fehlendes Foto ehrlich

Bildsequenz oder stummes Video ≤ 6 s; reduced-motion → Standbild

freundlich — Salon, Verein

Kanzlei, Handwerk, Technik

Zweit-CTA; Hover füllt

Listen, Karten; Pfeil wandert 4 px

Editorial

Landingpage; volle Breite, Zusatzzeile

Brutalismus, Werkstatt

überall erlaubt (Porsche/Apple-Prinzip)

1 px, Rahmenfarbe

3–4 px, kurz, Akzent, links unter der H2

nur mit tragender Zahl

eines je Seite; Name mit Funktion

3–5 Reiter

nativ <details>

pausiert bei Hover, steht bei reduced-motion

Geschichte, Ablauf

01/02/03 in Display-Schrift

eine Kachel groß, mehrere klein — statt drei gleicher Karten

Editorial, Kanzlei-Ratgeber

Patagonia-Prinzip

IntersectionObserver (überall) oder animation-timeline: view() (Safari 26+, Firefox fehlt) — mit @supports-Weiche

scale(.96→1) + opacity; nur Bilder und Karten

cubic-bezier(.34,1.56,.64,1); echtes Federn mit linear() ab Safari 17.2 — nur kleine Elemente

transition-delay: calc(var(--i)*80ms); höchstens 6 Kinder

position: sticky; Inhalt läuft durch — hier scrollen

nur Hero, nur Desktop, subtil; hier mit Maus über der Fläche

siehe E7 — eines je Seite

Spans aria-hidden, Original als aria-label; nur H1

width in ch + steps(); nur Monospace, nie Schleife

nur mit echter Zahl

Spielerei; @media (hover: hover)

transform + Schatten; Safari: Fläche nicht auf tr, sondern auf td::after

Start-/Endframe statt Video (Apple)

font-variation-settings; kurze Überschriften

Standard zu K4

backdrop-filter; Safari 18 ohne Prefix; nie über bewegtem Inhalt; verbraucht — nur mit Grund

zwei Schatten; kippt an WCAG — nur dekorativ

Neumorph + inset + große Radien + Pastell

ungleiche Spans

harte Rahmen, Versatz-Schatten

feTurbulence als statische Kachel auf ::after, soft-light, Deckkraft ≤ .5 — billigster Weg aus der KI-Optik

2–3 Blobs, blur(60px), Bewegung nur transform; Handy statisch; nicht dunkel + Neon

grayscale + Farbfläche multiply; isolation: isolate

inset box-shadow oder radial-gradient

Fläche aus der Farbwelt, nicht Grau

eine je Seite, Text ≥ 4,5:1

Sektionsübergang per mask-image / clip-path

drei Token: nah / mittel / weit

1 px + 1 px, 3 px Abstand — Urkundenton

Textur als ::after mit multiply/overlay, Kachel ≤ 50 KB — Standard für H5 · live

wie O06 auf dem Bild · live, statisch

mask-image (Baseline 12/2023); Maske per HTTP laden · live per Maske

mask-image mit Riss-PNG oder clip-path · live grob, Fasern = PNG

nur PNG-Overlay oder komplett gerendert (fal/Photoshop); SVG-Nachbau teuer und in Safari ungenau — hier nur Platzhalter · vorrendern

Punktraster radial-gradient + multiply · dekorativ live, echt vorrendern

padding, Schatten, rotate · live

radial-gradient + screen · live

siehe O08 · live

Textur-Maske + rotate · live

grayscale + contrast + Korn + eine Farbe · live

drop-shadow folgt der Alpha-Kontur · live

Special Elite (ab Werk) + feTurbulence/feDisplacementMap inline; eine Überschrift, nie zehn — auch auf Bilder anwendbar

background-clip: text mit Aquarell-Bild; Safari: nur eine Hintergrundebene (WebKit 267129); Kontrast prüfen

text-shadow 0 1px weiß auf dunkler Schrift

Maske + rotate

-webkit-text-stroke; nur Display-Größen

wie S02 mit Papier/Holz/Metall

Fraunces WONK/SOFT bei Hover

mehrere text-shadow; ab ~8 langsam

nur Hover, kurz; WCAG 2.3.1

SVG-Pfad, stroke-dasharray

linear-gradient unter dem Wort

::first-letter in Display/Serif

Versalien + letter-spacing — nie mit Mono

ein Wort in Akzent oder Kursive — eines je Seite

MIT · Kanzlei, ruhige Seiten

MIT · Vorgabe-Familie, 9.072 Icons

MIT · Fläche in Akzentfarbe — dieselbe Familie wirkt wie eine andere

MIT · Handwerk, robust

MIT · Verwaltung, Buchhaltung, Formulare (schon im PDF-Web)

MIT · feiner Strich — Kanzlei

Apache 2.0 — Lizenztext mitliefern · Line/Fill paarweise

ISC · nur UI-Elemente — das ist der Einheitslook

Probe 01.11.2026: Suche → Pack → Download → SVG auf der Werkbank. Sets werden je Kunde gezogen, nicht auf Vorrat (Download-URL 3 Tage gültig, Fair-Use-Drossel). Nicht in den Verein-Baukasten (Lizenz: „tool or template“).