Beauté et brutalisme : comment j'ai conçu blakecrosley.com à leur intersection

J’ai conçu blakecrosley.com sans couleurs, sans dégradés, sans illustrations et sans éléments décoratifs. Uniquement de la typographie blanche sur un noir absolu (#000000), avec des couches d’opacité à 5 %, 10 %, 40 % et 65 % créant l’ensemble de la hiérarchie visuelle. Le site obtient un score de 100/100 sur Lighthouse performance et atteint ce que j’appelle la « beauté honnête » : une clarté structurelle avec un artisanat précis.¹

TL;DR

Le brutalisme en design numérique réduit les interfaces à l’honnêteté structurelle : typographie brute, grilles visibles, décoration minimale. La beauté ajoute du raffinement : relations chromatiques harmonieuses, espacement précis, micro-interactions. Les produits modernes les plus convaincants (Linear, Notion, Arc Browser) opèrent à cette intersection. J’ai construit blakecrosley.com à cette même intersection, et cet article documente les décisions CSS spécifiques, ce que j’ai supprimé, et pourquoi la tension entre honnêteté et artisanat produit de meilleures interfaces que l’un ou l’autre principe pris isolément.

Mon système de design : le brutalisme comme fondation

La non-palette de couleurs

La plupart des systèmes de design commencent par une palette de couleurs. Le mien commence par l’absence de palette :

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

Aucune couleur de marque. Aucune couleur sémantique au-delà des niveaux d’opacité. L’ensemble de la hiérarchie visuelle fonctionne à travers quatre paliers de transparence : 100 % (primaire), 65 % (secondaire), 40 % (tertiaire) et 10 % (bordures structurelles). C’est brutaliste par principe : le matériau (lumière sur fond sombre) est utilisé directement plutôt que décoré.²

Cette décision était délibérée. Au cours de mes 16 études de design de produits, j’ai remarqué que les produits que je respectais le plus (Linear, Vercel, Raycast) utilisaient des palettes retenues où la typographie et l’espacement assuraient le travail de hiérarchie. Les produits avec plus de 8 couleurs sémantiques utilisaient souvent la couleur comme substitut à la clarté structurelle.

La typographie comme hiérarchie principale

Sans couleur pour porter la hiérarchie, la typographie porte tout :

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display:  5rem;     /* 80px - hero headlines */
  --font-size-7xl:      3.875rem; /* 62px */
  --font-size-base:     1rem;     /* 16px - body text */
  --font-size-xs:       0.75rem;  /* 12px - metadata */
}

Des polices système, pas des polices web personnalisées. C’est à la fois un choix brutaliste (utiliser le matériau natif de la plateforme) et un choix de performance (zéro latence de chargement de polices, contribuant aux scores Lighthouse parfaits). La taille d’affichage (80px) avec un espacement de lettres serré (-0.03em) donne aux titres de la gravité sans décoration. Le corps de texte à 16px avec une hauteur de ligne généreuse (1.7) privilégie la lisibilité plutôt que la densité.³

Le système d’espacement en 8 points

Chaque valeur d’espacement dérive d’une base de 8 points :

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

Aucune valeur arbitraire. Si un espacement n’existe pas dans le système, c’est le design qui a tort, pas le système. J’ai appris cela à mes dépens lorsque j’ai utilisé --spacing-2xs dans une marge de sous-titre (un jeton qui n’existait pas) et la mise en page s’est cassée silencieusement. La solution était de passer à --spacing-xs, pas de créer un nouveau jeton.⁴

Ce que j’ai supprimé (et pourquoi)

Pas de dégradés

Les dégradés servent deux objectifs : l’intérêt visuel et la simulation de profondeur. Sur un site construit autour du contenu (articles de blog, descriptions de projets), les dégradés rivalisent avec le contenu pour l’attention visuelle. J’ai supprimé tous les dégradés et laissé le contenu être l’intérêt visuel.

Pas d’illustrations ni d’icônes

Aucun SVG décoratif, aucune illustration de héros, aucune bibliothèque d’icônes. La photographie est le seul élément visuel non typographique (photos personnelles sur la page d’accueil). Chaque photo dispose d’un conteneur au ratio 4/3 avec uniquement un border-radius — pas d’ombres, pas de superpositions, pas de traitements colorimétriques.

Pas d’ombres portées (état par défaut)

Les éléments dans leur état par défaut n’ont aucune ombre. Les états de survol ajoutent une profondeur subtile :

.lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

Les ombres n’apparaissent que comme retour fonctionnel (cet élément est interactif et vous interagissez avec lui), jamais comme décoration.

Pas de mode clair

Le site ne possède aucune requête média prefers-color-scheme. Il fonctionne exclusivement en mode sombre. C’est un choix délibérément intransigeant : plutôt que de maintenir deux systèmes visuels et de compromettre inévitablement les deux, j’ai conçu un seul système correctement. Le fond noir absolu (#000000 plutôt que #0a0a0a ou #1a1a1a) offre à la typographie un contraste maximal.⁵

Là où la beauté entre en jeu

La structure brutaliste seule produit de l’hostilité. La beauté dans mon design provient de l’artisanat dans l’exécution, pas de la décoration :

Les micro-interactions comme retour fonctionnel

Chaque élément interactif possède une transition, mais aucune transition n’existe pour le plaisir esthétique :

:root {
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a::after {
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav a:hover::after {
  transform: scaleX(1); /* Underline grows from left */
}

Les liens de navigation révèlent un soulignement au survol (fonctionnel : confirme l’interactivité). Les cartes de projets passent à l’échelle 1.08x (fonctionnel : indique la zone cliquable). Le menu hamburger mobile s’anime en X (fonctionnel : communique le changement d’état). Aucune animation n’existe sans finalité fonctionnelle.⁶

Animations d’entrée pour les groupes de cartes

Les cartes apparaissent avec une animation échelonnée translateY(16px) :

@keyframes socialCardIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

Cela remplit un objectif fonctionnel : communiquer que le contenu s’est chargé et attirer l’attention sur les éléments nouvellement visibles. Le décalage (chaque carte retardée de 100ms) crée un rythme qui aide les utilisateurs à parcourir le groupe. L’animation dure 500ms avec un easing cubic-bezier — assez rapide pour ne pas retarder l’interaction, assez fluide pour paraître soignée.

L’en-tête en glassmorphisme

Le seul élément proche du décoratif :

.header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-overlay); /* rgba(0,0,0,0.8) */
}

L’en-tête flouté remplit un objectif fonctionnel : il indique que le contenu défile derrière la navigation, établissant l’en-tête comme une couche persistante. Mais le flou ajoute également un raffinement visuel — c’est l’un des rares moments où le design privilégie la beauté aux côtés de la fonction.

Des produits qui trouvent le même équilibre

Linear : structure brutaliste, exécution soignée

L’interface de gestion de projet de Linear est dense, pilotée au clavier et conçue pour des utilisateurs professionnels. Pas d’illustrations, pas d’intégration progressive. La structure est brutaliste. L’exécution est soignée : typographie précise, thème sombre harmonieux, animations fluides à 60fps. Chaque pixel sert un objectif. Cet objectif est accompli avec artisanat.⁷

Notion : blocs bruts, système raffiné

Notion expose son modèle de données sous-jacent (les blocs) directement aux utilisateurs. L’honnêteté structurelle est brutaliste. Le raffinement apparaît dans le design d’interaction : glisser-déposer fluide, édition en ligne réactive et une palette de commandes qui rend le système de blocs naturel.⁸

Arc Browser : navigation brutaliste, chrome soigné

Arc expose le système sous-jacent de gestion des onglets du navigateur (onglets verticaux, espaces de travail, vues fractionnées). L’honnêteté structurelle est brutaliste. L’exécution visuelle (thèmes en dégradé, animations fluides) rend la gestion des onglets agréable plutôt que clinique.⁹

Le point d’équilibre

L’approche la plus efficace utilise les principes brutalistes pour la structure et les principes de beauté pour l’exécution :

Points clés à retenir

Pour les designers : - Utilisez les principes brutalistes pour la structure (mise en page, architecture de l’information, couleur) et les principes de beauté pour l’exécution (typographie, espacement, micro-interactions) ; la combinaison produit des interfaces à la fois honnêtes et agréables - Supprimez chaque élément décoratif et demandez-vous ce qui se casse ; si rien ne se casse, la décoration était superflue - Concevez pour un seul mode correctement plutôt que pour deux modes médiocrement ; mon approche exclusivement sombre produit un système plus cohérent qu’un compromis entre modes clair et sombre

Pour les développeurs : - Implémentez les jetons de design sous forme de propriétés CSS personnalisées sans valeurs arbitraires ; si un espacement n’existe pas dans le système, corrigez le design plutôt que d’ajouter une valeur ponctuelle - Traitez les micro-interactions comme du retour fonctionnel ; une transition au survol de 150ms communique l’interactivité, tandis qu’une animation d’entrée de 2 secondes ne communique rien d’utile

Pour les responsables produit : - Adaptez le positionnement esthétique au contexte utilisateur ; les outils professionnels penchent vers le brutalisme, les produits grand public penchent vers la beauté, et les meilleurs produits trouvent l’intersection

Références