Brutalist

Skill mud-mos23/nstup-taste/skills/brutalist

Nstup Taste gives your AI-generated interfaces actual taste. No more generic SaaS templates, purple-blue gradients, 3-column card layouts, or Inter font.

Install

npx -y skills add mud-mos23/nstup-taste --skill brutalist

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Style brutaliste suisse. Typographie militaire, contrastes forts, grilles rigides, monochrome + un accent agressif. Pas de courbes, pas d'ombres, pas de compromis.

SKILL.md

4.2 KB, as published. Nobody here has run it

Brutaliste — L'Industrie du Sens

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

1. Philosophie

La fonction est la forme — chaque élément existe parce qu'il est nécessaire
Le contraste est la règle — noir/blanc, grand/petit, épais/fin
Pas de confort — l'utilisateur est là pour le contenu, pas pour le confort visuel
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

<section class="border-b-2 border-black py-4xl" style="background: var(--bg); color: var(--text)">
  <h1 class="text-[clamp(4rem,10vw,12rem)] font-black uppercase leading-[0.85] -tracking-[0.04em]">
    Titre<br />Brutal
  </h1>
  <p class="mt-lg max-w-[65ch] text-lg">
    Le design n'est pas un confort. C'est une déclaration.
  </p>
  <button class="mt-xl px-xl py-md bg-black text-white text-sm uppercase tracking-[0.15em] font-bold
                 hover:bg-white hover:text-black border-2 border-black transition-colors">
    Agir
  </button>
</section>

Carte

<article class="border-2 border-black p-lg">
  <div class="text-xs uppercase tracking-[0.15em] mb-sm font-bold">Catégorie</div>
  <h2 class="text-2xl font-black uppercase leading-tight">Titre</h2>
  <div class="w-12 h-1 bg-black my-md"></div>
  <p class="text-sm">Description fonctionnelle, sans ornement.</p>
</article>

Navigation

<nav class="flex items-center justify-between border-b-2 border-black py-md px-lg">
  <div class="text-xl font-black uppercase">LOGO</div>
  <div class="flex gap-xl uppercase text-sm font-bold tracking-[0.1em]">
    <a href="#" class="hover:underline decoration-2 underline-offset-4">Lien</a>
    <a href="#" class="hover:underline decoration-2 underline-offset-4">Lien</a>
    <a href="#" class="hover:underline decoration-2 underline-offset-4">Lien</a>
  </div>
</nav>

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