Référence interne

Design system

Chaque élément ci-dessous est le composant réellement utilisé sur le site. Les valeurs proviennent de snippets/gorring-tokens.liquid. La documentation écrite est dans docs/design-system.md.

Couleurs

Surfaces et encres

Surface --g-surface
Surface alt --g-surface-alt
Surface creusée --g-surface-sunken
Surface inverse --g-surface-inverse
Encre 19.2:1 --g-ink
Encre douce 6.8:1 --g-ink-soft

Gammes — aplat à gauche, encre accessible à droite

Core Core en texte --g-core-mark / -ink
Pro Pro en texte --g-pro-mark / -ink
Premium Premium en texte --g-premium-mark / -ink

Univers — jamais la variante « mark » en texte

Training Homme --g-univ-training-h-mark / -ink
Training Femme --g-univ-training-f-mark / -ink
Combat --g-univ-combat-mark / -ink
Sportswear --g-univ-sportswear-mark / -ink
Cross-Sport --g-univ-cross-mark / -ink
Brassières --g-univ-brassieres-mark / -ink

Lime — les trois seuls usages autorisés

Aplat, texte noir — 17,4:1 Sur fond sombre — 17,4:1 Encre assombrie sur blanc — 4,5:1

Typographie

Eyebrow · Archivo 700 · 11px · +0.15em

Built, not born

display · clamp(40px, 8vw, 96px) · 900 · −0.03em

Titre de niveau 1

h1 · clamp(28px, 4vw, 48px) · 800 · −0.02em

Titre de niveau 2

h2 · clamp(22px, 2.6vw, 32px) · 700 · −0.01em

Titre de niveau 3

h3 · clamp(18px, 1.6vw, 22px) · 600

Corps de texte en Inter. La largeur de lecture est plafonnée à 68 caractères, parce qu'au-delà l'œil perd la ligne en revenant à la gauche du paragraphe. C'est la seule contrainte de mise en page qui vaut pour tous les textes longs du site, quelle que soit la largeur de l'écran.

Texte secondaire · 13px mobile / 14px desktop

149,99 € 199,99 € −50,00 €

GRR-NXS-SHC-PRO-H-M-MID

Espacement — échelle fermée base 4

4
8
12
16
24
32
40
48
64
80
96
120
160

Boutons

Variantes

États

Le bouton en chargement conserve la largeur de son texte : aucun saut de mise en page. Le focus se teste au clavier — Tab jusqu'ici.

Badges

Neutre Core Pro Premium −30 % Nouveauté

Champs de formulaire

Cette valeur n'est pas valide.

Le label est toujours associé. Un placeholder n'est jamais un label.

Carte produit

Survole une carte : la seconde image n'existe pas dans le HTML, elle est injectée au premier survol. Ouvre l'inspecteur réseau pour le vérifier.

Gorring Brawl FadX 24 — Abyss — Combat Core Gorring CoreGorring Brawl FadX 24Hauts Et Tee-Shirts de combat 49,99€ Gorring Brawl FadX 24 — Abyss — Combat Core Gorring CoreGorring Brawl FadX 24Short de Combat 54,99€ Gorring Sportswear Campus Gorring CoreGorring CornerSweat à capuche 64,99€ Gorring Sportswear Campus Gorring CoreGorring CornerSweat à capuche 64,99€

Sélecteur de taille

Une taille indisponible reste lisible et visible : le visiteur doit savoir qu'elle existe, pour pouvoir demander à être prévenu.

Progression — livraison offerte

Plus que 35,00 € pour la livraison offerte
Livraison offerte débloquée

Accordéon

Composition et entretien
80 % coton, 20 % polyester recyclé. Lavage à 30°C sur l'envers.
Livraison et retours
Expédition sous 48 h ouvrées. Retour accepté pendant 14 jours, sans justification.
Coupe et taille
Coupe Athletic. Si tu hésites entre deux tailles, prends la plus grande.

Modale et drawer

Guide des tailles

Modale centrée. Échap, clic extérieur et piège de focus sont assurés par l'élément <dialog> natif et par le composant Horizon — rien de réécrit.

Panier

Plus que 35,00 € pour la livraison offerte

Plein écran sous 768px, 420px au-delà.

Lisibilité du texte sur média

À gauche sans voile, à droite avec le voile réglementaire à 0.58. Sur une photo claire, la différence est la limite entre lisible et illisible.

Gorring Brawl FadX 24 — Abyss — Combat Core Gorring

Sans voile

Gorring Brawl FadX 24 — Abyss — Combat Core Gorring

Avec voile 0.58