Iso Elegance

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

  {label}

Card

  
    
  
  {title}
  {desc}

Navigation

  
  
    {links.map(l => (
      
        {l.label}
      
    ))}
  

---

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

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.