Iso elegance

Skill mud-mos23/nstup-taste/skills/iso-elegance

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 iso-elegance

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

Design épuré à la française. Raffinement, équilibre, luxe discret. Architecture minimaliste mais expressive. Palette monochrome, typographie soignée, espace blanc généreux.

SKILL.md

4.6 KB, as published. Nobody here has run it

Iso — L'Élégance Française

Le design n'est pas ce que tu ajoutes, c'est ce que tu enlèves. Iso est l'art de la réduction élégante.

1. Principes Fondamentaux

La Règle des 3

Chaque écran ne doit communiquer que 3 choses maximum. Pas une de plus.

Le Vide est une Forme

L'espace blanc n'est pas un vide — c'est un élément de design actif. Il a du poids, du volume, de la texture.

La Typographie est la Voix

Une seule famille typographique, déclinée avec maîtrise sur 3-4 poids. Pas de mélange de polices.

La Couleur est un Accent

90% monochrome, 10% couleur d'accent. L'accent est utilisé avec une extrême parcimonie — un bouton, un lien, un détail.

La Grille est un Rythme

Tout espacement doit appartenir à une séquence harmonique : 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192.

2. Palette Iso

:root {
  --iso-bg: #f8f7f4;           /* Blanc cassé chaud */
  --iso-bg-alt: #efede8;       /* Fond alternatif */
  --iso-text: #2d2d2d;         /* Texte presque noir */
  --iso-text-secondary: #8a8a8a; /* Texte secondaire */
  --iso-accent: #8b7355;       /* Ocre/brun — une seule couleur */
  --iso-accent-subtle: rgba(139, 115, 85, 0.08);
  --iso-border: #e5e3de;       /* Bordures subtiles */
  --iso-white: #ffffff;
}

Variantes par secteur

Secteur	Fond	Texte	Accent
Mode	#f5f3f0	#1a1a1a	#c4a882
Tech	#fafafa	#171a1f	#3b6ea5
Art	#efede8	#2d2d2d	#c73e3e
Luxe	#0a0a0b	#e8e6e3	#c9a84c
Éditorial	#f8f7f4	#1a1a1a	#8b7355

3. Typographie Iso

Titres : Satoshi (sans-serif géométrique) ou DM Serif Display (serif)
Corps : Outfit ou Sora (lisibles, neutres, élégants)
Échelle : 4 paliers max (small, body, large, heading)
Interlignage : 1.6 pour le corps, 1.1 pour les titres
Mesure : max-width: 65ch pour le texte

h1 { font-size: var(--text-4xl); font-weight: 500; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.01em; }
h3 { font-size: var(--text-xl); font-weight: 500; }
p  { font-size: var(--text-base); line-height: 1.6; }
small { font-size: var(--text-sm); color: var(--iso-text-secondary); }

4. Layout Iso

Grille

.iso-grid {
  display: grid;
  grid-template-columns: 1fr min(65ch, 80%) 1fr;
  gap: var(--space-lg);
}

.iso-grid > * {
  grid-column: 2;
}

.iso-grid > .full {
  grid-column: 1 / -1;
}

Marges

Desktop : 12% de chaque côté
Tablet : 8% de chaque côté
Mobile : 5% de chaque côté

Espacement vertical

.iso-section {
  padding-block: var(--space-3xl);
}
.iso-section-sm {
  padding-block: var(--space-2xl);
}
.iso-gap {
  gap: var(--space-lg);
}

Composition asymétrique

Ratio 2:1 pour les sections texte + média
Jamais de split 50/50
Jamais de 3 colonnes égales

5. Composants Iso

Button

<button className="inline-flex items-center gap-sm px-lg py-sm border border-current rounded-none
                    text-sm tracking-widest uppercase transition-all duration-300
                    hover:bg-iso-text hover:text-iso-bg">
  {label}
</button>

Card

<article className="border-b border-iso-border pb-lg group">
  <div className="aspect-[4/3] bg-iso-bg-alt mb-md overflow-hidden">
    <Image src={img} className="object-cover w-full h-full group-hover:scale-[1.02] transition-transform duration-700" />
  </div>
  <h3 className="text-lg font-medium">{title}</h3>
  <p className="text-sm text-iso-text-secondary mt-sm">{desc}</p>
</article>

Navigation

<nav className="flex items-center justify-between py-lg border-b border-iso-border">
  <Logo className="text-lg font-medium" />
  <div className="flex items-center gap-lg text-sm tracking-wide">
    {links.map(l => (
      <a key={l.href} href={l.href}
         className="hover:text-iso-accent transition-colors">
        {l.label}
      </a>
    ))}
  </div>
</nav>

6. Ce que Iso Interdit

❌ Plus de 3 couleurs
❌ Ombres portées (box-shadow, drop-shadow)
❌ Coins arrondis (sauf rounded-sm sur les inputs)
❌ Dégradés
❌ Bordures épaisses (> 1px)
❌ Plus d'une police de titres ou une police de corps
❌ Icônes colorées (toutes en currentColor)
❌ Images avec bordures ou ombres
❌ Layout à plus de 2 colonnes sur desktop
❌ Animation qui attire l'attention