Industrial Brutalist Ui

Brutaliste — L'Industrie du Sens

La typographie suisse rencontre le terminal militaire. Brut, fonctionnel, sans compromis.

---

1. Philosophie

1. La fonction est la forme — chaque élément existe parce qu'il est nécessaire
2. Le contraste est la règle — noir/blanc, grand/petit, épais/fin
3. Pas de confort — l'utilisateur est là pour le contenu, pas pour le confort visuel
4. Inspirations — Josef Müller-Brockmann, Wim Crouwel, Massimo Vignelli, le design suisse des années 60

---

2. Palette

:root {
  --bg: #ffffff;
  --text: #000000;
  --accent: #ff0000;
  --border: #000000;
}

Variantes

/* High contrast */
--bg: #000000;
--text: #ffffff;
--accent: #ccff00;

/* Warm */
--bg: #f5f0e8;
--text: #1a1a1a;
--accent: #d43b3b;

/* Digital */
--bg: #00ff00;
--text: #000000;
--accent: #0000ff;

---

3. Typographie

:root {
  --font-heading: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body: 'Helvetica Now Text', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
}

Échelle agressive

h1 { font-size: clamp(4rem, 8vw, 10rem); font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 4vw, 5rem); font-weight: 800; text-transform: uppercase; }
h3 { font-size: clamp(1.25rem, 2vw, 2.5rem); font-weight: 700; }
p  { font-size: clamp(1rem, 1.2vw, 1.25rem); max-width: 65ch; }
small { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }

---

4. Layout

Grille

.page {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-lg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-top: 2px solid var(--border);
  border-left: 2px solid var(--border);
}

.grid > * {
  border-right: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  padding: var(--space-lg);
}

---

5. Composants Brutaux

Hero

  
    TitreBrutal
  
  
    Le design n'est pas un confort. C'est une déclaration.
  
  
    Agir
  

Carte

  Catégorie
  Titre
  
  Description fonctionnelle, sans ornement.

Navigation

  LOGO
  
    Lien
    Lien
    Lien
  

---

6. Règles Brutalistes

Interdictions

• ❌ Coins arrondis (toujours 0)
• ❌ Ombres portées
• ❌ Dégradés
• ❌ Icônes non-fonctionnelles
• ❌ Navigation sticky (sauf si utile)
• ❌ Plus de 3 couleurs
• ❌ Bordures subtiles (< 2px)
• ❌ box-shadow, drop-shadow
• ❌ Transitions douces (préférer instantané)
• ❌ Layouts asymétriques sans grille claire
• ❌ Animations décoratives
• ❌ backdrop-filter, blur

Obligations

• ✅ Bordures épaisses (2px minimum)
• ✅ Contrastes maximaux
• ✅ Typographie large et grasse
• ✅ Grille visible
• ✅ Monochrome + un accent
• ✅ Espacement généreux
• ✅ Uppercase pour les grandes tailles

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: mud-mos23
• Source: mud-mos23/nstup-taste
• License: MIT
• Homepage: https://github.com/mud-mos23/nstup-taste

Install and usage instructions live in the source repository linked above.