Minimalist Ui

Minimaliste — L'Éditorial Digital

Pas de décorum. Pas d'effet de style. Juste du contenu, bien rangé.

---

1. Philosophie

1. Le contenu est roi — l'UI disparaît pour laisser parler le contenu
2. Fonction > forme — si ça n'a pas d'utilité, ça n'existe pas
3. Un pixel de trop — si tu peux enlever un élément sans casser l'expérience, enlève-le
4. Inspirations — Notion, Linear, Bear, iA Writer, Readwise

---

2. Palette

:root {
  --bg: #f8f7f4;
  --bg-secondary: #f0efe8;
  --text: #2d2d2d;
  --text-secondary: #8a8a8a;
  --accent: #3b6ea5;
  --border: #e5e3de;
  --selection: rgba(59, 110, 165, 0.15);
}

Mode sombre

[data-theme='dark'] {
  --bg: #1a1a1a;
  --bg-secondary: #222;
  --text: #e8e8e8;
  --text-secondary: #777;
  --accent: #5b9fd4;
  --border: #2a2a2a;
  --selection: rgba(91, 159, 212, 0.25);
}

---

3. Typographie

:root {
  --font-heading: 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

Pour le minimaliste, Inter est autorisé car c'est un standard éditorial. Mais préférer :

| Titres | Corps | |--------|-------| | Satoshi | Outfit | | Cabinet Grotesk | Sora | | DM Sans | Figtree |

---

4. Layout

Structure de page

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

Grille de contenu

.content-grid {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

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

.content-grid > .full {
  grid-column: 1 / -1;
  padding-inline: 0;
}

---

5. Composants Minimalistes

Carte

  {category}
  
    {title}
  
  {excerpt}
  
    {date}
    ·
    {readTime} min de lecture
  

Bouton

  {label}

Navigation

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

---

6. Règles Strictes

• ❌ Ombres portées
• ❌ Coins arrondis (sauf 4px pour les inputs)
• ❌ Dégradés
• ❌ Icônes inutiles (seulement fonctionnelles)
• ❌ Images décoratives sans contexte
• ❌ Plus de 2 niveaux de fond
• ❌ Bordures épaisses
• ❌ Animations décoratives
• ❌ Layout à plus de 2 colonnes
• ❌ Tout ce qui ressemble à un template SaaS

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.