Kadeka-SI/web-design-base-v1

Que fait web-design-base-v1 ?

Standard. Chaque site semble art-directed pour son propre sujet, ne peut pas être confondu avec un modèle, est techniquement correct dans chaque détail et utilise la typographie comme outil principal.

Méthode. Lisez le sujet, nommez une idée visuelle concrète, construisez le système, planifiez le contenu, puis codez. Le système existe avant la première ligne de code, car les choix faits lors du codage dérivent vers les défauts.

0. Comment lire cette compétence

Niveau	Signification
Porte	Vérifié à la fin. Une page qui échoue à une porte n'est pas terminée.
DOIT / NE DOIT PAS	Loi par défaut. Ne vous en écartez que lorsque l'utilisateur le demande ; dites-le en une phrase.
DEVRAIT	Valeur par défaut forte. Écartez-vous silencieusement lorsque le sujet l'exige.
PEUT	Autorisé lorsque cela sert le sujet.

Priorité : Portes 1 et 2 (accessibilité) → la demande explicite de l'utilisateur → DOIT → DEVRAIT → PEUT. Si l'utilisateur demande quelque chose qui enfreint une porte, construisez la version la plus proche qui passe et dites ce que vous avez changé. Au sein d'un niveau, la règle la plus spécifique l'emporte.

Les exemples sont des démonstrations, pas des modèles. Chaque palette, paire de polices, horaire de ferry et valeur de code ci-dessous montre le format d'une bonne réponse. Copier l'un d'eux inchangé dans un sujet sans rapport est l'échec le plus courant de cette compétence. Si vous choisissez une palette ou une paire listée telle quelle, justifiez-la dans le plan avec un fait sur le sujet.

1. Cinq portes

1. Première peinture et sans JS. Le titre du héros est visible dès la première image : non décalé, non tronqué (y compris les points de tréma sur Ä Ö Ü), jamais animé. Avec JavaScript désactivé ou le mouvement réduit activé, la page est complète.
2. Contraste. Texte du corps ≥ 7:1, texte atténué et accent en tant que texte ≥ 4.5:1, grands titres ≥ 4.5:1, bordures structurelles, anneaux de focus et parties UI ≥ 3:1. Calculé pour chaque paire texte/surface réellement utilisée, jamais supposé (§6).
3. Discipline de palette. Fond, encre, un accent, plus des nuances de fond/d'encre. Pas de dégradés, lueur, vitromorphisme ou ombres colorées.
4. Complétude. Chaque section a une substance réelle (§8), chaque lien mène à un endroit intentionnel, chaque état requis existe.
5. Spécifique. Si la palette et la police peuvent être déplacées vers un sujet différent sans changement, le travail n'est pas terminé.

2. Choisir le mode

Mode	Utilisation pour	Règles qui s'appliquent
Vitrine	page d'atterrissage, portfolio, vitrine de boutique, éditorial, événement, entreprise	tout sauf §12
UI Produit	tableau de bord, admin, outil, application, formulaires complexes	§1–§6, §10, §11, §12 ; ignorer les archétypes de héros et le pool de sections
Docs	documentation, manuels, cartes de modèle	Typographie et couleur de la vitrine, structure UI Produit (TOC, code, états)
Audit	« vérifier/améliorer ma page »	lister les constatations, corriger uniquement ce qui est cassé, conserver l'identité existante
Itérer	« changer X »	changer le jeton ou la règle nommé(e) et ses dépendances directes uniquement ; pas de refontes silencieuses

Lorsque l'utilisateur fournit une marque (couleurs, logo, polices), la marque est la palette et le type. Calculez son contraste. Si l'accent de la marque échoue à 4.5:1 en tant que texte, utilisez-le uniquement pour les éléments grands ou non textuels et ajoutez une variante de texte plus sombre de la même teinte.

3. Méthode pour Construire

Écrivez le plan avant le code : 12 à 16 lignes dans la langue de l'utilisateur (Itérer : un diff de 3 lignes).

3.1 Lire le sujet. Que doit faire ou comprendre le visiteur ? À quoi ressemble, sonne et se sent le sujet dans son lieu réel (port, fonderie, laboratoire, cuisine, salle d'audience, archive) ? Quelle est la seule chose qu'il doit retenir ?

3.2 Nommer l'idée visuelle. Une phrase nommant un objet concret, un matériau ou une convention du sujet. Exemple pour une ligne de ferry : « un horaire de départ imprimé : chiffres condensés et gras, rangées barrées, le panneau comme héros. » Les adjectifs abstraits (« moderne, propre, audacieux ») et les listes de couleurs ne sont pas des idées. Test d'originalité : nommez trois choses qu'un site générique dans cette catégorie possède, et confirmez que ce design n'en a aucune.

3.3 Construire le système sous forme de tableau dans le plan :

Champ	Valeur
Palette	bg, ink, accent (hex), le matériau dont elle est nommée, ratios calculés par paire utilisée
Type	police d'affichage + police de texte, raison liée au sujet, mot le plus long et sa taille mobile
Héros	archétype (§7.1) + justification en une ligne
Mise en page	logique de base (§7.2) et comment les sections la varient
Mouvement	un motif signature + motif de soutien optionnel
Sections	ordonnées, chacune avec son rôle et sa forme
Moment signature	la seule chose dont un visiteur se souvient

3.4 Planifier le contenu. Listez chaque section avec des faits concrets, étapes, noms, chiffres, dates, prix. Le contenu inventé est autorisé s'il est cohérent en interne et marqué (§8.3).

4. Fondations

4.1 L'en-tête fait partie du design

<!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>
    /* Porte de mouvement : les états de départ cachés n'existent que si cette classe est définie (§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, puis composants */</style>
</head>

• DOIT : lang correspond au texte, title et description sont spécifiques, l'URL de la police correspond aux familles choisies dans §5 et se termine par display=swap, un favicon est présent (il évite une erreur 404 et donne un aspect fini).
• NE DOIT PAS : en-tête vide, lang="en" sur un texte allemand, polices sans display=swap.
• Confidentialité (UE/DE). Google Fonts chargées depuis les serveurs de Google transmet les IP des visiteurs ; les tribunaux allemands ont considéré cela comme un problème RGPD. Pour un prototype, c'est acceptable. Pour la production, dites dans le rapport que les polices doivent être auto-hébergées (fichiers woff2, @font-face). Si l'environnement bloque les polices externes, les piles de secours (§4.5) doivent toujours avoir l'air conçues.

4.2 CSS de base

Commencez chaque page avec cette fondation. Elle empêche la typographie décalée, tronquée et héritée-cassée.

*, *::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;              /* pas de faux gras/italique si un poids n'est pas chargé */
  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; }  /* les liens restent reconnaissables */
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; }

• NE DOIT PAS : 100vw pour le contenu, overflow: hidden pour couper le texte, marges négatives ou transform sur le titre du héros. Acceptez le port de côté naturel de la police au lieu de le corriger optiquement.
• DOIT placer tout le texte à l'intérieur de .container. Le titre du héros partage le bord gauche du texte du corps sauf si une mise en page décalée est nommée dans le plan.
• DOIT dimensionner les héros pleine hauteur avec min-height: 100vh; min-height: 100svh; (la ligne svh gagne là où elle est prise en charge, donc les barres du navigateur mobile ne coupent pas le héros).
• Le texte du corps utilise rem, jamais px fixe, afin que le réglage de la police du navigateur du visiteur fonctionne toujours.

4.3 Tokens

Chaque valeur de couleur, police, taille et espacement vit dans un bloc. Remplacez les valeurs d'exemple par votre propre palette (§6).

:root {
  color-scheme: light;                     /* "dark" pour les palettes sombres : les contrôles de formulaire et les barres de défilement suivent */
  --bg: #F6F1E6;  --bg-soft: #ECE3D3;
  --ink: #1C1A17; --ink-muted: #635A4C;    /* muted : étiquettes et légendes uniquement */
  --accent: #C0430B; --on-accent: #F6F1E6; /* texte sur les remplissages d'accent */
  --line: #857A66;                         /* règles structurelles : ≥ 3:1 sur bg et bg-soft */
  --line-soft: #C9BEA8;                    /* filets décoratifs uniquement */
  --focus: var(--accent);                  /* réattribué à l'intérieur des bandes inversées */
  --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;                         /* défini sur la hauteur de l'en-tête sticky, sinon 0 */
  --rule: 1px solid var(--line);
}

DOIT : chaque valeur dans les règles provient de ces tokens. NE DOIT PAS : hexadécimal en ligne dans les règles, ou palettes par défaut du framework (gray-500, slate-200). Les tailles fluides mélangent rem et vw afin que le zoom du navigateur et les réglages de police les redimensionnent toujours (le vw pur ignore le zoom).

4.4 Langue et locale

• Le texte est dans la langue de la demande. lang correspond. Le tutoiement/vouvoiement reste cohérent.
• Allemand : hyphens: auto sur les colonnes étroites (nécessite lang correct) ; le sous-ensemble de polices DOIT couvrir äöüß et „ “ ‚ ‘ –. Guillemets typographiques („…“), pas de mots marketing anglais sur une page allemande,   entre le nombre et l'unité (12 kg, 9:30 Uhr), dates comme 1. November 2026.
• Les sites allemands pour les entreprises ont besoin de liens Impressum et Datenschutz dans le pied de page (les sections de démonstration en page sont acceptables pour un prototype). Depuis 2025, le BFSG fait de l'accessibilité une obligation légale pour de nombreux services de e-commerce grand public ; WCAG 2.1 AA est le minimum, et les portes de cette compétence le dépassent déjà.

4.5 Polices qui survivent à une panne réseau

Choisissez des polices de secours de la même classe (condensée → "Arial Narrow" ; serif → Georgia ; grotesk → system-ui). Les deux polices de secours DOIVENT rester visuellement distinctes, afin que la page conserve sa hiérarchie lorsque les polices échouent. Chargez uniquement les poids que vous utilisez. Les poids utilisés pour l'affichage DOIVENT exister dans la famille chargée (voir §5).

4.6 Points de rupture et 375 px

Mobile-first. Points de rupture : 480, 760, 1024, 1320 px. À 375 px : pas de défilement horizontal, titre du héros ≤ 5 lignes, mot le plus long tient, cibles tactiles ≥ 44 × 44 px, en-têtes sticky ne couvrent pas les ancres (--header-h), chaque mise en page à deux colonnes a une forme mobile conçue.

Règle du mot le plus long. Largeur disponible ≈ 375 − 2 × 19 ≈ 335 px. Taille max du héros en px ≈ 335 ÷ (lettres dans le mot le plus long × facteur de largeur). Facteurs de largeur : condensé 0.42, serif 0.52, grotesk 0.58, étendu 0.68. Définissez le minimum de clamp() à cette valeur. "Frachtabfertigung" (17 lettres) dans une police condensée permet ≈ 47 px, donc le minimum de 52 px ci-dessus déborderait : abaissez le minimum ou ajoutez des traits d'union conditionnels (Fracht­abfertigung). Ne laissez jamais un composé allemand long forcer overflow-wrap: anywhere dans le héros.

5. Typographie : l'outil principal

Utilisez exactement deux familles : une d'affichage, une de texte.

Affichage	Texte	Convient
Big Shoulders Display	Public Sans	horaires, logistique, fret, sport
Barlow Condensed	Barlow	transport, signalétique, clubs, événements
Fraunces	Karla	alimentation, artisanat, imprimerie, hôtellerie
Instrument Serif (400 uniquement)	Work Sans	éditorial, mode, architecture
Newsreader	Libre Franklin	juridique, institutionnel, recherche
Familjen Grotesk	Source Serif 4	magazines, culture, associations
IBM Plex Mono (affichage)	IBM Plex Sans	laboratoires, outils, données, documentation
Archivo (axe width 112–125)	Spline Sans	ports, industrie, fiches techniques
Anton (400 uniquement)	Barlow	campagnes, lieux, affiches
Bodoni Moda	Karla	biens de luxe, galeries, ventes aux enchères

Ce sont des points de départ. Choisissez par sujet ; atterrir sur la ligne 1 pour un sujet non logistique signifie que vous avez choisi par position, pas par sujet. Vérifiez les vrais axes et poids de la police : Instrument Serif et Anton ont un seul poids, donc "gras" n'est pas disponible et font-synthesis: none empêche le navigateur de le simuler ; Archivo a besoin de wdth dans l'URL (Archivo:wdth,[email protected],700..900) et font-stretch en CSS.

NE DOIT PAS utiliser Inter, Roboto, Arial, Poppins, Playfair Display, Lora ou Merriweather comme paire d'identité. NE DOIT PAS utiliser une seule famille pour tout. Monospace comme affichage

…

[tronqué pour la traduction]