Kadeka-SI/web-design-base-v1

Was macht web-design-base-v1?

Standard. Jede Website sieht art-dirigiert für ihr eigenes Thema aus, kann nicht mit einer Vorlage verwechselt werden, ist technisch in jedem Detail korrekt und verwendet Typografie als Hauptwerkzeug.

Methode. Lies das Thema, nenne eine konkrete visuelle Idee, baue das System auf, plane den Inhalt, dann codiere. Das System existiert vor der ersten Codezeile, weil Entscheidungen, die während des Codierens getroffen werden, zu Standardlösungen abdriften.

0. Wie man dieses Skill liest

Stufe	Bedeutung
Tor	Wird am Ende geprüft. Eine Seite, die ein Tor nicht besteht, ist nicht fertig.
MUSS / DARF NICHT	Standardrecht. Weiche nur ab, wenn der Nutzer danach fragt; sag dies in einem Satz.
SOLLTE	Starke Voreinstellung. Weiche stillschweigend ab, wenn das Thema es erfordert.
KANN	Erlaubt, wenn es dem Thema dient.

Priorität: Tor 1 und 2 (Barrierefreiheit) → die explizite Anfrage des Nutzers → MUSS → SOLLTE → KANN. Wenn der Nutzer etwas verlangt, das ein Tor bricht, baue die nächstgelegene Version, die besteht, und sage, was du geändert hast. Innerhalb einer Stufe gewinnt die spezifischere Regel.

Beispiele sind Demonstrationen, keine Vorlagen. Jede Palette, Schriftpaarung, Fährfahrplan und Code-Wert unten zeigt das Format einer guten Antwort. Das unveränderte Kopieren in ein nicht verwandtes Thema ist der häufigste Fehler dieses Skills. Wenn du eine aufgeführte Palette oder Paarung wie sie ist auswählst, begründe dies im Plan mit einer Tatsache über das Thema.

1. Fünf Tore

1. Erster Paint und kein JS. Die Hero-Überschrift ist ab dem ersten Frame sichtbar: unverschoben, unbeschnitten (einschließlich Umlautpunkte auf Ä Ö Ü), niemals animiert. Mit deaktiviertem JavaScript oder reduzierter Bewegung ist die Seite vollständig.
2. Kontrast. Fließtext ≥ 7:1, gedämpfter Text und Akzent-als-Text ≥ 4,5:1, große Überschriften ≥ 4,5:1, strukturelle Ränder, Fokusringe und UI-Teile ≥ 3:1. Berechnet für jedes tatsächlich verwendete Text/Oberflächen-Paar, nicht angenommen (§6).
3. Palettendisziplin. Hintergrund, Tinte, ein Akzent, plus Abstufungen von Hintergrund/Tinte. Keine Verläufe, Glühen, Glasmodellierung oder farbige Schatten.
4. Vollständigkeit. Jeder Abschnitt hat reale Substanz (§8), jeder Link führt zu einem absichtlichen Ziel, jeder erforderliche Zustand existiert.
5. Spezifisch. Wenn die Palette und Schriftart unverändert zu einem anderen Thema wechseln könnten, ist die Arbeit nicht erledigt.

2. Wähle den Modus

Modus	Verwendung für	Anzuwendende Regeln
Showcase	Landing, Portfolio, Shopfront, Editorial, Event, Corporate	alles außer §12
Produkt-UI	Dashboard, Admin, Tool, App, formularlastige Abläufe	§1–§6, §10, §11, §12; überspringe Hero-Archetypen und den Abschnittspool
Dokumentation	Dokumentationen, Handbücher, Modellkarten	Typografie und Farbe des Showcase, Struktur der Produkt-UI (Inhaltsverzeichnis, Code, Zustände)
Audit	„Überprüfe/verbessere meine Seite“	liste Befunde auf, patche nur, was kaputt ist, behalte die bestehende Identität
Iteration	„ändere X“	ändere nur das benannte Token oder die Regel und ihre direkten Abhängigkeiten; keine stillschweigenden Refactorings

Wenn der Nutzer eine Marke liefert (Farben, Logo, Schriften), ist die Marke die Palette und Schriftart. Berechne deren Kontrast. Wenn der Markenakzent als Text 4,5:1 nicht besteht, verwende ihn nur für große oder nicht-textuelle Elemente und füge eine dunklere Textvariante desselben Farbtons hinzu.

3. Methode für Build

Schreibe den Plan vor dem Code: 12–16 Zeilen in der Sprache des Nutzers (Iteration: ein 3-zeiliger Diff).

3.1 Lies das Thema. Was muss der Besucher tun oder verstehen? Wie sieht, klingt und fühlt sich das Thema an seinem realen Ort an (Hafen, Gießerei, Labor, Küche, Gerichtssaal, Archiv)? Was ist das eine, woran sie sich erinnern müssen?

3.2 Benenne die visuelle Idee. Ein Satz, der ein konkretes Objekt, Material oder eine Konvention aus dem Thema benennt. Beispiel für eine Fährlinie: „ein gedruckter Abfahrtsfahrplan: schwere kondensierte Ziffern, linierte Zeilen, die Tafel als Hero.“ Abstrakte Adjektive („modern, sauber, kühn“) und Farblisten sind keine Ideen. Originalitätstest: nenne drei Dinge, die eine generische Seite dieser Kategorie hat, und bestätige, dass dieses Design keines davon hat.

3.3 Baue das System als Tabelle im Plan auf:

Feld	Wert
Palette	bg, ink, accent (hex), das Material, nach dem sie benannt ist, berechnete Verhältnisse pro verwendetem Paar
Schrift	Display + Textschriftart, Begründung zum Thema, längstes Wort und seine mobile Größe
Hero	Archetyp (§7.1) + einzeilige Begründung
Layout	Basislayout (§7.2) und wie die Abschnitte es variieren
Bewegung	ein Signaturmuster + optionales unterstützendes Muster
Abschnitte	geordnet, mit jeweiliger Aufgabe und Form
Signaturmoment	das eine, woran sich ein Besucher erinnert

3.4 Plane den Inhalt. Liste jeden Abschnitt mit konkreten Fakten, Schritten, Namen, Zahlen, Daten, Preisen auf. Erfundener Inhalt ist erlaubt, wenn er intern konsistent und markiert ist (§8.3).

4. Grundlagen

4.1 Der Kopf ist Teil des Designs

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fähre Norddeich: Abfahrten und Frachtraten</title>
  <meta name="description" content="Abfahrtsplan, Frachtraten und Kontakt der Fährlinie Norddeich–Borkum.">
  <meta name="theme-color" content="#F6F1E6">
  <meta property="og:title" content="Fähre Norddeich: Abfahrten und Frachtraten">
  <meta property="og:description" content="Abfahrtsplan, Frachtraten und Kontakt.">
  <meta property="og:locale" content="de_DE">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23C0430B'/%3E%3C/svg%3E">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Public+Sans:wght@400;500;600&display=swap">
  <script>
    /* Motion gate: hidden start states exist only if this class is set (§9) */
    if (!matchMedia("(prefers-reduced-motion: reduce)").matches && "IntersectionObserver" in window)
      document.documentElement.classList.add("js-motion");
  </script>
  <style>/* §4.2 base, §4.3 tokens, then components */</style>
</head>

• MUSS: lang stimmt mit dem Text überein, title und description sind spezifisch, die Schriftart-URL entspricht den in §5 gewählten Schriftfamilien und endet mit display=swap, ein Favicon ist vorhanden (es vermeidet einen 404 und sieht fertig aus).
• DARF NICHT: leerer Kopf, lang="en" bei deutschem Text, Schriftarten ohne display=swap.
• Datenschutz (EU/DE). Google Fonts, die von Google-Servern geladen werden, übertragen Besucher-IPs; deutsche Gerichte haben dies als GDPR-Problem behandelt. Für einen Prototyp ist es akzeptabel. Für die Produktion sage im Bericht, dass Schriftarten selbst gehostet werden sollten (woff2-Dateien, @font-face). Wenn die Umgebung externe Schriftarten blockiert, müssen die Fallback-Stapel (§4.5) immer noch designed aussehen.

4.2 Basis-CSS

Beginne jede Seite mit dieser Grundlage. Sie verhindert verschobene, beschnittene und geerbte, defekte Typografie.

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h, 0px); }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6;
  font-synthesis: none;              /* no fake bold/italic if a weight is not loaded */
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, table, form { margin: 0; }
ul, ol { padding-inline-start: 1.25em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }  /* links stay recognizable */
nav a, .btn { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[id] { scroll-margin-top: var(--header-h, 0px); }
table { border-collapse: collapse; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }
.container { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: var(--gutter); inset-block-start: 0.75rem; z-index: 20;
  background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; }

• DARF NICHT: 100vw für Inhalt, overflow: hidden, um Schrift zu beschneiden, negative Ränder oder transform auf der Hero-Überschrift. Akzeptiere den natürlichen Seitenabstand der Schriftart anstatt ihn optisch zu korrigieren.
• MUSS den gesamten Text in .container setzen. Die Hero-Überschrift teilt sich den linken Rand des Fließtextes, es sei denn, im Plan ist ein versetztes Layout benannt.
• MUSS volle Höhe Heros mit min-height: 100vh; min-height: 100svh; dimensionieren (die svh-Zeile gewinnt, wo unterstützt, damit mobile Browser-Leisten den Hero nicht abschneiden).
• Fließtext verwendet rem, niemals feste px, damit die Schriftarteinstellung des Browsers des Besuchers weiterhin funktioniert.

4.3 Tokens

Jeder Farb-, Schrift-, Größen- und Abstandswert lebt in einem Block. Ersetze die Beispielwerte durch deine eigene Palette (§6).

:root {
  color-scheme: light;                     /* "dark" for dark palettes: form controls and scrollbars follow */
  --bg: #F6F1E6;  --bg-soft: #ECE3D3;
  --ink: #1C1A17; --ink-muted: #635A4C;    /* muted: labels and captions only */
  --accent: #C0430B; --on-accent: #F6F1E6; /* text on accent fills */
  --line: #857A66;                         /* structural rules: ≥ 3:1 on bg and bg-soft */
  --line-soft: #C9BEA8;                    /* decorative hairlines only */
  --focus: var(--accent);                  /* re-assigned inside inverted bands */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-text: "Public Sans", "Segoe UI", sans-serif;
  --step-hero: clamp(3.25rem, 1rem + 11vw, 13rem);
  --step-h2:   clamp(2.25rem, 1rem + 5vw, 6rem);
  --step-label: 0.8125rem;
  --space-xs: 0.5rem;  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-l: clamp(3rem, 2rem + 4vw, 6.5rem);
  --space-xl: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --measure: 66ch;
  --header-h: 0px;                         /* set to the sticky header height, else 0 */
  --rule: 1px solid var(--line);
}

MUSS: jeder Wert in Regeln stammt aus diesen Tokens. DARF NICHT: Inline-Hex in Regeln, oder Framework-Standardpaletten (gray-500, slate-200). Fließende Größen mischen rem und vw, damit Browser-Zoom und Schriftarteinstellungen sie weiterhin skalieren (reines vw ignoriert Zoom).

4.4 Sprache und Gebietsschema

• Der Text ist in der Sprache der Anfrage. lang stimmt überein. Sie/du bleibt konsistent.
• Deutsch: hyphens: auto auf schmalen Spalten (benötigt korrektes lang); der Schriftart-Unterbereich MUSS äöüß und „ “ ‚ ‘ – abdecken. Typografische Anführungszeichen („…“), keine englischen Marketingwörter auf einer deutschen Seite,   zwischen Zahl und Einheit (12 kg, 9:30 Uhr), Daten als 1. November 2026.
• Deutsche Websites für Unternehmen benötigen Impressum- und Datenschutz-Links in der Fußzeile (Inpage-Demo-Abschnitte sind für einen Prototyp in Ordnung). Seit 2025 macht die BFSG Barrierefreiheit zu einer gesetzlichen Pflicht für viele verbraucherorientierte E-Commerce-Dienste; WCAG 2.1 AA ist die Untergrenze, und die Tore dieses Skills übertreffen sie bereits.

4.5 Schriftarten, die Netzwerkausfälle überstehen

Wähle Fallbacks derselben Klasse (kondensiert → „Arial Narrow“; Serif → Georgia; Grotesk → system-ui). Die zwei Fallbacks MÜSSEN sichtbar unterschiedlich bleiben, damit die Seite ihre Hierarchie behält, wenn die Schriften ausfallen. Lade nur die Gewichte, die du verwendest. Die verwendeten Gewichte für die Anzeige MÜSSEN in der geladenen Schriftfamilie existieren (siehe §5).

4.6 Breakpoints und 375 px

Mobile-First. Breakpoints: 480, 760, 1024, 1320 px. Bei 375 px: kein horizontaler Scrollbalken, Hero-Überschrift ≤ 5 Zeilen, längstes Wort passt, Touch-Ziele ≥ 44 × 44 px, Sticky-Header bedecken keine Anker (--header-h), jedes zweispaltige Layout hat eine entworfene mobile Form.

Regel des längsten Wortes. Verfügbare Breite ≈ 375 − 2 × 19 ≈ 335 px. Maximale Hero-Größe in px ≈ 335 ÷ (Buchstaben im längsten Wort × Breitenfaktor). Breitenfaktoren: kondensiert 0,42, Serif 0,52, Grotesk 0,58, erweitert 0,68. Setze das clamp()-Minimum auf diesen Wert. „Frachtabfertigung“ (17 Buchstaben) in einer kondensierten Schriftart erlaubt ≈ 47 px, sodass das 52 px Minimum oben überlaufen würde: senke das Minimum oder füge weiche Trennstriche hinzu (Fracht­abfertigung). Lasse niemals zu, dass eine lange deutsche Zusammensetzung overflow-wrap: anywhere in den Hero erzwingt.

5. Typografie: das Hauptwerkzeug

Verwende genau zwei Schriftfamilien: eine Display, eine Text.

Display	Text	Passt zu
Big Shoulders Display	Public Sans	Fahrpläne, Logistik, Fracht, Sport
Barlow Condensed	Barlow	Transport, Beschilderung, Clubs, Veranstaltungen
Fraunces	Karla	Essen, Handwerk, Druck, Gastgewerbe
Instrument Serif (nur 400)	Work Sans	Redaktion, Mode, Architektur
Newsreader	Libre Franklin	Recht, Institutionen, Forschung
Familjen Grotesk	Source Serif 4	Magazine, Kultur, Non-Profits
IBM Plex Mono (Display)	IBM Plex Sans	Labore, Werkzeuge, Daten, Dokumentation
Archivo (Breitenachse 112–125)	Spline Sans	Häfen, Industrie, Produktblätter
Anton (nur 400)	Barlow	Kampagnen, Veranstaltungsorte, Poster
Bodoni Moda	Karla	Luxusgüter, Galerien, Auktionen

Dies sind Ausgangspunkte. Wähle nach Thema; auf Zeile 1 für ein nicht-logistisches Thema zu landen bedeutet, du hast dich nach Position und nicht nach Thema entschieden. Überprüfe die tatsächlichen Achsen und Gewichte der Schriftart: Instrument Serif und Anton haben ein Gewicht, daher ist „fett“ nicht verfügbar und font-synthesis: none hindert den Browser daran, es zu fälschen; Archivo benötigt wdth in der URL (Archivo:wdth,[email protected],700..900) und font-stretch im CSS.

DARF NICHT Inter, Roboto, Arial, Poppins, Playfair Display, Lora oder Merriweather als Identitätspaar verwenden. DARF NICHT eine Schriftfamilie für alles verwenden. Monospace als Display...