H
Honorarstreit.
Steuerrecht
Start/Design-System
Kolophon

Das Design-System.

Diese Seite dokumentiert die gestalterischen Entscheidungen hinter honorarstreit-steueranwalt.de: Farbpalette, Typografie, Motion-Sprache und technische Grundsätze. Die Site verwendet Vanilla CSS und HTML, lokal gehostete Fonts, kein Build-Tool, keine Tracker.

Farbpalette

Petrol als Akzent (sachlich, juristisch, ruhig); Gold-Ocker als Sekundär­akzent (warm, flach, papier­nah); Burgund nur für Alarme. Hintergrund und Tinte sind warmgrau statt reinweiß / reinschwarz - papierhaft.

Paper#FAF8F3
Paper Deep#F2EFE7
Accent (Petrol)#0D4F5C
Accent Deep#083742
Gold#B4883C
Alert#9C2B2B
OK#2F6B3D
Ink#141619

Typografie

Drei Schriften, lokal gehostet, mit aktiviertem Optical-Sizing und Standard-OpenType-Features.

Source Serif 4
Display
Würdig zu erweisen.
Source Serif 4
Display Italic
„Treuhänder seiner Partei."
Source Sans 3
Body
Der Mandant kommt nicht freiwillig in die Kanzlei, sondern weil er muss.
JetBrains Mono
Mono Caps
§ 43 BRAO · BVerfG, NJW 1988, 191 · Az. X B 2/26

Schriftgrößen-Skala

H1
36-64 px
clamp(36px, 5.8vw, 64px)
H2
26-38 px
clamp(26px, 3.5vw, 38px)
H3
18-21 px
clamp(18px, 1.8vw, 21px)
Body
17 px
line-height 1.65
Lede
18-22 px
clamp(18px, 2.2vw, 22px)
Small
13-14 px
für Meta-Pills, Captions

Motion-Sprache

Eine einzige Easing-Familie für die ganze Site: cubic-bezier(.16, 1, .3, 1) (Spring) als Standard. Vier Dauern: 180/320/520/780 ms.

--ease-spring
--ease-snap
--ease-out
--ease-in

Layout-System

  • .wrap (1200 px max) für Standard-Sektionen
  • .wrap-prose (720 px) für Lese-Inhalte
  • .wrap-wide (1400 px) für Article+ToC-Layouts
  • Spacing-System: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 56 / 80 / 120 px
  • Border-Radii: 6 / 12 / 20 px (sm / base / lg)

Technik-Grundsätze

  • Vanilla CSS und HTML, kein Framework, kein Build-Tool
  • Lokal gehostete Schriftarten (Source Serif 4, Source Sans 3, JetBrains Mono)
  • Anonymisiertes Aufruf-Logging via 1×1-Pixel + JS-Beacon (siehe Datenschutz)
  • Cache-Busting via ?v=YYYYMMDD-N auf Assets
  • HTML mit Cache-Control: no-cache, must-revalidate
  • Assets mit max-age=3600 + ETag-Revalidation
  • Eingesetzte 2026er Web-Standards: scroll-timeline, view-transition, @starting-style, @property, interpolate-size, field-sizing, hanging-punctuation, color-mix, @container, Subgrid, Speculation Rules API
  • Accessibility: prefers-reduced-motion, prefers-contrast: more, prefers-reduced-data, forced-colors, sichtbare Focus-States, Skip-Link, ARIA-Roles, Tastatur-Navigation

Schriften-Lizenzen

Source Serif 4 und Source Sans 3 sind unter SIL Open Font License lizenziert (Adobe / Open Source). JetBrains Mono ist unter SIL Open Font License lizenziert (JetBrains).

Setze in Source Serif 4 mit JetBrains Mono. Designed in Herzogenrath. Vanilla CSS, hand-kuratiert, keine Tracker.