# High End Visual Design

> UI premium calme et luxueuse. Contraste doux, typographie raffinée, motion ressort, double-bezel, fluid island, magnetic buttons.

- **Type:** Skill
- **Install:** `agentstack add skill-mud-mos23-nstup-taste-soft`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mud-mos23](https://agentstack.voostack.com/s/mud-mos23)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mud-mos23](https://github.com/mud-mos23)
- **Source:** https://github.com/mud-mos23/nstup-taste/tree/main/skills/soft
- **Website:** https://github.com/mud-mos23/nstup-taste

## Install

```sh
agentstack add skill-mud-mos23-nstup-taste-soft
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Soft — Le Luxe Silencieux

Le vrai luxe est invisible. Soft crée des interfaces qui respirent la qualité sans avoir à le dire.

---

## 1. Philosophie

1. **Le silence est d'or** — l'interface s'efface, l'expérience reste
2. **La qualité se sent** — chaque pixel est intentionnel, chaque micro-interaction est pensée
3. **Pas de démonstration** — le design ne cherche pas à impressionner, il cherche à servir
4. **Inspirations** — Hermès, Aesop, Apple, Starck, les grands hôtels

---

## 2. Architecture Soft

### Double-Bezel
```css
.viewport {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 0 40px rgba(0, 0, 0, 0.02);
}
```

### Fluid Island — navigation flottante
```jsx

  {links}

```

### Magnetic Buttons
```jsx

  {label}
  

```

---

## 3. Palette

```css
:root {
  --bg: #f8f6f2;
  --bg-secondary: #f0ece6;
  --text: #1c1a18;
  --text-secondary: #8a8580;
  --accent: #8b7355;
  --accent-hover: #7a6348;
  --border: #e0dad2;
  --shadow: rgba(0, 0, 0, 0.04);
}
```

### Mode sombre
```css
[data-theme='dark'] {
  --bg: #121212;
  --bg-secondary: #1a1a1a;
  --text: #e8e3dc;
  --text-secondary: #8a8580;
  --accent: #c9a84c;
  --accent-hover: #d4b85a;
  --border: #2a2826;
  --shadow: rgba(0, 0, 0, 0.3);
}
```

---

## 4. Typographie

```css
:root {
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body: 'Outfit', -apple-system, sans-serif;
}
```

### Échelle
```css
h1 { font-size: var(--text-4xl); font-weight: 500; line-height: 1.05; }
h2 { font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; }
h3 { font-size: var(--text-xl); font-weight: 400; line-height: 1.2; }
p  { font-size: var(--text-base); line-height: 1.7; color: var(--text-secondary); }
```

---

## 5. Layout

```css
.section {
  padding-block: var(--space-3xl);
  padding-inline: clamp(2rem, 8vw, 8rem);
}

.text-container {
  max-width: 55ch;
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
}
```

---

## 6. Motion Soft

```css
:root {
  --spring-smooth: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  --spring-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-gentle: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.button {
  transition: transform var(--spring-bounce), background-color var(--spring-smooth);
}
```

---

## 7. Règles Soft

### Interdictions
- ❌ Contrastes forts (max 7:1, viser 5:1)
- ❌ Noir ou blanc purs
- ❌ Angles durs (toujours arrondir légèrement)
- ❌ Ombres fortes (seulement des ombres subtiles)
- ❌ Typo sans-serif pour tous les textes (alterner serif/sans-serif)
- ❌ Plus de 2 polices
- ❌ Boutons carrés (toujours pill ou arrondis)
- ❌ Bordures épaisses
- ❌ Mouvements brusques
- ❌ Layouts asymétriques agressifs

### Obligations
- ✅ Espace blanc généreux (50%+ de la surface)
- ✅ Micro-interactions sur tous les éléments cliquables
- ✅ Typographie mixte (serif + sans-serif)
- ✅ Palette chaude et accueillante
- ✅ Navigation flottante / transparente
- ✅ Ombres subtiles et flou contrôlé
- ✅ Coins arrondis sur les conteneurs

## 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](https://github.com/mud-mos23)
- **Source:** [mud-mos23/nstup-taste](https://github.com/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.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mud-mos23-nstup-taste-soft
- Seller: https://agentstack.voostack.com/s/mud-mos23
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.