Design System v1.0

Des sites qui ont du caractère.

Inspiré de Linear, Vercel, Stripe et shadcn/ui. Zéro orbe animé. Zéro template générique. Des choix de design assumés.

Orbés animées

Couleur accent

Sites analysés

Composants

Boutons

Trois variantes. Pill noir Vercel, outline Linear, accent Stripe. Hover subtil avec translateY(-1px) et easing cubic-bezier(0.25, 1, 0.5, 1).

PRIMARY — Vercel

Pill noir

Background rgba(.06), texte blanc, border-radius 9999px. Hover sur background + shadow.

ACCENT — Stripe

CTA violet

Violet #533AFD, border-radius 6px, padding généreux. Easing cubic-bezier(0.25, 1, 0.5, 1).

GHOST — Linear

Outline minimal

Transparent avec bordure rgba(.06). Hover sur border-color uniquement. Discret.

Tags & FAQ

Badges & Accordéon

Badge mono .625rem avec letter-spacing. Accordéon avec max-height transition et easing expo.

● Nouveau ReactTypeScriptPython DockerNginxLinux

Aucun des 5 sites de référence (Linear, Vercel, Stripe, Rauno, shadcn) n'utilise d'orbes en fond. C'est le signal n°1 d'un site "IA". Le fond reste statique — une grille de points suffit.

cubic-bezier(0.25, 1, 0.5, 1) pour les transitions Stripe-style. Un seul easing, utilisé sur tous les éléments interactifs. Cohérence = premium.

Code & Data

Progress & Code

Barres de progression sans pulse. Code inline avec syntaxe colorée. Rien de criard.

Scroll reveal100%

Boutons100%

Composants70%

/* Stripe easing — utiliser partout */
:root {
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --fast: .15s;
  --accent: #34c78e;
  --border: rgba(255,255,255,.06);
}