Charte graphique.

Le logo, les couleurs et les polices du site, avec la raison de chaque choix.

Un logo. Trois tailles.

Le verrouillage complet quand il y a la place. Le monogramme quand il n’y en a plus. Les deux cercles seuls quand il n’y en a vraiment plus.

VerrouillageÀ partir de 120 px de large. C’est la forme par défaut : pied de page, documents, première apparition de la marque.

MonogrammeÀ partir de 40 px. Il remplace le verrouillage dans l’en-tête du site, où la baseline serait de toute façon illisible.

Symbole microDe 16 à 40 px, pour le favicon. Ce n’est pas un nouveau dessin : ce sont les deux cercles du monogramme, sans le reste.

Le logo sur une photo.

Le logo passe en papier, et l’image est assombrie de 55 % en dessous. Sans ce voile, la lisibilité change selon la photo, donc selon le hasard.

La zone de protection.

Autour du logo, on garde une marge égale au quart de la hauteur du monogramme. C’est le trait vertical du schéma. Rien ne rentre dedans : ni texte, ni image, ni bord de page.

Cette marge est un rapport, pas un nombre de pixels. Elle vaut donc la même chose sur un en-tête de site que sur un carton d’invitation.

Les tailles minimales.

Sous ces tailles, le trait du dessin ne couvre plus assez de pixels : il vire au gris et le logo se délave. Les trois exemples sont à leur taille réelle.

16 px

Symbole micro. C’est la taille d’un favicon.

40 px

Monogramme. Son trait fait 3,80 % de sa largeur.

120 px

Verrouillage. La baseline est fine, son trait tombe à 1,45 %.

Les usages interdits.

Six façons d’abîmer le logo, montrées telles qu’elles apparaîtraient.

En couleur La palette n’a pas de couleur d’accent. Un logo coloré annonce une hiérarchie qui n’existe pas.

Avec une ombre Le site se structure au filet et au fond. Rien ne flotte au-dessus du reste.

Étiré Ses proportions font partie du dessin, au même titre que ses courbes.

Sur une photo sans voile Sans le voile Chambre, la lisibilité dépend de la zone claire qui passe derrière.

Atelier Acoustique

Baseline retapée Elle est livrée en tracé. Recomposée avec une police, ni la graisse ni l’espacement ne tombent juste.

Avec le cadre du fichier d’origine Ce cadre venait de l’export du logo. Il n’en fait pas partie.

Les couleurs. Un noir, un blanc.

Les deux sont légèrement chauds, et il n’y a aucune couleur d’accent. Une enceinte en finition satinée mate ne renvoie jamais un blanc pur, et une fiche technique se lit mieux comme ça.

Encre

#171614

Titres, texte, aplats, logo sur fond clair. Un noir chaud plutôt qu’un noir pur.
Papier

#F1F0ED

Le fond de toutes les pages. Plus doux à lire longtemps qu’un blanc d’écran.
Chambre

#14120F

Le fond des blocs photo et du pied de page. C’est le seul fond sombre du site.
Blanc

#FFFFFF

Les cartes et l’en-tête, qui doivent se détacher du fond. Jamais un fond de page.

Les fonds

Ce sur quoi le contenu se pose.

surface-base

#F1F0ED

Le fond de page.
surface-raised

#FFFFFF

Cartes, en-tête, champs de saisie.
surface-sunken

#E8E6E2

Une ligne sur deux dans les tableaux.
surface-inverse

#14120F

Blocs photo et pied de page.
surface-inverse-raised

#1F1C18

Une carte posée dans un bloc sombre.

Le texte

Deux valeurs sur fond clair, deux sur fond sombre.

text-base

#171614

Titres et texte, sur fond clair.
text-subdued

#67645E

Légendes, unités, mentions. Jamais en dessous de 15 px.
text-inverse

#F1F0ED

Titres et texte, sur fond sombre.
text-inverse-subdued

#8A857C

Légendes et unités, sur fond sombre.

Les traits

Un trait qui sépare et un trait qui désigne une zone cliquable ne se voient pas pareil.

line-base

#DCDAD5

Filets de tableau et encadrements.
line-field

#949089

Contour des champs de saisie. Plus foncé que le filet : on doit voir où cliquer.
line-strong

#171614

Bouton principal, onglet actif.
line-inverse

#2A2622

Filets sur fond sombre.

Les signaux

Le clavier et l’erreur de saisie, les deux seuls moments où le site prévient de quelque chose.

state-focus

#171614

Le contour qui apparaît quand on navigue au clavier.
state-focus-inverse

#F1F0ED

Le même, sur fond sombre.
state-error

#9B3226

Erreur de saisie. La seule couleur du site.

Lisibilité

Chaque paire de couleurs du site est mesurée. Le chiffre compare le texte à son fond. Au-dessus de 4,5, il reste lisible pour tout le monde.

15,87:1 Le texte courant, sur le fond de page.
5,17:1 Les légendes et les unités, sur le fond de page.
18,08:1 Le texte sur une carte, dont le blanc est plus clair.
4,73:1 Les unités d’un tableau, sur la ligne grisée. C’est le cas le plus difficile du site.
16,41:1 Le texte sur un bloc sombre.
5,10:1 Les légendes sur un bloc sombre.
4,63:1 Les mêmes légendes, sur une carte posée dans un bloc sombre.
6,40:1 Le message d’erreur d’un formulaire.
3,18:1 Le contour d’un champ de saisie. Il désigne une zone cliquable, donc il doit se voir.
1,23:1 Un filet de tableau. Il ne porte aucune information, aucun seuil ne s’applique.

Les polices. Trois familles, onze tailles.

Les trois sont gratuites et hébergées avec le site. Aucune licence à acheter, et le navigateur ne va rien chercher ailleurs.

Aa

Inter Tight

Les titres

La version resserrée d’Inter, dans sa graisse la plus forte. C’est elle qui donne aux grands titres leur densité.

Aa

Inter

Le texte

La même famille en largeur normale, pour tout ce qui se lit ligne après ligne.

Aa

Geist Mono

Les chiffres

Une largeur fixe par caractère, donc des chiffres qui s’alignent en colonne dans un tableau.

hero 76 px, interligne 1,00, graisse 700, approche serrée de 0,040 em

Haut rendement.

Le titre d’accueil. Un seul par page.

display 56 px, interligne 1,04, graisse 700, approche serrée de 0,035 em

Deux caisses, une architecture

L’ouverture d’une section.

title 40 px, interligne 1,08, graisse 700, approche serrée de 0,030 em

Une charge close, isolée du grave

Un titre de bloc.

title-sm 28 px, interligne 1,15, graisse 600, approche serrée de 0,025 em

Ébénisterie et filtrage

Titre de carte, en-tête de tableau.

lead 22 px, interligne 1,50, graisse 400, approche serrée de 0,010 em

Chaque paire est fabriquée à la main, avec une priorité absolue donnée au réalisme des timbres.

La phrase sous un grand titre. Deux au maximum.

body 17 px, interligne 1,65, graisse 400, approche normale

Nous croyons qu’une grande enceinte n’est pas celle qui attire le regard, mais celle qui, une fois la musique lancée, se fait oublier pour laisser place à l’émotion.

Le texte courant.

body-sm 15 px, interligne 1,60, graisse 400, approche normale

Placement tolérant, évent frontal compatible avec les murs arrière.

Notes et mentions. La plus petite taille lisible du site.

caption 13 px, interligne 1,50, graisse 400, approche normale

Assemblage du caisson de grave, atelier, janvier 2026

Légende de photo.

label 11 px, interligne 1,20, graisse 500, approche large de 0,16 em

Fiche constructeur

Petit libellé en capitales, comme la baseline du logo.

data 13 px, interligne 1,50, graisse 400, approche large de 0,04 em

8 Ω nominal, 96 dB sous 2,83 V à 1 m, 35 Hz à 20 kHz

Caractéristiques, références, unités.

data-xl 32 px, interligne 1,10, graisse 500, approche serrée de 0,010 em

96 dB

Le grand chiffre.

Le monospace est réservé aux chiffres mesurés. Jamais un titre, jamais une accroche.
Le texte courant ne dépasse pas 65 caractères par ligne.
Une seule graisse par niveau.
Un grand chiffre ne s’affiche que si la valeur a été mesurée. Un chiffre inventé en 32 px fait plus de dégâts qu’une phrase creuse.
Sur une photo, tout le texte est en papier. Le gris des légendes n’y tient pas, même sous un voile.

La grille et les marges.

Une largeur de contenu, des marges latérales, un blanc entre les sections. Des valeurs fixes, posées une fois, avec un seul jeu de remplacement sous 600 px.

48

En-tête, 64 px

96

Première section

160

Section suivante

160

128

Pied de page

64

48

Les sections se touchent. Le blanc qu’on voit entre deux contenus est le retrait intérieur de chacune, en hachuré ci-dessus.

Hauteur de l’en-tête	64 px	Hauteur de l’en-tête, fixé en haut de l’écran. 48 px sous 600 px de large.
Marge latérale	48 px	Marge à gauche et à droite, sur toute la hauteur de la page. 24 px sous 600 px de large.
Largeur du contenu	1 180 px	Largeur maximale du contenu. Au-delà, la page se centre et laisse du blanc sur les côtés.
Retrait d’une section	160 px	Retrait à l’intérieur de chaque section, en haut et en bas. Les sections se touchent : ce retrait est le seul blanc entre deux contenus. 96 px sous 600 px de large.
Retrait de la première	96 px	Retrait du haut de la première section seulement. Plus court que les autres, sinon la page paraît vide au chargement. 64 px sous 600 px de large.
Entre deux blocs	16 px	Écart entre deux cartes, deux photos ou deux colonnes d’une même section.
Pied de page	128 puis 64 px	Retrait du haut du pied de page, à l’intérieur du fond sombre. Retrait du bas du pied de page, avant le bord de l’écran.

Les douze colonnes

Le contenu ne dépasse jamais 1 180 px de large. À l’intérieur, tout se cale sur douze colonnes séparées de 24 px.

12 colonnes, 24 px entre elles, 1 180 px au total

La largeur de lecture

Un paragraphe ne dépasse jamais 65 caractères par ligne, même si la colonne est plus large. Au-delà, l’œil perd le début de la ligne suivante.

Chaque modèle est assemblé à la main, avec une attention particulière portée au filtrage, au choix des haut-parleurs et à la mise au point. De nombreuses heures d’écoute et de mesures sont nécessaires pour obtenir un équilibre naturel.

65 caractères, la limite

L’échelle des espaces

Une base de 4 px et ses multiples. Une marge de 30 px n’existe pas : elle se choisit dans cette liste.

4
8
12
16
24
32
48
64
96
128
160
224

Le rythme vertical

À l’intérieur d’une section, ce sont ces écarts qui font qu’une page se lit. Deux blocs mal espacés se confondent.

24 Entre un titre et sa phraseAssez court pour qu’on lise les deux d’un bloc.
72 Entre la phrase et le contenuAssez long pour séparer l’annonce de la démonstration.
16 Entre deux cartesLes cartes se touchent presque : elles forment un même ensemble.
32 À l’intérieur d’une carteEntre l’image, le titre et le texte.
17 Entre deux paragraphesUne ligne de texte, pas davantage.

Quand l’écran rétrécit

Trois seuils, pas un de plus. Les tailles de texte, elles, se réduisent en continu.

jusqu’à 600 px

Téléphone

1 colonne

Une seule colonne. Les cartes s’empilent, le menu se réduit à un bouton.

jusqu’à 900 px

Tablette

6 colonnes

Six colonnes. Les grilles de trois cartes passent à deux.

au-delà de 900 px

Ordinateur

12 colonnes

Douze colonnes. Le contenu se bloque à 1 180 px et se centre.

Les angles et le mouvement.

Les cartes et les photos sont arrondies. Les tableaux de caractéristiques restent d’équerre : arrondis, ils ressemblent à une promotion.

0 px Tableaux, filets, tout ce qui affiche une mesure.
12 px Champs de saisie et petits blocs.
20 px Cartes et photos.
28 px Grands blocs pleine largeur.
pilule Tous les boutons, y compris le bouton secondaire.

Le mouvement

Trois durées, deux courbes. Le mouvement répond à un geste, il ne raconte rien.

120 msfast
200 msbase
320 msslow

Rien ne s’anime au défilement.
Le mouvement répond à un clic ou à un survol. Il ne raconte rien.
Tout s’arrête si le visiteur a désactivé les animations dans son système.

Aperçu du site.

Ces blocs n’emploient que les valeurs de la charte, sans réglage ajouté. Ils serviront de modèles pour construire les pages.

L’en-tête. Le monogramme à gauche, le menu à droite, un seul bouton plein.

Haut rendement.

Une paire d’enceintes trois voies inspirée des moniteurs Onken, fabriquée à la main.

CommanderEn savoir plus

L’ouverture. Un titre, deux lignes, deux boutons. Pas de libellé au-dessus du titre.

Le bandeau produit. Fond Chambre, photo pleine largeur, texte en papier.

35 Hz

extrême grave

20 kHz

extrême aigu

96 dB

de sensibilité

185 L

de charge

Les chiffres clés. Uniquement des valeurs mesurées, en chiffres alignés.

Chaque caisse est usinée, ajustée et montée au même endroit.

Des panneaux de 30 mm, renforcés et rendus étanches.

Le réalisme des timbres commence par le rendement.

96 dB

Sensibilité mesurée sous 2,83 V à 1 m

Les cartes. Deux photos légendées et une carte sombre pour le chiffre.

Grave	Audax PR380T4, membrane papier	380 mm
Médium	Audax RP 170 MO, charge close indépendante	8 L
Aigu	Audax PR 130 P 20 HR	6 à 20 kHz
Impédance	Nominale, minimum voisin de 6 Ω	8 Ω
Masse	Par enceinte, hors emballage	100 kg

La fiche technique. Angles vifs, chiffres à droite, une ligne sur deux grisée.

Chaque paire est unique.
La prochaine peut être la vôtre.

3 500 €

La paire, fabrication et réglage compris. Livrée et installée chez vous.

Prendre rendez-vous

Le prix et la prise de contact. Le prix en grand chiffre, un seul bouton.

Le son au service de la musique

PrésentationFabricationCaractéristiquesContact

Le pied de page. Fond Chambre, verrouillage complet, baseline.