TYNX Metal art

Système design

Le vocabulaire
de la marque.

La direction industrielle associe des fonds charbon patinés, des titres massifs et un orange de braise. Les photographies des œuvres gardent leurs couleurs ; la texture appartient à l’habillage.

v3.0 — 2026

01 — Principes

Trois règles, jamais négociées

La matière parle

L’interface s’efface : pas d’ombres portées molles, pas de dégradés décoratifs, pas de coins arrondis. Le métal se coupe net — l’écran aussi.

Le vide est un matériau

Une page respire plus qu’elle ne remplit. Si un bloc peut perdre un élément sans perdre son sens, il le perd.

Un seul accent

La braise ne sert qu’à signaler : lien actif, point de disponibilité, focus clavier. Jamais pour décorer, jamais en aplat large.

03 — Couleur

Cinq familles, un seul accent

Répartition visée sur une page : 70 % forge ou papier, 22 % acier, 6 % abysse, 2 % braise. Dès que la braise dépasse, elle cesse d’être un signal.

Forge

Fond principal, profondeur, nuit

--c-forge-950

#07080A

Creux, fonds de visionneuse

--c-forge-900

#0B0D10

Surface par défaut du site

--c-forge-800

#131619

Blocs surélevés, champs

--c-forge-700

#1C2025

Séparations épaisses

--c-forge-600

#2A2F35

Bords, états désactivés

Acier

Texte secondaire, filets, gris de travail

--c-steel-600

#3A4048

Filets sur clair

--c-steel-500

#4E545C

Texte secondaire sur papier

--c-steel-400

#767D86

Texte tertiaire

--c-steel-300

#9CA3AC

Texte secondaire sur forge

--c-steel-200

#C2C7CD

Texte courant sur image

--c-steel-100

#E2E5E8

Texte fort sur forge

Papier

Respirations claires, alternance de rythme

--c-paper

#F7F5F2

Fond clair, texte sur forge

--c-paper-dim

#EEEAE4

Creux sur papier

--c-paper-low

#E3DED6

Filets sur papier

Abysse

Accent primaire — relevé sur le mur du « Banc de raies »

--c-abyss-900

#0E1A26

Fond de héros marin

--c-abyss-800

#142335

Surface abysse

--c-abyss-700

#1B2E43

Blocs surélevés

--c-abyss-600

#293A55

Bleu de référence (photo)

--c-abyss-400

#46608A

Détails, survols

Braise

Accent signal — acier à 900 °C. Titres, actions et bandeau de matière

--c-ember

#C4552A

Signal sur clair, point actif

--c-ember-soft

#E27B4B

Signal sur sombre, focus

--c-patina

#9A8C79

Patine : filets et dégradés, jamais du texte

Surfaces

Trois classes redéfinissent les jetons sémantiques. Un composant placé dans l’une d’elles s’adapte sans variante : .surface--forge, .surface--paper, .surface--abyss.

Forge

Texte courant

Lien

Papier

Texte courant

Lien

Abysse

Texte courant

Lien

04 — Typographie

Une voix, une mécanique

Barlow Condensed — la force

Titres, chiffres d’œuvre, citations. Contrastée, un peu ancienne, elle apporte la part « galerie » de l’identité. Toujours en corps large, jamais en dessous de 1,4 rem, jamais en gras.

Inter — la mécanique

Texte courant, navigation, formulaires, micro-libellés. Neutre, lisible, elle ne cherche pas à être remarquée. Graisses utilisées : 300, 400, 500.

--fs-hero
Barlow Condensed · 4.5 → 13 rem
Faire nager l’acier
--fs-d1
Barlow Condensed · 3 → 6.75 rem
De la plaque à la peau
--fs-d2
Instrument Serif · 2.1 → 3.6 rem
Une pièce faite pour un lieu
--fs-d3
Instrument Serif · 1.6 → 2.3 rem
Banc de raies
--fs-lead
Inter Light · 1.125 → 1.4 rem
Sculptures en métal façonnées à la main.
--fs-body
Inter Regular · 1.0125 rem
Le trait est posé directement sur la tôle, à l’échelle 1.
--fs-micro
Inter Medium · 0.6875 rem · +0.22 em
SCULPTEUR MÉTAL

Règles

  • ✓ Un seul niveau de titre display par bloc.
  • ✓ Texte courant limité à 62 caractères par ligne.
  • ✓ Micro-libellés en capitales, interlettrage +0,22 em.
  • ✕ Pas d’italique en texte courant, réservé aux titres et aux noms d’œuvres.
  • ✕ Pas de soulignement, sauf filet animé des liens.

Rythme vertical

  • 0.94 Interligne des très grands titres
  • 1.10 Interligne des titres display
  • 1.50 Interligne des chapôs
  • 1.62 Interligne du texte courant

05 — Espace & grille

Une base de 8

Toutes les distances sont des multiples de 8 px. Les marges de section sont fluides : elles grandissent avec l’écran, jamais l’inverse.

--s-14 px
--s-28 px
--s-312 px
--s-416 px
--s-524 px
--s-632 px
--s-748 px
--s-864 px
--s-996 px
--s-10128 px
--s-11176 px
--s-12240 px

Grille

  • 12 colonnes, gouttière 32 px
  • 1360 largeur de conteneur standard (px)
  • 1680 conteneur large, réservé aux grilles d’œuvres
  • 980 conteneur étroit, réservé aux déclarations
  • 20→72 marge latérale fluide (px)

Points de rupture

  • ≥900 grille complète, navigation horizontale
  • <900 colonnes fusionnées, tiroir plein écran
  • <720 formulaires et statistiques en une colonne

06 — Composants

Le nécessaire, rien de plus

Actions

Lien fléché Lien de texte

Un seul bouton principal par écran. Le fantôme sert au second choix ; au-delà, utiliser un lien.

Étiquettes & filtres

Champs

Pas de cadre : un filet bas qui s’éclaire au focus. Le libellé reste toujours visible, jamais en texte fantôme seul.

Fiche d’œuvre

Bougeoir réalisé avec des pièces mécaniques en métalObjets1 vue

Bougeoir mécanique

Métal · Pièces de récupération

Image, filet, titre en display, notice technique à droite. Au survol : agrandissement de 4,5 % sur 1,1 s, apparition de l’étiquette et de la loupe.

07 — Mouvement

Une masse qui se met en marche

Le métal est lourd : rien ne rebondit, rien ne claque. Les mouvements démarrent vite et s’arrêtent longuement.

--e-out

Apparitions, survols, tiroirs. Le mouvement par défaut.

--e-metal

Images et parallaxe. Démarre lourd, finit doux.

--e-in-out

Boucles et indicateurs continus.

Durées

  • 160 micro-état : survol, focus (ms)
  • 320 transition d’élément
  • 620 apparition au scroll
  • 1100 mouvement d’image, parallaxe

Règles

  • ✓ Décalage de 90 ms entre les éléments d’une même série.
  • ✓ Une apparition ne se rejoue jamais : elle est observée une fois.
  • ✓
    prefers-reduced-motion
    désactive tout, sans casser la mise en page.
  • ✕ Pas de rebond, pas d’élastique, pas de rotation décorative.

08 — Images

Le métal d’abord

Les photographies sont étalonnées par la chaîne tools/build-images.py : désaturation marquée, contraste tenu, virage froid dans les ombres et chaud dans les hautes lumières, vignetage, accentuation. Le sujet se détache, le décor recule.

Règles

  • ✓ Saturation réduite de 60 à 75 % sur les sujets acier.
  • ✓ Respecter les couleurs et les matières des photos reçues, sans les uniformiser artificiellement.
  • ✓ Formats : 3:2 et 16:9 pour les vues d’ensemble, 4:5 et 1:1 pour les détails.
  • ✕ Jamais de filtre coloré, de flou artistique ni de cadre blanc.

Livraison

  • WEBP jeu responsive 480 → 2000 px, qualité 84
  • JPEG secours 1280 px, progressif, qualité 86
  • ALT description factuelle : sujet, matière, support

09 — Voix

Dire moins, dire vrai

On écrit

  • ✓ Des phrases courtes, concrètes, avec des noms de matières et de gestes.
  • ✓ Le vocabulaire de l’atelier : tôle, cordon, patine, chute, enclume.
  • ✓ Ce qui est vrai et vérifiable : matière, technique, unicité.

On n’écrit pas

  • ✕ « Passion », « unique en son genre », « savoir-faire d’exception ».
  • ✕ Des points d’exclamation, des promesses de délai non tenables.
  • ✕ Des chiffres inventés : années d’expérience, nombre de pièces, prix de départ.